From cc49cb97afd0f60c63bfb9a4b17f6f046d2aa0f7 Mon Sep 17 00:00:00 2001 From: Gordon Lin <75815453+gordlin@users.noreply.github.com> Date: Tue, 28 Jan 2025 14:54:14 -0500 Subject: [PATCH] Redesign header area, improve layout on Canada.ca template --- index-ca-en.html | 2 +- index-ca-fr.html | 2 +- src/components/editor.vue | 646 +++++++++++++++++++---------- src/components/home.vue | 4 +- src/components/metadata-editor.vue | 12 +- src/components/slide-editor.vue | 11 +- src/lang/lang.csv | 10 +- 7 files changed, 458 insertions(+), 229 deletions(-) diff --git a/index-ca-en.html b/index-ca-en.html index 0a2cb27cf..d042f3894 100644 --- 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 index 8cbcf9d9e..cd7a4b548 100644 --- 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 index 3e883825d..c7a81b067 100644 --- a/src/components/editor.vue +++ b/src/components/editor.vue @@ -4,102 +4,114 @@
-
-
- - - - - - - - - -
+
+
+
+
+ + + + + + + + +
-
- -
- {{ metadata.title }} - UUID: {{ uuid }} -
- -
- - - - - - + - - {{ $t('editor.unsavedChanges') }} - - - - -
- -
+

{{ $t('editor.unsavedChanges') }}

+
+ + + + + - -
- - - - -
+ + + + + {{ currentRoute.includes('#/en') ? 'Français' : 'English' }} + +
- - - - - - -
+ +
+
+
+ +
+ {{ metadata.title }} - - - - - - - - - + {{ $t('editor.uuid') }}: {{ uuid }} +
+ +
+ + +
+ + + +
+ + + + +
+
+
+ + + + + + + + +
+
+
+
- - @@ -357,6 +547,8 @@ export default class EditorV extends Vue { @Prop() saving!: boolean; @Prop() unsavedChanges!: boolean; + currentRoute = window.location.href; + // Form properties. uuid = ''; logoImage: undefined | File = undefined; @@ -460,7 +652,6 @@ export default class EditorV extends Vue { this.slideIndex = index; (this.$refs.slide as SlideEditorV).panelIndex = 0; (this.$refs.slide as SlideEditorV).advancedEditorView = false; - window.scrollTo(0, 0); }, 5); } @@ -602,11 +793,12 @@ window.addEventListener('resize', () => { margin: 0 auto; height: 100vh; - width: 100vw; + width: 100%; display: grid; grid-template-columns: 1fr; - grid-template-rows: auto 1fr; + grid-template-rows: auto auto 1fr; grid-template-areas: + 'header-upper' 'header' 'main'; } @@ -676,15 +868,19 @@ select:focus { padding: 0.25 0.25em !important; } +.editor-header-upper { + grid-area: 'header-upper'; + z-index: 150; +} + .editor-header { grid-area: header; - top: -1px; - padding-top: 9px; + z-index: 150; } .editor-body { grid-area: main; - overflow: hidden; + overflow: auto; } .fade-enter-active, @@ -721,8 +917,7 @@ select:focus { @media only screen and (min-width: 768px) { .editor-area { overflow-y: auto; - //height: calc(100vh - 80px); - height: calc(calc(var(--vh, 1vh) * 100) - 100px); + height: 100%; } } @@ -757,7 +952,6 @@ select:focus { display: none; position: absolute; background-color: white; - min-width: 110px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; border: 1px solid lightgray; @@ -791,7 +985,7 @@ select:focus { } #sidebar-mobile { - z-index: 21; // should be on top + z-index: 201 !important; // should be on top height: 100%; width: 0; /* Initial width is 0 to be hidden */ max-width: 100%; @@ -810,7 +1004,35 @@ select:focus { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Translucent black */ - z-index: 20; /* Ensure it appears just under the sidebar */ + z-index: 199; /* Ensure it appears just under the sidebar */ display: none; /* Initially hidden */ } + +.line-clamp-1 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; +} + +.mobile-hidden-text { + width: auto; +} + +@media only screen and (min-width: 768px) { + #sidebar-desktop { + display: block !important; + } +} + +@media only screen and (max-width: 768px) { + .mobile-hidden-text { + width: 0 !important; + height: 0 !important; + padding: 0; + margin: 0; + overflow: hidden; + border: none; + } +} diff --git a/src/components/home.vue b/src/components/home.vue index 3fdb3c867..215646616 100644 --- a/src/components/home.vue +++ b/src/components/home.vue @@ -4,7 +4,7 @@

{{ $t('editor.respectTitle') }}

{{ `${currLang === 'en' ? 'Français' : 'English'}` }}
 @@ -134,7 +134,7 @@ class="border-b border-solid" :class="idx === userStorylines.length - 1 ? 'border-black' : 'border-gray-200'" > -
UUID: {{ storyline.uuid }}
+
{{ $t('editor.uuid') }}: {{ storyline.uuid }}
{{ $t('editor.previousProducts.productInfo.title') + ': ' + storyline.titleEN }}
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue index 59eebfff2..583085578 100644 --- a/src/components/metadata-editor.vue +++ b/src/components/metadata-editor.vue @@ -17,9 +17,7 @@ > { 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 index 5fe1b4f9f..91c3378a8 100644 --- a/src/components/slide-editor.vue +++ b/src/components/slide-editor.vue @@ -45,7 +45,8 @@
-
+
-
+
-
+
= { diff --git a/src/lang/lang.csv b/src/lang/lang.csv index f798d2e6a..ab5581e2d 100644 --- 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