Almost finished form that lets user set PageInfo

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>