From 373d644134c19c3325fea93318233f692f409c63 Mon Sep 17 00:00:00 2001
From: Edwina Barbalan <edwinab@roam208241.roam.fh-nuernberg.de>
Date: Fri, 19 Jul 2019 11:54:13 +0200
Subject: [PATCH] Desktopansicht angepasst

---
 public/index.html              |  54 +-------------
 public/lib/buefy-0.7.5.css     |  50 ++++++++-----
 public/routes/bookmark.js      | 127 ++++++++++++++++++++++++---------
 public/routes/createMessage.js |  92 ++++++++++++++++--------
 public/routes/navRoutes.js     |  64 +++++++++++++++--
 public/style/style.css         |   9 ++-
 public/style/style.less        |  10 ++-
 7 files changed, 268 insertions(+), 138 deletions(-)

diff --git a/public/index.html b/public/index.html
index 226d315..4790382 100644
--- a/public/index.html
+++ b/public/index.html
@@ -47,11 +47,8 @@
 	<link rel="apple-touch-startup-image" sizes="640x1136" href="ios-splash/apple_splash_640.png" /><!-- Phone -->
 
 	<!-- NOTE: CSS -->
-
 	<!-- CSS_Material Design for Bootstrap fonts and icons -->
 	<link rel="stylesheet" href="lib/bootstrap-font-and-icons.css">
-	<!-- CSS_Material Design for Bootstrap minified CSS -->
-	<!--<link rel="stylesheet" href="lib/bootstrap-material-design.min.css">-->
 
     <!-- NOTE: Call manifest.json -->
 	<link rel="manifest" href="manifest.json">
@@ -63,15 +60,10 @@
 
 	<!-- Buefy/Vuetify -->
     <script src="lib/buefy-0.7.5.js"></script>
-<!-- <script src="lib/buefy-0.7.5.min.js"></script>-->
+    <!-- <script src="lib/buefy-0.7.5.min.js"></script>-->
 	<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
     <link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.css">
-<!--<link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.min.css">-->
-
-<!--    <script src="lib/vuetify-1.5.14.js"></script>-->
-<!--    <script src="lib/vuetify-1.5.14.min.js"></script>-->
-<!--    <link rel="stylesheet" type="text/css" href="lib/vuetify-1.5.14.css">-->
-<!--    <link rel="stylesheet" type="text/css" href="lib/vuetify-1.5.14.min.css">-->
+    <!--<link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.min.css">-->
 
 	<!-- CSS_Custom Design -->
 	<link rel="stylesheet" type="text/css" href="style/style.css">
@@ -155,36 +147,6 @@
 
         </b-tabs>-->
 
-        <!--
-		<nav class="navbar is-fixed-bottom is-expanded is-light is-hoverable" role="navigation" aria-label="main navigation">
-  			<div class="navbar-brand is-expanded">
-				<router-link to="/home" class="navbar-item is-expanded has-text-centered is-active">
-					<i class="material-icons">home</i>
-				</router-link>
-            	<router-link to="/files" class="navbar-item is-expanded">
-					<i class="material-icons">language</i>
-				</router-link>
-            	<router-link to="/createMessage" class="navbar-item is-expanded">
-					<i class="material-icons">add_circle</i>
-				</router-link>
-            	<router-link to="/bookmark" class="navbar-item  is-expanded">
-					<i class="material-icons">bookmark</i>
-				</router-link>
-				<router-link to="/profil" class="navbar-item is-expanded">
-					<i class="material-icons">person</i>
-				</router-link>
-			</div>
-		</nav>
-
-        <nav class="nav nav-tabs nav-justified om-nav" v-if="$route.path !=='/createMessage' ">
-            <router-link to="/home" class="navbar-item has-text-centered"><i class="material-icons">home</i></router-link>
-            <router-link to="/files" class="navbar-item has-text-centered"><i class="material-icons">language</i></router-link>
-            <router-link to="/createMessage" class="navbar-item has-text-centered outlined"><i class="material-icons">add_circle</i></router-link>
-            <router-link to="/bookmark" class="navbar-item has-text-centered"><i class="material-icons">bookmark</i></router-link>
-            <router-link to="/profil" class="navbar-item has-text-centered"><i class="material-icons">person</i></router-link>
-        </nav>
-    </div>
--->
     <script>
 		var tagArray = ["lorem"];
 		const dat=[
@@ -194,18 +156,6 @@
     		];
     </script>
 
-       <!-- const routes = [
-            { path: "/",                component: HomeRouter },
-            { path: "/home",            component: HomeRouter },
-			{ path: "/files",           component: FileRouter },
-			{ path: "/createMessage",   component: CreateMsgRouter },
-            { path: "/bookmark",        component: BookmarkRouter },
-			{ path: "/profil",          component: ProfilRouter },
-        ];
-        const router = new VueRouter({
-			routes
-		}); -->
-
     <script>
         var app = new Vue({
             router,
diff --git a/public/lib/buefy-0.7.5.css b/public/lib/buefy-0.7.5.css
index d01a06c..d0dc7f6 100644
--- a/public/lib/buefy-0.7.5.css
+++ b/public/lib/buefy-0.7.5.css
@@ -442,13 +442,13 @@ body {
   line-height: 1.5; }
 
 a {
-  color: #0046a0;
+  color: white;
   cursor: pointer;
   text-decoration: none; }
   a strong {
     color: currentColor; }
   a:hover {
-    color: #363636; }
+    color: white; }
 
 code {
   background-color: whitesmoke;
@@ -4139,22 +4139,40 @@ a.list-item {
     font-size: 1.5rem; }
 
 .menu-list {
-  line-height: 1.25; }
+    line-height: 1.25;
+    float: left;
+    width: 230px;
+    height: 85%;
+    position: fixed;
+    text-align: left;
+    background-color: #0046a0;
+    color: white; }
   .menu-list a {
     border-radius: 2px;
-    color: #4a4a4a;
     display: block;
-    padding: 0.5em 0.75em; }
-    .menu-list a:hover {
-      background-color: whitesmoke;
-      color: #363636; }
-    .menu-list a.is-active {
-      background-color: #0046a0;
-      color: white; }
-  .menu-list li ul {
-    border-left: 1px solid #dbdbdb;
+    padding: 0.5em 0.75em;
+    background-color: #0046a0; }
+  .menu-list a:hover {
+    background-color: #01295d;
+    color: white; }
+  .menu-list a.is-active{
+    background-color: #01295d;
+    color: white; }
+  .menu-item ul {
+    list-style-type: none;
     margin: 0.75em;
-    padding-left: 0.75em; }
+    padding-left: 0.75em;
+    background-color: #0046a0; }
+  .menu-item li a {
+    display: block;
+    padding: 8px 16px;
+    text-decoration: none;
+    color: white;
+}
+.menu-item {
+    background-color: #0046a0;
+    color: white;
+}
 
 .menu-label {
   color: #7a7a7a;
@@ -4569,8 +4587,8 @@ a.list-item {
       .navbar.is-primary .navbar-end > a.navbar-item.is-active,
       .navbar.is-primary .navbar-end .navbar-link:hover,
       .navbar.is-primary .navbar-end .navbar-link.is-active {
-        background-color: #e8e8e8;
-        color: #0046a0; }
+        background-color: #0046a0;
+        color: white; }
       .navbar.is-primary .navbar-start .navbar-link::after,
       .navbar.is-primary .navbar-end .navbar-link::after {
         border-color: white; }
diff --git a/public/routes/bookmark.js b/public/routes/bookmark.js
index ec8e3c8..49dc035 100644
--- a/public/routes/bookmark.js
+++ b/public/routes/bookmark.js
@@ -1,48 +1,111 @@
 const BookmarkRouter = {
     template: `
-<div>
-    <div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
-    <div class="om-card card">
-                <h6 class="msg-head">
+<div class="content">
+    <div class="is-hidden-desktop">
+        <div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
+        <div class="om-card card">
+            <h6 class="msg-head">
                 <b>Betreff</b>
                 <img src="favicon.ico" width=20px height=20px>
-                </h6>
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
-                <a href="#">#beispiel #tag</a></p>
-                <div class="om-card-footer"> <div class="om-user-line">
-                <i class="material-icons">account_circle</i>
-                Erstellt von User 1</div>
+            </h6>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
+            <a href="#">#beispiel #tag</a>
+            <div class="om-card-footer">
+                <div class="om-user-line">
+                    <i class="material-icons">account_circle</i>
+                    Erstellt von User 1
+                </div>
                 <i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
                 <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
-                </div></div>
-<div class="om-card card">
-                <h6 class="msg-head">
+            </div>
+        </div>
+        <div class="om-card card">
+            <h6 class="msg-head">
                 <b>Betreff</b>
                 <img src="favicon.ico" width=20px height=20px>
-                </h6>
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  <br><br>
-                <a href="#">#beispiel #tag</a></p>
-                <div class="om-card-footer"> <div class="om-user-line">
-                <i class="material-icons">account_circle</i>
-                Erstellt von User 2</div>
-				<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
+            </h6>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  <br><br>
+            <a href="#">#beispiel #tag</a>
+            <div class="om-card-footer">
+                <div class="om-user-line">
+                    <i class="material-icons">account_circle</i>
+                    Erstellt von User 2
+                </div>
+                <i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
                 <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
-                </div></div>
-<div class="om-card card">
-                <h6 class="msg-head">
+            </div>
+        </div>
+        <div class="om-card card">
+            <h6 class="msg-head">
                 <b>Betreff</b>
                 <img src="favicon.ico" width=20px height=20px>
-                </h6>
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
-                <a href="#">#beispiel #tag</a></p>
-                <div class="om-card-footer"> <div class="om-user-line">
-                <i class="material-icons">account_circle</i>
-                Erstellt von User 3</div>
+            </h6>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
+            <a href="#">#beispiel #tag</a>
+            <div class="om-card-footer">
+                <div class="om-user-line">
+                    <i class="material-icons">account_circle</i>
+                    Erstellt von User 3
+                </div>
 				<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
                 <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
-                </div></div>
-	</div>
-	</div>`,
+            </div>
+        </div>
+    </div>
+
+    <div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
+        <div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
+        <div class="om-card card">
+            <h6 class="msg-head">
+                <b>Betreff</b>
+                <img src="favicon.ico" width=20px height=20px>
+            </h6>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
+            <a href="#">#beispiel #tag</a>
+            <div class="om-card-footer">
+                <div class="om-user-line">
+                    <i class="material-icons">account_circle</i>
+                    Erstellt von User 1
+                </div>
+                <i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
+                <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
+            </div>
+        </div>
+        <div class="om-card card">
+            <h6 class="msg-head">
+                <b>Betreff</b>
+                <img src="favicon.ico" width=20px height=20px>
+            </h6>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  <br><br>
+            <a href="#">#beispiel #tag</a>
+            <div class="om-card-footer">
+                <div class="om-user-line">
+                    <i class="material-icons">account_circle</i>
+                    Erstellt von User 2
+                </div>
+				<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
+                <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
+            </div>
+        </div>
+        <div class="om-card card">
+            <h6 class="msg-head">
+                <b>Betreff</b>
+                <img src="favicon.ico" width=20px height=20px>
+            </h6>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
+            <a href="#">#beispiel #tag</a>
+            <div class="om-card-footer">
+                <div class="om-user-line">
+                    <i class="material-icons">account_circle</i>
+                    Erstellt von User 3
+                </div>
+				<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
+                <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
+            </div>
+        </div>
+    </div>
+</div>`,
+
     data: function () {
         return {
             messages: _messages,
diff --git a/public/routes/createMessage.js b/public/routes/createMessage.js
index 749bf25..a76c949 100644
--- a/public/routes/createMessage.js
+++ b/public/routes/createMessage.js
@@ -6,40 +6,76 @@ const data=[
     		];
 const CreateMsgRouter = {
 	template: `
-<div class="content card om-card">
-	<h4>Neue Nachricht erstellen</h4>
+<div class="content">
+    <div class="is-hidden-desktop">
+        <div class="content card om-card">
+            <h4>Neue Nachricht erstellen</h4>
+            <b-field>
+                <b-input placeholder="User" id="user"></b-input>
+            </b-field>
 
-	<b-field>
-        <b-input placeholder="User" id="user"></b-input>
-    </b-field>
+            <b-field>
+                <b-input placeholder="Betreff" id="subject"></b-input>
+            </b-field>
 
-	<b-field>
-        <b-input placeholder="Betreff" id="subject"></b-input>
-    </b-field>
+            <b-field label="Tags">
+                <b-taginput
+                    id="tag"
+                    v-model="selected"
+                    :data=taglist
+                    autocomplete
+                    allow-new:false
+                    icon="label"
+                    placeholder="#"
+                    @typing="getFilteredTags"
+                    @input="saveTagsToArray">
+                </b-taginput>
+            </b-field>
 
-	<b-field label="Tags">
-		<b-taginput
-            id="tag"
-			v-model="selected"
-			:data=taglist
-			autocomplete
-			allow-new:false
-			icon="label"
-			placeholder="#"
-			@typing="getFilteredTags"
-            @input="saveTagsToArray">
-		</b-taginput>
-	</b-field>
+            <b-field>
+                <b-input placeholder="Nachricht" id="message" type="textarea"></b-input>
+            </b-field>
 
-	<b-field>
-        <b-input placeholder="Nachricht" id="message" type="textarea"></b-input>
-    </b-field>
+	       <b-button @click="$router.go(-1)">ABBRECHEN</b-button>
+	       <b-button type="is-primary" @click="createMsg">SENDEN</b-button>
+        </div>
+    </div>
 
-	<b-button @click="$router.go(-1)">ABBRECHEN</b-button>
-	<b-button type="is-primary" @click="createMsg">SENDEN</b-button>
+    <div class=" column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
+        <div class="content card om-card">
+            <h4>Neue Nachricht erstellen</h4>
+            <b-field>
+                <b-input placeholder="User" id="user"></b-input>
+            </b-field>
+
+            <b-field>
+                <b-input placeholder="Betreff" id="subject"></b-input>
+            </b-field>
+
+            <b-field label="Tags">
+                <b-taginput
+                    id="tag"
+                    v-model="selected"
+                    :data=taglist
+                    autocomplete
+                    allow-new:false
+                    icon="label"
+                    placeholder="#"
+                    @typing="getFilteredTags"
+                    @input="saveTagsToArray">
+                </b-taginput>
+            </b-field>
+
+            <b-field>
+                <b-input placeholder="Nachricht" id="message" type="textarea"></b-input>
+            </b-field>
+
+            <b-button @click="$router.go(-1)">ABBRECHEN</b-button>
+            <b-button type="is-primary" @click="createMsg">SENDEN</b-button>
+        </div>
+    </div>
+</div>`,
 
-</div>
-`,
 	data: function () {
 		return {
 			selected: [],
diff --git a/public/routes/navRoutes.js b/public/routes/navRoutes.js
index e8f0030..ba0785e 100644
--- a/public/routes/navRoutes.js
+++ b/public/routes/navRoutes.js
@@ -1,29 +1,57 @@
 Vue.component('nav-router', {
     template: `
                 <div>
-                    <nav class="navbar is-fixed-bottom is-expanded is-primary" role="navigation" aria-label="main navigation">
+                    <nav class="navbar is-fixed-bottom is-expanded is-primary is-hidden-desktop" role="navigation" aria-label="main navigation">
                         <div class="navbar-brand is-expanded is-light">
-				            <router-link to="/home" class="navbar-item is-primary is-expanded has-text-centered">
+				            <router-link to="/home" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop">
                                 <i class="material-icons">home</i>
 				            </router-link>
 
-                            <router-link to="/files" class="navbar-item is-primary is-expanded">
+                            <router-link to="/files" class="navbar-item is-primary is-expanded is-hidden-desktop">
                                 <i class="material-icons">language</i>
                             </router-link>
 
-                            <router-link to="/createMessage" class="navbar-item is-primary is-expanded">
+                            <router-link to="/createMessage" class="navbar-item is-primary is-expanded is-hidden-desktop">
                                 <i class="material-icons">add_circle</i>
                             </router-link>
 
-                            <router-link to="/bookmark" class="navbar-item is-primary is-expanded">
+                            <router-link to="/bookmark" class="navbar-item is-primary is-expanded is-hidden-desktop">
                                 <i class="material-icons">bookmark</i>
                             </router-link>
 
-                            <router-link to="/profil" class="navbar-item is-primary is-expanded">
+                            <router-link to="/profil" class="navbar-item is-primary is-expanded is-hidden-desktop">
                                 <i class="material-icons">person</i>
                             </router-link>
                         </div>
                     </nav>
+
+                    <div class="is-fullheight">
+                        <div class="column is-sidebar-menu is-hidden-touch">
+                            <aside class="menu is-medium">
+                                <ul class="menu-list">
+                                    <li><router-link to="/home" class="is-hidden-touch">
+                                        <i class="material-icons">home</i> Home
+                                    </router-link></li>
+
+                                    <li><router-link to="/files" class="is-hidden-touch">
+                                        <i class="material-icons">language</i> Language
+                                    </router-link></li>
+
+                                    <li><router-link to="/createMessage" class="is-hidden-touch">
+                                        <i class="material-icons">add_circle</i> Create Message
+                                    </router-link></li>
+
+                                    <li><router-link to="/bookmark" class="is-hidden-touch">
+                                        <i class="material-icons">bookmark</i> Bookmark
+                                    </router-link></li>
+
+                                    <li><router-link to="/profil" class="is-hidden-touch">
+                                        <i class="material-icons">person</i> Profil
+                                    </router-link></li>
+                                </ul>
+                            </aside>
+                        </div>
+                    </div>
                 </div>`,
 
 });
@@ -41,3 +69,27 @@ const router = new VueRouter({
     routes,
     linkActiveClass: 'is-active'
 });
+
+/*
+<div class="nav-right nav-menu is-hidden-desktop-only">
+    <router-link to="/home" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
+        <i class="material-icons">home</i> Home
+    </router-link>
+
+    <router-link to="/files" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
+        <i class="material-icons">language</i> Language
+    </router-link>
+
+    <router-link to="/createMessage" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
+        <i class="material-icons">add_circle</i> Create Message
+    </router-link>
+
+    <router-link to="/bookmark" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
+        <i class="material-icons">bookmark</i> Bookmark
+    </router-link>
+
+    <router-link to="/profil" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
+        <i class="material-icons">person</i> Profil
+    </router-link>
+</div>
+*/
diff --git a/public/style/style.css b/public/style/style.css
index 3282eb7..b10fb7e 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -27,12 +27,17 @@
   margin: 10px;
   margin-top: 80px;
   margin-bottom: 80px;
+  width: auto;
+  overflow: hidden;
 }
 .om-content a {
-  color: #0046a0;
+  color: white;
 }
 .om-content a:hover {
-  color: #0046a0;
+  color: white;
+}
+.content-desktop {
+  margin-right: 30px;
 }
 .om-nav {
   position: fixed;
diff --git a/public/style/style.less b/public/style/style.less
index 4089208..7e40148 100644
--- a/public/style/style.less
+++ b/public/style/style.less
@@ -34,12 +34,18 @@
     margin: 10px;
     margin-top: 80px;
     margin-bottom: 80px;
+    width: auto;
+    overflow: hidden;
     a{
-        color: @color;
-        &:hover{color:@color;}
+        color: white;
+        &:hover{color:white;}
     }
 }
 
+.content-desktop {
+    margin-right: 30px;
+}
+
 //footer
 .om-nav{
     position:fixed;