diff --git a/source/components/SafeCategoryImage.tsx b/source/components/SafeCategoryImage.tsx new file mode 100644 index 0000000000..092edec652 --- /dev/null +++ b/source/components/SafeCategoryImage.tsx @@ -0,0 +1,39 @@ +import { useState } from 'react' +import emoji from './emoji' + +export default ({ element, whiteBackground = false }) => { + const [fail, setFail] = useState(false) + return ( + + {!fail ? ( + { + currentTarget.onerror = null + setFail(true) + }} + /> + ) : ( + + )} + + ) +} diff --git a/source/components/SessionBar.tsx b/source/components/SessionBar.tsx index 50235cde03..89c3c1f076 100644 --- a/source/components/SessionBar.tsx +++ b/source/components/SessionBar.tsx @@ -36,7 +36,7 @@ const openmojis = { action: 'E10C', conference: '1F3DF', sondage: '1F4CA', - profile: '1F464', + profile: 'silhouette', personas: '1F465', github: 'E045', } diff --git a/source/components/conversation/AnswerList.tsx b/source/components/conversation/AnswerList.tsx index c35c1b3569..9280b85c77 100644 --- a/source/components/conversation/AnswerList.tsx +++ b/source/components/conversation/AnswerList.tsx @@ -16,6 +16,7 @@ import { useNavigate } from 'react-router-dom' import { situationSelector } from 'Selectors/simulationSelectors' import { answeredQuestionsSelector } from '../../selectors/simulationSelectors' import { safeGetRule, splitName } from '../publicodesUtils' +import SafeCategoryImage from '../SafeCategoryImage' import './AnswerList.css' import AnswerTrajetsTable from './estimate/AnswerTrajetsTable' @@ -199,7 +200,7 @@ const SubCategory = ({ rule, rules, engine, level }) => { `} `} > - {emoji(rule.rawNode.icônes || '')} + 1} /> {level === 1 ?

{rule.title}

:

{rule.title}

}
diff --git a/source/components/conversation/CategoryRespiration.js b/source/components/conversation/CategoryRespiration.js index d190ef3ad4..037fb1be90 100644 --- a/source/components/conversation/CategoryRespiration.js +++ b/source/components/conversation/CategoryRespiration.js @@ -1,6 +1,6 @@ import { motion } from 'framer-motion' -import React, { useEffect, useRef } from 'react' -import emoji from 'react-easy-emoji' +import { useEffect, useRef } from 'react' +import SafeCategoryImage from '../SafeCategoryImage' import useKeypress from '../utils/useKeyPress' // Naive implementation - in reality would want to attach @@ -60,7 +60,7 @@ export default ({ dismiss, questionCategory }) => { font-weight: 300; } img { - font-size: 350%; + width: 5rem; margin: 0.4rem; } button { @@ -95,7 +95,7 @@ export default ({ dismiss, questionCategory }) => { }} >

{questionCategory.title}

- {emoji(questionCategory.icons)} + diff --git a/source/images/climate-change-small.svg b/source/images/climate-change-small.svg index 9022fde655..8d4871ad69 100644 --- a/source/images/climate-change-small.svg +++ b/source/images/climate-change-small.svg @@ -7,7 +7,7 @@ viewBox="0 0 210 210" version="1.1" id="svg1052" - inkscape:version="1.1.1 (1:1.1+202109281954+c3084ef5ed)" + inkscape:version="1.2.1 (2ed6d7ae0b, 2022-08-22, custom)" sodipodi:docname="climate-change-small.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" @@ -23,15 +23,17 @@ inkscape:pagecheckerboard="0" inkscape:document-units="mm" showgrid="false" - inkscape:zoom="0.26863816" - inkscape:cx="152.62165" - inkscape:cy="160.06661" - inkscape:window-width="950" - inkscape:window-height="1044" - inkscape:window-x="4" - inkscape:window-y="4" + inkscape:zoom="0.42589916" + inkscape:cx="216.01358" + inkscape:cy="426.15722" + inkscape:window-width="1920" + inkscape:window-height="1055" + inkscape:window-x="0" + inkscape:window-y="0" inkscape:window-maximized="1" - inkscape:current-layer="g991" /> + inkscape:current-layer="g991" + inkscape:showpageshadow="2" + inkscape:deskcolor="#d1d1d1" /> + transform="matrix(1.8925445,0,0,1.8925445,-32.784068,-51.251895)"> + style="fill:#d22f27;fill-opacity:1;stroke:#151533;stroke-opacity:1"> + style="fill:#d22f27;fill-opacity:1;stroke:#151533;stroke-opacity:1"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/source/images/climate-change-small.variations.svg b/source/images/climate-change-small.variations.svg new file mode 100644 index 0000000000..cad531f588 --- /dev/null +++ b/source/images/climate-change-small.variations.svg @@ -0,0 +1,335 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/alimentation . boisson.svg b/source/images/model/alimentation . boisson.svg new file mode 100644 index 0000000000..ebefb7b113 --- /dev/null +++ b/source/images/model/alimentation . boisson.svg @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/alimentation . d\303\251chets.svg" "b/source/images/model/alimentation . d\303\251chets.svg" new file mode 100644 index 0000000000..fa10597759 --- /dev/null +++ "b/source/images/model/alimentation . d\303\251chets.svg" @@ -0,0 +1,241 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/alimentation . d\303\251jeuner et d\303\256ner.svg" "b/source/images/model/alimentation . d\303\251jeuner et d\303\256ner.svg" new file mode 100644 index 0000000000..4b42c8ae45 --- /dev/null +++ "b/source/images/model/alimentation . d\303\251jeuner et d\303\256ner.svg" @@ -0,0 +1,77 @@ + + + + + + + + + + + + diff --git a/source/images/model/alimentation . gaspillage alimentaire.svg b/source/images/model/alimentation . gaspillage alimentaire.svg new file mode 100644 index 0000000000..fa10597759 --- /dev/null +++ b/source/images/model/alimentation . gaspillage alimentaire.svg @@ -0,0 +1,241 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/alimentation . petit d\303\251jeuner annuel.svg" "b/source/images/model/alimentation . petit d\303\251jeuner annuel.svg" new file mode 100644 index 0000000000..ab97b6737f --- /dev/null +++ "b/source/images/model/alimentation . petit d\303\251jeuner annuel.svg" @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/alimentation . repas.svg b/source/images/model/alimentation . repas.svg new file mode 100644 index 0000000000..4b42c8ae45 --- /dev/null +++ b/source/images/model/alimentation . repas.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + diff --git a/source/images/model/alimentation.svg b/source/images/model/alimentation.svg new file mode 100644 index 0000000000..4b42c8ae45 --- /dev/null +++ b/source/images/model/alimentation.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + diff --git a/source/images/model/divers . autres produits (copie).svg b/source/images/model/divers . autres produits (copie).svg new file mode 100644 index 0000000000..fe55cac1c5 --- /dev/null +++ b/source/images/model/divers . autres produits (copie).svg @@ -0,0 +1,133 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/divers . textile.svg b/source/images/model/divers . textile.svg new file mode 100644 index 0000000000..94090747d3 --- /dev/null +++ b/source/images/model/divers . textile.svg @@ -0,0 +1,142 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/divers . \303\251lectrom\303\251nager.svg" "b/source/images/model/divers . \303\251lectrom\303\251nager.svg" new file mode 100644 index 0000000000..4a5b9af3ef --- /dev/null +++ "b/source/images/model/divers . \303\251lectrom\303\251nager.svg" @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/divers.svg b/source/images/model/divers.svg new file mode 100644 index 0000000000..fe55cac1c5 --- /dev/null +++ b/source/images/model/divers.svg @@ -0,0 +1,133 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/logement . chauffage.svg b/source/images/model/logement . chauffage.svg new file mode 100644 index 0000000000..0c701392d5 --- /dev/null +++ b/source/images/model/logement . chauffage.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/logement . construction.svg b/source/images/model/logement . construction.svg new file mode 100644 index 0000000000..7d19cb0b02 --- /dev/null +++ b/source/images/model/logement . construction.svg @@ -0,0 +1,127 @@ + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/logement . \303\251lectricit\303\251.svg" "b/source/images/model/logement . \303\251lectricit\303\251.svg" new file mode 100644 index 0000000000..e72679985f --- /dev/null +++ "b/source/images/model/logement . \303\251lectricit\303\251.svg" @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + diff --git a/source/images/model/logement.svg b/source/images/model/logement.svg new file mode 100644 index 0000000000..c55b27e3db --- /dev/null +++ b/source/images/model/logement.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + diff --git a/source/images/model/maison.svg b/source/images/model/maison.svg new file mode 100644 index 0000000000..4505853340 --- /dev/null +++ b/source/images/model/maison.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/num\303\251rique . TV.svg" "b/source/images/model/num\303\251rique . TV.svg" new file mode 100644 index 0000000000..2b8a5a14ec --- /dev/null +++ "b/source/images/model/num\303\251rique . TV.svg" @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/num\303\251rique . internet.svg" "b/source/images/model/num\303\251rique . internet.svg" new file mode 100644 index 0000000000..45663f18f1 --- /dev/null +++ "b/source/images/model/num\303\251rique . internet.svg" @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/num\303\251rique . ordinateur fixe.svg" "b/source/images/model/num\303\251rique . ordinateur fixe.svg" new file mode 100644 index 0000000000..e403451d69 --- /dev/null +++ "b/source/images/model/num\303\251rique . ordinateur fixe.svg" @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/num\303\251rique . ordinateur portable.svg" "b/source/images/model/num\303\251rique . ordinateur portable.svg" new file mode 100644 index 0000000000..e060e7aeb8 --- /dev/null +++ "b/source/images/model/num\303\251rique . ordinateur portable.svg" @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/num\303\251rique . tablette.svg" "b/source/images/model/num\303\251rique . tablette.svg" new file mode 100644 index 0000000000..66b4cac976 --- /dev/null +++ "b/source/images/model/num\303\251rique . tablette.svg" @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/num\303\251rique . t\303\251l\303\251phone.svg" "b/source/images/model/num\303\251rique . t\303\251l\303\251phone.svg" new file mode 100644 index 0000000000..7691b64dd1 --- /dev/null +++ "b/source/images/model/num\303\251rique . t\303\251l\303\251phone.svg" @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + diff --git "a/source/images/model/num\303\251rique.svg" "b/source/images/model/num\303\251rique.svg" new file mode 100644 index 0000000000..7691b64dd1 --- /dev/null +++ "b/source/images/model/num\303\251rique.svg" @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/services publics.svg b/source/images/model/services publics.svg new file mode 100644 index 0000000000..7cef3a59d3 --- /dev/null +++ b/source/images/model/services publics.svg @@ -0,0 +1,179 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/transport . avion.svg b/source/images/model/transport . avion.svg new file mode 100644 index 0000000000..d2bf209437 --- /dev/null +++ b/source/images/model/transport . avion.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/transport . bus.svg b/source/images/model/transport . bus.svg new file mode 100644 index 0000000000..e76a6544ab --- /dev/null +++ b/source/images/model/transport . bus.svg @@ -0,0 +1,311 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/transport . deux roues thermique.svg b/source/images/model/transport . deux roues thermique.svg new file mode 100644 index 0000000000..848b0d1b58 --- /dev/null +++ b/source/images/model/transport . deux roues thermique.svg @@ -0,0 +1,188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/transport . train.svg b/source/images/model/transport . train.svg new file mode 100644 index 0000000000..89d0168286 --- /dev/null +++ b/source/images/model/transport . train.svg @@ -0,0 +1,171 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/transport . voiture . empreinte.svg b/source/images/model/transport . voiture . empreinte.svg new file mode 100644 index 0000000000..ae09a11362 --- /dev/null +++ b/source/images/model/transport . voiture . empreinte.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/model/transport.svg b/source/images/model/transport.svg new file mode 100644 index 0000000000..e12a019b3a --- /dev/null +++ b/source/images/model/transport.svg @@ -0,0 +1,144 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/silhouette.svg b/source/images/silhouette.svg new file mode 100644 index 0000000000..f4f29c72f5 --- /dev/null +++ b/source/images/silhouette.svg @@ -0,0 +1,65 @@ + + + + + + + + + + diff --git a/source/images/three-dots.svg b/source/images/three-dots.svg new file mode 100644 index 0000000000..1e06a09ce4 --- /dev/null +++ b/source/images/three-dots.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + diff --git a/source/sites/publicodes/CategoryVisualisation.tsx b/source/sites/publicodes/CategoryVisualisation.tsx index bb30c47222..245414cf67 100644 --- a/source/sites/publicodes/CategoryVisualisation.tsx +++ b/source/sites/publicodes/CategoryVisualisation.tsx @@ -3,37 +3,22 @@ import SubCategoriesChart from './chart/SubCategoriesChart' import { CategoryLabel } from 'Components/conversation/UI' import { extractCategories, + getSubcategories, ruleFormula, } from '../../components/publicodesUtils' import { useEngine } from '../../components/utils/EngineContext' import { useSelector } from 'react-redux' import AnimatedTargetValue from '../../components/ui/AnimatedTargetValue' -export default ({ questionCategory, hideMeta = false }) => { +export default ({ questionCategory: category, hideMeta = false }) => { const rules = useSelector((state) => state.rules) const engine = useEngine() - const category = questionCategory.name - // The aim of this component is to visualize sums. Sometimes, relevant sums are hidden behind a division // it should be visualized elsewhere - const sumToDisplay = - category === 'services publics' - ? null - : 'logement' - ? 'logement . impact' - : category - - if (!sumToDisplay) return null + const subCategories = getSubcategories(rules, category, engine) - const subCategories = extractCategories( - rules, - engine, - null, - sumToDisplay, - false - ) - const categoryValue = Math.round(engine.evaluate(category).nodeValue) + const categoryValue = Math.round(engine.evaluate(category.name).nodeValue) return (
{ `} > - {emoji(questionCategory.icons || '🌍')} - {questionCategory.title} + {emoji(category.icons || '🌍')} + {category.title}
)} - {sumToDisplay && ( -
- -
- )} +
+ +
) } diff --git a/source/sites/publicodes/Landing.js b/source/sites/publicodes/Landing.js index 8828afaabe..99a4fa7aee 100644 --- a/source/sites/publicodes/Landing.js +++ b/source/sites/publicodes/Landing.js @@ -180,7 +180,7 @@ const ProfileLink = () => { diff --git a/source/sites/publicodes/Personas.tsx b/source/sites/publicodes/Personas.tsx index deff4e273c..f53dcf9f6a 100644 --- a/source/sites/publicodes/Personas.tsx +++ b/source/sites/publicodes/Personas.tsx @@ -2,6 +2,7 @@ import { resetSimulation } from 'Actions/actions' import { useEffect, useState } from 'react' import emoji from 'react-easy-emoji' import { useDispatch, useSelector } from 'react-redux' +import { useSearchParams } from 'react-router-dom' import { setDifferentSituation } from '../../actions/actions' import IllustratedMessage from '../../components/ui/IllustratedMessage' import useBranchData from '../../components/useBranchData' @@ -27,9 +28,11 @@ const visualisationChoices = { export default ({}) => { const persona = useSelector((state) => state.simulation?.persona) - const [selectedVisualisation, selectVisualisation] = useState('aucun') + const [searchParams, setSearchParams] = useSearchParams({ + visualisation: 'aucun', + }) - const Visualisation = visualisationChoices[selectedVisualisation] + const Visualisation = visualisationChoices[searchParams.get('visualisation')] const engine = useEngine() const slideProps = { @@ -50,10 +53,10 @@ export default ({}) => { {Object.keys(visualisationChoices).map((name) => ( diff --git a/source/sites/publicodes/chart/Bar.js b/source/sites/publicodes/chart/Bar.js index 387b4f04b2..d39051f58a 100644 --- a/source/sites/publicodes/chart/Bar.js +++ b/source/sites/publicodes/chart/Bar.js @@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react' import emoji from 'react-easy-emoji' import { useLocation } from 'react-router' import { useNavigate } from 'react-router-dom' +import SafeCategoryImage from '../../../components/SafeCategoryImage' import { useQuery } from '../../../utils' import Value from './Value' @@ -16,6 +17,7 @@ export default ({ noText, valueColor, demoMode, + dottedName, }) => { return ( <> @@ -33,9 +35,17 @@ export default ({ font-size: 140%; width: 2.3rem; margin-left: -2.3rem; + background: ${color}; + border-radius: 3rem; + height: 2.3rem; + padding: 0.2rem; + margin-right: 0.6rem; + img { + width: 1.8rem; + } `} > - {emoji(icons)} + { const rules = useSelector((state) => state.rules) const engine = useEngine(objectifs) const tall = useMediaQuery('(min-height: 900px)'), - medium = useMediaQuery('(min-height: 700px)') + mediumTall = useMediaQuery('(min-height: 700px)'), + mediumLarge = useMediaQuery('(min-width: 410px)'), + medium = mediumTall && mediumLarge const total = engine.evaluate('bilan').nodeValue, gridLength = tall ? 100 : medium ? 70 : 50, - pixelRemSize = 3, + pixelMargin = 0.12, + pixelRemSize = 3 - 2 * pixelMargin, pixel = total / gridLength /* If total = 15 t, pixel = 150 kg @@ -68,6 +71,7 @@ export default ({ details }) => { > { whileDrag={{ scale: 1.05, opacity: 0.7 }} // does not work with the animation :/ css={` cursor: grab; - height: ${((2000 / pixel) * pixelRemSize) / 10 + 0.5}rem; - min-height: 5.5rem; /*We focus on orders of magnitude, not perfect pixels*/ + height: ${((2000 / pixel) * pixelRemSize) / (gridLength / 10) + + 1}rem; + min-height: 2rem; /*We focus on orders of magnitude, not perfect pixels*/ width: 95%; - border: 6px dashed black; background: linear-gradient(#78e08f 50%, #78e08fcf 100%); + border-radius: 0.4rem; + box-shadow: #5758bb 0px 0px 6px 0px; display: flex; flex-direction: column; align-items: center; @@ -103,9 +109,11 @@ export default ({ details }) => {

{emoji('🎯')} 2 tonnes

-

- Une case {emoji('🔲')} = {Math.round(pixel)} kg de CO₂e. -

+ {total < 16000 && ( +

+ Une case {emoji('🔲')} = {Math.round(pixel)} kg de CO₂e. +

+ )} )} {hiddenTarget && ( diff --git a/source/sites/publicodes/chart/SquaresGrid.tsx b/source/sites/publicodes/chart/SquaresGrid.tsx index 0784b4f607..a5a3c457f3 100644 --- a/source/sites/publicodes/chart/SquaresGrid.tsx +++ b/source/sites/publicodes/chart/SquaresGrid.tsx @@ -3,9 +3,10 @@ import { range } from 'ramda' import CircledEmojis from '../../../components/CircledEmojis' import { motion } from 'framer-motion' import { useEffect, useLayoutEffect, useRef, useState } from 'react' +import SafeCategoryImage from '../../../components/SafeCategoryImage' const delayPerPixel = 0.0025 -export default ({ pixelRemSize, elements, pixel, gridLength }) => { +export default ({ pixelRemSize, elements, pixel, gridLength, pixelMargin }) => { const originOffset = useRef({ top: 0, left: 0 }) const [isVisible, setVisibility] = useState(false) @@ -47,7 +48,11 @@ export default ({ pixelRemSize, elements, pixel, gridLength }) => { */ return ( - + {ponderedElements.map((element, i) => ( { delayPerPixel={delayPerPixel} originOffset={originOffset} {...{ element, pixel }} + pixelMargin={pixelMargin} /> ))} @@ -71,6 +77,7 @@ const GridItem = ({ originOffset, element, pixel, + pixelMargin, }) => { /* This math.round creates the override of the grid by a few items, * making it not 10x10 but e.g. 10x10 + 3 */ @@ -109,12 +116,21 @@ const GridItem = ({ title={`${element.title} (${element.topCategoryTitle})`} css={` background: ${element.topCategoryColor}; + border-radius: 0.6rem; + margin: ${pixelMargin}rem; + + :hover { + background: white; + img { + filter: none; + } + } `} ref={ref} variants={itemVariants} custom={delayRef} > - + ) } @@ -131,25 +147,15 @@ const itemVariants = { }), } -const Box = styled(motion.div)` - margin: 10px; - display: inline-block; - height: 65px; - width: 65px; - background-color: white; - border-radius: 10px; -` - const Grid = styled.ul` padding: 0; display: flex; justify-content: center; flex-wrap: wrap; - width: 100%; - @media (min-width: 800px) { - width: 95%; - } - max-width: ${(props) => 10 * props.pixelRemSize}rem; + /* Black magic. This width needs .1 to accomodate for I don't know what*/ + width: ${(props) => + (props.gridLength / 10) * (props.pixelRemSize + props.pixelMargin * 2) + + 0.1}rem; margin: 0 auto; /* The grid will not be centered horizontally. This may be achieved via CSS grids, but it took me more than 15 minutes to not figure out how to do it * Another interesting layout would be a snake layout, but it's not simple either : @@ -160,15 +166,15 @@ const Grid = styled.ul` list-style-type: none; width: ${(props) => props.pixelRemSize}rem; height: ${(props) => props.pixelRemSize}rem; - box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px 0px; + box-shadow: #5758bb63 0px 0px 6px 0px; display: inline-flex; justify-content: center; align-items: center; line-height: 1.4rem; font-size: 90%; - /* Interesting too, more spaced, but more room and less graph-like - border-radius: 0.6rem; - margin: 0.2rem; - */ + border-radius: 0; + } + li img { + width: 2rem; } ` diff --git a/source/sites/publicodes/chart/SubCategoryBar.tsx b/source/sites/publicodes/chart/SubCategoryBar.tsx index e443c6c6a3..ffbd8b4855 100644 --- a/source/sites/publicodes/chart/SubCategoryBar.tsx +++ b/source/sites/publicodes/chart/SubCategoryBar.tsx @@ -3,6 +3,7 @@ import { findContrastedTextColor } from 'Components/utils/colors' import { motion } from 'framer-motion' import { useLocation } from 'react-router' import { useNavigate } from 'react-router-dom' +import SafeCategoryImage from '../../../components/SafeCategoryImage' import TriangleShape from './TriangleShape' export default ({ @@ -57,23 +58,33 @@ export default ({ )} - {clicked ? ( - - -
{title}
-
{Math.round((nodeValue / total) * 100)} %
- - ) : ( - - )} + + {clicked ? ( + + +
{title}
+
{Math.round((nodeValue / total) * 100)} %
+ + ) : ( + + )} + ) } diff --git "a/source/sites/publicodes/fin/Cat\303\251gories.tsx" "b/source/sites/publicodes/fin/Cat\303\251gories.tsx" index d23c7fe108..dc0a1aedae 100644 --- "a/source/sites/publicodes/fin/Cat\303\251gories.tsx" +++ "b/source/sites/publicodes/fin/Cat\303\251gories.tsx" @@ -79,6 +79,11 @@ export default ({ score, details, headlessMode }) => { font-size: 130%; margin: 0.6rem; } + @media (max-width: 800px) { + h1 { + font-size: 110%; + } + } `} >

De quoi est faite mon empreinte ?

diff --git a/source/sites/publicodes/fin/ClimateTargetChart.tsx b/source/sites/publicodes/fin/ClimateTargetChart.tsx index 001b263b61..3e8e23e7bd 100644 --- a/source/sites/publicodes/fin/ClimateTargetChart.tsx +++ b/source/sites/publicodes/fin/ClimateTargetChart.tsx @@ -9,6 +9,7 @@ const { encodeRuleName } = utils import { relegate } from 'Components/publicodesUtils' import { useLayoutEffect, useRef, useState } from 'react' +import SafeCategoryImage from '../../../components/SafeCategoryImage' export const sustainableLifeGoal = 2000 // kgCO2e const sustainableBackground = '#78e08f' @@ -322,9 +323,11 @@ const CategoriesBar = ({ `} `} > - {category.nodeValue / empreinteTotale > 0.1 - ? emoji(category.icons) - : ''} + {category.nodeValue / empreinteTotale > 0.1 ? ( + + ) : ( + '' + )} ))}