From 3d2f950433062e6b76782b2a2be407e2ebce9bfe Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 26 Apr 2020 12:46:15 +0200
Subject: [PATCH] Workaround for nuxtjs layout bug

---
 frontend/layouts/default.vue |   4 +-
 frontend/layouts/wide.vue    |  28 ----------
 frontend/pages/account.vue   |  48 ++++++++--------
 frontend/pages/index.vue     | 101 +++++++++++++++++++---------------
 frontend/pages/notes.vue     | 103 ++++++++++++++++++-----------------
 5 files changed, 135 insertions(+), 149 deletions(-)
 delete mode 100644 frontend/layouts/wide.vue

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 66b0027..c221ba5 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -4,9 +4,7 @@
         <v-content>
             <v-container fill-height>
                 <v-row no-gutters justify="center">
-                    <v-col cols="12" sm="8" md="6">
-                        <nuxt />
-                    </v-col>
+                    <nuxt />
                 </v-row>
             </v-container>
         </v-content>
diff --git a/frontend/layouts/wide.vue b/frontend/layouts/wide.vue
deleted file mode 100644
index 6560694..0000000
--- a/frontend/layouts/wide.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-    <v-app>
-        <Navbar />
-        <v-content>
-            <v-container 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 a880e51..03e1e25 100644
--- a/frontend/pages/account.vue
+++ b/frontend/pages/account.vue
@@ -1,29 +1,31 @@
 <template>
-    <v-card color="primary" dark>
-        <v-btn icon to="/">
-            <v-icon>mdi-arrow-left</v-icon>
-        </v-btn>
-        <v-card-title class="text-center justify-center py-6">
-            <h1 class="font-weight-bold display-2">Account</h1>
-        </v-card-title>
+    <v-col cols="12" sm="8" md="6">
+        <v-card color="primary" dark>
+            <v-btn icon to="/">
+                <v-icon>mdi-arrow-left</v-icon>
+            </v-btn>
+            <v-card-title class="text-center justify-center py-6">
+                <h1 class="font-weight-bold display-2">Account</h1>
+            </v-card-title>
 
-        <v-tabs v-model="tab" background-color="transparent" dark grow>
-            <v-tab v-for="tab in tabs" :key="tab">
-                {{ tab }}
-            </v-tab>
-        </v-tabs>
+            <v-tabs v-model="tab" background-color="transparent" dark grow>
+                <v-tab v-for="tab in tabs" :key="tab">
+                    {{ tab }}
+                </v-tab>
+            </v-tabs>
 
-        <v-tabs-items v-model="tab">
-            <v-tab-item v-for="tab in tabs" :key="tab">
-                <v-card flat>
-                    <v-card-text>
-                        <LoginForm v-if="tab === 'Login'"></LoginForm>
-                        <RegisterForm v-else></RegisterForm>
-                    </v-card-text>
-                </v-card>
-            </v-tab-item>
-        </v-tabs-items>
-    </v-card>
+            <v-tabs-items v-model="tab">
+                <v-tab-item v-for="tab in tabs" :key="tab">
+                    <v-card flat>
+                        <v-card-text>
+                            <LoginForm v-if="tab === 'Login'"></LoginForm>
+                            <RegisterForm v-else></RegisterForm>
+                        </v-card-text>
+                    </v-card>
+                </v-tab-item>
+            </v-tabs-items>
+        </v-card>
+    </v-col>
 </template>
 
 <script>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index f5fcd13..cc3510c 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,48 +1,33 @@
 <template>
-    <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>
+    <v-col cols="12">
+        <v-container fluid>
+            <v-row>
+                <v-col
+                    v-for="(item, index) in items"
+                    :key="index"
+                    class="d-flex"
+                    cols="12"
+                    lg="6"
+                >
+                    <v-card
+                        :color="item.color"
+                        dark
+                        style="min-height: 350px; width: 100%;"
+                    >
+                        <v-card-title class="headline">
+                            {{ item.title }}
+                        </v-card-title>
+                        <v-card-subtitle>
+                            {{ item.content }}
+                        </v-card-subtitle>
+                        <v-card-actions>
+                            <v-btn text>See a demo</v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-col>
+            </v-row>
+        </v-container>
+    </v-col>
 </template>
 
 <script>
@@ -51,8 +36,36 @@ export default {
     options: {
         auth: false,
     },
+    data: () => ({
+        items: [
+            {
+                title: 'Writes your notes in markdown',
+                content:
+                    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut consectetur debitis harum' +
+                    ' illum in incidunt maxime modi quae velit? Aspernatur, consequatur error' +
+                    ' mollitia nesciunt officiis porro ratione sequi voluptas?',
+                color: 'indigo',
+            },
+            {
+                title: '',
+                content: '',
+                color: 'purple',
+            },
+            {
+                title: '',
+                content: '',
+                color: 'warning',
+            },
+            {
+                title: '',
+                content: '',
+                color: 'teal darken-2',
+            },
+        ],
+    }),
     head: () => ({
         title: 'Home',
     }),
 }
 </script>
+&
diff --git a/frontend/pages/notes.vue b/frontend/pages/notes.vue
index 688c084..41eaaac 100644
--- a/frontend/pages/notes.vue
+++ b/frontend/pages/notes.vue
@@ -1,56 +1,58 @@
 <template>
-    <v-data-table
-        :headers="headers"
-        :items="notes"
-        :loading="loading"
-        loading-text="Loading notes..."
-        class="elevation-1"
-        disable-sort
-    >
-        <template v-slot:top>
-            <v-toolbar flat color="secondary">
-                <h2 class="title white--text">
-                    Notes
-                </h2>
-                <v-spacer></v-spacer>
-                <v-btn to="/create" outlined dark>
-                    New Note
-                </v-btn>
-            </v-toolbar>
-        </template>
-        <template v-slot:item.updatedAt="{ item }">
-            {{ format(item.updatedAt) }}
-        </template>
-        <template v-slot:item.tags="{ item }">
-            <div class="tags">
-                <v-chip
-                    v-for="tag in item.tags"
-                    :key="tag"
-                    active
+    <v-col cols="12">
+        <v-data-table
+            :headers="headers"
+            :items="notes"
+            :loading="loading"
+            loading-text="Loading notes..."
+            class="elevation-1"
+            disable-sort
+        >
+            <template v-slot:top>
+                <v-toolbar flat color="secondary">
+                    <h2 class="title white--text">
+                        Notes
+                    </h2>
+                    <v-spacer></v-spacer>
+                    <v-btn to="/create" outlined dark>
+                        New Note
+                    </v-btn>
+                </v-toolbar>
+            </template>
+            <template v-slot:item.updatedAt="{ item }">
+                {{ format(item.updatedAt) }}
+            </template>
+            <template v-slot:item.tags="{ item }">
+                <div class="tags">
+                    <v-chip
+                        v-for="tag in item.tags"
+                        :key="tag"
+                        active
+                        color="secondary"
+                    >
+                        {{ tag }}
+                    </v-chip>
+                </div>
+            </template>
+            <template v-slot:item.actions="{ item }">
+                <v-icon
+                    small
                     color="secondary"
+                    dark
+                    class="mr-2"
+                    @click="editItem(item)"
                 >
-                    {{ tag }}
-                </v-chip>
-            </div>
-        </template>
-        <template v-slot:item.actions="{ item }">
-            <v-icon
-                small
-                color="secondary"
-                dark
-                class="mr-2"
-                @click="editItem(item)"
-            >
-                mdi-pencil
-            </v-icon>
-            <v-icon small color="secondary" dark @click="deleteItem(item)">
-                mdi-delete
-            </v-icon>
-        </template>
-        <template v-slot:no-data>
-            <v-btn color="primary" @click="initialize">Reset</v-btn>
-        </template>
-    </v-data-table>
+                    mdi-pencil
+                </v-icon>
+                <v-icon small color="secondary" dark @click="deleteItem(item)">
+                    mdi-delete
+                </v-icon>
+            </template>
+            <template v-slot:no-data>
+                <v-btn color="primary" @click="initialize">Reset</v-btn>
+            </template>
+        </v-data-table>
+    </v-col>
 </template>
 
 <script>
@@ -59,7 +61,6 @@ import { format } from 'timeago.js'
 export default {
     name: 'Notes',
     title: 'Notes',
-    layout: 'wide',
     data: () => ({
         loading: true,
         notes: [],