Séparation du CSS de Somme

pull/96/head
mama 2017-10-13 13:38:10 +02:00
parent 3b4cc7b84d
commit 26fde7b3b9
3 changed files with 67 additions and 66 deletions

View File

@ -123,66 +123,3 @@
margin: 3em auto 0;
display: block;
}
/* mécanisme somme */
.somme table {
width: 100%;
border-collapse: collapse;
}
.somme td.blank {
background: white;
border: 1px solid white;
border-right: 1px solid rgba(51, 51, 80, 0.15);
}
.somme tr {
border: 1px solid rgba(51, 51, 80, 0.15);
}
.somme tr:hover {
background: rgba(51, 51, 80, 0.02)
}
.somme tr:nth-child(2n) {
}
.somme tr .element {
text-align: left;
padding: .1em .6em;
}
.somme tr .value span {
text-align: right;
}
.somme .leaf .name {
border: none;
}
.somme .operator {
text-align: center;
width: 1em;
padding: 0 .4em;
font-weight: 600;
font-size: 120%;
color: black;
}
#rule-rules .somme table .leaf .situationValue {
display: none;
}
#rule-rules .somme table .situationValue {
padding: 0 1em;
}
#rule-rules .somme table .situationValue span {
}
.somme .nested {
padding: 0;
border: none;
}
.somme .nested tr:first-child {
border-top: none;
}
.somme .noNest {
border-bottom: none;
}
.somme > table {
border-bottom: 1px solid rgba(51, 51, 80, 0.15);
}

View File

@ -0,0 +1,61 @@
/* mécanisme somme */
.somme table {
width: 100%;
border-collapse: collapse;
}
.somme td.blank {
background: white;
border: 1px solid white;
border-right: 1px solid rgba(51, 51, 80, 0.15);
}
.somme tr {
border: 1px solid rgba(51, 51, 80, 0.15);
}
.somme tr:hover {
background: rgba(51, 51, 80, 0.02)
}
.somme tr:nth-child(2n) {
}
.somme tr .element {
text-align: left;
padding: .1em .6em;
}
.somme tr .value span {
text-align: right;
}
.somme .leaf .name {
border: none;
}
.somme .operator {
text-align: center;
width: 1em;
padding: 0 .4em;
font-weight: 600;
font-size: 120%;
color: black;
}
#rule-rules .somme table .leaf .situationValue {
display: none;
}
#rule-rules .somme table .situationValue {
padding: 0 1em;
}
#rule-rules .somme table .situationValue span {
}
.somme .nested {
padding: 0;
border: none;
}
.somme .nested tr:first-child {
border-top: none;
}
.somme .noNest {
border-bottom: none;
}
.somme > table {
border-bottom: 1px solid rgba(51, 51, 80, 0.15);
}

View File

@ -2,6 +2,7 @@ import React, { Component } from "react"
import { makeJsx } from "../evaluation"
import { path } from "ramda"
import { Node, NodeValue } from "./common"
import './Somme.css'
export default ({ explanation, nodeValue }) => (
<Node
@ -15,7 +16,7 @@ export default ({ explanation, nodeValue }) => (
let Table = ({ explanation }) => (
<table>
<caption />
<tbody>{explanation.map((v, i) => <Row {...{ v, i }} />)}</tbody>
<tbody>{explanation.map((v, i) => <Row key={i} {...{ v, i }} />)}</tbody>
</table>
)
@ -36,14 +37,16 @@ class Row extends Component {
onClick={() => this.setState({ folded: false })}
>
<td className="operator blank">{i != 0 && "+"}</td>
<td className="element">{makeJsx(v)}</td>
<td className="element">
{makeJsx(v)}
</td>
<td className="situationValue value">
<NodeValue data={v.nodeValue} />
</td>
</tr>,
...(isSomme && !this.state.folded
? [
<tr className="nested">
<tr className="nested" key={v.name + "-nest"}>
<td className="blank" />
<td className="nested">
<Table explanation={rowFormula.explanation} />