Fix a few presentational things + translations

playground/static/playground/css/styles.css

@@ -46,7 +46,7 @@
     --axis-metadata-offset: calc(var(--axis-vertical-line-middle) + var(--axis-tag-size) * .5);
 
     --font-size: 15px;
-    --line-height: 1.4;
+    --line-height: 21px;
 
     --font-size--bigger: 1.44rem;
     --font-size--small: 0.833rem;
@@ -369,6 +369,10 @@ section.hidden { display: none; }
 
 .create__form--inactive { display: none; } 
 
+.menu--primary .menu__item {
+    margin-bottom: calc(var(--line-height) / 2);
+}
+
 .menu--inline .menu__item {
     display: inline;
     margin-right: 1em;
@@ -396,15 +400,29 @@ section.hidden { display: none; }
    About page
    ========================================================================== */
 
-.body-text p + p,
-.body-text p + ul,
-.body-text ul + p { margin-top: 21px; }
+.body-text h1 {
+    font-weight: bold; 
+    font-size: var(--font-size--bigger);
+    margin-bottom: var(--line-height);
+}
+
+.body-text h2 {
+    font-weight: bold; 
+    margin-bottom: var(--line-height);
+}
+
+
+.body-text strong { font-weight: bold; }
+
+.body-text em { font-style: italic; }
+
+.body-text :matches(p, ul, h2) + :matches(p, ul, h2) { margin-top: var(--line-height); }
 
 .body-text li:before { content: "- "; }
 
 .body-text ul { margin-left: 2em; }
 
-.body-text--about { max-width: 35em; }
+.body-text--about { max-width: 45em; }
 
 
 
@@ -1039,7 +1057,7 @@ li + li .alt-symbol { display: none; }
 
 
 [data-alternative="1"] > .metadata > .metadata__wrapper > .tag {
-  display: none;
+    visibility: hidden;
 }
 
 .line__title {
@@ -1057,14 +1075,29 @@ li + li .alt-symbol { display: none; }
     border: none !important;
 }
 
-/* axe modulé : le nom de l’axe est souligné */
+[data-module="true"] > .axis-row > .axis-row--background-wrapper > .line__body {
+  /* transform: skew(-10deg); */
+}
+
 [data-module="true"] > .axis-row > .axis-row--background-wrapper > .line__body > .line__title {
-  font-style: italic;
+  /* font-style: italic; */
+    /* font-weight: bolder; */
+  color: var(--background-color);
+  /* letter-spacing: 3px; */
+  /* text-decoration: underline wavy; */
+  /* display: inline-block; */
+  /* transform: skew(10deg); */
 }
 
-[data-alternative] > ol > .axis > .axis-row > .axis-row--background-wrapper > .line__body,
-[data-contingent="true"] > .axis-row > .axis-row--background-wrapper > .line__body {
-  background: repeating-linear-gradient(-45deg, var(--background-color) 0px, var(--background-color) 2px, transparent 2px, transparent 5px), var(--row-color);
+[data-contingent="true"] > .axis-row > .axis-row--background-wrapper > .line__body > .line__title::before {
+    content: " ";
+    display: inline-block;
+    border: 8px solid transparent;
+    border-left-color: var(--background-color);
+    position: relative;
+    margin-right: -10px;
+    left: -7px;
+    top: 2px;
 }
 
 .axis-inline-title-form {
@@ -1108,46 +1141,27 @@ li + li .alt-symbol { display: none; }
     vertical-align: middle;
     padding-left: .5em;
     padding-right: .5em;
+    min-width: 1em;
+    text-align: center;
 }
 
 .boucle::before {
     content: "<";
     position: absolute;
-    top: -9px;
+    top: -11px;
     left: 5px;
     color: var(--row-color);
     font-weight: bold;
+    font-size: 17px;
 }
 
-.indications-label {
-  display: block;
-  font-weight: bold;
-}
-
-.indications-label:nth-child(n+2) { margin-top: 1em; }
-
 /* .line__terme { font-size: 75%; } */
 
 /* .line__terme .full { font-size: 133%; } */
 
 
-.indications .full {
-  position: absolute;
-  z-index: 2;
-  display: none;
-  width: calc(30vw - var(--indent));
-  max-width: 500px;
-  min-width: 200px;
-  padding: .75em;
-  color: white;
-  background: var(--row-color);
-  top: 0;
-  padding-left: 1em;
-  white-space: normal;
-}
-
-.indications:hover .full { display: inline-block; }
 
+.line__indications,
 .line__condition,
 .boucle,
 .line__terme,
@@ -1162,6 +1176,7 @@ li + li .alt-symbol { display: none; }
 }
 
 
+.line__indications,
 .line__condition,
 .line__terme {
     cursor: default;
@@ -1169,34 +1184,60 @@ li + li .alt-symbol { display: none; }
 }
 
 
+.line__indications::before {
+    content: "*";
+    position: relative;
+}
+
 .line__condition::before,
 .line__terme::before {
     content: " ";
-  position: relative;
-  display: inline-block;
-  background-color: var(--row-color);
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
+    position: relative;
+    display: inline-block;
+    background-color: var(--row-color);
+    height: 8px;
+    width: 8px;
+    border-radius: 50%;
 }
 
 .line__condition--hidden {
     visibility: hidden;
 }
 
+.line__indications .label {
+    width: calc(30vw - var(--indent));
+    max-width: 500px;
+    min-width: 200px;
+    white-space: normal;
+}
+
+.line__indications .label,
 .line__condition .label,
 .line__terme .label {
+    font-weight: 400;
     box-shadow: 2px 2px 0 var(--background-color);
   display: none;
   position: absolute;
   color: var(--row-color);
   background-color: white;
   padding: 5.5px;
-  top: -8px;
   left: 0;
-  z-index: 1;
+  z-index: 2;
+}
+
+.indications-label {
+  display: block;
+  font-weight: 500;
 }
 
+.indications-label:nth-child(n+2) { margin-top: 1em; }
+
+.line__condition .label,
+.line__terme .label { top: -8px; }
+
+.line__indications .label { top: -11px; }
+
+.line__indications:hover .label,
 .line__condition:hover .label,
 .line__terme:hover .label {
   display: block;
@@ -1542,21 +1583,15 @@ ol::before {
    ========================================================================== */
 
 .btn-filter {
-  font-family: 'GothicA1', sans-serif;
-  /* line-height: 21px; */
-  font-weight: 500;
-}
-
-.btn-filter {
-  color: var(--text-color);
-  border: none;
-  padding: .3em .3em .3em .3em;
-  background: transparent;
-  margin-top: .15em;
+    font-weight: 500;
+    color: var(--text-color);
+    border: none;
+    padding: .3em .3em .3em .3em;
+    margin-top: .15em;
+    background: var(--background-color-button);
+    cursor: pointer;
 }
 
-.btn-filter { background: var(--background-color-button); }
-
 .filters__filter + .filters__filter {
     margin-top: 1em;
 }
@@ -1736,7 +1771,10 @@ ol::before {
     content: " :";
 }
 
-.score-meta dd {
+.score-meta__term--tag {
+    display: none;
+}
+.score-meta__def {
     display: inline;
     margin: 0;
     margin-left: 0em;
@@ -1744,7 +1782,7 @@ ol::before {
 }
 
 
-.score-meta dd:after{
+.score-meta__def:after{
     display: block;
     content: '';
 }
@@ -1753,11 +1791,52 @@ ol::before {
 
 .score-meta__term--inline::after { content: " "; }
 
-.score-meta__tag-item { display: inline; margin-right: 1em; }
+.tags__item { 
+    display: inline; 
+    margin-right: 1em; 
+}
 
+.tags,
 #permissions,
-.score-meta + .score-meta {
-    border-top: 2px solid white;
-    margin-top: 1em;
-    padding-top: 1em;
+.score-meta {
+    margin-bottom: 1.4em;
+}
+
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  /* box-shadow: inset 0 0 0 white; */ 
+  /* border-radius: 10px; */
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: white; 
+  border-radius: 6px;
+}
+
+.intro {
+    margin-bottom: calc(var(--line-height) * 2);
+}
+
+.last-updated {
+    margin-bottom: calc(var(--line-height) * 2);
+}
+
+.scores-list {
+    column-width: 35em;
+}
+
+.scores-list > div {
+    break-inside: avoid;
+}
+
+.appliedfilters {
+    margin-top: var(--line-height);
+    margin-bottom: var(--line-height);
 }

playground/static/playground/js/i18n/en.js

@@ -22,15 +22,16 @@ W.lang.en = {
    "Code": "Code",
    "Commandement": "Commandement",
    "Condition": "Condition",
+   "Crédits": "Credits",
    "Créer": "Create",
    "créer un axe lié": "Make a linked axis",
-   "Créer une nouvelle partition": "Create a new score",
+   "Créer une partition": "Create a score",
    "Destination": "Destination",
    "Dupliquer": "Duplicate",
-   "Durée": "Length",
+   "Durée": "Duration",
    "éditer": "Edit",
    "Éditer": "Edit",
-   "Effectif": "Effectif",
+   "Effectif": "Cast",
    // "effectuer l’axe": "",
    "Enregistrer": "Save",
    "Enregistrer…": "Saving…",
@@ -41,37 +42,50 @@ W.lang.en = {
    "Export": "Export",
    "Fiche": "File",
    "Genre": "Genre",
-   // "indeterminé": "undefined",
+   // "indéterminé": "undefined",
    "Impérative": "Imperative",
    "indéterminé": "undefined",
    "Indications": "Indications",
-   "Infos": "Information",
+   "infos": "info",
+   "Infos": "Info",
+   "langue": "language",
    "Langue": "Language",
-   // "Mise": "",
+   "La notation W": "The W notation",
+   "Le choix de W": "The W selection",
+   "Mise": "Set",
    "Modifié le": "Modified on",
    "OK": "OK",
+   "Ok": "Ok",
    "Partager avec": "Share with",
    "Partitions": "Scores",
    "Partitions existantes": "Existing score",
    "Partitions mises à jour récemment": "Recently updated scores",
+   "performeur": "performer",
    "performeurs": "performers",
    "performeur(s)": "performer(s)",
-   "Prescription": "",
-   "Présentation": "",
+   "Prescription": "Prescription",
+   "Présentation": "Presentation",
    "Publié le": "Published on",
    "rechercher": "search",
+   "Répertoire de partitions": "Score directory",
    "rompre le lien": "break link",
-   "S'inscrire": "Register",
+   "S’inscrire": "Register",
    "Sans titre": "Untitled",
    "Se connecter": "Log in",
    "Se déconnecter": "Log out",
+   "séparer par une virgule": "comma separated",
+   "Site W": "Site W",
    "Supprimer": "Delete",
    "Tag": "Tag",
+   "tags": "tags",
    "Tags": "Tags",
    "Terme": "Terme",
+   "titre": "title",
    "Titre": "Title",
+   "Titre ou auteur": "Title or author",
    "Traduction": "Translation",
    "Transcription": "Transcription",
+   "type": "type",
    "Type": "Type",
    "Type de partition": "Score type",
    "Un logiciel pour noter l’action performée, développé par W": "A software for scoring performed action, developed by W",

playground/static/playground/js/models.js

@@ -112,7 +112,7 @@ window.W = window.W || {};
         defaults: {
             title: "Untitled",
             mainline: {},
-            stage_set: "Here comes the initial set",
+            stage_set: "aucune",
             setting: '',
             duration: '',
             genre: '',

playground/static/playground/js/utils.js

@@ -54,7 +54,7 @@ window.W.utils = window.W.utils || {};
         if (string in entries) {
             return entries[string];
         } else {
-            // console.log(string + " n'est pas traduit");
+            console.log(string + " n'est pas traduit");
             return string;
         }
     }

playground/static/playground/js/views.js

@@ -1525,7 +1525,7 @@ window.W = window.W || {};
 
             if (alternative) {
                 if (alternative.type === rangeType.undetermined) {
-                    return "indeterminé";
+                    return "indéterminé";
                 } else if (alternative.type === rangeType.exact) {
                     return alternative.value;
                 } else if (alternative.type === rangeType.minimal) {
@@ -1637,7 +1637,7 @@ window.W = window.W || {};
             // Cast tag value into a list
             var tags = this.fieldVal('tags').trim();
             tags = (tags != "") ? tags.split(/\s*,\s*/) : [];
-            tags = _.map(tags, function(s){ return s.trim(); })
+            var tags = _.map(tags, function(s){ return s.trim(); })
 
             var data = {
                 title: this.fieldVal('title'),
@@ -2672,7 +2672,8 @@ window.W = window.W || {};
 
             var view = new W.ScoreListFooView({
                 collection: collection,
-                title: t("Le choix de W")
+                title: t("Le choix de W"),
+                className: "last-updated"
             });
 
             view.collection.fetch({
@@ -2694,6 +2695,7 @@ window.W = window.W || {};
             var view2 = new W.ScoreListFooView({
                 collection: collection2,
                 title: _("Mes partitions"),
+                className: "user-scores"
             });
 
             view2.collection.fetch({

playground/templates/playground/underscore/field-boucle.mtpl

@@ -6,7 +6,7 @@
     <%- t('effectuer l’axe') %>
     <select name="type">
         <option value="<%= rangeType.undetermined %>" <% if (!type || type == rangeType.undetermined) { %>selected<% } %>>
-            <%- t('indeterminé') %>
+            <%- t('indéterminé') %>
         </option>
         <option value="<%= rangeType.exact %>" <% if (type == rangeType.exact) { %>selected<% } %>>
             <%- t('exactement') %>

playground/templates/playground/underscore/field-effectif.mtpl

@@ -2,7 +2,7 @@
     <%- t('Effectif') %>: <br />
     <select name="type">
         <option value="<%= rangeType.undetermined %>" <% if (!type || type == rangeType.undetermined) { %>selected<% } %>>
-            <%- t('indeterminé') %>
+            <%- t('indéterminé') %>
         </option>
         <option value="<%= rangeType.exact %>" <% if (type == rangeType.exact) { %>selected<% } %>>
             <%- t('exactement') %>

playground/templates/playground/underscore/header.mtpl

@@ -3,13 +3,13 @@
 <div class="main-header__content content">
     <div class="main-header__logo logo">
         <h1 class="logo__name"><a href="/" class="logo_link">Organon</a></h1>
-        <p class="logo__tagline"><%- t('Un logiciel pour noter l’action performée') %></p>
+        <!-- <p class="logo__tagline"><%- t('Un logiciel pour noter l’action performée') %></p> -->
     </div>
 
-    <nav class="main-header__menu main-header__menu--primary">
-        <ul>
-            <li><a href="/la-notation-w/"><%- t('La notation W') %></a></li>
-            <li><a href="/partitions/"><%- t('Répertoire de partitions') %></a></li>
+    <nav class="main-header__menu main-header__menu--primary menu menu--primary">
+        <ul class="menu__list">
+            <li class="menu__item"><a href="/la-notation-w/"><%- t('La notation W') %></a></li>
+            <li class="menu__item"><a href="/partitions/"><%- t('Répertoire de partitions') %></a></li>
         </ul>
     </nav>
 

playground/templates/playground/underscore/home.mtpl

-<div class="body-text body-text--about">
+<div class="intro body-text body-text--about">
 {% load flatpages %}
 {% get_flatpages '/introduction/' as intro_pages %}
 
@@ -7,13 +7,8 @@
 {% endfor %}
 </div>
 
-<br>
-<br>
-
-<section>
+<div class="scores-list">
     <div id="latest_updated"></div>
 
-<br>
-<br>
     <div id="user_scores"></div>
-</section>
+</div>

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

@@ -29,13 +29,13 @@
             <% } %>
 
             <% if (hasIndications) { %>
-            <span class="indications">
-                <span class="icon icon--indications"></span>
-
-                <span class="full">
+            <span class="line__indications">
+                <span class="label">
+                    <span class="indication">
                     <% if (indications) { %>
-                    <%- indications %>
+                    <%= indications.replace(/(?:\r\n|\r|\n)/g, '<br>') %>
                     <% } %>
+                    </span>
 
                     <% if (commandement) { %>
                     <span class="indications-label"><%- t('Commandement') %>:</span>

playground/templates/playground/underscore/rangefield.mtpl

@@ -6,7 +6,7 @@
     effectuer l’axe
     <select name="type">
         <option value="<%= rangeType.undetermined %>" <% if (!type || type == rangeType.undetermined) { %>selected<% } %>>
-            <%- t('indeterminé') %>
+            <%- t('indéterminé') %>
         </option>
         <option value="<%= rangeType.exact %>" <% if (type == rangeType.exact) { %>selected<% } %>>
             <%- t('exactement') %>

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

@@ -18,7 +18,7 @@
 
 <!-- Performance author -->
 <label>
-  <span class="label-text"><%- t('Auteur de la perfomance') %>:</span>
+  <span class="label-text"><%- t('Auteur de la performance') %>:</span>
   <input type="text" name="performance_author" value="<%- performance_author %>" <%- (score_type === 2) ? 'disabled' : '' %>>
 </label>
 

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

@@ -27,11 +27,11 @@
         <dl class="score-meta">
         <% if (presentation) { %>
             <dt class="score-meta__term"><%- t('Présentation') %></dt>
-            <dd><%- presentation %></dd>
+            <dd class="score-meta__def"><%- presentation %></dd>
             <% } %>
             <% if (stage_set) { %>
             <dt class="score-meta__term"><%- t('Mise') %></dt>
-            <dd><%= stage_set.replace(/\n/g, "<br />") %></dd>
+            <dd class="score-meta__def"><%= stage_set.replace(/\n/g, "<br />") %></dd>
             <% } %>
         </dl>
 
@@ -39,17 +39,17 @@
             <!-- Extended fields -->
             <% if (performance_author && (score_type === 1 || score_type === 3)) { %>
             <dt class="score-meta__term"><%- t('Auteur de la performance') %></dt>
-            <dd><%- performance_author %></dd>
+            <dd class="score-meta__def"><%- performance_author %></dd>
             <% } %>
             
             <% if (score_author) { %>
             <dt class="score-meta__term"><%- t('Auteur de la partition') %></dt>
-            <dd><%- score_author %></dd>
+            <dd class="score-meta__def"><%- score_author %></dd>
             <% } %>
 
             <% if (score_type) { %>
             <dt class="score-meta__term"><%- t('Type de partition') %></dt>
-            <dd>
+            <dd class="score-meta__def">
                 <% switch (score_type) {
                     case 1:
                 %>
@@ -72,7 +72,7 @@
 
             <% if (effectif && effectif !== "") { %>
             <dt class="score-meta__term"><%- t('Effectif') %></dt>
-            <dd>
+            <dd class="score-meta__def">
                 <% if (effectif && effectif.type === rangeType.exact) { %>
                     <%- effectif.value %> <%- (effectif.value > 1) ? t('performeurs') : t('performeur') %>
                 <% } else if (effectif && effectif.type === rangeType.minimal) { %>
@@ -87,36 +87,27 @@
 
             <% if (duration) { %>
             <dt class="score-meta__term"><%- t('Durée') %></dt>
-            <dd><%- duration %></dd>
+            <dd class="score-meta__def"><%- duration %></dd>
             <% } %>
+        </dl>
 
-            <% if (tags && tags.length) { %>
-            <dt class="score-meta__term score-meta__term--hidden"><%- t('Tags') %></dt>
-            <dd>
-                <ul>
-                <% for (var i=0; i < tags.length; i++) { %>
-                    <li class="score-meta__tag-item">#<%- tags[i] %></li>
-                <% } %>
-                </ul>
-            </dd>
+        <% if (tags && tags.length) { %>
+            <ul class="tags">
+            <% for (var i=0; i < tags.length; i++) { %>
+                <li class="tags__item">#<%- tags[i] %></li>
             <% } %>
+            </ul>
+        <% } %>
 
-            <!--
-            <% if (genre) { %>
-            <dt><%- t('Genre') %></dt>
-            <dd><%- genre %></dd>
-            <% } %> -->
-
+        <dl class="score-meta">
             <dt class="score-meta__term score-meta__term--inline"><%- t('Publié le') %></dt>
-            <dd><%- formatTimestamp(created_at) %></dd>
+            <dd class="score-meta__def"><%- 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> -->
+            <dd class="score-meta__def"><%- formatTimestamp(updated_at) %></dd>
         </dl>
 
         <div id="permissions"></div>
-    
+
         <form></form>
     </section>
 </aside>