Skip to content

Commit

Permalink
feat(edp-unblock) : adding Safari behavior
Browse files Browse the repository at this point in the history
saumon-brule committed Mar 31, 2024
1 parent 885dead commit 6409146
Showing 3 changed files with 29 additions and 24 deletions.
28 changes: 19 additions & 9 deletions src/components/EdpUnblock/EdpUnblock.css
Original file line number Diff line number Diff line change
@@ -90,7 +90,7 @@
text-align: center;
}

.edpu-dowload-link {
.edpu-download-link {
display: flex;
align-items: center;
justify-content: space-between;
@@ -104,44 +104,54 @@
transition: .2s;
}

.edpu-dowload-link svg:first-child {
.edpu-download-link .sad-emoji {
font-size: 2em;
}

.edpu-download-link.disabled {
pointer-events: none;
opacity: 0.8;
filter: brightness(0.8);
}

.edpu-download-link svg:first-child {
height: 40px;
min-height: 40px;
}

.edpu-dowload-link svg:last-child {
.edpu-download-link svg:last-child {
height: 30px;
min-height: 30px;
transform: translateX(-5px);
overflow: visible;
}

.edpu-dowload-link svg:last-child path {
.edpu-download-link svg:last-child path {
stroke: white;
}

.edpu-dowload-link span {
.edpu-download-link span {
font-size: var(--font-size-20);
font-weight: var(--font-weight-extra-bold);
color: white;
text-align: center;
}

.edpu-dowload-link svg:last-child path:first-child {
.edpu-download-link svg:last-child path:first-child {
transition: .3s;
}

.edpu-dowload-link:is(:hover, :focus-visible) {
.edpu-download-link:not(.disabled):is(:hover, :focus-visible) {
background-color: #FFF7;
filter: drop-shadow(0 0 20px #FFFFFF88);
outline: none;
}

.edpu-dowload-link:is(:hover, :focus-visible) svg:last-child path:first-child {
.edpu-download-link:not(.disabled):is(:hover, :focus-visible) svg:last-child path:first-child {
transform: translateY(-10px);
}

.edpu-dowload-link:is(:active) svg:last-child path:first-child {
.edpu-download-link:not(.disabled):is(:active) svg:last-child path:first-child {
transform: translateY(10px);
}

23 changes: 9 additions & 14 deletions src/components/EdpUnblock/EdpUnblock.jsx
Original file line number Diff line number Diff line change
@@ -24,42 +24,36 @@ const browserLogosInfos = {
Chrome: {
logo: <ChromeLogo />,
available: true,
url: "#CHROME_EXTENSION",
url: "https://chromewebstore.google.com/detail/ecole-directe-plus-unbloc/jglboadggdgnaicfaejjgmnfhfdnflkb?hl=fr",
},
Opera: {
logo: <ChromeLogo />,
available: true,
url: "#CHROME_EXTENSION",
url: "https://chromewebstore.google.com/detail/ecole-directe-plus-unbloc/jglboadggdgnaicfaejjgmnfhfdnflkb?hl=fr",
},
Edge: {
logo: <EdgeLogo />,
available: true,
url: "#EDGE_EXTENSION",
},
Seamonkey: {
logo: <FirefoxLogo />,
available: false,
url: "",
url: "https://microsoftedge.microsoft.com/addons/detail/ecole-directe-plus-unbloc/bghggiemmicjhglgnilchjfnlbcmehgg",
},
Chromium: {
logo: <ChromeLogo />,
available: false,
url: "",
url: "https://chromewebstore.google.com/detail/ecole-directe-plus-unbloc/jglboadggdgnaicfaejjgmnfhfdnflkb?hl=fr",
},
Safari: {
logo: <FirefoxLogo />,
logo: <span className="sad-emoji">😥</span>,
available: false,
url: "",
},
}

const userBrowser = getBrowser()
// const userBrowser = "Safari"

export default function EdpUnblock() {
const location = useLocation();

const [arrowText, setArrowText] = useState("En savoir plus")

const aboutRef = useRef(null);
const aboutButtonRef = useRef(null);
const heroBannerRef = useRef(null);
@@ -118,8 +112,9 @@ export default function EdpUnblock() {
<h2>Ecole Directe Plus Unblock</h2>
</div>
</div>
<p>Ecole Directe Plus a besoin de son extension pour accéder au contenu fourni par l’API d’EcoleDirecte</p>
<a href={browserLogosInfos[userBrowser].url} target="_blank" className={`edpu-dowload-link ${browserLogosInfos[userBrowser].available ? "available" : "unavailable"}`}>
{userBrowser !== "Safari" ? <p>Ecole Directe Plus a besoin de son extension pour accéder au contenu fourni par l’API d’EcoleDirecte</p>
: <p>Malheureusement, l'extension Ecole Directe PLus Unblock n'est pas disponible sur votre navigateur.😥</p>}
<a href={browserLogosInfos[userBrowser].url} target="_blank" className={`edpu-download-link ${userBrowser === "Safari" ? "disabled" : ""} ${browserLogosInfos[userBrowser].available ? "available" : "unavailable"}`}>
{browserLogosInfos[userBrowser].logo}
<span>Ajouter l’extension</span>
<DownloadIcon />
2 changes: 1 addition & 1 deletion src/components/graphics/ChromeLogo.jsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import "./graphics.css"
export default function ChromeLogo({ className = "", id = "", alt, ...props }) {
return (
<svg aria-label={alt} className={className} id={id} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" {...props}>
<circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="23" stroke-width="5" className="fill-1A73E8 stroke-white"/>
<circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="23" strokeWidth="5" className="fill-1A73E8 stroke-white"/>
<path d="M27.9819 61.9548L6.48191 24.9547C28.4819 -10.0453 73.9819 -6.54523 93.3579 24.9547L50.4819 24.9548C33.4819 24.9547 18.9819 40.9548 27.9819 61.9548Z" className="fill-E1392C" />
<path d="M50.4819 24.9548L93.3619 24.9547C112.158 59.0588 88.8131 99.5072 49.9819 99.9548L70.9819 63.4548C80.4819 48.4548 72.4818 26.4548 50.4819 24.9548Z" className="fill-FBBD07" />
<path d="M70.9819 63.4548L49.9819 99.9548C11.8584 99.9913 -12.2467 58.5224 6.48191 24.9547L27.9819 61.9548C35.9818 76.9547 58.9818 80.9547 70.9819 63.4548Z" className="fill-229342" />

0 comments on commit 6409146

Please sign in to comment.