Commit 4b55ed65 authored by Yohan Boniface's avatar Yohan Boniface

Explorer: CSS review

parent c6acf758
......@@ -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 {
......
<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 {
......
......@@ -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>`
......
......@@ -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;
}
......
<tools>
<idcc-search></idcc-search>
<idcc-search class=tools></idcc-search>
<script>
this.mixin(View)
</script>
......
......@@ -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')
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment