Commit 13ff76d8 authored by gijs's avatar gijs
Browse files

Started to implement Pierres layout changes.

parent 20a8ae8c
@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
......@@ -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');
}
});
......
......@@ -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>
......
<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">