Commit 118e421d authored by gijs's avatar gijs

Showing terme and condition on the first, row. Inserted background wrapper for...

Showing terme and condition on the first, row. Inserted background wrapper for axes. Meta data display
parent 1282a880
......@@ -10,18 +10,18 @@
--button-color-disabled: rgb(55,126,146);
--field-border-color: rgb(39,124,149);
--color-01: #353df6; /* rgb(235, 53, 1); */
--color-02: #006ae2; /* rgb(255, 109, 35); */
--color-03: #008890; /* rgb(160, 168, 13); */
--color-04: #159e2b; /* rgb( 74, 158, 21); */
--color-05: #63b808; /* rgb( 0, 136, 144); */
--color-06: #a5ae07; /* rgb( 43, 95, 227); */
--color-07: #ff8803; /* rgb(124, 59, 225); */
--color-08: #eb6501; /* rgb(200, 41, 107); */
--color-09: #e22f20;
--color-10: #c8296b;
--color-11: #b026bc;
--color-12: #871dff;
--color-01: rgb(73,53,246);/*#353df6;*/ /* rgb(235, 53, 1); */
--color-02: rgb(0,144,136);/*#006ae2;*/ /* rgb(255, 109, 35); */
--color-03: rgb(91,184,8);/*#008890;*/ /* rgb(160, 168, 13); */
--color-04: rgb(255,136,3);/*#159e2b;*/ /* rgb( 74, 158, 21); */
--color-05: rgb(226,47,32);/*#63b808;*/ /* rgb( 0, 136, 144); */
--color-06: rgb(176,38,188);/*#a5ae07;*/ /* rgb( 43, 95, 227); */
--color-07: rgb(0,106,226);/*#ff8803;*/ /* rgb(124, 59, 225); */
--color-08: rgb(21,158,111);/*#eb6501;*/ /* rgb(200, 41, 107); */
--color-09: rgb(181,171,0);/*#e22f20;*/
--color-10: rgb(235,101,1);/*#c8296b;*/
--color-11: rgb(200,41,107);/*#b026bc;*/
--color-12: rgb(171,29,255);/*#871dff;*/
--row-indent: 60px;
--axis-line-offset: 30px;
......@@ -350,7 +350,7 @@ section.hidden { display: none; }
#score {
box-sizing: border-box;
outline: 0;
height: calc(100vh - 60px);
height: 100vh;
display: flex;
}
......@@ -364,6 +364,7 @@ section.hidden { display: none; }
#score article {
padding: 30px;
flex: 1 0;
overflow: auto;
}
#score.content {
......@@ -376,12 +377,9 @@ section.hidden { display: none; }
.panel--score-meta .content {
font-size: 85%;
padding: 30px 30px 0px 40px;
}
/**
* Todo implement with flex ?
*/
.panel--score-meta {
position: relative;
flex: 0 0 400px;
......@@ -392,7 +390,7 @@ section.hidden { display: none; }
}
.panel--score-meta .content {
width: 400px;
width: 370px;
}
.panel--score-meta.is-collapsed {
......@@ -416,6 +414,11 @@ section.hidden { display: none; }
cursor: pointer;
}
.panel--score-meta .score-edit {
position: absolute;
right: 30px;
}
#sidebar {
position: relative;
font-size: 85%;
......@@ -647,7 +650,6 @@ section.hidden { display: none; }
========================================================================== */
ol { position: relative; }
.sublines { --row-color: var(--color-01); --row-color-next: var(--color-02); --indent: 0; --form-indent: 40px; }
.sublines .sublines { --row-color: var(--color-02); --row-color-next: var(--color-03); --indent: calc(1 * var(--row-indent)); --form-indent: calc(-1 * var(--row-indent)); }
.sublines .sublines .sublines { --row-color: var(--color-03); --row-color-next: var(--color-04); --indent: calc(2 * var(--row-indent)); --form-indent: calc(-2 * var(--row-indent)); }
......@@ -682,6 +684,10 @@ li li { padding-left: var(--row-indent); }
padding: 0;
border: none;
padding-bottom: var(--axis-bottom-padding);
display: block;
}
.axis-row--background-wrapper {
display: inline-block;
background: linear-gradient(to bottom,
transparent var(--axis-horizontal-line-start),
......@@ -694,7 +700,7 @@ li li { padding-left: var(--row-indent); }
[data-collapsed="true"]>.axis-row [name="toggle"]:before { content: "◀"; }
[data-collapsed="true"][data-sublines="true"] > .axis-row > .axis-row--body {
[data-collapsed="true"][data-sublines="true"] > .axis-row > .axis-row--background-wrapper > .axis-row--body {
box-shadow: 1px 1px 0px var(--row-color-next);
border-right: 1px solid;
border-bottom: 1px solid;
......@@ -758,7 +764,7 @@ ol ol::after {
height: 100%;
}
.linked-node:hover > .axis-row > .axis-row--header:before {
.linked-node:hover > .axis-row > .axis-row--background-wrapper > .axis-row--header:before {
display: block;
content: "";
background: linear-gradient(to left,
......@@ -1155,7 +1161,7 @@ li + li .alt-symbol { display: none; }
position: absolute;
display: none;
top: -2px;
padding-left: 1.5em;
padding-left: 1em;
}
.axis-row:hover .axis-row--actions { display: inline-block; }
......@@ -1167,7 +1173,15 @@ li + li .alt-symbol { display: none; }
}
/* Exemptions for the first axis
========================================================================== */
#axis-wrapper { --row-color: var(--background-color-button); }
#axis-wrapper > ol > li.axis,
#axis-wrapper > ol > li > .axis-row > .axis-row--background-wrapper,
#axis-wrapper > ol > li > .axis-row > .axis-row--background-wrapper > .axis-row--body {
background: none;
}
/* Axis edit form
......
<header class="axis-row">
<section class="axis-row--header">
<span class="icon icon--handle"></span>
</section>
<% if (condition) { %>
<section class="condition">
<span class="label">
<% if (imperative) { %>! <% } %><%- condition %>
</span>
<section class="axis-row--background-wrapper">
<section class="axis-row--header">
<span class="icon icon--handle"></span>
</section>
<% } %>
<% if (actant) { %>
<section class="axis-row--actant">
<%- actant %></section>
<% } %>
<% if (condition) { %>
<section class="condition">
<span class="label">
<% if (imperative) { %>! <% } %><%- condition %>
</span>
</section>
<% } %>
<% if (actant) { %>
<section class="axis-row--actant">
<%- actant %></section>
<% } %>
<section class="axis-row--body" <% if (aspect) { %> data-aspect="<%- aspect %>"<% } %>>
<span class="axis-title"><%- title %></span>
<% if (hasIndications) { %>
<span class="indications">
<span class="icon icon--indications"></span>
<span class="full">
<% if (indications) { %>
<span class="indications-label"><%- t('Indications') %></span>
<%- indications %>
<% } %>
<section class="axis-row--body" <% if (aspect) { %> data-aspect="<%- aspect %>"<% } %>>
<span class="axis-title"><%- title %></span>
<% if (hasIndications) { %>
<span class="indications">
<span class="icon icon--indications"></span>
<span class="full">
<% if (indications) { %>
<span class="indications-label"><%- t('Indications') %></span>
<%- indications %>
<% } %>
<% if (commandement) { %>
<span class="indications-label"><%- t('Commandement') %>:</span>
<%- commandement %>
<% } %>
<% if (commandement) { %>
<span class="indications-label"><%- t('Commandement') %>:</span>
<%- commandement %>
<% } %>
<% if (destination) { %>
<span class="indications-label"><%- t('Destination') %>:</span>
<%- destination %>
<% } %>
<% if (destination) { %>
<span class="indications-label"><%- t('Destination') %>:</span>
<%- destination %>
<% } %>
<% if (code) { %>
<span class="indications-label"><%- t('Code') %>:</span>
<%- code %>
<% } %>
<% if (code) { %>
<span class="indications-label"><%- t('Code') %>:</span>
<%- code %>
<% } %>
</span>
</span>
<% } %>
<span class="axis-inline-title-form"></span>
</section>
<% if (adresse) { %>
<section class="axis-row--adresse">
<%- adresse %></section>
</section>
<% } %>
<% if (boucle) { %>
<span class="boucle option">
<span class="icon icon--repeat"></span>
<!-- <sup> -->
<% if (boucle.type === rangeType.exact) { %>
<%- boucle.value %>
<% } else if (boucle.type === rangeType.minimal) { %>
<%- boucle.value %>+
<% } else if (boucle.type === rangeType.range) { %>
<%- boucle.value[0] %>-<%- boucle.value[1] %>
<% } %>
<!-- </sup> -->
</span>
<% } %>
<span class="axis-inline-title-form"></span>
</section>
<% if (adresse) { %>
<section class="axis-row--adresse">
<%- adresse %></section>
<% if (attachment) { %>
<section class="attachment">
<a class="attachment--btn" href="#attachment">[<%- attachmentTitle %>]</a>
<div class="attachment--view"></div>
</section>
<% } %>
<% if (terme) { %>
<section class="terme">
<span class="label">
<%- terme %>
</span>
</section>
<% } %>
<% if (boucle) { %>
<span class="boucle option">
<span class="icon icon--repeat"></span>
<!-- <sup> -->
<% if (boucle.type === rangeType.exact) { %>
<%- boucle.value %>
<% } else if (boucle.type === rangeType.minimal) { %>
<%- boucle.value %>+
<% } else if (boucle.type === rangeType.range) { %>
<%- boucle.value[0] %>-<%- boucle.value[1] %>
<% } %>
<!-- </sup> -->
</span>
<% } %>
<% if (attachment) { %>
<section class="attachment">
<a class="attachment--btn" href="#attachment">[<%- attachmentTitle %>]</a>
<div class="attachment--view"></div>
</section>
<% } %>
<% if (terme) { %>
<section class="terme">
<span class="label">
<%- terme %>
</span>
</section>
<% } %>
<section class="axis-row--actions">
<% if (isLink) { %>
<button name="unlink"><%- t('rompre le lien') %></button>
......@@ -93,7 +94,7 @@
<!-- <button name="toggle"></button> -->
<% } %>
</section>
<form></form>
<form></form>
</header>
......
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