Started to implement Pierres layout changes.

playground/static/playground/css/styles.css

 @font-face {
     font-family: 'HKGrotesk';
-    /* font-family: sans; */
-    src: url("../fonts/HKGrotesk-SemiBold.woff");
-    /* src: url("../fonts/TsukurimashouMaruPS.otf"); */
+    src: url("../fonts/HKGrotesk-Medium.ttf");
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: 'HKGrotesk';
+    src: url("../fonts/HKGrotesk-SemiBold.ttf");
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: 'HKGrotesk';
+    src: url("../fonts/HKGrotesk-Bold.ttf");
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: 'HKGrotesk';
+    src: url("../fonts/HKGrotesk-Bold.ttf");
+    font-weight: bold;
 }
 
 a {
@@ -12,10 +29,15 @@ a {
     text-decoration-skip: ink;
 }
 
-body {
+body, button, input {
     font-family: 'HKGrotesk', sans-serif;
     font-size: 19px;
     line-height: 21px;
+    font-weight: 500;
+}
+
+button, submit, reset {
+    font-size: 80%;
 }
 
 .outer-wrapper {
@@ -107,8 +129,8 @@ body {
 /* Score */
 
 #score {
-    display: flex;
-    flex-direction: row;
+    /* display: flex; */
+    /* flex-direction: row; */
     box-sizing: border-box;
     outline: 0;
     height: calc(100vh - 60px);
@@ -126,30 +148,29 @@ body {
 
 #sidebar {
     position: relative;
-    overflow-y: auto;
-    width: 300px;
-    padding-left: 2em;
+    /* overflow-y: auto; */
+    /* width: 300px; */
+    /* padding-left: 2em; */
     font-size: 85%;
-    flex: auto 0 0;
+    /* flex: auto 0 0; */
 }
 
 #main-area {
     position: relative;
-    display: flex;
-    flex-direction: column;
-    flex: auto 1 1;
+    /* display: flex; */
+    /* flex-direction: column; */
+    /* flex: auto 1 1; */
 }
 
 #axis-wrapper {
     overflow: auto;
-    padding: 2em 0;
+    padding: 0;
     flex: 1;
 }
 
 #score h1 {
-    margin-bottom: 0.5em;
-    padding-bottom: 0.5em;
-    border-bottom: 2px solid;
+    /* margin-bottom: 0.5em; */
+    /* padding-bottom: 0.5em; */
     font-size: 2em;
     line-height: 1em;
 }
@@ -159,7 +180,7 @@ li.axis {
 }
 
 li li {
-    margin-left: 3em;
+    margin-left: 4.5em;
 }
 
 fieldset {
@@ -240,8 +261,9 @@ label .label-text {
 
 .axis-title {
     position: relative;
-    margin: 0.25em;
-    padding: 0.25em;
+    /* margin: 0.25em 0.25em 0.25em 0; */
+    /* padding: 0.25em 0.25em 0.25em 0; */
+    padding: .25em;
     border: 2px solid;
     outline: 0;
 }
@@ -353,11 +375,15 @@ label .label-text {
     right: 100%;
     /* Position it before the line, irregardless of the header width */
     white-space: nowrap;
-    font-size: 80%;
+    /* font-size: 80%; */
 }
 
-.header .handle, .header .prefix, .header .condition, .header .tag {
+/* .header .handle, .header .prefix, .header .condition, .header .tag {
     color: black;
+} */
+
+.tag {
+    font-weight: bold;
 }
 
 sub, sup {
@@ -427,70 +453,74 @@ sub {
     display: block;
 }
 
+ol ol {
+    border-left: 1px dotted lightgrey;
+}
+
 /* subaxis colors, according to the level of nesting */
 
-li .axis-title {
-    color: rgb(114, 147, 203);
+li .tag {
+    color: rgb(27, 112, 202);
 }
 
-li li .axis-title {
-    color: rgb(225, 151, 76);
+li li .tag {
+    color: rgb(254, 158, 5);
 }
 
-li li li .axis-title {
+li li li .tag {
     color: rgb(132, 186, 91);
 }
 
-li li li li .axis-title {
-    color: rgb(211, 94, 96);
+li li li li .tag {
+    color: rgb(202, 27, 27);
 }
 
-li li li li li .axis-title {
-    color: rgb(128, 133, 133);
+li li li li li .tag {
+    color: rgb(5, 194, 228);
 }
 
-li li li li li li .axis-title {
-    color: rgb(144, 103, 167);
+li li li li li li .tag {
+    color: rgb(191, 27, 202);
 }
 
-li li li li li li li .axis-title {
+li li li li li li li .tag {
     color: rgb(171, 104, 87);
 }
 
-li li li li li li li li .axis-title {
+li li li li li li li li .tag {
     color: rgb(204, 194, 16);
 }
 
-li li li li li li li li li .axis-title {
+li li li li li li li li li .tag {
     color: rgb(252, 151, 218);
 }
 
-li li li li li li li li li li .axis-title {
+li li li li li li li li li li .tag {
     color: rgb(87, 204, 188);
 }
 
-li li li li li li li li li li li .axis-title {
+li li li li li li li li li li li .tag {
     color: rgb(235, 151, 55);
 }
 
-li li li li li li li li li li li li .axis-title {
+li li li li li li li li li li li li .tag {
     color: rgb(181, 221, 162);
 }
 
-li li li li li li li li li li li li li .axis-title {
+li li li li li li li li li li li li li .tag {
     color: rgb(211, 86, 149);
 }
 
-li li li li li li li li li li li li li li .axis-title {
+li li li li li li li li li li li li li li .tag {
     color: rgb(224, 206, 40);
 }
 
 li form {
-    color: rgb(114, 147, 203);
+    color: rgb(27, 112, 202);
 }
 
 li li form {
-    color: rgb(225, 151, 76);
+    color: rgb(254, 158, 5);
 }
 
 li li li form {
@@ -498,15 +528,15 @@ li li li form {
 }
 
 li li li li form {
-    color: rgb(211, 94, 96);
+    color: rgb(202, 27, 27);
 }
 
 li li li li li form {
-    color: rgb(128, 133, 133);
+    color: rgb(5, 194, 228);
 }
 
 li li li li li li form {
-    color: rgb(144, 103, 167);
+    color: rgb(191, 27, 202);
 }
 
 li li li li li li li form {
@@ -683,14 +713,21 @@ section.hidden {
 }
 
 .expand-level {
-    padding-bottom: 2em;
+    position: sticky;
+    top: 0;
     white-space: nowrap;
+    z-index: 1;
 }
 
 .expand-level-option {
-    position: absolute;
-    width: 3em;
-    height: 1.5em;
+    display: inline-block;
+    width: 4.25em;
+    margin-right: .25em;
+    height: .5em;
+    padding-bottom: 1em;
+    background-clip: content-box;
+    border-left: 1px dotted lightgrey;
+    position: relative;
 }
 
 .expand-level-option span {
@@ -698,134 +735,184 @@ section.hidden {
 }
 
 .expand-level-option[data-selected="true"], .expand-level-option[data-selected="true"]:hover {
-    z-index: 1;
-    outline: 2px solid black;
+    border-color: initial;
+}
+
+.expand-level-option[data-selected="true"]:before {
+    content: "·";
+    color: white;
+    display: inline-block;
+    position: absolute;
+    top: -.25em;
+    left: .1em;
+    font-weight: bold;
 }
 
 .expand-level-option:hover {
     z-index: 2;
-    outline: 2px solid grey;
 }
 
 .expand-level-option:nth-child(1) {
-    background-color: rgb(114, 147, 203);
+    background-color: rgb(27, 112, 202);
+    color: rgb(27, 112, 202);
 }
 
 .expand-level-option:nth-child(2) {
-    margin-left: 3em;
-    background-color: rgb(225, 151, 76);
+    background-color: rgb(254, 158, 5);
+    color: rgb(254, 158, 5);
 }
 
 .expand-level-option:nth-child(3) {
-    margin-left: 6em;
     background-color: rgb(132, 186, 91);
+    color: rgb(132, 186, 91);
 }
 
 .expand-level-option:nth-child(4) {
-    margin-left: 9em;
-    background-color: rgb(211, 94, 96);
+    background-color: rgb(202, 27, 27);
+    color: rgb(202, 27, 27);
 }
 
 .expand-level-option:nth-child(5) {
-    margin-left: 12em;
-    background-color: rgb(128, 133, 133);
+    background-color: rgb(5, 194, 228);
+    color: rgb(5, 194, 228);
 }
 
 .expand-level-option:nth-child(6) {
-    margin-left: 15em;
-    background-color: rgb(144, 103, 167);
+    background-color: rgb(191, 27, 202);
+    color: rgb(191, 27, 202);
 }
 
 .expand-level-option:nth-child(7) {
-    margin-left: 18em;
     background-color: rgb(171, 104, 87);
+    color: rgb(171, 104, 87);
 }
 
 .expand-level-option:nth-child(8) {
-    margin-left: 21em;
     background-color: rgb(204, 194, 16);
+    color: rgb(204, 194, 16);
 }
 
 .expand-level-option:nth-child(9) {
-    margin-left: 24em;
     background-color: rgb(252, 151, 218);
+    color: rgb(252, 151, 218);
 }
 
 .expand-level-option:nth-child(10) {
-    margin-left: 27em;
     background-color: rgb(87, 204, 188);
+    color: rgb(87, 204, 188);
 }
 
 .expand-level-option:nth-child(11) {
-    margin-left: 30em;
     background-color: rgb(235, 151, 55);
+    color: rgb(235, 151, 55);
 }
 
 .expand-level-option:nth-child(12) {
-    margin-left: 33em;
     background-color: rgb(181, 221, 162);
+    color: rgb(181, 221, 162);
 }
 
 .expand-level-option:nth-child(13) {
-    margin-left: 36em;
     background-color: rgb(211, 86, 149);
+    color: rgb(211, 86, 149);
 }
 
 .expand-level-option:nth-child(14) {
-    margin-left: 39em;
     background-color: rgb(224, 206, 40);
+    color: rgb(224, 206, 40);
+}
+
+.score-meta {
+    display: none;
+    column-width: 15em;
+    padding-bottom: 2em;
+    padding-top: 1em;
 }
 
 .score-meta dt {
     margin-top: .5em;
     font-weight: bold;
+    break-after: avoid;
 }
 
 .score-meta dd {
     margin-left: 0em;
+    break-before: avoid;
 }
 
-.score-meta .extended {
-    display: none;
-}
-
-.score-meta[data-expanded="true"] .extended {
+#sidebar[data-expanded="true"] .score-meta {
     display: block;
 }
 
-.score-meta-expand-toggle:hover {
-    color: grey;
-    /** @fixme */
+
+#sidebar h1#title:after {
+    font-size: 50%;
+    display: inline-block;
+    padding-left: 10px;
+    content: "◀";
+    position: relative;
+    top: -3px;
 }
 
-.score-meta-expand-toggle:after {
-    display: block;
-    width: 100%;
-    padding-bottom: 1em;
+#sidebar[data-expanded="true"] h1#title:after {
     content: "▼";
-    text-align: center;
-    border-top: 2px solid;
-    border-bottom: 0px;
 }
 
-.score-meta[data-expanded="true"] .score-meta-expand-toggle:after {
-    content: "▲";
+.score-actions {
+    position: absolute;
+    top: 1.25em;
+    right: 0
 }
 
-.score-actions {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
-    padding-bottom: 10px;
+.score-actions button {
+    background: none;
+    text-decoration: underline;
+    border: 1px solid transparent;
+    font-weight: bold;
+    padding: .3em .75em .3em .75em;
 }
 
-.score-actions button, .sscore-actions a {
+.score-actions button:hover {
+    border: 1px solid lightgray;
+}
+
+.score-actions button:active {
+    border: 1px solid lightgray;
+    box-shadow: inset 0px 0px 1px lightgray;
+    background: rgb(240, 240, 240);
+}
+
+.score-actions button:disabled:hover {
+    background: transparent;
+    border: 1px solid transparent;
+}
+
+.axis-actions button {
+    font-size: 65%;
+    border: 1px solid rgb(240, 240, 240);
+    padding: .25em .75em;
+    background: transparent;
+    margin-top: .15em;
+}
+
+.axis-actions button:hover {
+    border: 1px solid lightgray;
+}
+
+.axis-actions button:active {
+    border: 1px solid lightgray;
+    box-shadow: inset 0px 0px 1px lightgray;
+    background: rgb(240, 240, 240);
+}
+
+/* 
+.score-actions button, .score-actions a {
     flex: auto 1 1;
 }
 
 .score-actions button:nth-child(n+2) {
     margin-left: .5em;
-}
+} */
 
 #index-link {
     position: absolute;
@@ -833,6 +920,9 @@ section.hidden {
     padding: 2em;
 }
 
-.score-edit {
-    margin: 1em 0 1em 0;
+.axis[data-sublines="true"][data-collapsed="true"] .axis-title-edit:after {
+    color: rgb(196, 196, 196);
+    content: "⋯";
+    display: inline-block;
+    padding-left: .25em;
 }
\ No newline at end of file

playground/static/playground/js/views.js

@@ -861,7 +861,7 @@ window.W = window.W || {};
             //show mainline nodes if they are present
             if (sublines.length) {
                 var sublinesView = new W.TreeView({ collection: sublines });
-
+                this.$el.attr("data-sublines", "true");
                 this.showChildView('tree', sublinesView);
             }
         }
@@ -1026,7 +1026,9 @@ window.W = window.W || {};
             'save': '.save',
             'edit': '.edit',
             'expandLevel': '[name="expand-level"]',
-            'scoreMeta': '.score-meta'
+            'scoreMeta': '.score-meta',
+            'title': '#title',
+            'sidebar': '#sidebar'
         },
 
         events: {
@@ -1038,7 +1040,7 @@ window.W = window.W || {};
             'click .fold': 'fold',
             'change @ui.expandLevel': 'expandUntill',
             'click [data-name="export"]': 'downloadAsJSON',
-            'click .score-meta-expand-toggle': 'toggleMeta'
+            'click @ui.title': 'toggleMeta'
         },
 
         childViewEvents: {
@@ -1222,7 +1224,7 @@ window.W = window.W || {};
 
         toggleMeta: function () {
             this.metaExpanded = !this.metaExpanded;
-            this.ui.scoreMeta.attr('data-expanded', this.metaExpanded);
+            this.ui.sidebar.attr('data-expanded', this.metaExpanded);
         }
     });
 
@@ -1516,7 +1518,7 @@ window.W = window.W || {};
             'click @ui.toggle': 'toggle',
         },
 
-        onToggle: function() {
+        onToggle: function () {
             this.$el.toggleClass('main-header--collapsed');
         }
     });

playground/templates/playground/underscore/node-vue.mtpl

@@ -30,7 +30,7 @@
         <% } %>
 
     <!-- More visible aleternative, bullet: &#8729; -->
-    <span class="axis-title-edit"><%- title %><% if (!hasSublines) { %>.<% } %></span>
+    <span class="axis-title-edit"><%- title %><!-- <% if (!hasSublines) { %>.<% } %> --></span>
     
     <span class="axis-inline-title-form"></span>
 

playground/templates/playground/underscore/score-vue.mtpl

-<div id="main-area">
-        <div id="expand-level-slider"></div>
-        <div id="axis-wrapper">
-        <ol></ol>
-        </div>
-</div>
-
-
-<header id="sidebar">
+<header id="sidebar" data-expanded="<%- metaExpanded %>">
     <div class="score-actions">
         <button class="save" data-label-progress="Saving..." data-label="Enregistrer" <% if (!hasChanges) { %>disabled<% } %>>Enregistrer</button>
         <button class="duplicate">Dupliquer</button>
         <button class="delete">Supprimer</button>
+        <button class="edit score-edit">Éditer</button>
+        <button data-name="export">Export</button>
     </div>
 
     <h1 id="title"><%- title %></h1>
 
-    <dl class="score-meta" data-expanded="<%- metaExpanded %>">
+    <dl class="score-meta">
         <% if (presentation) { %>
         <dt>Présentation</dt>
         <dd><%- presentation %></dd>
@@ -99,12 +93,16 @@
         <dt class="extended">Modifié le</dt>
         <dd class="extended"><%- formatTimestamp(updated_at) %></dd>
 
-        <dt class="score-meta-expand-toggle"></dt>
+        <!-- <dt class="score-meta-expand-toggle"></dt> -->
     </dl>
 
-    <button class="edit score-edit">Éditer</button>
-    <button data-name="export">Export</button>
 
     <form></form>
 </header>
 
+<div id="main-area">
+        <div id="expand-level-slider"></div>
+        <div id="axis-wrapper">