Explorer: CSS review

trefle/explorer/app.css

@@ -70,23 +70,14 @@
     font-style: italic;
 
 }
-html, body {
-  width: 100%;
-}
 html, body, a, p, div, li, dl {
   margin: 0;
   padding: 0;
   color: #222;
   font-family: 'sans';
-/*  font-size: 1.1em;
-  line-height: 1.4em;
-*/}
-.main {
-  max-width: 1280px;
-  margin: 0 auto;
-  display: grid;
-  /*grid-template-columns: 1fr 2fr 2fr;*/
-  grid-gap: 10px;
+}
+html, body {
+  width: 100%;
 }
 ul {
   padding: 0;
@@ -97,6 +88,18 @@ li {
 a {
   text-decoration: none;
 }
+.full, .tools {
+  margin: 0 auto;
+  max-width: 1280px;
+  display: block;
+}
+.tools {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+}
+main {
+  padding: 10px;
+}
 
 
 
@@ -111,6 +114,7 @@ input[type=submit],
   padding: 0 10px;
   line-height: 3em;
   cursor: pointer;
+  color: #fff;
 }
 input[type=submit]:hover,
 .button:hover {

trefle/explorer/components/navbar.tag.html

 <navbar>
   <h1><a href=".">☘</a></h1>
-  <section>
+  <nav>
     <a href="#schema">Schéma</a>
     <a href="#rules">Règles de gestion</a>
     <a href="#simulate">Simuler</a>
     <a href="#tools">Outils</a>
     <a href="#glossary">Glossaire</a>
-  </section>
+  </nav>
 
   <style scoped>
     :scope {
-      display: block;
-      padding: 2em;
-      grid-column: 1 / -1;
       display: grid;
-      grid-template-columns: 1fr 5fr;
-      background-color: #68c3a3;
+      grid-template-columns: 1fr 4fr;
+      padding: 2em;
+      border-bottom: 1px solid #eee;
     }
     h1 {
       display: inline-block;
       font-size: 3em;
       line-height: 1em;
     }
-    section a {
+    nav a {
       font-size: 1.4em;
       font-variant: small-caps;
     }
-    section a:hover {
+    nav a:hover {
       text-decoration: underline dotted;
     }
     a + a {

trefle/explorer/components/rule.tag.html

@@ -7,6 +7,7 @@
       background-color: #eee;
       max-width: 1200px;
       font-family: 'mono';
+      white-space: pre-wrap;
     }
     pre strong {
       font-family: 'mono';
@@ -46,6 +47,7 @@
                       .replace(/(#.+)/g, "<em class=comment>$1</em>")
                       .replace(/( [\d\.]+)/g, "<span class=number>$1</span>")
                       .replace(/(«.+»)/g, "<span class=string>$1</span>")
+                      .replace(/,([^ ])/g, ", $1")
     for (const [key, schema] of Object.entries(SCHEMA)) {
       if (schema.label) {
         let replace = `<span class='tooltip'><span class='keyword'>$1</span><span class=tooltip-content>`

trefle/explorer/components/simulate.tag.html

@@ -6,14 +6,14 @@
       <input type="submit" value="Simuler">
     </form>
   </section>
-  <section if={ !this.financements.length }>
+  <section if={ Object.keys(this.errors).length } class=results>
     <ul>
       <li each={ message, key in this.errors }><strong>{ key }</strong> { message }</li>
     </ul>
   </section>
   <section class=results if={ this.financements.length }>
     <h2>Financements</h2>
-    <ul if={ this.financements.length }>
+    <ul>
       <li each={ this.financements }>
         <h4>{nom}</h4>
         <p><strong>Description</strong> {description}</p>
@@ -27,7 +27,7 @@
     </ul>
     <h2>Contexte</h2>
     <table>
-      <tr each={ props in this.context }><th>{ props.label }</th><td>{ props.value.toString() }</td></tr>
+      <tr each={ props in this.context }><th>{ props.label }</th><td>{ this.renderValue(props.value) }</td></tr>
     </table>
     <h2>Scénario de test</h2>
     <rule if={ this.scenario } content={ this.scenario }></rule>
@@ -74,15 +74,14 @@
       this.decodeLBFURL(url, this.simulate)
     }
 
+    this.renderValue = (value) => {
+      if (Array.isArray(value)) return value.join(', ')
+      return value
+    }
+
   </script>
 
   <style scoped>
-    :scope {
-      display: grid;
-      grid-template-columns: 2fr 4fr;
-      grid-gap: 10px;
-      overflow: hidden;
-    }
     h2 {
       font-variant: small-caps;
     }

trefle/explorer/components/tools.tag.html

 <tools>
-  <idcc-search></idcc-search>
+  <idcc-search class=tools></idcc-search>
   <script>
     this.mixin(View)
   </script>

trefle/explorer/index.html

@@ -14,16 +14,14 @@
 <script src="components/tools.tag.html" type="riot/tag"></script>
 <script src="components/idcc-search.tag.html" type="riot/tag"></script>
 
-<app>
-  <header data-is=navbar class=header></header>
-  <section class=main>
-    <schema></schema>
-    <rules></rules>
-    <simulate></simulate>
-    <tools></tools>
-    <glossary></glossary>
-  </section>
-</app>
+<header data-is=navbar></header>
+<main>
+  <schema class=full></schema>
+  <glossary class=full></glossary>
+  <rules class=full></rules>
+  <simulate class=tools></simulate>
+  <tools></tools>
+</main>
 
 <script>
   riot.mount('navbar')