move login hint into the main content

src/App.scss

@@ -719,3 +719,17 @@ nav {
     margin-right: 0.8em;
   }
 }
+
+.login-hint {
+  text-align: center;
+  
+  @media all and (min-width: 801px) {
+    display: none;
+  }
+
+  a {
+    display: inline-block;
+    padding: 1em 0px;
+    width: 100%;
+  }
+}

src/App.vue

@@ -37,6 +37,13 @@
         </div>
       </div>
       <div class="main">
+        <div v-if="!currentUser" class="login-hint panel panel-default">
+          <div class="panel-body">
+            <router-link :to="{ name: 'login' }">
+              {{ $t("login.hint") }}
+            </router-link>
+          </div>
+        </div>
         <transition name="fade">
           <router-view></router-view>
         </transition>

src/components/timeline/timeline.js

@@ -39,8 +39,7 @@ const Timeline = {
         body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
         footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
       }
-    },
+    }
-    currentUser () { return this.$store.state.users.currentUser }
   },
   components: {
     Status,

src/components/timeline/timeline.vue

@@ -1,12 +1,4 @@
 <template>
-  <div>
-    <div v-if="!currentUser" class="login-hint panel panel-default">
-      <div class="panel-body">
-        <router-link :to="{ name: 'login' }">
-          {{ $t("login.hint") }}
-        </router-link>
-      </div>
-    </div>
   <div :class="classes.root">
     <div :class="classes.header">
       <div class="title">
@@ -39,7 +31,6 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script src="./timeline.js"></script>
@@ -65,18 +56,4 @@
   background-color: $fallback--fg;
   background-color: var(--panel, $fallback--fg);
 }
-
-.login-hint {
-  text-align: center;
-  
-  @media all and (min-width: 801px) {
-    display: none;
-  }
-
-  a {
-    display: inline-block;
-    padding: 1em 0px;
-    width: 100%;
-  }
-}
 </style>