🚧 Adds responsivness, translations, icons and layout to bottom banner

src/assets/locales/en.json

@@ -168,5 +168,22 @@
     "newtab": "New Tab",
     "modal": "Pop-Up Modal",
     "workspace": "Workspace View"
+  },
+  "interactive-editor": {
+    "edit-page-info-btn": "Edit Page Info",
+    "edit-page-info-tooltip": "App title, description, nav links, footer text, etc",
+    "edit-app-config-btn": "Edit App Config",
+    "edit-app-config-tooltip": "All other app configuration options",
+    "save-locally-btn": "Save Locally",
+    "save-locally-tooltip": "Save config locally, to browser storage. This will not affect your config file, but changes will only be saved on this device",
+    "save-disk-btn": "Save to Disk",
+    "save-disk-tooltip": "Save config to the conf.yml file on disk. This will backup, and then over-write your existing config",
+    "export-config-btn": "Export Config",
+    "export-config-tooltip": "View and export new config, either to a file, or to clipboard",
+    "cancel-changes-btn": "Reset Changes",
+    "cancel-changes-tooltip": "Reset current modifications. This will not affect your saved config",
+    "edit-mode-name": "Edit Mode",
+    "edit-mode-subtitle": "You are in Edit Mode",
+    "edit-mode-description": "This means you can make modifications to your config, and preview the results, but until you save, none of your changes will be preserved."
   }
 }

src/components/InteractiveEditor/EditModeSaveMenu.vue

@@ -1,18 +1,59 @@
 <template>
+  <!-- Intro Info -->
   <div class="edit-mode-bottom-banner">
     <div class="edit-banner-section intro-container">
-      <p class="edit-mode-intro l-1">You are in Edit Mode</p>
+      <p class="section-sub-title edit-mode-intro l-1">
+        {{ $t('interactive-editor.edit-mode-subtitle') }}
+      </p>
       <p class="edit-mode-intro l-2">
-        This means you can make modifications to your config,
+        {{ $t('interactive-editor.edit-mode-description') }}
-        and preview the results, but until you save, none of your changes will be preserved.
       </p>
     </div>
-    <div class="edit-banner-section"></div>
+    <div class="edit-banner-section empty-space"></div>
+    <!-- Save Buttons -->
     <div class="edit-banner-section save-buttons-container">
-      <Button :click="reset">Reset</Button>
+      <p class="section-sub-title">Config Saving Options</p>
-      <Button>Export Config</Button>
+      <Button
-      <Button>Save Locally</Button>
+        v-tooltip="tooltip($t('interactive-editor.export-config-tooltip'))"
-      <Button>Save to Disk</Button>
+      >
+        {{ $t('interactive-editor.export-config-btn') }}
+        <ExportIcon />
+      </Button>
+      <Button
+        :click="reset"
+        v-tooltip="tooltip($t('interactive-editor.cancel-changes-tooltip'))"
+      >
+        {{ $t('interactive-editor.cancel-changes-btn') }}
+        <CancelIcon />
+      </Button>
+      <Button
+        v-tooltip="tooltip($t('interactive-editor.save-locally-tooltip'))"
+      >
+        {{ $t('interactive-editor.save-locally-btn') }}
+        <SaveLocallyIcon />
+      </Button>
+      <Button
+        v-tooltip="tooltip($t('interactive-editor.save-disk-tooltip'))"
+      >
+        {{ $t('interactive-editor.save-disk-btn') }}
+        <SaveToDiskIcon />
+      </Button>
+    </div>
+    <!-- Open Modal Buttons -->
+    <div class="edit-banner-section edit-site-config-buttons">
+      <p class="section-sub-title">Edit Site Data</p>
+      <Button
+        v-tooltip="tooltip($t('interactive-editor.edit-page-info-tooltip'))"
+      >
+        {{ $t('interactive-editor.edit-page-info-btn') }}
+        <PageInfoIcon />
+      </Button>
+      <Button
+        v-tooltip="tooltip($t('interactive-editor.edit-app-config-tooltip'))"
+      >
+        {{ $t('interactive-editor.edit-app-config-btn') }}
+        <AppConfigIcon />
+      </Button>
     </div>
   </div>
 </template>
@@ -21,16 +62,32 @@
 import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 
+import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
+import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
+import ExportIcon from '@/assets/interface-icons/interactive-editor-export-changes.svg';
+import CancelIcon from '@/assets/interface-icons/interactive-editor-cancel-changes.svg';
+import AppConfigIcon from '@/assets/interface-icons/interactive-editor-app-config.svg';
+import PageInfoIcon from '@/assets/interface-icons/interactive-editor-page-info.svg';
+
 export default {
   name: 'EditModeSaveMenu',
   components: {
     Button,
+    SaveLocallyIcon,
+    SaveToDiskIcon,
+    ExportIcon,
+    CancelIcon,
+    AppConfigIcon,
+    PageInfoIcon,
   },
   methods: {
     reset() {
       this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
       this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
     },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
   },
 };
 </script>
@@ -40,39 +97,59 @@ export default {
 
 div.edit-mode-bottom-banner {
   position: absolute;
+  display: grid;
+  z-index: 5;
   bottom: 0;
   width: 100%;
-  display: flex;
-  vertical-align: middle;
-  justify-content: space-between;
   padding: 0.25rem 0;
   border-top: 2px solid var(--primary);
-  background: var(--background);
+  background: var(--background-darker);
-  z-index: 5;
   box-shadow: 0 -5px 7px var(--transparent-50);
+  grid-template-columns: 45% 10% 45%;
+  @include laptop-up { grid-template-columns: 40% 20% 40%; }
+  @include monitor-up { grid-template-columns: 30% 40% 30%; }
+  @include big-screen-up { grid-template-columns: 25% 50% 25%; }
+
+  /* Main sections */
   .edit-banner-section {
     padding: 0.5rem;
+    height: 100%;
+    /* Section sub-titles */
+    p.section-sub-title {
+      margin: 0;
+      color: var(--primary);
+      font-weight: bold;
+      cursor: default;
     }
-  .edit-banner-section.intro-container {
+    /* Intro-text container */
-    max-width: 35%;
+    &.intro-container  {
         p.edit-mode-intro {
+        margin: 0;
         color: var(--primary);
         cursor: default;
-      margin: 0;
-      &.l-1 {
-        font-weight: bold;
       }
     }
-  }
+    /* Button containers */
-  .edit-banner-section.save-buttons-container {
+    &.edit-site-config-buttons,
-    display: flex;
+    &.save-buttons-container {
-    place-self: center;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
       button {
         margin: 0.25rem;
         height: fit-content;
       }
+      p.section-sub-title {
+        grid-column-start: span 2;
       }
+    }
+    &.save-buttons-container {
+      grid-row-start: span 2;
+    }
+  }
+
+  /* Mobile layout */
   @include tablet-down {
+    display: flex;
     flex-direction: column;
     .edit-banner-section,
     .edit-banner-section.intro-container {