UI skeleton

houby-studio · Dec 17, 2019 · c12e34a · c12e34a
1 parent adab7a3
commit c12e34a
Show file tree

Hide file tree

Showing 24 changed files with 321 additions and 182 deletions.
diff --git a/package.json b/package.json
@@ -1,30 +1,30 @@
 {
   "name": "open-gamers-library",
-  "productName": "OGL",
+  "version": "0.1.1",
+  "private": true,
   "description": "Open Gamers' Library - Hoard, play and rate your games!",
   "author": {
     "name": "Jakub Šindelář",
     "email": "[email protected]",
     "url": "https://houby-studio.eu/"
   },
-  "version": "0.1.0",
-  "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
-    "release": "vue-cli-service electron:build",
     "postinstall": "electron-builder install-app-deps",
-    "postuninstall": "electron-builder install-app-deps"
+    "postuninstall": "electron-builder install-app-deps",
+    "release": "vue-cli-service electron:build"
   },
   "main": "background.js",
   "dependencies": {
     "core-js": "^3.4.3",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
+    "vuetify": "^2.1.0",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
@@ -43,9 +43,12 @@
     "eslint-plugin-vue": "^5.0.0",
     "lint-staged": "^9.4.3",
     "node-sass": "^4.12.0",
+    "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-electron-builder": "^2.0.0-alpha.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-cli-plugin-vuetify": "^2.0.2",
+    "vue-template-compiler": "^2.6.10",
+    "vuetify-loader": "^1.3.0"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
@@ -55,5 +58,6 @@
       "vue-cli-service lint",
       "git add"
     ]
-  }
+  },
+  "productName": "OGL"
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>open-gamers-library</title>
+    <title>OGL | Open Gamers' Library</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,33 +1,29 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-      <router-link to="/library">Library</router-link>
-    </div>
-    <router-view/>
-  </div>
+  <v-app>
+    <Navigation />
+    <v-content>
+      <router-view />
+    </v-content>
+    <Footer />
+  </v-app>
 </template>
 
-<style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
+<script>
+import Navigation from './components/Navigation'
+import Footer from './components/Footer'
 
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+export default {
+  name: 'App',
 
-    &.router-link-exact-active {
-      color: #42b983;
-    }
+  components: {
+    Navigation,
+    Footer
   }
 }
+</script>
+
+<style>
+  ::-webkit-scrollbar {
+      display: none;
+  }
 </style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -0,0 +1,10 @@
+<template>
+  <v-card height="150">
+    <v-footer fixed color="primary" dark class="font-weight-medium">
+      <v-col class="text-center" cols="12">
+        <strong><v-icon>mdi-mushroom</v-icon> Houby Studio</strong>
+        {{ new Date().getFullYear() }}
+      </v-col>
+    </v-footer>
+  </v-card>
+</template>
diff --git a/src/components/Header.vue b/src/components/Header.vue
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/Launch.vue b/src/components/Launch.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="launch">
+    <h1>Launching client</h1>
+    <p>{{ msg }}</p>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'launch',
+  components: {
+    // comp
+  },
+  props: ['msg']
+}
+</script>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -0,0 +1,64 @@
+<template>
+  <v-app-bar app color="primary" dark>
+    <div class="d-flex align-center">
+      <v-img
+        alt="OGL Logo"
+        class="shrink mr-2"
+        contain
+        :src="require('../assets/logo.png')"
+        transition="scale-transition"
+        width="40"
+      />
+      <v-toolbar-title d-xs-none>OGL</v-toolbar-title>
+    </div>
+    <v-tabs show-arrows align-with-title centered grow background-color="primary">
+      <v-tab to="/library">
+        <v-icon>mdi-bookshelf</v-icon>Library
+      </v-tab>
+      <v-tab to="/explore">
+        <v-icon>mdi-magnify</v-icon>Explore
+      </v-tab>
+      <v-tab to="/profile">
+        <v-icon>mdi-account</v-icon>Profile
+      </v-tab>
+    </v-tabs>
+    <!-- <v-spacer></v-spacer> -->
+
+    <v-menu offset-y bottom transition="scroll-y-transition">
+      <template v-slot:activator="{ on }">
+        <v-btn dark icon v-on="on">
+          <v-icon>mdi-dots-vertical</v-icon>
+        </v-btn>
+      </template>
+
+      <v-list>
+        <v-list-item-group color="primary">
+          <v-list-item v-for="item in navigation" :key="item.name" :to="item.link">
+            <v-list-item-icon>
+              <v-icon v-text="item.icon"></v-icon>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title v-text="item.name"></v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<script>
+
+export default {
+  name: 'Navigation',
+  data: function () {
+    return {
+      navigation: [
+        { name: 'Settings', icon: 'mdi-settings', link: '/settings' },
+        { name: 'About', icon: 'mdi-information', link: '/about' },
+        { name: 'Quit', icon: 'mdi-bolnisi-cross', link: '/quit' }
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/main.js b/src/main.js
@@ -2,11 +2,13 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import vuetify from './plugins/vuetify'
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
   store,
+  vuetify,
   render: h => h(App)
 }).$mount('#app')
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+
+Vue.use(Vuetify)
+
+export default new Vuetify({
+})