Redesign header area, improve layout on Canada.ca template

ramp4-pcar4 · Feb 26, 2025 · cc49cb9 · cc49cb9
1 parent be1b434
commit cc49cb9
Show file tree

Hide file tree

Showing 7 changed files with 458 additions and 229 deletions.
diff --git a/index-ca-en.html b/index-ca-en.html
@@ -70,7 +70,7 @@
                 lngLinks: [
                     {
                         lang: 'fr',
-                        href: 'index-ca-fr.html#/fr/' + newURLRoute,
+                        href: 'index-ca-fr#/fr/' + newURLRoute,
                         text: 'Français'
                     }
                 ],

diff --git a/index-ca-fr.html b/index-ca-fr.html
@@ -70,7 +70,7 @@
                 lngLinks: [
                     {
                         lang: 'en',
-                        href: 'index-ca-en.html#/en/' + newURLRoute,
+                        href: 'index-ca-en#/en/' + newURLRoute,
                         text: 'English'
                     }
                 ],

diff --git a/src/components/editor.vue b/src/components/editor.vue
diff --git a/src/components/home.vue b/src/components/home.vue
@@ -4,7 +4,7 @@
             <h1 class="text-4xl">{{ $t('editor.respectTitle') }}</h1>
             <router-link
                 :to="{ name: 'home', params: { lang: currLang === 'en' ? 'fr' : 'en' } }"
-                v-if="sourceFile !== 'index-ca-en.html#' && sourceFile !== 'index-ca-fr.html#'"
+                v-if="!sourceFile.includes('index-ca')"
             >
                 <div class="underline">{{ `${currLang === 'en' ? 'Français' : 'English'}` }}</div>
             </router-link>
@@ -134,7 +134,7 @@
                         class="border-b border-solid"
                         :class="idx === userStorylines.length - 1 ? 'border-black' : 'border-gray-200'"
                     >
-                        <div class="m-2 mt-4 ml-3">UUID: {{ storyline.uuid }}</div>
+                        <div class="m-2 mt-4 ml-3">{{ $t('editor.uuid') }}: {{ storyline.uuid }}</div>
                         <div class="m-2 mb-4 ml-3">
                             {{ $t('editor.previousProducts.productInfo.title') + ': ' + storyline.titleEN }}
                         </div>

diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
@@ -17,9 +17,7 @@
                     >
                         <!-- ENG/FR page toggle -->
                         <router-link
-                            v-if="
-                                !currentRoute.includes('index-ca-en.html') && !currentRoute.includes('index-ca-fr.html')
-                            "
+                            v-if="!currentRoute.includes('index-ca')"
                             :to="{
                                 name: editExisting ? 'metadataExisting' : 'metadataNew',
                                 params: { lang: currLang === 'en' ? 'fr' : 'en' }
@@ -594,7 +592,7 @@ import {
 import { VueSpinnerOval } from 'vue3-spinners';
 import { VueFinalModal } from 'vue-final-modal';
 import { useUserStore } from '../stores/userStore';
-import { computed } from "vue";
+import { computed } from 'vue';
 
 import JSZip from 'jszip';
 import axios from 'axios';
@@ -763,7 +761,7 @@ export default class MetadataEditorV extends Vue {
         // Initialize Storylines config and the configuration structure.
         this.configs = { en: undefined, fr: undefined };
         this.configFileStructure = undefined;
-        
+
         // set any metadata default values for creating new product
         if (!this.loadExisting) {
             // set current date as default
@@ -2100,6 +2098,7 @@ export default class MetadataEditorV extends Vue {
                 } else {
                     Message.error(this.$t('editor.editMetadata.message.error.noConfig'));
                 }
+                window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
             } else if (!this.uuid) {
                 Message.error(this.$t('editor.warning.mustEnterUuid'));
                 this.error = true;
@@ -2115,6 +2114,9 @@ export default class MetadataEditorV extends Vue {
                     .catch(() => {
                         this.error = true;
                         Message.error(this.$t('editor.editMetadata.message.error.unauthorized'));
+                    })
+                    .finally(() => {
+                        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
                     });
             }
         }, 25);

diff --git a/src/components/slide-editor.vue b/src/components/slide-editor.vue
@@ -45,7 +45,8 @@
                     <div class="flex flex-col lg:flex-row mt-3 gap-y-3 gap-x-7 flex-wrap">
                         <!-- Make the current panel the full slide -->
                         <div
-                            class="flex flex-row items-center"
+                            class="flex flex-row"
+                            :class="{ 'items-center': !currentRoute.includes('index-ca') }"
                             v-if="determineEditorType(currentSlide.panel[0]) !== 'dynamic'"
                         >
                             <input
@@ -71,7 +72,7 @@
                             </label>
                         </div>
                         <!-- Center slide content -->
-                        <div class="flex flex-row items-center">
+                        <div class="flex flex-row" :class="{ 'items-center': !currentRoute.includes('index-ca') }">
                             <input
                                 type="checkbox"
                                 id="centerSlide"
@@ -85,7 +86,7 @@
                             </label>
                         </div>
                         <!-- Center panel content -->
-                        <div class="flex flex-row items-center">
+                        <div class="flex flex-row" :class="{ 'items-center': !currentRoute.includes('index-ca') }">
                             <input
                                 type="checkbox"
                                 id="centerPanel"
@@ -99,7 +100,7 @@
                             </label>
                         </div>
                         <!-- Include slide in ToC -->
-                        <div class="flex flex-row items-center">
+                        <div class="flex flex-row" :class="{ 'items-center': !currentRoute.includes('index-ca') }">
                             <input
                                 type="checkbox"
                                 id="inToc"
@@ -472,6 +473,8 @@ export default class SlideEditorV extends Vue {
     includeInToc = true;
     dynamicSelected = false;
 
+    currentRoute = window.location.href;
+
     langTranslate = '';
 
     editors: Record<string, string> = {

diff --git a/src/lang/lang.csv b/src/lang/lang.csv
@@ -91,7 +91,7 @@ editor.editProduct,Edit Existing Storylines Product,1,Modifier un produit de sc
 editor.editMetadata,Edit project metadata,1,Mod. les métadonnées,1
 editor.productDetails,Storylines product details,1,Détails du produit de scénarios,1
 editor.metadata.instructions.new,Fill in metadata details about your new Storylines product.,1,Inscrivez les métadonnées de votre nouveau produit de scénario.,1
-editor.metadata.instructions.existing,View or edit metadata details about your Storylines product. Use the "Preview" button to see what your slides will look like.,1,Affichez ou modifiez les détails des métadonnées de votre produit Storylines. Utilisez le bouton « Aperçu » pour voir à quoi ressembleront vos diapositives.,0
+editor.metadata.instructions.existing,View or edit metadata details about your Storylines product. Use the 'Preview' button to see what your slides will look like.,1,Affichez ou modifiez les détails des métadonnées de votre produit Storylines. Utilisez le bouton «Aperçu» pour voir à quoi ressembleront vos diapositives.,0
 editor.uuid,UUID,1,UUID,0
 editor.uuid.required,(required),1,(obligatoire),0
 editor.uuid.new,New UUID,1,New UUID,0
@@ -130,6 +130,8 @@ editor.export,Export,1,Exporter,0
 editor.export.success,Export successful,1,Exportation réussie,0
 editor.export.error,Export failed,1,Échec de l’exportation,0
 editor.rename,Rename,1,Rename,0
+editor.openSidebar,Open sidebar,1,Ouvrir la barre latérale,0
+editor.leaveEditor,Leave Editor,1,Quitter l'éditeur,0
 editor.loadPrevious,Load Previous,1,Charger le précédent,0
 editor.viewHistory,View Previous,1,Voir précédent,0
 editor.browse,Browse,1,Parcourir,1
@@ -141,14 +143,14 @@ editor.confirm,Confirm,1,Confirmer,1
 editor.cancel,Cancel,1,Annuler,1
 editor.caption.placeholder,Add a caption,1,Ajouter une légende,0
 editor.unsavedChanges,Unsaved changes,1,Modifications non enregistrées,1
-editor.saveChanges,Save changes,1,Enregistrer les modifications,1
-editor.discardChanges,Discard changes,1,Annuler les modifications,0
+editor.saveChanges,Save,1,Enregistrer,1
+editor.discardChanges,Discard changes,1,Annuler,0
 editor.label.or,or,1,ou,1
 editor.label.browse,browse,1,parcourir,1
 editor.label.upload,to upload,1,téléverser,1
 editor.savingChanges,Saving...,1,Enregistrement...,1
 editor.confirmOverwrite,Are you sure you want to overwrite product '{uuid}'?,1,Are you sure you want to overwrite product '{uuid}'?,0
-editor.resetChanges,Reset Changes,1,Annuler les modifications,1
+editor.resetChanges,Reset Changes,1,Annuler,1
 editor.refreshChanges.modal,"Are you sure you want to reload the product? All unsaved changes will be lost.",1,"Voulez-vous vraiment recharger ce produit? Toute modification non enregistrée sera perdue.",1
 editor.changeLang.modal,"Are you sure you want to switch languages? Unsaved changes may be lost.",1,"Voulez-vous vraiment changer de langue? Toute modification non enregistrée sera perdue.",1
 editor.frenchConfig,View French Config,1,Afficher la configuration en français,1