UI improvements + logo

iot2tangle · Oct 11, 2020 · d7cc756 · d7cc756
1 parent dcb8827
commit d7cc756
Show file tree

Hide file tree

Showing 8 changed files with 8,269 additions and 164 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+BASE_URL=http://95.217.218.140
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 ## Build Setup
 
+Using npm:
+
 ```bash
 # install dependencies
 $ npm install
@@ -17,4 +19,23 @@ $ npm run start
 $ npm run generate
 ```
 
+Or using yarn:
+
+```bash
+# install dependencies
+$ yarn
+
+# serve with hot reload at localhost:3000
+$ yarn dev
+
+# build for production and launch server
+$ yarn build
+$ yarn start
+
+# generate static project
+$ yarn generate
+```
+
+Create a `.env` file by renaming `.env.example`.
+
 For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
diff --git a/assets/I2t-explorer-logo.png b/assets/I2t-explorer-logo.png
diff --git a/assets/variables.scss b/assets/variables.scss
@@ -3,8 +3,9 @@
 // The variables you want to modify
 // $font-size-root: 20px;
 
-
-$body-font-family: 'Poppins';
-$heading-font-family: 'Poppins';
+$body-font-family: "Montserrat", "sans-serif";
+$heading-font-family: "Montserrat", "sans-serif";
 $font-size-root: 18px;
-@import '~vuetify/src/styles/styles.sass';
+$btn-letter-spacing: 0;
+$list-item-padding: 0;
+@import "~vuetify/src/styles/styles.sass";
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,105 +1,150 @@
 <template>
-  <v-app dark>
-    <v-navigation-drawer
-      v-model="drawer"
-      :mini-variant="miniVariant"
-      :clipped="clipped"
-      fixed
-      app
-    >
-      <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title v-text="item.title" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
+  <v-app dark flat>
     <v-app-bar
       :clipped-left="clipped"
+      color="white"
+      elevate-on-scroll
+      flat
       fixed
       app
     >
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <img class="logo" src="~/assets/i2t-logo.png" />
+      <v-app-bar-nav-icon
+        v-show="$vuetify.breakpoint.smAndDown"
+        @click.stop="drawer = !drawer"
+      />
+
+      <img class="logo" src="~/assets/i2t-explorer-logo.png" />
+
       <v-spacer />
+
+      <div v-show="$vuetify.breakpoint.mdAndUp">
+        <v-btn
+          v-for="(item, index) in items"
+          :key="index"
+          :href="item.href"
+          target="_blank"
+          text
+        >
+          <strong>{{ item.title }}</strong>
+        </v-btn>
+      </div>
     </v-app-bar>
-    <v-main>
+
+    <v-main color="red">
       <v-container>
         <nuxt />
       </v-container>
     </v-main>
+
     <v-navigation-drawer
-      v-model="rightDrawer"
-      :right="right"
+      v-show="$vuetify.breakpoint.smAndDown"
+      v-model="drawer"
       temporary
       fixed
     >
-      <v-list>
-        <v-list-item @click.native="right = !right">
-          <v-list-item-action>
-            <v-icon light>
-              mdi-repeat
-            </v-icon>
-          </v-list-item-action>
-          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
+      <v-list class="drawer">
+        <v-list-item
+          v-for="(item, index) in items"
+          :key="index"
+          @click.native="right = !right"
+        >
+          <v-btn :href="item.href" text>
+            <strong>{{ item.title }}</strong>
+          </v-btn>
         </v-list-item>
       </v-list>
     </v-navigation-drawer>
-    <v-footer
-      :absolute="!fixed"
-      app
-    >
-      <span>&copy; {{ new Date().getFullYear() }}</span>
+
+    <v-footer :absolute="!fixed" app>
+      <v-container>
+        <v-row justify="center">
+          <img class="logo" src="~/assets/i2t-explorer-logo.png" />
+        </v-row>
+        <v-row
+          v-show="$vuetify.breakpoint.smAndDown"
+          justify="center"
+          v-for="(item, index) in items"
+          :key="index"
+        >
+          <div>
+            <v-btn :href="item.href" target="_blank" text>
+              <strong>{{ item.title }}</strong>
+            </v-btn>
+          </div>
+        </v-row>
+        <v-row v-show="$vuetify.breakpoint.mdAndUp" justify="center">
+          <div class="link-container">
+            <v-btn
+              :href="item.href"
+              target="_blank"
+              text
+              v-for="(item, index) in items"
+              :key="index"
+            >
+              <strong>{{ item.title }}</strong>
+            </v-btn>
+          </div>
+        </v-row>
+        <v-row justify="center">
+          <p class="copyright-text">
+            &copy; Copyright {{ new Date().getFullYear() }}
+          </p>
+        </v-row>
+      </v-container>
     </v-footer>
   </v-app>
 </template>
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       clipped: false,
       drawer: false,
       fixed: false,
       items: [
         {
-          icon: 'mdi-apps',
-          title: 'Welcome',
-          to: '/'
+          title: "iot2tangle.io",
+          href: "https://iot2tangle.io"
+        },
+        {
+          title: "I2THub",
+          href: "https://github.com/iot2tangle"
         },
         {
-          icon: 'mdi-chart-bubble',
-          title: 'Inspire',
-          to: '/inspire'
+          title: "Donate",
+          href: "https://iot2tangle.io"
         }
       ],
       miniVariant: false,
       right: true,
       rightDrawer: false,
-      title: 'Vuetify.js'
-    }
+      title: "Vuetify.js"
+    };
   }
-}
+};
 </script>
 
-
-
 <style>
 .logo {
-  height: 32px;
+  height: 42px;
 }
 
 body {
-  font-family: 'Poppins', sans-serif !important;
+  font-family: "Montserrat", sans-serif !important;
+}
+
+.drawer {
+  margin-top: 50px;
+}
+
+.link-container {
+  margin-top: 10px;
+}
+
+.copyright-text {
+  margin-top: 10px;
+  font-size: 12px;
+  color: #a1a1a1;
 }
-</style>
+</style>
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -1,4 +1,4 @@
-import colors from 'vuetify/es5/util/colors'
+import colors from "vuetify/es5/util/colors";
 
 export default {
   // use this for different base routes
@@ -10,74 +10,78 @@ export default {
 
   // Global page headers (https://go.nuxtjs.dev/config-head)
   head: {
-    titleTemplate: '%s - I2T Streams Explorer',
-    title: 'I2T Streams Explorer',
-    description: 'An Explorer for IOTA Streams.',
+    titleTemplate: "%s - I2T Streams Explorer",
+    title: "I2T Streams Explorer",
+    description: "An Explorer for IOTA Streams.",
     meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' }
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { hid: "description", name: "description", content: "" }
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
       {
         rel: "stylesheet",
-        href: "https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap",
+        href:
+          "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap"
       },
+      {
+        rel: "stylesheet",
+        href:
+          "https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
+      }
     ]
   },
 
   // Global CSS (https://go.nuxtjs.dev/config-css)
-  css:  [],
+  css: [],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-  plugins: [
-  ],
+  plugins: [],
 
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,
 
   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
   buildModules: [
     // https://go.nuxtjs.dev/vuetify
-    '@nuxtjs/vuetify',
-    '@nuxtjs/moment',
+    "@nuxtjs/vuetify",
+    "@nuxtjs/moment"
   ],
 
   // Modules (https://go.nuxtjs.dev/config-modules)
   modules: [
     // https://go.nuxtjs.dev/axios
-    '@nuxtjs/axios',
+    "@nuxtjs/axios"
   ],
 
   // Axios module configuration (https://go.nuxtjs.dev/config-axios)
   axios: {},
 
   // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
   vuetify: {
-    customVariables: ['~/assets/variables.scss'],
+    customVariables: ["~/assets/variables.scss"],
     treeShake: true,
     defaultAssets: false,
     font: {
-      family: 'Poppins'
+      family: "Montserrat"
     },
     theme: {
       dark: false,
       themes: {
         light: {
           primary: "#16a1ff", // #E53935
           secondary: "#6c757d", // #FFCDD2
-          accent: "#2b56f5", // #3F51B5
-        },
+          accent: "#2b56f5" // #3F51B5
+        }
       }
     }
   },
-  moment: { },
+  moment: {},
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)
-  build: {
-  },
+  build: {},
   env: {
-    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
+    baseUrl: process.env.BASE_URL || "http://localhost:3000"
   }
-}
+};