From 89dbf93cfdef6cfd937f66f54856014bba4859cb Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 26 Apr 2020 03:12:24 +0200
Subject: [PATCH] Some css + some content...

---
 frontend/components/Navbar.vue | 30 ++++++++++++++++
 frontend/layouts/centered.vue  | 19 -----------
 frontend/layouts/default.vue   | 32 +++++-------------
 frontend/layouts/wide.vue      | 28 +++++++++++++++
 frontend/pages/account.vue     |  2 --
 frontend/pages/index.vue       | 46 +++++++++++++++++++++++--
 frontend/pages/new.vue         | 62 ----------------------------------
 frontend/pages/notes.vue       |  3 +-
 8 files changed, 113 insertions(+), 109 deletions(-)
 create mode 100644 frontend/components/Navbar.vue
 delete mode 100644 frontend/layouts/centered.vue
 create mode 100644 frontend/layouts/wide.vue
 delete mode 100644 frontend/pages/new.vue

diff --git a/frontend/components/Navbar.vue b/frontend/components/Navbar.vue
new file mode 100644
index 0000000..fe25f81
--- /dev/null
+++ b/frontend/components/Navbar.vue
@@ -0,0 +1,30 @@
+<template>
+    <v-app-bar fixed app color="primary" dark>
+        <v-btn to="/" text rounded>Simple Notes</v-btn>
+        <v-spacer />
+        <div v-if="isAuthenticated">
+            <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
+            <v-btn class="mr-2" outlined>
+                Welcome {{ loggedInUser.username }}
+            </v-btn>
+            <v-btn outlined @click="logout">Logout</v-btn>
+        </div>
+        <v-btn v-else to="/account" text rounded>Account</v-btn>
+    </v-app-bar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'Navbar',
+    computed: {
+        ...mapGetters(['isAuthenticated', 'loggedInUser']),
+    },
+    methods: {
+        async logout() {
+            await this.$auth.logout()
+        },
+    },
+}
+</script>
diff --git a/frontend/layouts/centered.vue b/frontend/layouts/centered.vue
deleted file mode 100644
index 6ab12d3..0000000
--- a/frontend/layouts/centered.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <v-app>
-        <v-content>
-            <v-container class="fill-height" fluid>
-                <v-row align="center" justify="center">
-                    <v-col cols="12" lg="6" md="8">
-                        <nuxt />
-                    </v-col>
-                </v-row>
-            </v-container>
-        </v-content>
-    </v-app>
-</template>
-
-<script>
-export default {
-    name: 'Centered',
-}
-</script>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index b48e766..66b0027 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,37 +1,23 @@
 <template>
     <v-app>
-        <v-app-bar fixed app color="primary" dark>
-            <v-btn to="/" text rounded>Simple Notes</v-btn>
-            <v-spacer />
-            <div v-if="isAuthenticated">
-                <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
-                <v-btn class="mr-2" outlined>
-                    Welcome {{ loggedInUser.username }}
-                </v-btn>
-                <v-btn outlined @click="logout">Logout</v-btn>
-            </div>
-            <v-btn v-else to="/account" text rounded>Account</v-btn>
-        </v-app-bar>
+        <Navbar />
         <v-content>
-            <v-container>
-                <nuxt />
+            <v-container fill-height>
+                <v-row no-gutters justify="center">
+                    <v-col cols="12" sm="8" md="6">
+                        <nuxt />
+                    </v-col>
+                </v-row>
             </v-container>
         </v-content>
     </v-app>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import Navbar from '@/components/Navbar'
 
 export default {
-    computed: {
-        ...mapGetters(['isAuthenticated', 'loggedInUser']),
-    },
-    methods: {
-        async logout() {
-            await this.$auth.logout()
-        },
-    },
+    components: { Navbar },
 }
 </script>
 
diff --git a/frontend/layouts/wide.vue b/frontend/layouts/wide.vue
new file mode 100644
index 0000000..a67a488
--- /dev/null
+++ b/frontend/layouts/wide.vue
@@ -0,0 +1,28 @@
+<template>
+    <v-app>
+        <Navbar />
+        <v-content>
+            <v-container fluid fill-height>
+                <v-row no-gutters justify="center">
+                    <v-col cols="12">
+                        <nuxt />
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-content>
+    </v-app>
+</template>
+
+<script>
+import Navbar from '@/components/Navbar'
+
+export default {
+    components: { Navbar },
+}
+</script>
+
+<style>
+html {
+    overflow-y: auto;
+}
+</style>
diff --git a/frontend/pages/account.vue b/frontend/pages/account.vue
index f600493..a880e51 100644
--- a/frontend/pages/account.vue
+++ b/frontend/pages/account.vue
@@ -31,8 +31,6 @@ import LoginForm from '~/components/LoginForm'
 import RegisterForm from '~/components/RegisterForm'
 
 export default {
-    name: 'Centered',
-    layout: 'centered',
     options: {
         auth: 'guest',
     },
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index f65e7cd..995cde7 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,5 +1,48 @@
 <template>
-    <h1>slt</h1>
+    <v-container>
+        <v-row dense>
+            <v-col cols="12">
+                <v-card color="#385F73" dark>
+                    <v-card-title class="headline">
+                        Unlimited notes now
+                    </v-card-title>
+                    <v-card-subtitle>
+                        Listen to your favorite artists and albums whenever and
+                        wherever, online and offline.
+                    </v-card-subtitle>
+                    <v-card-actions>
+                        <v-btn text>See a demo</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-col>
+            <v-col cols="12">
+                <v-card color="#1F7087" dark>
+                    <v-card-title class="headline">
+                        Wow
+                    </v-card-title>
+                    <v-card-subtitle>
+                        You can even search your notes
+                    </v-card-subtitle>
+                    <v-card-actions>
+                        <v-btn text>Create an account</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-col>
+            <v-col cols="12">
+                <v-card color="#952175" dark>
+                    <v-card-title class="headline">
+                        babar
+                    </v-card-title>
+                    <v-card-subtitle>
+                        You notes are safe with us
+                    </v-card-subtitle>
+                    <v-card-actions>
+                        <v-btn text>Privacy policy</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-col>
+        </v-row>
+    </v-container>
 </template>
 
 <script>
@@ -8,7 +51,6 @@ export default {
     options: {
         auth: false,
     },
-    data: () => ({}),
     head: () => ({
         title: 'Home',
     }),
diff --git a/frontend/pages/new.vue b/frontend/pages/new.vue
deleted file mode 100644
index 72bb7b2..0000000
--- a/frontend/pages/new.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-    <v-card flat>
-        <v-toolbar color="primary" dark extended prominent>
-            <v-app-bar-nav-icon></v-app-bar-nav-icon>
-            <v-toolbar-title>Notes</v-toolbar-title>
-        </v-toolbar>
-
-        <v-card class="mx-auto" max-width="700" style="margin-top: -64px;">
-            <v-toolbar flat>
-                <v-toolbar-title class="grey--text"
-                    >Create a note</v-toolbar-title
-                >
-            </v-toolbar>
-
-            <v-divider></v-divider>
-
-            <v-card-text>
-                <v-text-field label="Title" value="My new note"></v-text-field>
-
-                <v-textarea
-                    label="Text"
-                    counter
-                    loader-height="5"
-                    spellcheck="false"
-                    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse"
-                ></v-textarea>
-
-                <v-combobox
-                    v-model="tags"
-                    :items="possibleTags"
-                    :delimiters="delimiters"
-                    label="Tags"
-                    multiple
-                    chips
-                    deletable-chips
-                ></v-combobox>
-            </v-card-text>
-
-            <v-divider></v-divider>
-
-            <v-card-actions>
-                <v-btn color="success" class="mx-auto" depressed block>
-                    Create
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-card>
-</template>
-
-<script>
-export default {
-    name: 'New',
-    layout: 'empty',
-    data: () => ({
-        delimiters: [' ', ','],
-        tags: [],
-        possibleTags: ['Dev', 'Ephec', 'Java'],
-    }),
-}
-</script>
-
-<style scoped></style>
diff --git a/frontend/pages/notes.vue b/frontend/pages/notes.vue
index 21384ff..688c084 100644
--- a/frontend/pages/notes.vue
+++ b/frontend/pages/notes.vue
@@ -4,7 +4,7 @@
         :items="notes"
         :loading="loading"
         loading-text="Loading notes..."
-        class="elevation-1 mt-10"
+        class="elevation-1"
         disable-sort
     >
         <template v-slot:top>
@@ -59,6 +59,7 @@ import { format } from 'timeago.js'
 export default {
     name: 'Notes',
     title: 'Notes',
+    layout: 'wide',
     data: () => ({
         loading: true,
         notes: [],