tidy CSS for voyager buttons

fix minor issues
Holusion · Feb 9, 2024 · 301e9a5 · 301e9a5
1 parent c0beb7b
commit 301e9a5
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 98 deletions.
diff --git a/_includes/button.html b/_includes/button.html
diff --git a/_sass/base.scss b/_sass/base.scss
@@ -49,6 +49,12 @@ main {
   }
 }
 
+img.fluid{
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
 
 //////////////////////////////
 /// NAVIGATION
@@ -538,7 +544,7 @@ p > code{
 }
 
 
-
+// @ TODO rework everything up to the end of this section
 svg{
   vertical-align: middle;
 }
@@ -561,27 +567,6 @@ li > code {
 }
 
 
-p > span > svg{
-  height: 24px;
-}
-div > ul{
-  padding: 0;
-  margin-block-end: 0;
-}
-div > ul > li{
-  margin: 0.7rem 0;
-  list-style: none;
-}
-
-div > ul > li > span{
-  padding: 0.4rem;
-  min-width: 140px;
-  background-color: #c4c4c4;
-}
-
-div > ul > li > span > svg{
-  height: 24px;
-}
 
 
 //////////////////////////////
@@ -600,6 +585,7 @@ button, .button{
   border-width: 0;
   cursor: pointer;
   color: #fff;
+  text-decoration: none;
   font-size: 1.2rem;
   font-weight: 500;
   &:hover{
@@ -625,8 +611,20 @@ button, .button{
 .voyager-btn {
   display: inline-block;
   text-align: center;
+  padding: 0.4rem;
+  min-width: 140px;
+  background-color: #c4c4c4;
+  > svg{
+    height: 24px;
+  }
 }
 
+div > ul > li:has(> .voyager-btn:first-child){
+  margin: 0.7rem 0;
+  list-style: none;
+}
+
+
 
 //////////////////////////////
 /// LISTS

diff --git a/en/doc/guides/voyager/story_interface.html b/en/doc/guides/voyager/story_interface.html
@@ -7,25 +7,25 @@ <h2>Voyager Story interface</h2>
   <h3 id="EditYourScene">Edit your scene</h3>
   <div class="section">
     <ul>
-      <li>{% include button.html name="pose" icon="move" %} Position and resize the model.</li>
-      <li>{% include button.html name="capture" icon="camera" %} Take screenshots and save the state of the scene.</li>
-      <li>{% include button.html name="derivatives" icon="hierarchy" %} Manage derivatives (different levels of detail).</li>
-      <li>{% include button.html name="annotations" icon="comment" %} Create and edit annotations.</li>
-      <li>{% include button.html name="articles" icon="file" %} Create and edit articles.</li>
-      <li>{% include button.html name="visites" icon="globe" %} Create and edit guided tours.</li>
-      <li>{% include button.html name="audio" icon="audio" %} Add and organize audio.</li>
-      <li>{% include button.html name="parametres" icon="eye" %} Edit scene settings.</li>
+      <li>{% include sv_button.html name="pose" icon="move" %} Position and resize the model.</li>
+      <li>{% include sv_button.html name="capture" icon="camera" %} Take screenshots and save the state of the scene.</li>
+      <li>{% include sv_button.html name="derivatives" icon="hierarchy" %} Manage derivatives (different levels of detail).</li>
+      <li>{% include sv_button.html name="annotations" icon="comment" %} Create and edit annotations.</li>
+      <li>{% include sv_button.html name="articles" icon="file" %} Create and edit articles.</li>
+      <li>{% include sv_button.html name="visites" icon="globe" %} Create and edit guided tours.</li>
+      <li>{% include sv_button.html name="audio" icon="audio" %} Add and organize audio.</li>
+      <li>{% include sv_button.html name="parametres" icon="eye" %} Edit scene settings.</li>
     </ul>
   </div>
     <h3 id="ExploreTheScene">Explore the scene</h3>
     <div class="section">
       <ul>
-        <li>{% include button.html icon="globe" %} Display tours.</li>
-        <li>{% include button.html icon="file" %} Display articles.</li>
-        <li>{% include button.html icon="comment" %} Display annotations.</li>
-        <li>{% include button.html icon="share" %} Share the scene.</li>
-        <li>{% include button.html icon="expand" %} Fullscreen mode.</li>
-        <li>{% include button.html icon="tools" %} Tools and settings.</li>
+        <li>{% include sv_button.html icon="globe" %} Display tours.</li>
+        <li>{% include sv_button.html icon="file" %} Display articles.</li>
+        <li>{% include sv_button.html icon="comment" %} Display annotations.</li>
+        <li>{% include sv_button.html icon="share" %} Share the scene.</li>
+        <li>{% include sv_button.html icon="expand" %} Fullscreen mode.</li>
+        <li>{% include sv_button.html icon="tools" %} Tools and settings.</li>
       </ul>
     </div>
 

diff --git a/en/doc/tutorials/voyager/edit.html b/en/doc/tutorials/voyager/edit.html
@@ -49,16 +49,16 @@ <h3 id="Rename-the-scene">Rename the scene</h3>
   <div>
     <h3 id="Position-and-resize">Position and resize the model</h3>
     <p>
-      Go to the {% include button.html name="pose" icon="move" %} tab and select your model to adjust its position.
+      Go to the {% include sv_button.html name="pose" icon="move" %} tab and select your model to adjust its position.
     </p>
     <img src="/assets/img/doc/Voyager-edit-pose.jpg" alt="screen of Voyager application, position the model">
     <p>
       You can then recenter it in the scene and adjust its position and rotation using the<span>Top</span>,
       <span>Left</span> and <span>Front</span> view windows.
     </p>
     <p>
-      Be sure to check the unit of measurement for the scene and object. You can use the {% include button.html
-      name="measure" icon="tape" %} tool in the {% include button.html icon="tools" class="voyager-btn-rounded" %}
+      Be sure to check the unit of measurement for the scene and object. You can use the {% include sv_button.html
+      name="measure" icon="tape" %} tool in the {% include sv_button.html icon="tools" class="voyager-btn-rounded" %}
       settings to check the size of the model:
     </p>
     <img src="/assets/img/doc/Voyager-edit-mesure.jpg" alt="screen of Voyager application, measure the model">
@@ -67,7 +67,7 @@ <h3 id="Position-and-resize">Position and resize the model</h3>
   <div>
     <h3 id="Take-screenshots">Take screenshots and save the state of the scene</h3>
     <p>
-      Once the model is positioned as desired, go to the {% include button.html name="capture" icon="camera" %} tab to
+      Once the model is positioned as desired, go to the {% include sv_button.html name="capture" icon="camera" %} tab to
       save its position and generate a thumbnail image.
     </p>
     <img src="/assets/img/doc/Voyager-edit-capture.jpg" alt="screen of Voyager application, capture the scene">
@@ -79,8 +79,8 @@ <h3 id="Take-screenshots">Take screenshots and save the state of the scene</h3>
   <div>
     <h3 id="Create-and-edit-annotations">Create and edit annotations</h3>
     <p>
-      In the {% include button.html name="annotations" icon="comment" %} tab, select your model then click on the {%
-      include button.html name="create" icon="plus" %} button to create your new annotation.
+      In the {% include sv_button.html name="annotations" icon="comment" %} tab, select your model then click on the {%
+      include sv_button.html name="create" icon="plus" %} button to create your new annotation.
     </p>
     <img src="/assets/img/doc/Voyager-edit-annotations.jpg" alt="screen of Voyager application, add an annotation">
     <p>
@@ -99,8 +99,7 @@ <h3 id="Create-and-edit-annotations">Create and edit annotations</h3>
   <div>
     <h3 id="Create-and-edit-articles">Create and edit articles</h3>
     <p>
-      In the {% include button.html name="articles" icon="file" %} tab, select your model and click the {% include
-      button.html name="create" icon="plus" %} button to create your new article.
+      In the {% include sv_button.html name="articles" icon="file" %} tab, select your model and click the {% include sv_button.html name="create" icon="plus" %} button to create your new article.
     </p>
     <img src="/assets/img/doc/Voyager-edit-article.jpg" alt="screen of Voyager application, add an article">
     <p>
@@ -117,7 +116,7 @@ <h3 id="Create-and-edit-articles">Create and edit articles</h3>
   <div>
     <h3 id="Create-and-edit-guided-tours">Create and edit guided tours</h3>
     <p>
-      In the {% include button.html name="tours" icon="globe" %} tab, click the {% include button.html icon="plus" %}
+      In the {% include sv_button.html name="tours" icon="globe" %} tab, click the {% include sv_button.html icon="plus" %}
       button to create a new guided tour.
     </p>
     <img src="/assets/img/doc/Voyager-edit-visite.jpg" alt="screen of Voyager application, create a guided tour">
@@ -127,7 +126,7 @@ <h3 id="Create-and-edit-guided-tours">Create and edit guided tours</h3>
     </p>
     <p>
       Add a title, then adjust the position of your model, zoom in on key elements, display or hide an article... then
-      click {% include button.html name="update" icon="camera" %} to save it and move on to the next step.
+      click {% include sv_button.html name="update" icon="camera" %} to save it and move on to the next step.
     </p>
     <div class="center-button">
       <a href="tour">
@@ -139,7 +138,7 @@ <h3 id="Create-and-edit-guided-tours">Create and edit guided tours</h3>
   <div>
     <h3 id="Save-your-work">Save your work</h3>
     <p>
-      You can also save your scene locally by downloading it with the {% include button.html name="Download"
+      You can also save your scene locally by downloading it with the {% include sv_button.html name="Download"
       icon="download" %} button.
     </p>
   </div>

diff --git a/en/doc/tutorials/voyager/setup.md b/en/doc/tutorials/voyager/setup.md
@@ -8,7 +8,7 @@ description: Learn to setup a scene in dpo-voyager
 
 This tutorial will go through the main setup options of a scene in DPO-Voyager.
 
-Everything will happen under the <span class="d-inline-flex"> {% include button.html name="parameters" style="width:150px" icon="eye" %} </span> tab, with the <img style="max-height:1.5rem" src="/assets/img/doc/scene_node.jpg" title="scene node" alt="scene node in voyager's hierarchy"> node selected.
+Everything will happen under the <span class="d-inline-flex"> {% include sv_button.html name="parameters" style="width:150px" icon="eye" %} </span> tab, with the <img style="max-height:1.5rem" src="/assets/img/doc/scene_node.jpg" title="scene node" alt="scene node in voyager's hierarchy"> node selected.
 
 
 ### Navigation

diff --git a/en/doc/tutorials/voyager/tour.html b/en/doc/tutorials/voyager/tour.html
@@ -14,7 +14,7 @@ <h2 id="Create-a-guided-tour">Create a guided tour</h2>
 <!--slide 0 - Create-->
 <h3 id="Creating-tour">Creating a tour</h3>
 <p>
-    In the {% include button.html name="Tours" icon="globe" %} tab, click on the button {% include button.html
+    In the {% include sv_button.html name="Tours" icon="globe" %} tab, click on the button {% include sv_button.html
     icon="plus" %} to create a new guided tour.
 </p>
 <img src="/assets/img/doc/Voyager-tour-create.jpg" alt="screen de l'application Voyager, créer une visite guidée">
@@ -47,7 +47,7 @@ <h3 id="Tour-options">Tour options</h3>
 <!--slide 2 step-->
 <h3 id="Add-new-step">Add a new step</h3>
 <p>
-    In the Tour Editor, click on {% include button.html name="Create" icon="plus" %} to create a new step for your
+    In the Tour Editor, click on {% include sv_button.html name="Create" icon="plus" %} to create a new step for your
     guided tour, then give it a title.
 </p>
 <img src="/assets/img/doc/Voyager-tour-editor.jpg" alt="screen de l'application Voyager, créer une visite guidée">
@@ -59,29 +59,28 @@ <h3 id="Anime-the-step">Anime the step</h3>
 </p>
 <img src="/assets/img/doc/Voyager-tour-step1.jpg" alt="screen de l'application Voyager, créer une visite guidée">
 <p>
-    When you are satisfied with the display, click on the {% include button.html name="Update" icon="camera" %} button
+    When you are satisfied with the display, click on the {% include sv_button.html name="Update" icon="camera" %} button
     to save your step.
 </p>
 <!--slide 4-->
 <h3 id="Anime-settings">Anime settings</h3>
 <p>
     Depending on the chosen options, you can also animate certain settings. To do this, while keeping the Tour Editor
-    open for the desired tour, go to the {% include button.html name="Settings" icon="eye" %} tab.
+    open for the desired tour, go to the {% include sv_button.html name="Settings" icon="eye" %} tab.
 </p>
 <img src="/assets/img/doc/Voyager-tour-parameters.jpg" alt="screen de l'application Voyager, créer une visite guidée">
 <!--slide 5-->
 <p>
     Navigate through your scene and modify all the desired settings. This includes the model(s), lights, scene, camera,
     etc.
-    Don't forget to click on {% include button.html name="Update" icon="camera" %} to save the step once you have
+    Don't forget to click on {% include sv_button.html name="Update" icon="camera" %} to save the step once you have
     finished configuring it.
 </p>
 <!--slide 6-->
 <h3 id="Organize-steps">Organize steps</h3>
 <img src="/assets/img/doc/Voyager-tour-editor2.jpg" alt="screen de l'application Voyager, créer une visite guidée">
 <p>
-    Once your steps are created, you can rearrange them in the Tour Editor by changing their order using the {% include
-    button.html name="Up" %} and {% include button.html name="Down"%} buttons.
+    Once your steps are created, you can rearrange them in the Tour Editor by changing their order using the {% include sv_button.html name="Up" %} and {% include sv_button.html name="Down"%} buttons.
 </p>
 <p>
     You can also define the duration and animation curve for the transition between two steps.

diff --git a/fr/doc/guides/voyager/story_interface.html b/fr/doc/guides/voyager/story_interface.html
@@ -6,25 +6,25 @@ <h2 id="L-interface-Voyager-Story">L'interface de Voyager Story</h2>
   <h3 id="Éditez-votre-scène">Éditez votre scène</h3>
   <div class="section">
     <ul>
-      <li>{% include button.html name="pose" icon="move" %} Positionner et redimensionner le modèle.</li>
-      <li>{% include button.html name="capture" icon="camera" %} Prendre des captures d'écran et enregistrer l'état de la scène.</li>
-      <li>{% include button.html name="derivatives" icon="hierarchy" %} Gérer les dérivés (différents niveaux de détail).</li>
-      <li>{% include button.html name="annotations" icon="comment" %} Créer et modifier des annotations.</li>
-      <li>{% include button.html name="articles" icon="file" %} Créer et éditer des articles.</li>
-      <li>{% include button.html name="visites" icon="globe" %}  Créer et modifier des visites guidées.</li>
-      <li>{% include button.html name="audio" icon="audio" %}  Ajouter et organiser des audios.</li>
-      <li>{% include button.html name="parametres" icon="eye" %}  Éditer les paramètres de la scène.</li>
+      <li>{% include sv_button.html name="pose" icon="move" %} Positionner et redimensionner le modèle.</li>
+      <li>{% include sv_button.html name="capture" icon="camera" %} Prendre des captures d'écran et enregistrer l'état de la scène.</li>
+      <li>{% include sv_button.html name="derivatives" icon="hierarchy" %} Gérer les dérivés (différents niveaux de détail).</li>
+      <li>{% include sv_button.html name="annotations" icon="comment" %} Créer et modifier des annotations.</li>
+      <li>{% include sv_button.html name="articles" icon="file" %} Créer et éditer des articles.</li>
+      <li>{% include sv_button.html name="visites" icon="globe" %}  Créer et modifier des visites guidées.</li>
+      <li>{% include sv_button.html name="audio" icon="audio" %}  Ajouter et organiser des audios.</li>
+      <li>{% include sv_button.html name="parametres" icon="eye" %}  Éditer les paramètres de la scène.</li>
     </ul>
   </div> 
     <h3 id="Explorez-votre-scène">Explorer votre scène</h3>
     <div class="section">
       <ul>
-        <li>{% include button.html icon="globe" %} Afficher les visites guidées.</li>
-        <li>{% include button.html icon="file" %} Afficher les articles.</li>
-        <li>{% include button.html icon="comment" %} Afficher les annotations.</li>
-        <li>{% include button.html icon="share" %} Partager la scène.</li>
-        <li>{% include button.html icon="expand" %} Mode plein écran.</li>
-        <li>{% include button.html icon="tools" %} Outils et paramètres.</li>
+        <li>{% include sv_button.html icon="globe" %} Afficher les visites guidées.</li>
+        <li>{% include sv_button.html icon="file" %} Afficher les articles.</li>
+        <li>{% include sv_button.html icon="comment" %} Afficher les annotations.</li>
+        <li>{% include sv_button.html icon="share" %} Partager la scène.</li>
+        <li>{% include sv_button.html icon="expand" %} Mode plein écran.</li>
+        <li>{% include sv_button.html icon="tools" %} Outils et paramètres.</li>
       </ul>
     </div>
 
diff --git a/fr/doc/index.html b/fr/doc/index.html
@@ -11,12 +11,11 @@ <h2 id="Documentation" class="big-title-doc">Documentation
   <p class="big-intro-doc">
     Sauvegarder, éditer, commenter, valoriser et publier les numérisations d'artefacts culturels.
   </p>
-  <div>
-    <img style="object-position: 70% 0;" src="/assets/img/focus_stbertin_chapiteau.webp"
-      alt="Gros plan sur le chapiteau en émail sur cuir champlevé du Pied de croix de l'abbaye de Saint-Bertin.">
-  </div>
 </section>
+<img class="flush" style="object-position: 70% 0;" src="/assets/img/focus_stbertin_chapiteau.webp"
+  alt="Gros plan sur le chapiteau en émail sur cuir champlevé du Pied de croix de l'abbaye de Saint-Bertin.">
 
+<section>
   <h2 id="Introduction">Introduction</h2>
   <p>
     eCorpus est une implémentation de référence de l'éditeur <a href="https://smithsonian.github.io/dpo-voyager/"
@@ -38,6 +37,7 @@ <h2 id="Introduction">Introduction</h2>
     du logiciel est publié sous license <a href="https://github.com/Holusion/eCorpus/blob/main/LICENSE.md"
       target="_blank">Apache</a>.
   </p>
+</section>
 
 <h3 id="Édition-contenu">Édition de contenu</h3>
 <div class="media">