Commit 1e952af9 authored by alexandre's avatar alexandre

Fix score header layout

parent 477e53e9
......@@ -12,8 +12,8 @@
--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-04: rgb(91,184,8);/*#008890;*/ /* rgb(160, 168, 13); */
--color-03: 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); */
......@@ -23,7 +23,7 @@
--color-11: rgb(200,41,107);/*#b026bc;*/
--color-12: rgb(171,29,255);/*#871dff;*/
--row-indent: 50px;
--row-indent: 75px;
--axis-line-offset: 25px;
--axis-line-width: 2px;
--axis-bottom-padding: 1em;
......@@ -384,7 +384,7 @@ section.hidden { display: none; }
#score article {
padding: 30px;
/* padding: 0 30px; */
flex: 1 0;
overflow: auto;
}
......@@ -447,36 +447,32 @@ section.hidden { display: none; }
}
#sidebar {
position: relative;
position: sticky;
top: 0;
left: 0;
width: 100%;
font-size: 85%;
/* background: linear-gradient(to bottom, var(--background-color) 90%, transparent 100%); */
background: var(--background-color);
/* background-color: red; */
z-index: 999;
width: 100%;
display: flex;
padding: 30px;
box-sizing: border-box;
height: 5.6rem;
}
#score h1 {
font-size: 2em;
line-height: 1em;
}
/*
#sidebar h1#title:after {
font-size: 50%;
display: inline-block;
padding-left: 10px;
content: "◀";
position: relative;
top: -3px;
}
#sidebar[data-expanded="true"] h1#title:after { content: "▼"; } */
flex: 1;
.score-meta dt {
margin-top: .5em;
font-weight: bold;
break-after: avoid;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.score-meta dd {
margin-left: 0em;
break-before: avoid;
}
/*
#permissions { display: none; }
......@@ -501,12 +497,17 @@ section.hidden { display: none; }
/* Score actions
========================================================================== */
.score-actions {
position: absolute;
top: 1.25em;
right: 0;
z-index: 3;
display: inline-block;
}
/* .score-actions { */
/* position: absolute; */
/* top: 1.25em; */
/* right: 0; */
/* z-index: 3; */
/* } */
/*
.score-actions button {
background: none;
......@@ -561,7 +562,7 @@ section.hidden { display: none; }
/* Score main area
========================================================================== */
#main-area { position: relative; }
#main-area { position: relative; padding: 0 30px; box-sizing: border-box; }
......@@ -572,15 +573,17 @@ section.hidden { display: none; }
.expand-level {
position: sticky;
top: 0.5em;
top: 5.6rem;
margin-bottom: 1em;
white-space: nowrap;
z-index: 1;
line-height: 0;
}
.expand-level-option {
display: inline-block;
width: var(--row-indent);
height: .75em;
height: 1.5em;
position: relative;
}
......@@ -988,7 +991,7 @@ ol ol > li:first-child {
padding-top: 4px;
border-radius: calc(var(--axis-tag-size) / 2);
position: sticky;
top: .25em;
top: 5.75em;
text-align: center;
z-index: 1;
margin-left: -50%;
......@@ -1006,7 +1009,7 @@ ol ol > li:first-child {
[data-alternative] > .metadata .alternative {
display: inline-block;
position: sticky;
top: 3em;
top: 10.2em;
right: calc(100% - .75em);
font-size: var(--font-size--small);
line-height: 1.5;
......@@ -1060,6 +1063,7 @@ li + li .alt-symbol { display: none; }
/* .view_tag { color: black; } */
/* is it still used? */
.icon--tag {
text-align: center;
background-color: var(--row-color);
......@@ -1859,25 +1863,38 @@ ol {
/* inline metadata */
/* publié le */
/* modifié le */
.score-meta dt {
/* font-weight: 500!important; */
.score-meta__term {
display: inline-block;
margin-top: .5em;
font-weight: bold;
break-after: avoid;
}
.score-meta dt::after {
.score-meta__term::after {
content: " :";
}
.score-meta dd {
display: inline;
margin: 0;
margin-left: 0em;
break-before: avoid;
}
.score-meta dd:after{
display: block;
content: '';
}
.score-meta__term--hidden { display: none; }
.score-meta__term--inline { font-weight: inherit; }
.score-meta__term--inline::after { content: " "; }
.score-meta__tag-item { display: inline; margin-right: 1em; }
#permissions,
.score-meta + .score-meta {
border-top: 2px solid white;
......
<article>
<header id="sidebar">
<h1 id="title"><%- title %></h1>
<div class="score-actions">
<button class="save" data-label-progress="<%- t('Enregistrer…') %>" data-label="<%- t('Enregistrer') %>" <% if (!hasChanges) { %>disabled<% } %>><%- t('Enregistrer') %></button>
......@@ -8,8 +9,6 @@
<!--<button data-name="export"><%- t('Export') %></button>-->
</div>
<h1 id="title"><%- title %></h1>
</header>
<div id="main-area">
......@@ -38,16 +37,18 @@
<dl class="score-meta">
<!-- Extended fields -->
<% if (performance_author && (score_type === 1 || score_type === 3)) { %>
<dt class="extended"><%- t('Auteur de la performance') %></dt>
<dd class="extended"><%- performance_author %></dd>
<dt class="score-meta__term"><%- t('Auteur de la performance') %></dt>
<dd><%- performance_author %></dd>
<% } %>
<% if (score_author) { %>
<dt class="extended"><%- t('Auteur de la partition') %></dt>
<dd class="extended"><%- score_author %></dd>
<dt class="score-meta__term"><%- t('Auteur de la partition') %></dt>
<dd><%- score_author %></dd>
<% } %>
<% if (score_type) { %>
<dt class="extended"><%- t('Type de partition') %></dt>
<dd class="extended">
<dt class="score-meta__term"><%- t('Type de partition') %></dt>
<dd>
<% switch (score_type) {
case 1:
%>
......@@ -69,8 +70,8 @@
<% } %>
<% if (effectif && effectif !== "") { %>
<dt class="extended"><%- t('Effectif') %></dt>
<dd class="extended">
<dt class="score-meta__term"><%- t('Effectif') %></dt>
<dd>
<% if (effectif && effectif.type === rangeType.exact) { %>
<%- effectif.value %> <%- (effectif.value > 1) ? t('performeurs') : t('performeur') %>
<% } else if (effectif && effectif.type === rangeType.minimal) { %>
......@@ -84,35 +85,35 @@
<% } %>
<% if (duration) { %>
<dt class="extended"><%- t('Durée') %></dt>
<dd class="extended"><%- duration %></dd>
<dt class="score-meta__term"><%- t('Durée') %></dt>
<dd><%- duration %></dd>
<% } %>
<% if (tags && tags.length) { %>
<dt class="extended"><%- t('Tags') %></dt>
<dd class="extended">
<dt class="score-meta__term score-meta__term--hidden"><%- t('Tags') %></dt>
<dd>
<ul>
<%
tag_list = tags;
for (var i=0; i < tag_list.length; i++) { %>
<li><%- tag_list[i] %></li>
<% for (var i=0; i < tags.length; i++) { %>
<li class="score-meta__tag-item">#<%- tags[i] %></li>
<% } %>
</ul>
</dd>
<% } %>
<!--
<% if (genre) { %>
<dt class="extended"><%- t('Genre') %></dt>
<dd class="extended"><%- genre %></dd>
<dt><%- t('Genre') %></dt>
<dd><%- genre %></dd>
<% } %> -->
<% if (language) { %>
<dt class="extended"><%- t('Langue') %></dt>
<dd class="extended"><%- language %></dd>
<dt class="score-meta__term score-meta__term--hidden"><%- t('Langue') %></dt>
<dd><%- language %></dd>
<% } %>
<dt class="extended inline-dt"><%- t('Publié le') %></dt>
<dd class="extended inline-dd"><%- formatTimestamp(created_at) %></dd>
<dt class="extended inline-dt"><%- t('Modifié le') %></dt>
<dd class="extended inline-dd"><%- formatTimestamp(updated_at) %></dd>
<dt class="score-meta__term score-meta__term--inline"><%- t('Publié le') %></dt>
<dd><%- formatTimestamp(created_at) %></dd>
<dt class="score-meta__term score-meta__term--inline"><%- t('Modifié le') %></dt>
<dd><%- formatTimestamp(updated_at) %></dd>
<!-- <dt class="score-meta-expand-toggle"></dt> -->
</dl>
......
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