more style updates

Holusion · Jan 31, 2025 · cd5f170 · cd5f170
1 parent 3e3de77
commit cd5f170
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 102 deletions.
diff --git a/source/server/templates/locales/en.yml b/source/server/templates/locales/en.yml
@@ -5,7 +5,6 @@ lang:
 labels:
   optional: optional
   sceneTitle: scene title
-  setupLanguage: scene language
   selectFile: select a file
   signin: Sign in
   save: Save
@@ -20,24 +19,39 @@ labels:
   sendLoginLink: Send a login link
   view: View
   edit: Edit
+  localization_one: Scene language
+  localization_other: Scene languages
+  setupLocalization: Default language
+  rights: Access rights
+  permission: Authorizations
+  defaultUser: Public access
+  anyUser: Authenticated access
+  language: UI Language
 buttons:
   searchScene: search scenes
   upload: create a scene
   useStandalone: use standalone mode
   logout: Disconnect
   next: "Next Page"
   previous: "Previous Page"
+  archive: Archive
+  delete: Delete
+  editTags: Edit tags
+  showTags: Cancel edition
+  history: Scene History
 fields:
   name: name
   mtime: last modification
   ctime: creation date
   access: access rights
+  none: none
   read: read
   write: write
   admin: administration
   limit: results per page
   ascendingOrder: ascending order
   descendingOrder: descending order
+  tag: tag name
 nav:
   tags: collection
   login: connection
@@ -47,7 +61,7 @@ nav:
   adminStats: statistiques
   adminArchives: archives
   reportBug: report a bug
-  documentation: projet documentation
+  documentation: project doc
   license: Apache License
 
 titles:
@@ -63,8 +77,14 @@ titles:
   userSettings: User Settings
   userProfile: User Profile
   changePassword: Change Password
+  sceneThumb: Preview image of {{what}}
+  history: Edition history
+  sceneData: Scene metadata
+  permissions: Access rights
 tooltips:
   showPassword: Show the password's text
+  permissions: >
+    Access rights management. Setting a user's permissions to "none" will revert him back to default.
 
 leads:
   appLead: >
@@ -82,6 +102,25 @@ leads:
     Show this scene with Voyager-Explorer
   noResults: >
     No results. Maybe try to change your query?
+  archiveDelete: >
+    Archiving this scene makes it unreachable but it can still be restored by your instance administrator.
+  thumbnailFor: >
+    Image miniature pour {{what}}
+  articles_zero: "no articles"
+  articles_one: "one article"
+  articles_other: "{{count}} articles"
+  annotations_zero: "no annotations"
+  annotations_one: "one annotation"
+  annotations_other: "{{count}} annotations"
+  sceneCounts: >
+    This scene has $t(leads.articles, {"count": {{articles}} }) and $t(leads.annotations, {"count": {{annotations}}})
+  noMetaAvailable: >
+    No metadata could be extracted from this scene.
+  historyEdition: |
+    This is the scene's history of changes, aggregated by day. Unfold the groups with the <span class="text-primary">+</span> icons to get more details.
+    Click on <code class="text-primary">restore to</code> to add a set of changes that will set the scene's content to what it was at this point.
+    No history entry will be deleted in this operation : changes will only be appended.
+
 errors:
   generic: Unknown Error
   "Username not provided": Username not provided

diff --git a/source/server/templates/locales/fr.yml b/source/server/templates/locales/fr.yml
@@ -5,7 +5,6 @@ lang:
 labels:
   optional: optionnel
   sceneTitle: titre de la scène
-  setupLanguage: Langue de la scène
   selectFile: sélectionner un fichier
   signin: Connexion
   save: Enregistrer
@@ -27,6 +26,7 @@ labels:
   permission: Autorisation
   defaultUser: Accès Public
   anyUser: Utilisateur Authentifié
+  language: Langue de l'interface
 
 buttons:
   searchScene: chercher une scène

diff --git a/source/server/templates/partials/footer.hbs b/source/server/templates/partials/footer.hbs
@@ -1,12 +1,21 @@
 
 <footer>
-  <div style="margin:auto">
-    <a href="https://ecorpus.eu">{{i18n "nav.documentation"}}</a>
-    |
-    Holusion © <a href="https://github.com/Holusion/e-thesaurus/blob/main/LICENSE.md">{{i18n "nav.license"}}</a>
-    |
-    <a href="mailto:[email protected]">{{i18n "nav.reportBug"}}</a>
-  </div>
-  <change-locale style="margin:auto 4px" lang="{{lang}}"></change-locale>
+  <nav>
+    <a class="nav-link" href="https://ecorpus.eu">{{i18n "nav.documentation"}}</a>
+
+    <span class="nav-link" >Holusion © <a href="https://github.com/Holusion/e-thesaurus/blob/main/LICENSE.md">{{i18n "nav.license"}}</a></span>
+
+    <a class="nav-link" href="mailto:[email protected]">{{i18n "nav.reportBug"}}</a>
+    <form method="GET" id="change-locale" class="form-control nav-end" style="margin: auto 1rem;">
+      <div class="form-item" style="display: flex;flex-wrap: nowrap; align-items: center">
+        <ui-icon name="globe"></ui-icon>
+        <select aria-label="{{i18n "labels.language"}}" name="lang" onchange="this.form.submit()">
+          {{>inputs/option selected=(test lang "==" "en") value="en" text=(i18n "lang.en")}}
+          {{>inputs/option selected=(test lang "==" "fr") value="fr" text=(i18n "lang.fr")}}
+        </select>
+      </div>
+    </form>
+  </nav>
+
 </footer>
 <notification-stack></notification-stack>
diff --git a/source/server/templates/partials/navbar.hbs b/source/server/templates/partials/navbar.hbs
@@ -2,17 +2,22 @@
   <div class="nav-content">
     <div class="brand">
       <a class="brand" href="/">
-        <img src="/dist/images/logo-full.svg" alt="Site Logo" />
+        <picture>
+          <source srcset="/dist/images/logo-sm.svg" media="(max-width: 576px)"/>
+          <img src="/dist/images/logo-full.svg" alt="Site Logo"/>
+        </picture>
       </a>
     </div>
     <div class="spacer"></div>
     <div class="navbar">
       {{# unless isSearchPage }}
-      <form id="nav-search" class="form-item" style="display:flex; padding-right: 10px;display:flex;align-items: center" method="get" action="/ui/scenes/">
-        <span style="height:24px;width:24px;">
-          <ui-icon style="fill: var(--color-highlight);pointer-events: none;" name="search"></ui-icon>
-        </span>
-        <input style="height:calc(100% - 6px);margin-left:-24px; padding-left: 24px" class="search-box-input" name="match" type="search" id="model-search" value="{{params.match}}">
+      <form id="nav-search" class="form-control " method="get" action="/ui/scenes/">
+        <div class="form-item nav-input">
+          <input class="search-box-input" name="match" type="search" id="model-search" value="{{params.match}}">
+          <button class="btn btn-addon">
+            <ui-icon style="fill: var(--color-highlight);pointer-events: none;" name="search"></ui-icon>
+          </button>
+        </div>
       </form>
       {{/unless}}
       {{#navLink "/ui/tags/"}}{{i18n "nav.tags"}}{{/navLink}}

diff --git a/source/server/templates/upload.hbs b/source/server/templates/upload.hbs
@@ -23,7 +23,7 @@
         </div>
 
         <div class="form-item">
-          <label for="sceneSetupLanguage">{{i18n "labels.setupLanguage"}}</label>
+          <label for="sceneSetupLanguage">{{i18n "labels.setupLocalization"}}</label>
           <select name="language" id="sceneSetupLanguage" >
             {{#each languages}}
             <option {{#if selected}}selected{{/if}} value="{{code}}">{{i18n key}}</option>

diff --git a/source/ui/styles/layout.scss b/source/ui/styles/layout.scss
@@ -175,71 +175,6 @@ section, .section{
   }
 }
 
-corpus-list{
-
-  .list-header{
-    grid-area: header;
-    display: flex;
-  }
-  .toolbar{
-    grid-area: toolbar;
-    .section{
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
-  }
-
-  .list-items{
-    grid-area: content;
-    padding: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .search-box-input {
-    flex-grow: 1;
-    padding-right: 100px;
-    margin-right: -100px;
-    border-bottom: 1px solid var(--color-secondary-light);
-    + .btn-addon{
-      width: 100px;
-      border-bottom: 1px solid var(--color-secondary-light);
-    }
-    &:focus + .btn-addon{
-      border-bottom-color: transparent;
-    }
-
-
-  }
-  .toolbar, .list-items{
-    height: fit-content;
-  }
-
-  .list-items{
-    width: 100%;
-  }
-
-  @media (max-width: 1024px){
-    flex-direction: column;
-    .list-tasks{
-      width: 100%;
-    }    
-  }
-}
-
-
-scene-card{
-  &.card-grid{
-    padding :0;
-  }
-
-  &.card-list{
-    padding: 0.2rem;
-  }
-}
-
 .list-items{
 
   .list-item, .list-header{
@@ -275,20 +210,35 @@ scene-card{
   }
 }
 
-.users-list{
-  .ui-button:hover{
-    filter:brightness(1.5);
-  }
-  .ui-icon svg{
-    height: 1.2rem;
-  }
-}
 
 footer{
   color: var(--color-text);
-  height: 44px;
   background-color: var(--color-section);
-  display:flex;
+  height: var(--nav-height);
+  padding-right: 105px;
+  padding-left: 105px;
+  position: relative;
+
+  nav{
+    height: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  #change-locale{
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: var(--nav-height);
+  }
+
+  @media (max-width: 576px){
+    padding-left: 1rem;
+    height: auto;
+    nav{
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
 }
 
 
@@ -326,4 +276,27 @@ footer{
       cursor: pointer;
     }
   }
+}
+
+@media screen and (min-width: 992px){
+  .lg-hidden{
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 992px){
+  .lg-only{
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 576px){
+  .sm-only{
+    display: none !important;
+  }
+}
+@media screen and (max-width: 576px){
+  .sm-hidden{
+    display: none !important;
+  }
 }
diff --git a/source/ui/styles/main.scss b/source/ui/styles/main.scss
@@ -77,3 +77,17 @@ main{
     transform: translateX(100%);
   }
 }
+
+.ui-icon{
+  flex: 0 0 auto;
+  display: inline-block;
+  //Fallback if "lh" isn't supported
+  height: 1rem;
+  width: 1rem;
+
+  height: 1lh;
+  width: 1lh;
+  > svg{
+    fill: currentColor;
+  }
+}