Almost finished form that lets user set PageInfo

src/App.vue

@@ -9,7 +9,7 @@
 
 import Header from '@/components/PageStrcture/Header.vue';
 import Footer from '@/components/PageStrcture/Footer.vue';
-import Defaults from '@/utils/defaults';
+import Defaults, { localStorageKeys } from '@/utils/defaults';
 import conf from '../public/conf.yml';
 
 export default {
@@ -27,10 +27,11 @@ export default {
     /* Returns either page info from the config, or default values */
     getPageInfo(pageInfo) {
       const defaults = Defaults.pageInfo;
+      const localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]);
       if (pageInfo) {
         return {
-          title: pageInfo.title || defaults.title,
-          description: pageInfo.description || defaults.description,
+          title: localPageInfo.title || pageInfo.title || defaults.title,
+          description: localPageInfo.description || pageInfo.description || defaults.description,
           navLinks: pageInfo.navLinks || defaults.navLinks,
         };
       }

src/assets/interface-icons/config-meta-data.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="digital-tachograph" class="svg-inline--fa fa-digital-tachograph fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M608 96H32c-17.67 0-32 14.33-32 32v256c0 17.67 14.33 32 32 32h576c17.67 0 32-14.33 32-32V128c0-17.67-14.33-32-32-32zm0 288H32V128h576v256zM80 272h208c8.84 0 16-7.16 16-16v-80c0-8.84-7.16-16-16-16H80c-8.84 0-16 7.16-16 16v80c0 8.84 7.16 16 16 16zm8-88h192v64H88v-64zM72 360h224c4.42 0 8-3.58 8-8v-8c0-4.42-3.58-8-8-8H72c-4.42 0-8 3.58-8 8v8c0 4.42 3.58 8 8 8zm272 0h224c4.42 0 8-3.58 8-8v-8c0-4.42-3.58-8-8-8H344c-4.42 0-8 3.58-8 8v8c0 4.42 3.58 8 8 8zM80 288c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8H80zm64 0c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8h-16zm64 0c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8h-16zm64 0c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8h-16z"></path></svg>

src/components/Configuration/ConfigContainer.vue

@@ -13,6 +13,10 @@
           <EditIcon class="button-icon"/>
           Edit Sections
         </button>
+        <button class="config-button center" @click="goToMetaEdit()">
+          <MetaDataIcon class="button-icon"/>
+          Edit Meta Data
+        </button>
         <button class="config-button center" @click="resetLocalSettings()">
           <DeleteIcon class="button-icon"/>
           Reset Local Settings
@@ -26,8 +30,8 @@
       <pre>{{this.jsonParser(this.config)}}</pre>
       <a class="download-button" href="/conf.yml" download>Download Config</a>
     </TabItem>
-    <TabItem name="Add Item">
-      <EditSiteMeta :sections="sections" />
+    <TabItem name="Edit Site Meta">
+      <EditSiteMeta :config="config" />
     </TabItem>
   </Tabs>
 </template>
@@ -40,6 +44,7 @@ import JsonEditor from '@/components/Configuration/JsonEditor';
 import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
 import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
 import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
+import MetaDataIcon from '@/assets/interface-icons/config-meta-data.svg';
 
 export default {
   name: 'ConfigContainer',
@@ -49,15 +54,20 @@ export default {
     };
   },
   props: {
-    sections: Array,
     config: Object,
   },
+  computed: {
+    sections: function getSections() {
+      return this.config.sections;
+    },
+  },
   components: {
     EditSiteMeta,
     JsonEditor,
     DownloadIcon,
     DeleteIcon,
     EditIcon,
+    MetaDataIcon,
   },
   methods: {
     /* Seletcs the edit tab of the tab view */
@@ -65,6 +75,10 @@ export default {
       const itemToSelect = this.$refs.tabView.navItems[1];
       this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
     },
+    goToMetaEdit() {
+      const itemToSelect = this.$refs.tabView.navItems[3];
+      this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
+    },
     /* Checks that the user is sure, then resets site-wide local storage, and reloads page */
     resetLocalSettings() {
       const msg = 'This will remove all user settings from local storage, '
@@ -112,6 +126,7 @@ a.config-button, button.config-button {
     width: 1rem;
     height: 1rem;
     padding: 0.2rem;
+    margin-right: 0.5rem;
   }
   &:hover {
     background: var(--config-settings-color);
@@ -156,5 +171,34 @@ a.hyperlink-wrapper {
     color: var(--config-settings-color);
   }
 }
-
+</style>
+
+<style lang="scss">
+.tab__pagination {
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+  .tab__nav__items .tab__nav__item {
+    span {
+      color: var(--config-settings-color);
+    }
+    &:hover {
+      background: var(--config-settings-color) !important;
+      span {
+        color: var(--config-settings-background);
+      }
+    }
+    &.active {
+      span {
+        font-weight: bold;
+        color: var(--config-settings-color) !important;
+      }
+    }
+  }
+  .tab__nav__items .tab__nav__item.active {
+    border-bottom: 2px solid var(--config-settings-color);
+  }
+  hr.tab__slider {
+    background: var(--config-settings-color);
+  }
+}
 </style>

src/components/Configuration/EditSiteMeta.vue

@@ -1,19 +1,110 @@
 <template>
-  <div>
-
+  <div class="site-meta-container">
+    <h2>Edit Site Meta</h2>
+    <div class="form">
+      <div class="row">
+        <span>Title</span>
+        <input v-model="formElements.title" />
+      </div>
+      <div class="row">
+        <span>Description</span>
+        <input v-model="formElements.description" />
+      </div>
+      <div class="row">
+        <span>Footer Text</span>
+        <input v-model="formElements.footerText" />
+      </div>
+    </div>
+    <button class="save-button" @click="save()">Save Changes</button>
   </div>
 </template>
 
 <script>
 
+import { localStorageKeys } from '@/utils/defaults';
+
 export default {
   name: 'EditSiteMeta',
   props: {
-    sections: Array,
+    config: Object,
+  },
+  methods: {
+    save() {
+      const pageInfo = { ...this.config.pageInfo };
+      pageInfo.title = this.formElements.title;
+      pageInfo.description = this.formElements.description;
+      pageInfo.footerText = this.formElements.footerText;
+      localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(pageInfo));
+      this.$toasted.show('Changes seved succesfully');
+    },
+  },
+  data() {
+    return {
+      formElements: {
+        title: this.config.pageInfo.title,
+        description: this.config.pageInfo.description,
+        footerText: this.config.pageInfo.footerText,
+      },
+    };
   },
 };
 </script>
 
 <style scoped lang="scss">
+.site-meta-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: 1rem;
+  background: var(--background-darker);
+  height: calc(100% - 1rem);
+  h2 {
+    margin: 1rem auto;
+    color: var(--config-settings-color);
+  }
+}
 
+div.form {
+  display: flex;
+  flex-direction: column;
+  div.row {
+    margin: 0.25rem auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    min-width: 24rem;
+    span {
+      font-size: 1.2rem;
+    }
+    input {
+      color: var(--config-settings-color);
+      background: none;
+      border: 1px solid var(--config-settings-color);
+      border-radius: var(--curve-factor);
+      padding: 0.25rem 0.5rem;
+      margin: 0.5rem;
+      min-width: 8rem;
+      font-size: 1.2rem;
+      &:focus {
+        box-shadow: 1px 1px 6px #00ccb4;
+        outline: none;
+      }
+    }
+  }
+}
+
+button.save-button {
+  padding:  0.5rem 1rem;
+  margin: 0.5rem auto;
+  font-size: 1.2rem;
+  width: 24rem;
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+  border: 1px solid var(--config-settings-color);
+  border-radius: var(--curve-factor);
+  cursor: pointer;
+  &:hover {
+    background: var(--config-settings-color);
+    color: var(--config-settings-background);
+  }
+}
 </style>

src/components/Settings/ConfigLauncher.vue

@@ -7,9 +7,9 @@
     </div>
 
     <!-- Modal containing all the configuration options -->
-    <modal :name="modalName" :resizable="true" width="80%" height="80%"
+    <modal :name="modalName" :resizable="true" width="60%" height="80%"
       @closed="$emit('modalChanged', false)">
-      <ConfigContainer :sections="sections" :config="combineConfig()" />
+      <ConfigContainer :config="combineConfig()" />
     </modal>
   </div>
 </template>
@@ -82,5 +82,10 @@ export default {
     }
   }
 }
-
+</style>
+
+<style lang="scss">
+  .vm--modal {
+    box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary);
+  }
 </style>

src/components/Settings/SearchBar.vue

@@ -1,6 +1,6 @@
 <template>
   <form>
-    <label for="filter-tiles">Search {{active}}</label>
+    <label for="filter-tiles">Search</label>
     <input
       id="filter-tiles"
       v-model="input"

src/utils/defaults.js

@@ -45,6 +45,8 @@ module.exports = {
     ICON_SIZE: 'iconSize',
     THEME: 'theme',
     CONF_SECTIONS: 'confSections',
+    PAGE_INFO: 'pageInfo',
+    APP_CONFIG: 'appConfig',
   },
   topLevelConfKeys: {
     PAGE_INFO: 'pageInfo',