make notes own page; grid for notes; show version on app;

src/App.vue

@@ -4,6 +4,9 @@
             <Menu/>
             <div class="col" id="page-wrapper">
                 <router-view/>
+                <span id="version">
+                    v{{ version }}
+                </span>
             </div>
         </div>
     </div>
@@ -13,7 +16,6 @@
     <TasksForTracker/>
     <Tasks/>
     <History/>
-    <Notes/>
     <Settings/>
 </template>
 
@@ -28,12 +30,10 @@ import HistoryForTracker from "./views/HistoryForTracker";
 import CustomBookForTracker from "./views/CustomBookForTracker";
 import Settings from "./views/Settings";
 import Tasks from "./views/Tasks";
-import Notes from "./views/Notes";
 
 export default {
     el: '#root',
     components: {
-        Notes,
         Tasks,
         Settings,
         CustomBookForTracker,
@@ -44,6 +44,7 @@ export default {
     },
     data() {
         return {
+            version: '0.8.23.3',
             sounds: {
                 bad: [
                     'alert',
@@ -56,7 +57,7 @@ export default {
             theme: 'materia',
             customBookingValue: '',
             customDateForPastDays: '',
-            newTaskInput: ''
+            newTaskInput: '',
         }
     },
     mounted() {
@@ -231,4 +232,12 @@ export default {
 #page-wrapper {
     padding-top: 15px;
 }
+
+#version {
+    position: fixed;
+    bottom: 1em;
+    right: 2em;
+    z-index: -1;
+    color: lightgrey;
+}
 </style>

src/router/index.js

@@ -3,6 +3,7 @@ import Trackers from "../views/Trackers";
 import Settings from "../views/Settings";
 import TrackersDetail from "../views/TrackersDetail";
 import Archive from "../views/Archive";
+import Notes from "../views/Notes";
 
 Array.prototype.pushToBeginning = function (toPush) {
   return this.unshift.apply(this, [toPush]);
@@ -24,6 +25,11 @@ const routes = [
     name: 'Archive',
     component: Archive
   },
+  {
+    path: '/notes',
+    name: 'Notes',
+    component: Notes
+  },
   {
     path: '/settings',
     name: 'Settings',

src/views/Menu.vue

@@ -46,15 +46,14 @@
             </router-link>
         </div>
         <div class="left-menu-item">
-            <a type="button"
+            <router-link to="/notes"
+                         type="button"
                          class="btn btn-info text-light bottom-menu-item"
                          style="background-color: #ffea77;"
-               data-bs-toggle="offcanvas"
+                         data-bs-placement="left"
-               data-bs-target="#notesCanvas"
-               data-bs-placement="top"
                          title="Notizen">
                 <i class="fas fa-pen"></i>
-            </a>
+            </router-link>
         </div>
         <div class="left-menu-item" v-if="($store.state.trackers.length + $store.state.archive.length) > 0">
             <a type="button"

src/views/Notes.vue

@@ -1,14 +1,8 @@
 <template>
-    <div class="offcanvas offcanvas-end" id="notesCanvas"
+    <div class="row">
-         aria-hidden="true">
+        <div class="col-md-12">
-        <div class="offcanvas-header">
-            <h5><i class="fa fa-pen"></i> Notizen</h5>
             <div class="float-end">
-                <a href="javascript:" v-on:click="createNote()" class="btn btn-sm btn-success">Neue Notiz</a>
+                <div v-if="$store.state.notes.length > 0" class="filter-wrapper">
-            </div>
-        </div>
-        <div class="filter-wrapper">
-            <div v-if="$store.state.notes.length > 0">
                     <a href="javascript:"
                        v-if="colorToFilter !== ''"
                        v-on:click="colorToFilter = ''"
@@ -27,19 +21,20 @@
                         </a>
                     </span>
                 </div>
+
+                <a href="javascript:" v-on:click="createNote()" class="btn btn-sm btn-success">Neue Notiz</a>
+            </div>
+            <h5><i class="fa fa-pen"></i> Notizen</h5>
         </div>
-        <div class="offcanvas-body">
-            <div class="row">
-                <div id="note-container">
         <template v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex">
-                        <div v-if="colorToFilter === '' || note.color === colorToFilter">
+            <div v-if="colorToFilter === '' || note.color === colorToFilter" class="col-md-3 col-lg-4 col-sm-2 card-box">
                 <div class="card">
-                                <div class="card-body note" :style="'background-color:' + note.color ?? '#ffea77'">
+                    <div class="card-body note"
+                         :style="'background-color:' + note.color ?? '#ffea77'">
                         <textarea v-model="note.body" spellcheck="false"
                               @keydown="this.$store.commit('saveNotes')"></textarea>
                         <div class="color-changer">
-                                    <span v-for="color in noteColors"
+                            <span v-for="color in noteColors" v-bind:key="color">
-                                          v-bind:key="color">
                                 <span href="javascript:"
                                       @click="changeColor(note, color);"
                                       class="color-change-button"
@@ -50,7 +45,8 @@
                         </div>
                         <div class="float-end">
                             <a href="javascript:" class="delete-button"
-                                           @click="$store.commit('deleteNote', noteIndex)"><i class="fas fa-trash"></i></a>
+                               @click="$store.commit('deleteNote', noteIndex)"><i
+                                class="fas fa-trash"></i></a>
                         </div>
                     </div>
                 </div>
@@ -66,9 +62,6 @@
             </a>
         </span>
     </div>
-            </div>
-        </div>
-    </div>
 </template>
 
 <script>
@@ -186,6 +179,12 @@ textarea:focus {
 }
 
 .filter-wrapper {
+    display: inline-block;
     margin: 0.3em 1em;
 }
+
+.card-box {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
 </style>