Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit eb2d8649 authored by Plumtree3D's avatar Plumtree3D
Browse files

refactor: refactor of carousel.js component

parent 801aec42
No related branches found
No related tags found
1 merge request!81Resolve "Fix: FLOSS logos in dark mode"
Pipeline #8320 passed
......@@ -23,8 +23,7 @@ Concernant l'image, il peut s'agir d'un fichier (png, svg, jpeg...) avec le prop
Le composant **CarouselLibre** est utilisé sur la page d'accueil pour afficher un carrousel des logiciels libres (FLOSS) utilisés par Froggit, il utilise le composant générique **Carousel**
Afin que les logos de FLOSS unis (par exemple blancs ou noirs) restent bien visibles peu importe le thème, les intégrer en SVG inline dans le props `svg` et penser à supprimer les valeurs "fill". Cela leur permettra de prendre la couleur du texte selon le thème.
Afin que les logos de FLOSS unis (par exemple blancs ou noirs) restent bien visibles peu importe le thème, les intégrer en [SVG inline](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction) dans le props `svg` et penser à supprimer les valeurs "fill". Cela leur permettra de prendre la couleur du texte selon le thème.
### HomepagePromises.js
......
......@@ -6,63 +6,58 @@ import "slick-carousel/slick/slick-theme.css";
import useBaseUrl from "@docusaurus/useBaseUrl";
function CarouselElement({name, img, svg, link, alt}) {
if (typeof link === "undefined" && typeof name === "undefined") {
return (
<div className="carousel_box">
<div>
<img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
</div>
</div>
);
}
else if (typeof link === "undefined" && typeof svg === "undefined") {
return (
<div className="carousel_box">
<img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
<h6 className="carousel_title">{name}</h6>
</div>
);
}
else if (typeof link === "undefined" && typeof img === "undefined") {
return (
<div className="carousel_box" alt={alt}>
{svg}
<h6 className="carousel_title">{name}</h6>
</div>
);
}
else if (typeof name === "undefined") {
return (
<div className="carousel_box">
<a href={link} target="_blank" rel="noopener noreferrer">
<img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
</a>
</div>
);
}
else if (typeof link === "undefined") {
return (
<div className="carousel_box" alt={alt}>
{svg}
<h6 className="carousel_title">{name}</h6>
</div>
);
}
return (
<div className="carousel_box">
{(() => {
if (typeof link !== "undefined") {
return (
<a href={link} target="_blank" rel="noopener noreferrer">
{(() => {
if (typeof img !== "undefined") {
return (
<div>
else {
return (
<div className="carousel_box">
<a href={link} target="_blank" rel="noopener noreferrer">
<img src={useBaseUrl(img) } alt={alt} className="carousel_img" />
<h6 className="carousel_title">{name}</h6>
</a>
</div>
);
}
<img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
</div>
);
}
else if (typeof svg !== "undefined") {
return (
<svg alt={alt}>
{svg}
</svg>
);
}
})()}
</a>
);
}
else {
if (typeof img !== "undefined") {
return (
<div>
<img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
</div>
);
}
else if (typeof svg !== "undefined") {
return (
<svg alt={alt}>
{svg}
</svg>
);
}
}
})()}
{(() => {
if (typeof name !== "undefined") {
return (
<h6 className="carousel_title">{name}</h6>
);
}
})()}
</div>
);
}
export default function Carousel(props) {
......
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 294.451 296.514" xmlns="http://www.w3.org/2000/svg">
<g fill="#1a1918" transform="matrix(1, 0, 0, 1, 0, 281.859985)"/>
<path d="M 275.104 146.724 C 275.104 217.179 217.994 274.289 147.538 274.289 C 77.088 274.289 19.972 217.179 19.972 146.724 C 19.972 76.274 77.088 19.158 147.538 19.158 C 217.994 19.158 275.104 76.274 275.104 146.724 Z M 149.685 97.085 L 182.697 178.561 L 132.833 139.283 Z M 208.33 197.33 L 157.551 75.128 C 156.102 71.603 153.203 69.738 149.685 69.738 C 146.161 69.738 143.051 71.603 141.602 75.128 L 85.869 209.168 L 104.934 209.168 L 126.997 153.902 L 192.836 207.092 C 195.483 209.233 197.394 210.202 199.878 210.202 C 204.852 210.202 209.199 206.473 209.199 201.091 C 209.199 200.215 208.89 198.824 208.33 197.329 Z" fill="#1a1918"/>
<path d="M 183.868 180.12 L 132.23 139.445 L 149.682 95.745 Z M 133.436 139.121 L 181.526 177.002 L 149.688 98.425 Z M 208.798 197.154 C 209.368 198.682 209.699 200.161 209.699 201.091 C 209.699 203.89 208.521 206.362 206.746 208.029 C 204.971 209.697 202.458 210.702 199.878 210.702 C 197.281 210.702 195.213 209.651 192.522 207.481 L 127.21 154.717 L 105.273 209.668 L 85.12 209.668 L 85.407 208.976 L 141.14 74.938 C 141.904 73.109 143.134 71.638 144.593 70.692 C 146.055 69.744 147.855 69.238 149.685 69.238 C 151.514 69.238 153.264 69.747 154.673 70.697 C 156.08 71.645 157.252 73.112 158.013 74.936 L 207.83 194.824 L 207.83 194.557 Z M 207.869 197.523 L 157.089 75.32 C 156.401 73.619 155.399 72.391 154.114 71.526 C 152.832 70.662 151.374 70.238 149.685 70.238 C 147.991 70.238 146.474 70.664 145.137 71.531 C 143.799 72.398 142.749 73.622 142.064 75.318 L 86.618 208.668 L 104.595 208.668 L 126.784 153.087 L 193.15 206.703 C 195.753 208.815 197.507 209.702 199.878 209.702 C 202.272 209.702 204.419 208.843 206.061 207.3 C 207.704 205.757 208.699 203.674 208.699 201.091 C 208.699 200.273 208.414 198.977 207.869 197.523 Z" style="fill: none;"/>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="-17.093 -88.866 351.808 336.013" xmlns="http://www.w3.org/2000/svg">
<path id="p1" transform="matrix(1, 0, 0, 1, 20.9086, 32.2192)" d="M43.75 13.8021L26.6667 13.8021L26.6667 0L53.3854 0L67.2396 13.8021L67.2396 27.8646L60.3125 34.7917L67.2396 41.7187L67.2396 55.3125L53.3854 69.1146L26.6667 69.1146L26.6667 55.3125L43.75 55.3125L43.75 40.5729L26.6667 40.5729L26.6667 28.5417L43.75 28.5417ZM0 0L23.0208 0L23.0208 69.1146L0 69.1146Z" style=""/>
<path id="p2" transform="matrix(1, 0, 0, 1, 97.679398, 46.021301)" d="M62.1354 41.5104L48.3333 55.3125L32.9167 55.3125L32.9167 42.3958L38.6458 42.3958L38.6458 13.8021L32.9167 13.8021L32.9167 0L48.3333 0L62.1354 13.8021ZM23.2813 42.3958L29.2708 42.3958L29.2708 55.3125L13.8021 55.3125L0 41.5104L0 13.8021L13.8021 0L29.2708 0L29.2708 13.8021L23.2813 13.8021Z" style=""/>
<path id="p3" transform="matrix(1, 0, 0, 1, 170.231003, 46.021301)" d="M36.5104 13.8021L26.7187 13.8021L26.7187 7.76042L34.4271 0L48.3854 0L59.5833 12.9167L59.5833 27.2396L36.5104 27.2396ZM0 55.3125L0 7.10543e-15L23.0208 7.10543e-15L23.0208 55.3125Z" style=""/>
<path id="p4" transform="matrix(1, 0, 0, 1, 236.429001, 46.021301)" d="M36.875 13.8021L26.6667 13.8021L26.6667 7.10543e-15L46.0937 7.10543e-15L59.8958 13.8021L59.8958 60.7812L46.0937 74.6875L15.7292 74.6875L8.80208 67.7083L8.80208 62.6042L36.875 62.6042ZM33.2292 42.3958L33.2292 48.4896L26.3542 55.3125L13.8021 55.3125L0 41.5104L0 13.8021L13.8021 0L23.0208 0L23.0208 42.3958Z" style=""/>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 10.0, SVG Export Plug-In . SVG Version: 3.0.0 Build 77) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" i:viewOrigin="262 450" i:rulerOrigin="0 0" i:pageBounds="0 792 612 0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" width="87.041" height="108.445" viewBox="0 0 87.041 108.445" overflow="visible" enable-background="new 0 0 87.041 108.445" xml:space="preserve">
<metadata>
<variableSets xmlns="http://ns.adobe.com/Variables/1.0/">
<variableSet varSetName="binding1" locked="none">
<variables/>
<v:sampleDataSets xmlns="http://ns.adobe.com/GenericCustomNamespace/1.0/" xmlns:v="http://ns.adobe.com/Variables/1.0/"/>
</variableSet>
</variableSets>
<sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">
<slices/>
<sliceSourceBounds y="341.555" x="262" width="87.041" height="108.445" bottomLeftOrigin="true"/>
</sfw>
</metadata>
<g id="Layer_1" i:layer="yes" i:dimmedPercent="50" i:rgbTrio="#4F008000FFFF">
<g>
<path i:knockout="Off" fill="#A80030" d="M51.986,57.297c-1.797,0.025,0.34,0.926,2.686,1.287 c0.648-0.506,1.236-1.018,1.76-1.516C54.971,57.426,53.484,57.434,51.986,57.297"/>
<path i:knockout="Off" fill="#A80030" d="M61.631,54.893c1.07-1.477,1.85-3.094,2.125-4.766c-0.24,1.192-0.887,2.221-1.496,3.307 c-3.359,2.115-0.316-1.256-0.002-2.537C58.646,55.443,61.762,53.623,61.631,54.893"/>
<path i:knockout="Off" fill="#A80030" d="M65.191,45.629c0.217-3.236-0.637-2.213-0.924-0.978 C64.602,44.825,64.867,46.932,65.191,45.629"/>
<path i:knockout="Off" fill="#A80030" d="M45.172,1.399c0.959,0.172,2.072,0.304,1.916,0.533 C48.137,1.702,48.375,1.49,45.172,1.399"/>
<path i:knockout="Off" fill="#A80030" d="M47.088,1.932l-0.678,0.14l0.631-0.056L47.088,1.932"/>
<path i:knockout="Off" fill="#A80030" d="M76.992,46.856c0.107,2.906-0.85,4.316-1.713,6.812l-1.553,0.776 c-1.271,2.468,0.123,1.567-0.787,3.53c-1.984,1.764-6.021,5.52-7.313,5.863c-0.943-0.021,0.639-1.113,0.846-1.541 c-2.656,1.824-2.131,2.738-6.193,3.846l-0.119-0.264c-10.018,4.713-23.934-4.627-23.751-17.371 c-0.107,0.809-0.304,0.607-0.526,0.934c-0.517-6.557,3.028-13.143,9.007-15.832c5.848-2.895,12.704-1.707,16.893,2.197 c-2.301-3.014-6.881-6.209-12.309-5.91c-5.317,0.084-10.291,3.463-11.951,7.131c-2.724,1.715-3.04,6.611-4.227,7.507 C31.699,56.271,36.3,61.342,44.083,67.307c1.225,0.826,0.345,0.951,0.511,1.58c-2.586-1.211-4.954-3.039-6.901-5.277 c1.033,1.512,2.148,2.982,3.589,4.137c-2.438-0.826-5.695-5.908-6.646-6.115c4.203,7.525,17.052,13.197,23.78,10.383 c-3.113,0.115-7.068,0.064-10.566-1.229c-1.469-0.756-3.467-2.322-3.11-2.615c9.182,3.43,18.667,2.598,26.612-3.771 c2.021-1.574,4.229-4.252,4.867-4.289c-0.961,1.445,0.164,0.695-0.574,1.971c2.014-3.248-0.875-1.322,2.082-5.609l1.092,1.504 c-0.406-2.696,3.348-5.97,2.967-10.234c0.861-1.304,0.961,1.403,0.047,4.403c1.268-3.328,0.334-3.863,0.66-6.609 c0.352,0.923,0.814,1.904,1.051,2.878c-0.826-3.216,0.848-5.416,1.262-7.285c-0.408-0.181-1.275,1.422-1.473-2.377 c0.029-1.65,0.459-0.865,0.625-1.271c-0.324-0.186-1.174-1.451-1.691-3.877c0.375-0.57,1.002,1.478,1.512,1.562 c-0.328-1.929-0.893-3.4-0.916-4.88c-1.49-3.114-0.527,0.415-1.736-1.337c-1.586-4.947,1.316-1.148,1.512-3.396 c2.404,3.483,3.775,8.881,4.404,11.117c-0.48-2.726-1.256-5.367-2.203-7.922c0.73,0.307-1.176-5.609,0.949-1.691 c-2.27-8.352-9.715-16.156-16.564-19.818c0.838,0.767,1.896,1.73,1.516,1.881c-3.406-2.028-2.807-2.186-3.295-3.043 c-2.775-1.129-2.957,0.091-4.795,0.002c-5.23-2.774-6.238-2.479-11.051-4.217l0.219,1.023c-3.465-1.154-4.037,0.438-7.782,0.004 c-0.228-0.178,1.2-0.644,2.375-0.815c-3.35,0.442-3.193-0.66-6.471,0.122c0.808-0.567,1.662-0.942,2.524-1.424 c-2.732,0.166-6.522,1.59-5.352,0.295c-4.456,1.988-12.37,4.779-16.811,8.943l-0.14-0.933c-2.035,2.443-8.874,7.296-9.419,10.46 l-0.544,0.127c-1.059,1.793-1.744,3.825-2.584,5.67c-1.385,2.36-2.03,0.908-1.833,1.278c-2.724,5.523-4.077,10.164-5.246,13.97 c0.833,1.245,0.02,7.495,0.335,12.497c-1.368,24.704,17.338,48.69,37.785,54.228c2.997,1.072,7.454,1.031,11.245,1.141 c-4.473-1.279-5.051-0.678-9.408-2.197c-3.143-1.48-3.832-3.17-6.058-5.102l0.881,1.557c-4.366-1.545-2.539-1.912-6.091-3.037 l0.941-1.229c-1.415-0.107-3.748-2.385-4.386-3.646l-1.548,0.061c-1.86-2.295-2.851-3.949-2.779-5.23l-0.5,0.891 c-0.567-0.973-6.843-8.607-3.587-6.83c-0.605-0.553-1.409-0.9-2.281-2.484l0.663-0.758c-1.567-2.016-2.884-4.6-2.784-5.461 c0.836,1.129,1.416,1.34,1.99,1.533c-3.957-9.818-4.179-0.541-7.176-9.994l0.634-0.051c-0.486-0.732-0.781-1.527-1.172-2.307 l0.276-2.75C4.667,58.121,6.719,47.409,7.13,41.534c0.285-2.389,2.378-4.932,3.97-8.92l-0.97-0.167 c1.854-3.234,10.586-12.988,14.63-12.486c1.959-2.461-0.389-0.009-0.772-0.629c4.303-4.453,5.656-3.146,8.56-3.947 c3.132-1.859-2.688,0.725-1.203-0.709c5.414-1.383,3.837-3.144,10.9-3.846c0.745,0.424-1.729,0.655-2.35,1.205 c4.511-2.207,14.275-1.705,20.617,1.225c7.359,3.439,15.627,13.605,15.953,23.17l0.371,0.1 c-0.188,3.802,0.582,8.199-0.752,12.238L76.992,46.856"/>
<path i:knockout="Off" fill="#A80030" d="M32.372,59.764l-0.252,1.26c1.181,1.604,2.118,3.342,3.626,4.596 C34.661,63.502,33.855,62.627,32.372,59.764"/>
<path i:knockout="Off" fill="#A80030" d="M35.164,59.654c-0.625-0.691-0.995-1.523-1.409-2.352 c0.396,1.457,1.207,2.709,1.962,3.982L35.164,59.654"/>
<path i:knockout="Off" fill="#A80030" d="M84.568,48.916l-0.264,0.662c-0.484,3.438-1.529,6.84-3.131,9.994 C82.943,56.244,84.088,52.604,84.568,48.916"/>
<path i:knockout="Off" fill="#A80030" d="M45.527,0.537C46.742,0.092,48.514,0.293,49.803,0c-1.68,0.141-3.352,0.225-5.003,0.438 L45.527,0.537"/>
<path i:knockout="Off" fill="#A80030" d="M2.872,23.219c0.28,2.592-1.95,3.598,0.494,1.889 C4.676,22.157,2.854,24.293,2.872,23.219"/>
<path i:knockout="Off" fill="#A80030" d="M0,35.215c0.563-1.728,0.665-2.766,0.88-3.766C-0.676,33.438,0.164,33.862,0,35.215"/>
</g>
</g>
<script xmlns=""/></svg>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment