layout update

Author: sebader

website/public/css/main.css

@@ -1,13 +1,12 @@
 #app {
-	font-family: Tenorite, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-	/*margin: 5px;*/
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	color: #2c3e50;
-	margin-top: 0px;
-	padding-top: 10px;
-	overflow-x: hidden;
-
+font-family: Tenorite, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+/*margin: 5px;*/
+-webkit-font-smoothing: antialiased;
+-moz-osx-font-smoothing: grayscale;
+color: #2c3e50;
+margin-top: 0px;
+padding-top: 5px;
+overflow-x: hidden;
 }
 
 .header {
@@ -19,13 +18,20 @@
 	margin-left: 5px;
 }
 
-h1,
-h2 {
-	margin-top: 10pt;
+h1 {
+margin: 8px 0;
+font-size: 1.8em;
 }
 
 h2 {
-	font-weight: normal;
+margin: 8px 0;
+font-weight: normal;
+font-size: 1.5em;
+}
+
+h3 {
+margin: 8px 0;
+font-size: 1.3em;
 }
 
 hr {

website/src/App.vue

@@ -1,17 +1,12 @@
 <template>
   <div :class="{ 'map-layout': $route.name === 'mapPage' }">
     <div class="header" :class="{ 'map-header': $route.name === 'mapPage' }">
-      <h4>{{ $t("message.siteTitle") }}</h4>
+      <h4>{{ $t("message.siteTitle") }}{{ $route.name === 'infoPage' ? ' - ' + $t('message.info') : 
+          $route.name === 'hutListPage' ? ' - ' + $t('message.list') : 
+          $route.name === 'mapPage' ? ' - ' + $t('message.map') : '' }}</h4>
       <router-link :to="{ name: 'mapPage' }">{{ $t("message.map") }}</router-link> |
       <router-link :to="{ name: 'hutListPage' }">{{ $t("message.list") }}</router-link> |
-      <router-link :to="{ name: 'infoPage' }">{{ $t("message.info") }}</router-link> |
-      
-      <template v-if="isAdmin">
-        <a href="/logout">{{ $t("message.logout") }}</a>
-      </template>
-      <template v-else>
-        <a href="/login">{{ $t("message.login") }}</a>
-      </template>
+      <router-link :to="{ name: 'infoPage' }">{{ $t("message.info") }}</router-link>
 
       <span style="float:right;">
         <span v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`">

website/src/components/HutListPage.vue

@@ -1,7 +1,5 @@
 <template>
    <section>
-      <h1>{{ $t('hutListPage.allHuts') }}</h1>
-
       <p v-show="loading">{{ $t('message.loading') }}...</p>
 
       <div v-show="!loading">
@@ -85,6 +83,11 @@
 </template>
 
 <style scoped>
+section {
+   padding: 0 16px;
+   margin-top: -1rem;
+}
+
 .table-container {
    margin-top: 2rem;
 }

website/src/components/InfoPage.vue

@@ -1,23 +1,44 @@
 <template>
     <div>
-        <h3>{{ $t('infoPage.infoHeader')}}!</h3>
         <p>{{ $t('infoPage.firstParagraph')}}</p>
 
         <p>{{ $t('infoPage.secondParagraph')}}</p>
 
         <p>{{ $t('infoPage.thirdParagraph')}} <a href="https://github.com/sebader/alpinehutproject" target="_blank">sebader/alpinehutproject</a></p>
+
+        <hr />
+        <p>
+            <template v-if="isAuthenticated">
+                <a href="/logout">{{ $t("message.logout") }}</a>
+            </template>
+            <template v-else>
+                <a href="/login">{{ $t("message.login") }}</a>
+            </template>
+        </p>
     </div>
 </template>
 
 <script>
 export default {
-    async created() { },
+    props: {
+        isAuthenticated: {
+            type: Boolean,
+            default: false
+        }
+    },
     methods: {},
     computed: {},
     components: {}
 };
 </script>
 
-<style>
+<style scoped>
+div {
+    padding: 0 16px;
+    margin-top: -1rem;
+}
 
+p {
+    margin: 16px 0;
+}
 </style>