From cbe1a8a7b7ae5cc51d29be51c5588dc7d24469b4 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Tue, 28 Apr 2020 19:57:49 +0200
Subject: [PATCH] Change layout

---
 api/resources/logback.xml      |  2 +-
 frontend/assets/main.css       | 19 ++++---------------
 frontend/components/Navbar.vue | 27 +++++++++++++++++++--------
 frontend/pages/index.vue       |  2 +-
 frontend/pages/notes.vue       |  9 +++++++++
 5 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/api/resources/logback.xml b/api/resources/logback.xml
index c19e387..e031da9 100644
--- a/api/resources/logback.xml
+++ b/api/resources/logback.xml
@@ -4,7 +4,7 @@
             <pattern>%d{YYYY-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern>
         </encoder>
     </appender>
-    <root level="TRACE">
+    <root level="DEBUG">
         <appender-ref ref="STDOUT"/>
     </root>
     <logger name="org.eclipse.jetty" level="INFO"/>
diff --git a/frontend/assets/main.css b/frontend/assets/main.css
index 87ce56b..0e5f910 100644
--- a/frontend/assets/main.css
+++ b/frontend/assets/main.css
@@ -1,17 +1,6 @@
-.page-enter-active {
-  animation: bounce-in .5s;
+.page-enter-active, .page-leave-active {
+    transition: opacity .5s;
 }
-.page-leave-active {
-  animation: bounce-in .5s reverse;
-}
-@keyframes bounce-in {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1);
-  }
+.page-enter, .page-leave-to {
+    opacity: 0;
 }
diff --git a/frontend/components/Navbar.vue b/frontend/components/Navbar.vue
index fe25f81..9efbc49 100644
--- a/frontend/components/Navbar.vue
+++ b/frontend/components/Navbar.vue
@@ -2,14 +2,25 @@
     <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-menu bottom left>
+            <template v-slot:activator="{ on }">
+                <v-btn icon v-on="on">
+                    <v-icon>mdi-dots-vertical</v-icon>
+                </v-btn>
+            </template>
+
+            <v-list>
+                <v-list-item v-if="isAuthenticated" to="/notes">
+                    My notes
+                </v-list-item>
+                <v-list-item v-if="isAuthenticated" @click="logout">
+                    Logout
+                </v-list-item>
+                <v-list-item v-else>
+                    <v-btn to="/account" text rounded>Account</v-btn>
+                </v-list-item>
+            </v-list>
+        </v-menu>
     </v-app-bar>
 </template>
 
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index cc3510c..d3fa16f 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -7,7 +7,7 @@
                     :key="index"
                     class="d-flex"
                     cols="12"
-                    lg="6"
+                    md="6"
                 >
                     <v-card
                         :color="item.color"
diff --git a/frontend/pages/notes.vue b/frontend/pages/notes.vue
index 41eaaac..064acee 100644
--- a/frontend/pages/notes.vue
+++ b/frontend/pages/notes.vue
@@ -35,6 +35,15 @@
                 </div>
             </template>
             <template v-slot:item.actions="{ item }">
+                <v-icon
+                    small
+                    color="secondary"
+                    dark
+                    class="mr-2"
+                    @click="editItem(item)"
+                >
+                    mdi-eye
+                </v-icon>
                 <v-icon
                     small
                     color="secondary"