From 6d6bb216ba50535974425100d68e1b8413fceb97 Mon Sep 17 00:00:00 2001 From: mama Date: Fri, 13 Oct 2017 15:47:16 +0200 Subject: [PATCH] Division du CSS de Rule --- source/components/AttachDictionary.js | 1 + source/components/Dictionary.css | 40 ++++ source/components/rule/Algorithm.css | 217 ++++++++++++++++++++++ source/components/rule/Algorithm.js | 1 + source/components/rule/Rule.css | 255 -------------------------- 5 files changed, 259 insertions(+), 255 deletions(-) create mode 100644 source/components/Dictionary.css create mode 100644 source/components/rule/Algorithm.css diff --git a/source/components/AttachDictionary.js b/source/components/AttachDictionary.js index a11222b97..81e0d7f07 100644 --- a/source/components/AttachDictionary.js +++ b/source/components/AttachDictionary.js @@ -2,6 +2,7 @@ import R from 'ramda' import React, { Component } from 'react' import ReactDOM from 'react-dom' import marked from 'Engine/marked' +import './Dictionary.css' // On ajoute à la section la possibilité d'ouvrir un panneau d'explication des termes. // Il suffit à la section d'appeler une fonction fournie en lui donnant du JSX diff --git a/source/components/Dictionary.css b/source/components/Dictionary.css new file mode 100644 index 000000000..8ea3f586b --- /dev/null +++ b/source/components/Dictionary.css @@ -0,0 +1,40 @@ + +.dictionaryPanelWrapper { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.86); + z-index: 1; +} +.dictionaryPanel { + background: white; + position: fixed; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + width: 33%; + border: 2px solid #333350; + margin: 1em; + padding: 0em 1.5em; + min-height: 6em; + border-radius: .3em; +} +.dictionaryPanel h3 { + color: #333350 +} +.dictionaryPanel blockquote { + font-style: italic; + border-left: 4px solid #eee; + padding-left: 1em; + margin-left: 0; +} +.dictionaryPanel blockquote p { + color: #666; +} +.dictionaryPanel code { + border: 1px solid #aaa; + padding: .05em .3em; + border-radius: .3em; +} diff --git a/source/components/rule/Algorithm.css b/source/components/rule/Algorithm.css new file mode 100644 index 000000000..afec654f7 --- /dev/null +++ b/source/components/rule/Algorithm.css @@ -0,0 +1,217 @@ + +/* + Règles CSS d'affichage des algorithmes +*/ + +#rule-rules { + display: inline-flex; + justify-content: start; + min-height: 5em; +} + +#rule-rules .situationValue { + display: none; + padding-left: 1em; + font-weight: 700; + color: #031bd6; +} + +#rule-rules.showValues .situationValue { + display: inline; +} + +#algorithm { + margin-right: 10em; +} + +#rule-rules section { + margin: 1em 0 1em 3em; + font-weight: 500; + color: #444 +} +#rule-rules section > div { + font-size: 90%; +} +.node { + padding-left: 1em; + color: #4B4B66 +} + +.mecanism > .nodeHead { + margin-bottom: 1em; +} + +.mecanism > .nodeHead .name { + padding: .05em 1em; + background: #34495e; + color: white; + font-weight: 600; + border-radius: .4em; +} +[data-term-definition] { + cursor: pointer; +} +[data-term-definition]:hover { + opacity: .8 +} +.ruleProp > .nodeHead .name { + background: #9b59b6; +} +.mecanism li { +} +.mecanism .properties, .mecanism.list ul { + margin-top: 0; + padding-left: 1em; + list-style-type: none; + border-left: 1px dashed #ccc; +} +.mecanism .properties .key { + font-weight: 600; + display: inline-block; + margin-bottom: .6em; + margin-right: 0.8em; +} + +.multiplication > .nodeHead .name { + background: #2ecc71; +} + +.multiplication li .key { + margin-right: .6em; +} + +.mecanism.list > ul { + list-style-type: disc; +} +.mecanism.list > ul > li { + margin-left: .8em; + padding-left: .3em; +} + +.maximum .description { + font-style: italic; + font-weight: 600; + margin-bottom: .4em; + margin-left: 1em; +} + +.mecanism.conditions > .nodeHead .name { + background: #3498db +} + +.condition { + margin-bottom: .6em; +} + +.node.inlineExpression { + padding-left: 0; + display: inline; +} +.inlineExpression .nodeContent { + /*border-bottom: 1px solid rgba(51, 51, 80, 0.25);*/ + /*border-right: 1px solid rgba(51, 51, 80, 0.25);*/ + /*padding: .5em .6em;*/ + /*border-radius: .3em;*/ +} +.nodeHead { + display: inline-block; +} +.leaf .situationValue { + text-align: center; +} + +#rule-rules .situationValue.oui { + color: #5ab738; +} +#rule-rules .situationValue.non { + color: #f22c40; +} + +.variable .name { + color: #5B5B73; + text-align: center; + margin-top: 1em; + padding: .05em .6em; + line-height: 1.8em; + border-radius: .4em; + font-weight: 600; + font-size: 90%; + border: 1px solid rgba(51, 51, 80, 0.25); + white-space: nowrap +} + + +.percentage .name { + font-size: 110%; + font-weight: 600; +} + +.operator { + margin: .1em .6em; + font-size: 150%; + font-weight: 600; + vertical-align: middle; +} + +.json { + font-size: 60%; +} + +.barème > .nodeHead .name { + background: #1abc9c; +} + +.barème .key { + color: #1abc9c +} + +.barème table { + margin-top: 1em; + width: 80%; + text-align: left; +} +.barème table td { + padding: .1em .4em; + /*border: 1px solid #aaa;*/ +} +.barème table tr:nth-child(2n) { + background: #f1f1f1 +} + +.composantes > .nodeHead .name { + background: #3498db; +} + +.composantes > ul > li { + display: inline-block; +} +.composantes .composante { + width: 45%; +} +.composantes .composante .content { + border-top: 1px solid #3498db; + padding: 1em; + margin-right: 2em; +} +.composantes .composanteAttributes { + list-style-type: none; + padding: .2em; + color: #3498db; +} +.composantes .composanteAttributes span:last-child { + font-weight: 600; +} + +.composantes .composantesSymbol { + font-size: 160%; + color: #3498db; +} + + + +#rule-calc { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: baseline; +} diff --git a/source/components/rule/Algorithm.js b/source/components/rule/Algorithm.js index c3c16c020..4bc6bda95 100644 --- a/source/components/rule/Algorithm.js +++ b/source/components/rule/Algorithm.js @@ -5,6 +5,7 @@ import {AttachDictionary} from '../AttachDictionary' import knownMecanisms from 'Engine/known-mecanisms.yaml' import marked from 'Engine/marked' import {makeJsx} from 'Engine/evaluation' +import './Algorithm.css' let RuleWithoutFormula = () =>

diff --git a/source/components/rule/Rule.css b/source/components/rule/Rule.css index 644e9a4fe..796fc2ffc 100644 --- a/source/components/rule/Rule.css +++ b/source/components/rule/Rule.css @@ -102,261 +102,6 @@ } -/* - Règles CSS d'affichage des algorithmes -*/ - -#rule-rules { - display: inline-flex; - justify-content: start; - min-height: 5em; -} - -#rule-rules .situationValue { - display: none; - padding-left: 1em; - font-weight: 700; - color: #031bd6; -} - -#rule-rules.showValues .situationValue { - display: inline; -} - -#algorithm { - margin-right: 10em; -} -.dictionaryPanelWrapper { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.86); - z-index: 1; -} -.dictionaryPanel { - background: white; - position: fixed; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - width: 33%; - border: 2px solid #333350; - margin: 1em; - padding: 0em 1.5em; - min-height: 6em; - border-radius: .3em; -} -.dictionaryPanel h3 { - color: #333350 -} -.dictionaryPanel blockquote { - font-style: italic; - border-left: 4px solid #eee; - padding-left: 1em; - margin-left: 0; -} -.dictionaryPanel blockquote p { - color: #666; -} -.dictionaryPanel code { - border: 1px solid #aaa; - padding: .05em .3em; - border-radius: .3em; -} - -#rule-rules section { - margin: 1em 0 1em 3em; - font-weight: 500; - color: #444 -} -#rule-rules section > div { - font-size: 90%; -} -.node { - padding-left: 1em; - color: #4B4B66 -} - -.mecanism > .nodeHead { - margin-bottom: 1em; -} - -.mecanism > .nodeHead .name { - padding: .05em 1em; - background: #34495e; - color: white; - font-weight: 600; - border-radius: .4em; -} -[data-term-definition] { - cursor: pointer; -} -[data-term-definition]:hover { - opacity: .8 -} -.ruleProp > .nodeHead .name { - background: #9b59b6; -} -.mecanism li { -} -.mecanism .properties, .mecanism.list ul { - margin-top: 0; - padding-left: 1em; - list-style-type: none; - border-left: 1px dashed #ccc; -} -.mecanism .properties .key { - font-weight: 600; - display: inline-block; - margin-bottom: .6em; - margin-right: 0.8em; -} - -.multiplication > .nodeHead .name { - background: #2ecc71; -} - -.multiplication li .key { - margin-right: .6em; -} - -.mecanism.list > ul { - list-style-type: disc; -} -.mecanism.list > ul > li { - margin-left: .8em; - padding-left: .3em; -} - -.maximum .description { - font-style: italic; - font-weight: 600; - margin-bottom: .4em; - margin-left: 1em; -} - -.mecanism.conditions > .nodeHead .name { - background: #3498db -} - -.condition { - margin-bottom: .6em; -} - -.node.inlineExpression { - padding-left: 0; - display: inline; -} -.inlineExpression .nodeContent { - /*border-bottom: 1px solid rgba(51, 51, 80, 0.25);*/ - /*border-right: 1px solid rgba(51, 51, 80, 0.25);*/ - /*padding: .5em .6em;*/ - /*border-radius: .3em;*/ -} -.nodeHead { - display: inline-block; -} -.leaf .situationValue { - text-align: center; -} - -#rule-rules .situationValue.oui { - color: #5ab738; -} -#rule-rules .situationValue.non { - color: #f22c40; -} - -.variable .name { - color: #5B5B73; - text-align: center; - margin-top: 1em; - padding: .05em .6em; - line-height: 1.8em; - border-radius: .4em; - font-weight: 600; - font-size: 90%; - border: 1px solid rgba(51, 51, 80, 0.25); - white-space: nowrap -} - - -.percentage .name { - font-size: 110%; - font-weight: 600; -} - -.operator { - margin: .1em .6em; - font-size: 150%; - font-weight: 600; - vertical-align: middle; -} - -.json { - font-size: 60%; -} - -.barème > .nodeHead .name { - background: #1abc9c; -} - -.barème .key { - color: #1abc9c -} - -.barème table { - margin-top: 1em; - width: 80%; - text-align: left; -} -.barème table td { - padding: .1em .4em; - /*border: 1px solid #aaa;*/ -} -.barème table tr:nth-child(2n) { - background: #f1f1f1 -} - -.composantes > .nodeHead .name { - background: #3498db; -} - -.composantes > ul > li { - display: inline-block; -} -.composantes .composante { - width: 45%; -} -.composantes .composante .content { - border-top: 1px solid #3498db; - padding: 1em; - margin-right: 2em; -} -.composantes .composanteAttributes { - list-style-type: none; - padding: .2em; - color: #3498db; -} -.composantes .composanteAttributes span:last-child { - font-weight: 600; -} - -.composantes .composantesSymbol { - font-size: 160%; - color: #3498db; -} - - - -#rule-calc { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: baseline; -} #reportError {