Desktopansicht auf allen Seiten angepasst

public/lib/buefy-0.7.5.css

   line-height: 1.5; }
 
 a {
+  color: #0046a0;
+  cursor: pointer;
+  text-decoration: none; }
+  a strong {
+    color: currentColor; }
+  a:hover {
+    color: #0046a0; }
+
+a.menu-list {
   color: white;
   cursor: pointer;
   text-decoration: none; }
     border-radius: 2px;
     display: block;
     padding: 0.5em 0.75em;
-    background-color: #0046a0; }
+    background-color: #0046a0;
+    color: white !important;}
   .menu-list a:hover {
     background-color: #01295d;
     color: white; }

public/routes/createMessage.js

     </div>
 
     <div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
-        <div id="desktop" class="content card om-card">
+        <div id="desktop" class="content">
             <h4>Neue Nachricht erstellen</h4>
             <b-field>
                 <b-input placeholder="User" id="user"></b-input>

public/routes/files.js

 const FileRouter = {
     template: `
 <div class="content">
+
+<div class="is-hidden-desktop">
 	<h4>Erweiterte Suche</h4>
 	<b-field label="Suche nach">
 		<b-select
         :msg="messages[id] || {}"
     ></MsgCard>
 </div>
+</div>
+
+<div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
+	<h4>Erweiterte Suche</h4>
+	<b-field label="Suche nach">
+		<b-select
+			placeholder="Wähle eine Suchform"
+			v-model="selectedOptions">
+			<option value="freeSearch">Freie Suche</option>
+			<option value="subject">Betreff</option>
+			<option value="tags">Tags</option>
+			<option value="text">Nachrichtentext</option>
+			<option value="user">User</option>
+		</b-select>
+	</b-field>
+
+	<b-field v-if="selectedOptions=='freeSearch'||selectedOptions=='subject'|| selectedOptions=='text' || selectedOptions=='user'">
+        <b-input id="freeSe"></b-input>
+    </b-field>
+
+	<b-field v-if="selectedOptions=='tags'">
+        <b-autocomplete rounded v-model="searchtext"
+        :data="filteredDataArray"
+        placeholder="suche..." icon="magnify"
+        @select="option => selected = option">
+        </b-autocomplete>
+	</b-field>
+
+	<b-button type="is-primary" @click="search">SUCHE</b-button>
+
+<div id="om-msg-cards">
+    <MsgCard
+        v-for="id in messagelist.slice().reverse()"
+        :key="id"
+        :msg="messages[id] || {}"
+    ></MsgCard>
+</div>
+</div>
+
 </div>
 `,
     data: function () {

public/routes/home.js

 const HomeRouter = {
     template: `
-<div id="om-msg-cards">
+<div>
+<div id="om-msg-cards" class="is-hidden-desktop">
     <MsgCard
         v-for="id in messagelist.slice().reverse()"
         :key="id"
         :msg="messages[id] || {}"
     ></MsgCard>
+</div>
+
+<div id="om-msg-cards" class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
+    <MsgCard
+        v-for="id in messagelist.slice().reverse()"
+        :key="id"
+        :msg="messages[id] || {}"
+    ></MsgCard>
+</div>
 </div>`,
     data: function () {
         return {

public/routes/navRoutes.js

                         <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">
+                                    <li><router-link to="/home">
                                         <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
+                                    <li><router-link to="/files">
+                                        <i class="material-icons">search</i> Search
                                     </router-link></li>
 
-                                    <li><router-link to="/createMessage" class="is-hidden-touch">
+                                    <li><router-link to="/createMessage">
                                         <i class="material-icons">add_circle</i> Create Message
                                     </router-link></li>
 
-                                    <li><router-link to="/bookmark" class="is-hidden-touch">
+                                    <li><router-link to="/bookmark">
                                         <i class="material-icons">bookmark</i> Bookmark
                                     </router-link></li>
 
-                                    <li><router-link to="/profil" class="is-hidden-touch">
+                                    <li><router-link to="/profil">
                                         <i class="material-icons">person</i> Profil
                                     </router-link></li>
                                 </ul>

public/routes/profil.js

 const ProfilRouter = {
     template: `
         <div>
+            <div class="is-hidden-desktop">
             <div v-if="isAuth">
                 <profil-card></profil-card>
             </div>
                     <login-panel></login-panel>
                 </b-modal>
             </div>
+            </div>
+
+            <div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
+            <div v-if="isAuth">
+                <profil-card></profil-card>
+            </div>
+            <div v-else>
+                <button class="button is-primary is-medium"
+                    @click="isLPVisible = true">
+                    Login
+                </button>
+
+                <b-modal :active.sync="isLPVisible"
+                    @close-login-panel="closeLoginPanel"
+                    @show-login-panel="showLoginPanel"
+                    has-modal-card>
+                    <login-panel></login-panel>
+                </b-modal>
+            </div>
+            </div>
         </div>`,
     data: function () {
         return {

public/style/style.css

   overflow: hidden;
 }
 .om-content a {
-  color: white;
+  color: #0046a0;
 }
 .om-content a:hover {
-  color: white;
+  color: #0046a0;
+}
+.om-content a .menu-list {
+  color: white !important;
+}
+.om-content a .menu-list:hover {
+  color: white !important;
 }
 .content-desktop {
   margin-right: 30px;

public/style/style.less

     width: auto;
     overflow: hidden;
     a{
-        color: white;
-        &:hover{color:white;}
-    }
+        color: #0046a0;
+        &:hover{color: #0046a0;}
+        .menu-list {
+            color: white !important;
+            &:hover{color: white !important; }
+        }}
 }
 
 .content-desktop {