Merge pull request #72 from laem/accueilv2

Amélioration des catégories

index.html

@@ -32,12 +32,6 @@
 			content="oQ9gPKS4kocrCJP6CoguSkdIKKZ6ilZz0aQw_ZIgtVc"
 		/>
 
-		<!-- data-helmet pour que React Helmet puisse écraser ce meta par défaut -->
-		<link
-			href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,600|Montserrat:400,600"
-			rel="stylesheet"
-			type="text/css"
-		/>
 		<link rel="manifest" href="/manifest.webmanifest" />
 		<title>
 			<%= htmlWebpackPlugin.options.title %>
@@ -289,7 +283,7 @@
 			style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; display: none; background-color: white"
 		>
 			<div
-				style="margin: 100px auto; max-width: 800px; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 300;"
+				style="margin: 100px auto; max-width: 800px; text-align: center; font-family: sans-serif; font-weight: 300;"
 			>
 				<img
 					src="images/marianne.svg"

source/components/ui/Button/button.css

@@ -2,7 +2,6 @@
 	animation: push-button-down 0.1s ease-out alternate-reverse 2;
 }
 
-
 .ui__.button:disabled,
 .ui__.button.disabled {
 	opacity: 0.5;
@@ -23,8 +22,7 @@
 	transition: all 0.15s;
 	text-align: center;
 	text-transform: uppercase;
-
-	font-family: 'Roboto', sans-serif;
+
 	font-weight: normal;
 	cursor: pointer;
 
@@ -200,7 +198,6 @@
 	filter: saturate(0%);
 }
 
-
 @keyframes push-button-down {
 	from {
 		transform: translate3d(0, 3px, 0);

source/components/ui/InfoBulle.css

@@ -27,7 +27,6 @@
 	font-weight: normal;
 	display: block;
 	border-radius: 3px;
-	font-family: 'Roboto';
 	font-size: 0.8rem;
 	background-color: white;
 	transition: opacity 0.2s, transform 0.2s;

source/components/ui/Typography.css

@@ -26,7 +26,7 @@ body {
 	font-weight: 400;
 	color: #040e19;
 	color: var(--darkColor);
-	font-family: 'Roboto', sans-serif;
+	font-family: Arial, Helvetica, sans-serif;
 }
 
 h1 {
@@ -66,7 +66,7 @@ h4,
 h5,
 h6 {
 	color: var(--darkColor);
-	font-family: 'Montserrat', sans-serif;
+	font-family: Arial, Helvetica, sans-serif;
 	font-weight: 600;
 }
 

source/engine/rules.js

@@ -23,10 +23,8 @@ import {
 	take,
 	toPairs,
 	trim,
-	when
+	when,
 } from 'ramda'
-import rawRules from 'Règles/base.yaml'
-import translations from 'Règles/externalized.yaml'
 // TODO - should be in UI, not engine
 import { capitalise0, coerceArray } from '../utils'
 import { syntaxError, warning } from './error'
@@ -35,7 +33,7 @@ import possibleVariableTypes from './possibleVariableTypes.yaml'
 /***********************************
 Functions working on one rule */
 
-export let enrichRule = rule => {
+export let enrichRule = (rule) => {
 	try {
 		const dottedName = rule.dottedName || rule.nom
 		const name = nameLeaf(dottedName)
@@ -55,14 +53,14 @@ export let enrichRule = rule => {
 			...rule,
 			dottedName,
 			name,
-			type: possibleVariableTypes.find(t => has(t, rule) || rule.type === t),
+			type: possibleVariableTypes.find((t) => has(t, rule) || rule.type === t),
 			title: capitalise0(rule['titre'] || name),
 			defaultValue: rule['par défaut'],
 			examples: rule['exemples'],
 			icons: rule['icônes'],
 			summary: rule['résumé'],
 			unit,
-			defaultUnit
+			defaultUnit,
 		}
 	} catch (e) {
 		syntaxError(
@@ -82,33 +80,33 @@ export let disambiguateExampleSituation = (rules, rule) =>
 		fromPairs
 	)
 
-export let hasKnownRuleType = rule => rule && enrichRule(rule).type
+export let hasKnownRuleType = (rule) => rule && enrichRule(rule).type
 
 export let splitName = split(' . '),
 	joinName = join(' . ')
 
 export let parentName = pipe(splitName, dropLast(1), joinName)
 export let nameLeaf = pipe(splitName, last)
 
-export let encodeRuleName = name =>
+export let encodeRuleName = (name) =>
 	encodeURI(
 		name
 			.replace(/\s\.\s/g, '/')
 			.replace(/-/g, '\u2011') // replace with a insecable tiret to differenciate from space
 			.replace(/\s/g, '-')
 	)
-export let decodeRuleName = name =>
+export let decodeRuleName = (name) =>
 	decodeURI(
 		name
 			.replace(/\//g, ' . ')
 			.replace(/-/g, ' ')
 			.replace(/\u2011/g, '-')
 	)
 
-export let ruleParents = dottedName => {
+export let ruleParents = (dottedName) => {
 	let fragments = splitName(dottedName) // dottedName ex. [CDD . événements . rupture]
 	return range(1, fragments.length)
-		.map(nbEl => take(nbEl)(fragments))
+		.map((nbEl) => take(nbEl)(fragments))
 		.reverse() //  -> [ [CDD . événements . rupture], [CDD . événements], [CDD] ]
 }
 /* In a formula, variables can be cited without referring to them absolutely : namespaces can be omitted to enhance the readability. This function resolves this ambiguity.
@@ -121,7 +119,7 @@ export let disambiguateRuleReference = (
 	let pathPossibilities = [
 			splitName(dottedName), // the rule's own namespace
 			...ruleParents(dottedName), // the parent namespaces
-			[] // the top level namespace
+			[], // the top level namespace
 		],
 		found = reduce(
 			(res, path) => {
@@ -165,7 +163,7 @@ export let findRulesByName = (allRules, query) =>
 
 export let findRuleByDottedName = (allRules, dottedName) =>
 	Array.isArray(allRules)
-		? allRules.find(rule => rule.dottedName == dottedName)
+		? allRules.find((rule) => rule.dottedName == dottedName)
 		: allRules[dottedName]
 
 export let findRule = (rules, nameOrDottedName) =>
@@ -174,14 +172,14 @@ export let findRule = (rules, nameOrDottedName) =>
 		: findRuleByName(rules, nameOrDottedName)
 
 export let findRuleByNamespace = (allRules, ns) =>
-	allRules.filter(rule => parentName(rule.dottedName) === ns)
+	allRules.filter((rule) => parentName(rule.dottedName) === ns)
 
 /*********************************
  Autres */
 
-export let queryRule = rule => query => path(query.split(' . '))(rule)
+export let queryRule = (rule) => (query) => path(query.split(' . '))(rule)
 
-export let nestedSituationToPathMap = situation => {
+export let nestedSituationToPathMap = (situation) => {
 	if (situation == undefined) return {}
 	let rec = (o, currentPath) =>
 		typeof o === 'object'
@@ -194,7 +192,7 @@ export let nestedSituationToPathMap = situation => {
 /* Traduction */
 
 export let translateAll = (translations, flatRules) => {
-	let translationsOf = rule => translations[rule.dottedName],
+	let translationsOf = (rule) => translations[rule.dottedName],
 		translateProp = (lang, translation) => (rule, prop) => {
 			let propTrans = translation[prop + '.' + lang]
 			if (prop === 'suggestions' && propTrans)
@@ -204,15 +202,15 @@ export let translateAll = (translations, flatRules) => {
 						toPairs,
 						map(([key, translatedKey]) => [
 							translatedKey,
-							rule.suggestions[key]
+							rule.suggestions[key],
 						]),
 						fromPairs
 					)(propTrans),
 					rule
 				)
 			return propTrans ? assoc(prop, propTrans, rule) : rule
 		},
-		translateRule = (lang, translations, props) => rule => {
+		translateRule = (lang, translations, props) => (rule) => {
 			let ruleTrans = translationsOf(rule)
 			return ruleTrans
 				? reduce(translateProp(lang, ruleTrans), rule, props)
@@ -225,31 +223,19 @@ export let translateAll = (translations, flatRules) => {
 		'question',
 		'résumé',
 		'suggestions',
-		'contrôles'
+		'contrôles',
 	]
 
 	return map(translateRule('en', translations, targets), flatRules)
 }
 
-const rulesList = Object.entries(rawRules).map(([dottedName, rule]) => ({
-	dottedName,
-	...rule
-}))
-
-// On enrichit la base de règles avec des propriétés dérivées de celles du YAML
-export let rules = translateAll(translations, rulesList).map(rule =>
-	enrichRule(rule)
-)
-
-export let rulesFr = rulesList.map(rule => enrichRule(rule))
-
 export let findParentDependencies = (rules, rule) => {
 	// A parent dependency means that one of a rule's parents is not just a namespace holder, it is a boolean question. E.g. is it a fixed-term contract, yes / no
 	// When it is resolved to false, then the whole branch under it is disactivated (non applicable)
 	// It lets those children omit obvious and repetitive parent applicability tests
 	let parentDependencies = ruleParents(rule.dottedName).map(joinName)
 	return pipe(
-		map(parent => findRuleByDottedName(rules, parent)),
+		map((parent) => findRuleByDottedName(rules, parent)),
 		reject(isNil),
 		filter(
 			//Find the first "calculable" parent
@@ -263,14 +249,14 @@ export let findParentDependencies = (rules, rule) => {
 	)(parentDependencies)
 }
 
-export let getRuleFromAnalysis = analysis => dottedName => {
+export let getRuleFromAnalysis = (analysis) => (dottedName) => {
 	if (!analysis) {
 		throw new Error("[getRuleFromAnalysis] The analysis can't be nil !")
 	}
 
 	let rule = coerceArray(analysis) // In some simulations, there are multiple "branches" : the analysis is run with e.g. 3 different input situations
 		.map(
-			analysis =>
+			(analysis) =>
 				analysis.cache[dottedName]?.explanation || // the cache stores a reference to a variable, the variable is contained in the 'explanation' attribute
 				analysis.targets.find(propEq('dottedName', dottedName))
 		)

source/i18n.ts

@@ -1,6 +1,6 @@
 import i18next from 'i18next'
 import { initReactI18next } from 'react-i18next'
-import enTranslations from './locales/en.yaml'
+//import enTranslations from './locales/en.yaml'
 import unitsTranslations from './locales/units.yaml'
 import { getSessionStorage } from './utils'
 
@@ -22,7 +22,7 @@ i18next
 		resources: {
 			fr: { units: unitsTranslations.fr },
 			en: {
-				translation: enTranslations,
+			translation: {},
 				units: unitsTranslations.en
 			}
 		}

source/sites/publicodes/ItemCard.js

@@ -3,8 +3,8 @@ import emoji from 'react-easy-emoji'
 import HumanCarbonImpact from './HumanCarbonImpact'
 import withTarget from './withTarget'
 
-export default withFigure => {
-	let decorator = withFigure ? withTarget : a => a
+export default (withFigure) => {
+	let decorator = withFigure ? withTarget : (a) => a
 	return decorator(
 		({
 			dottedName,
@@ -14,7 +14,7 @@ export default withFigure => {
 			nodeValue,
 			scenario,
 			nextSteps,
-			foldedSteps
+			foldedSteps,
 		}) => (
 			<div
 				key={dottedName}
@@ -23,6 +23,15 @@ export default withFigure => {
 					padding: ${withFigure ? '1rem 0 0' : '1rem'};
 					width: ${withFigure ? '18rem' : '10rem'};
 					min-height: 7em;
+					${!withFigure &&
+					`
+					@media (max-width: 600px){
+							padding: .6rem;
+							width: 9rem;
+							font-size: 110%;
+							min-height: 6.5rem
+					}
+					`}
 					position: relative;
 					display: flex;
 					align-items: center;
@@ -74,7 +83,7 @@ export default withFigure => {
 									dottedName,
 									scenario,
 									nextSteps,
-									foldedSteps
+									foldedSteps,
 								}}
 							/>
 						</div>

source/sites/publicodes/Suggestions.js

@@ -69,7 +69,13 @@ const CategoryView = ({ exposedRules }) => {
 				> li > div {
 					text-transform: uppercase;
 					font-size: 85%;
+					width: auto;
+					margin: 0 auto;
 					text-align: center;
+					border-radius: 0.3rem;
+					width: 6.5rem;
+					color: var(--textColor);
+					background: var(--color);
 				}
 				li > ul > li {
 					white-space: initial;
@@ -78,6 +84,7 @@ const CategoryView = ({ exposedRules }) => {
 				li > ul {
 					padding-left: 0;
 				}
+
 				@media (max-width: 600px) {
 					li > ul {
 						display: block;
@@ -90,10 +97,23 @@ const CategoryView = ({ exposedRules }) => {
 				}
 			`}
 		>
-			{categories.map(([category, rules]) => (
+			{categories.map(([category, rules], i) => (
 				<li>
 					<div>{category}</div>
 					<RuleList {...{ rules, exposedRules: rules }} />
+					{i === 0 && (
+						<img
+							css={`
+								display: none;
+								height: 3em;
+								margin: 1em auto;
+								@media (max-width: 600px) {
+									display: block;
+								}
+							`}
+							src={require('./images/horizontal-scroll.png')}
+						/>
+					)}
 				</li>
 			))}
 		</ul>