Commit d631633f authored by gijs's avatar gijs

Better attachment display, supporting audio

parent 61a29a60
......@@ -26,7 +26,7 @@
--row-indent: 60px;
--axis-line-offset: 30px;
--axis-line-width: 2px;
--axis-bottom-padding: .4em;
--axis-bottom-padding: 1em;
--axis-tag-size: 1.8em;
/**
......@@ -44,6 +44,13 @@
* Position of the tag bubble. Relative to the position of the vertical line
*/
--axis-metadata-offset: calc(var(--axis-vertical-line-middle) + var(--axis-tag-size) * .5);
--font-size: 12pt;
--line-height: 18pt;
--font-size--small: 75%;
--dash-size: .3em;
}
......@@ -88,8 +95,8 @@
body {
font-family: 'GothicA1', sans-serif;
font-size: 13pt;
line-height: 21px;
font-size: var(--font-size);
line-height: var(--line-height);
font-weight: 500;
background-color: var(--background-color);
color: var(--text-color);
......@@ -150,7 +157,7 @@ textarea {
button, input, select, option, textarea {
font-family: 'GothicA1', sans-serif;
font-size: inherit;
line-height: 21px;
line-height: inherit;
font-weight: 500;
}
......@@ -655,7 +662,7 @@ section.hidden { display: none; }
/* overflow: auto; */
padding: 0;
flex: 1;
font-size: 11pt;
font-size: var(--font-size);
}
......@@ -810,7 +817,8 @@ ol ol::after {
display: inline-block;
vertical-align: middle;
background-color: var(--row-color);
padding: 8px 5px 2px 5px;
padding: .25em .5em;
text-transform: lowercase;
}
.axis-row--body {
......@@ -870,8 +878,8 @@ ol ol::after {
right: 0;
font-size: 120%;
text-align: center;
padding-right: 50%;
padding-top: .25em;
padding-right: 70%;
padding-top: .35em;
/* Keep visible while it crosses the metadata, z-index 1 */
z-index: 2;
}
......@@ -914,14 +922,37 @@ ol ol > li:first-child {
* Stretch alternative wrapper to full height
* make it flex to allow vertical spacing.
*/
.alternative-wrapper {
align-self: center;
display: flex;
position: absolute;
top: 0;
bottom: 0;
background: repeating-linear-gradient(to bottom, var(--background-color) 0, var(--background-color) .25em, transparent .25em, transparent .5em);
}
/*
Dashed line
.alternative-wrapper {
align-self: center;
display: flex;
position: absolute;
top: 0;
bottom: 0;
background: repeating-linear-gradient(to bottom, var(--background-color) 0, var(--background-color) .25em, transparent .25em, transparent .5em);
left: -2px;
width: 3px;
z-index: 1;
}
.tag {
z-index: 2;
}
*/
/**
* Vertically center the alternative
*/
......@@ -955,11 +986,12 @@ ol ol > li:first-child {
position: sticky;
top: 3em;
right: calc(100% - .75em);
font-size: 80%;
background-color: var(--row-color);
font-size: var(--font-size--small);
line-height: 1.5;
border: 2px solid var(--row-color);
background-color: var(--background-color);
font-weight: bold;
padding: 0.1em .8em 0 .8em;
z-index: 9;
padding: 0em .8em 0 .8em;
color: white;
border-radius: .8em/50%;
z-index: 1;
......@@ -1019,7 +1051,7 @@ li + li .alt-symbol { display: none; }
}
.axis-title {
font-size: 150%;
font-size: 140%;
text-transform: lowercase;
/* vertical-align: bottom; */
position: relative;
......@@ -1033,14 +1065,8 @@ li + li .alt-symbol { display: none; }
border: none !important;
}
.attachment--view {
position: absolute;
z-index: 3;
}
/* axe modulé : le nom de l’axe est souligné */
[data-module="true"]>.axis-row>.axis-row--body>.axis-title {
[data-module="true"] > .axis-row > .axis-row--background-wrapper > .axis-row--body > .axis-title {
/* text-decoration: underline; */
font-style: italic;
/* color: var(--background-color); */
......@@ -1050,7 +1076,7 @@ li + li .alt-symbol { display: none; }
text-decoration: line-through;
} */
[data-contingent="true"]>.axis-row>.axis-row--body {
[data-contingent="true"] > .axis-row > .axis-row--background-wrapper > .axis-row--body {
/* position: absolute;
top: 50%;
left: 0;
......@@ -1091,11 +1117,27 @@ li + li .alt-symbol { display: none; }
.option { margin-left: .5em; }
/**
* Boucle
*/
.boucle {
border: 2px solid var(--row-color);
border-radius: .75em/50%;
padding: .4em .75em;
padding: .4em .75em .4em 1em;
background: var(--background-color);
font-size: var(--font-size--small);
font-weight: bold;
position: relative;
}
.boucle::before {
content: "<";
position: absolute;
top: -.8em;
color: var(--row-color);
font-size: 125%;
font-weight: bold;
left: .25em;
}
/* .options { font-size: .85em; } */
......@@ -1117,8 +1159,6 @@ li + li .alt-symbol { display: none; }
/* .terme .full { font-size: 133%; } */
/* .condition, */
.indications { position: relative; }
/* .condition .full, */
.indications .full {
......@@ -1128,9 +1168,9 @@ li + li .alt-symbol { display: none; }
max-width: 500px;
padding: .75em;
color: white;
border: 2px solid var(--background-color);
background: var(--row-color);
transform: translate(-50%, -.5em);
top: 0;
padding-left: 1em;
}
/* .condition:hover .full, */
......@@ -1188,6 +1228,72 @@ li + li .alt-symbol { display: none; }
right: 0;
}
/**
* Attachment
*/
.attachment--view {
display: inline-block;
}
.attachment--view a {
text-decoration: none;
}
.attachment--view--audio .audio--timecode {
font-size: 80%;
}
.attachment--view--audio audio,
.attachment--view--audio button,
.attachment--view--audio .audio--timecode {
display: none
}
.attachment--view--audio[data-playing="true"] .button--pause,
.attachment--view--audio[data-playing="false"] .button--play,
.attachment--view--audio[data-playing="true"] .audio--timecode {
display: inline-block;
}
.attachment--view--image .attachment--image--full {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
flex-direction: column;
z-index: 4;
background-color: var(--background-color);
}
.attachment--image--full--title {
flex: 0 0 auto;
padding: .5em;
}
.attachment--image--full--image {
flex: 1 0 auto;
text-align: center;
}
.attachment--view--image[data-opened="true"] .attachment--image--full {
display: flex;
}
.attachment--image--full--image img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.attachment--image--full .btn--close {
position: absolute;
top: 0;
right: 0;
}
/* Exemptions for the first axis
========================================================================== */
......@@ -1340,14 +1446,28 @@ li .icon--tag { color: white } */
* Vertical lines are drawn by the .axis li's, last child draws also a vertical gradient to cover
* the tail of the axis
*/
.axis {
/* .axis {
background: linear-gradient(to right,
transparent var(--axis-vertical-line-start),
var(--row-color) var(--axis-vertical-line-start),
var(--row-color) var(--axis-vertical-line-end),
transparent var(--axis-vertical-line-end));
}
} */
/*
background: repeating-linear-gradient(to bottom, var(--background-color) 0, var(--background-color) .25em, transparent .25em, transparent .5em);
*/
/*
[data-alternative]:not([data-alternative=""]) .axis {
background: repeating-linear-gradient(to bottom, var(--background-color) 0, var(--background-color) .25em, transparent .25em, transparent .5em),
linear-gradient(to right,
transparent var(--axis-vertical-line-start),
var(--row-color) var(--axis-vertical-line-start),
var(--row-color) var(--axis-vertical-line-end),
transparent var(--axis-vertical-line-end));
} */
/*
.axis:last-child {
background: linear-gradient(to bottom,
transparent var(--axis-horizontal-line-middle),
......@@ -1358,14 +1478,41 @@ li .icon--tag { color: white } */
var(--row-color) var(--axis-vertical-line-start),
var(--row-color) var(--axis-vertical-line-end),
transparent var(--axis-vertical-line-end));
} */
.axis:last-child {
background: linear-gradient(to bottom,
transparent var(--axis-horizontal-line-middle),
var(--background-color) var(--axis-horizontal-line-middle)
);
}
ol {
background: linear-gradient(to right,
transparent var(--axis-vertical-line-start),
var(--row-color) var(--axis-vertical-line-start),
var(--row-color) var(--axis-vertical-line-end),
transparent var(--axis-vertical-line-end));
}
[data-alternative]:not([data-alternative=""]) > ol {
background: repeating-linear-gradient(to bottom,
var(--background-color) 0,
var(--background-color) var(--dash-size),
transparent var(--dash-size),
transparent calc(2 * var(--dash-size))),
linear-gradient(to right,
transparent var(--axis-vertical-line-start),
var(--row-color) var(--axis-vertical-line-start),
var(--row-color) var(--axis-vertical-line-end),
transparent var(--axis-vertical-line-end));
}
#axis-wrapper > ol > li > header .axis-row--header{
background: none;
}
.axis:nth-child(n + 2) .icon--tag { display: none; }
.axis.placeholder:before {
content: "▶";
color: var(--row-color);
......
This diff is collapsed.
......@@ -22,8 +22,16 @@
{% include "playground/underscore/applied-filters.mtpl" %}
</script>
<script id="attachment-template" type="text/template">
{% include "playground/underscore/attachment.mtpl" %}
<script id="attachment-audio-template" type="text/template">
{% include "playground/underscore/node-attachment-audio.mtpl" %}
</script>
<script id="attachment-download-template" type="text/template">
{% include "playground/underscore/node-attachment-download.mtpl" %}
</script>
<script id="attachment-image-template" type="text/template">
{% include "playground/underscore/node-attachment-image.mtpl" %}
</script>
<script id="base-template" type="text/template">
......
<label><span class="label-text"><%- t('Titre') %></span><input type="text" name="title" ></label>
<label><span class="label-text"><%- t('Fiche') %></span><input type="file" name="file" ></label>
\ No newline at end of file
......@@ -20,13 +20,13 @@
</select>
</label>
<section data-range-type="<%= rangeType.exact %>" class="type-fields inline">
<input type="number" name="exact" min="2" class="small-number" value="<%= (type == rangeType.exact) ? value : 2 %>" />
<input type="number" name="exact" min="1" class="small-number" value="<%= (type == rangeType.exact) ? value : 1 %>" />
</section>
<section data-range-type="<%= rangeType.minimal %>" class="type-fields inline">
<input type="number" name="minimal" min="2" class="small-number" value="<%= (type == rangeType.minimal) ? value : 2 %>" />
<input type="number" name="minimal" min="1" class="small-number" value="<%= (type == rangeType.minimal) ? value : 1 %>" />
</section>
<section data-range-type="<%= rangeType.range %>" class="type-fields inline">
<input type="number" name="range-min" min="2" class="small-number" value="<%= (type == rangeType.range) ? value[0] : 2 %>" /> et
<input type="number" name="range-max" min="3" class="small-number" value="<%= (type == rangeType.range) ? value[1] : 3 %>" />
<input type="number" name="range-min" min="1" class="small-number" value="<%= (type == rangeType.range) ? value[0] : 1 %>" /> et
<input type="number" name="range-max" min="2" class="small-number" value="<%= (type == rangeType.range) ? value[1] : 2 %>" />
</section>
fois
[<%= title %>
<button class="button--play">▶</button>
<button class="button--pause">⏸</button>
<section class="audio--timecode">
<span class="audio--timecode--current">-</span>
/
<span class="audio--timecode--duration">-</span>
</section>]
<audio src="<%= attachment %>" />
\ No newline at end of file
<a href="<%= attachment %>">[<%= title %>]</a>
\ No newline at end of file
<a href="<%= attachment %>">[<%= title %>]</a>
<div class="attachment--image--full">
<div class="attachment--image--full--title">
<h6><%= title %></h6>
<button class="btn--close">x</button>
</div>
<div class="attachment--image--full--image">
<img src="<%= attachment %>" />
</div>
</div>
\ No newline at end of file
......@@ -19,12 +19,14 @@
<section class="axis-row--body" <% if (aspect) { %> data-aspect="<%- aspect %>"<% } %>>
<span class="axis-title"><%- title %></span>
<% if (attachment) { %>
<section class="attachment--view"></section>
<% } %>
<% if (hasIndications) { %>
<span class="indications">
<span class="icon icon--indications"></span>
<span class="full">
<% if (indications) { %>
<span class="indications-label"><%- t('Indications') %></span>
<%- indications %>
<% } %>
......@@ -56,7 +58,6 @@
<% if (boucle) { %>
<span class="boucle option">
<span class="icon icon--repeat"></span>
<!-- <sup> -->
<% if (boucle.type === rangeType.exact) { %>
<%- boucle.value %>
......@@ -69,12 +70,6 @@
</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">
......@@ -87,7 +82,6 @@
<% if (isLink) { %>
<button name="unlink"><%- t('rompre le lien') %></button>
<% } else { %>
<button name="edit" title="Modifier cet axe"><%- t('éditer') %></button>
<button name="add" title="Ajoute un sous-axe">+</button>
<% } %>
<button name="delete" title="Supprimer cet axe (et tous ses sous-axes)">x</button>
......
......@@ -5,7 +5,7 @@
<button class="save" data-label-progress="<%- t('Enregistrer…') %>" data-label="<%- t('Enregistrer') %>" <% if (!hasChanges) { %>disabled<% } %>><%- t('Enregistrer') %></button>
<button class="duplicate"><%- t('Dupliquer') %></button>
<button class="delete"><%- t('Supprimer') %></button>
<button data-name="export"><%- t('Export') %></button>
<!--<button data-name="export"><%- t('Export') %></button>-->
</div>
<h1 id="title"><%- title %></h1>
......
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