瀏覽代碼

added Footer

Dimitri Korsch 3 年之前
父節點
當前提交
35e108cd73

+ 5 - 6
frontend/src/App.vue

@@ -8,22 +8,21 @@
       </v-container>
     </v-main>
 
-
-    <v-footer app>
-      <!-- -->
-    </v-footer>
-
+    <Footer/>
   </v-app>
 </template>
 
 <script>
 import Drawer from "@/components/Drawer"
+import Footer from "@/components/Footer"
 
 export default {
   name: 'App',
 
   components: {
-    Drawer
+    Drawer,
+    Footer,
+
   },
 
   data: () => ({

+ 8 - 0
frontend/src/components/Drawer.vue

@@ -26,6 +26,14 @@
           >
             Logout <v-icon>mdi-logout</v-icon>
           </v-btn>
+          <v-btn
+            v-else
+            :to = "{ name: 'login' }"
+            color="primary"
+            small
+          >
+            Login <v-icon>mdi-login</v-icon>
+          </v-btn>
         </v-col>
       </v-row>
     </v-sheet>

+ 60 - 0
frontend/src/components/Footer.vue

@@ -0,0 +1,60 @@
+<template>
+
+  <v-footer
+    app
+    padless
+    fixed
+    inset
+  >
+
+    <v-card
+      flat
+      tile
+      class="indigo lighten-2 text-center flex"
+    >
+      <v-card-text class="pa-1">
+        <v-btn
+          v-for="item in icons"
+          :key="item.id"
+          :to="item.to"
+          class="white--text"
+          plain
+        >
+          {{ item.text }}
+        </v-btn>
+      </v-card-text>
+
+      <v-divider></v-divider>
+
+      <v-card-text class="white--text pa-1">
+        {{ new Date().getFullYear() }} — <strong>PyCS2</strong>
+      </v-card-text>
+    </v-card>
+
+  </v-footer>
+</template>
+
+<script>
+
+const uuidv4 = require("uuid/v4")
+
+class FooterItem {
+  constructor(text, to, icon=""){
+    this.id = uuidv4();
+    this.text = text;
+    this.to = to;
+    this.icon = icon;
+  }
+}
+
+export default {
+  data () {
+    return {
+      icons: [
+        new FooterItem('Impress', {name: 'impress'}),
+        new FooterItem('About', {name: 'about'}),
+      ],
+    }
+  }
+}
+</script>

+ 24 - 6
frontend/src/routes.js

@@ -1,7 +1,9 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Index from './views/Index'
-// import Projects from './views/Projects'
+import Impress from './views/Impress'
+import About from './views/About'
+
 import ListProjects from './views/project/List'
 import CreateProject from './views/project/Create'
 import BaseProject from './views/project/Base'
@@ -37,6 +39,27 @@ export default new VueRouter({
               public: true
             }
         },
+        {
+            path: '/logout',
+            name: 'logout',
+            component: Logout,
+        },
+        {
+            path: '/about',
+            name: 'about',
+            component: About,
+            meta: {
+                public: true
+            }
+        },
+        {
+            path: '/impress',
+            name: 'impress',
+            component: Impress,
+            meta: {
+                public: true
+            }
+        },
         {
             path: '/projects',
             name: 'projects',
@@ -77,10 +100,5 @@ export default new VueRouter({
               },
             ]
         },
-        {
-            path: '/logout',
-            name: 'logout',
-            component: Logout,
-        },
     ]
 })

+ 5 - 0
frontend/src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <v-container fluid>
+    <h1>About</h1>
+  </v-container>
+</template>

+ 5 - 0
frontend/src/views/Impress.vue

@@ -0,0 +1,5 @@
+<template>
+  <v-container fluid>
+    <h1>Impress</h1>
+  </v-container>
+</template>

+ 0 - 8
frontend/src/views/Index.vue

@@ -3,11 +3,3 @@
     <h1>Index Page</h1>
   </v-container>
 </template>
-
-<script>
-  export default {
-    name: 'Index',
-  }
-</script>
-
-<style scoped></style>