#buefy-changes

.gitignore

@@ -18,4 +18,7 @@ latex-files/*.run.xml
 latex-files/*.toc
 
 # config
-mongodb.config.js
+mongodb.config.js
+
+# exclude Mac-File .DS_Store
+*.DS_Store

public/index.html

@@ -51,12 +51,7 @@
 	<!-- 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">
-	<!-- CSS_vuetify -->
-	<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
-	<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
-    <!-- CSS_Custom Design -->
-	<link rel="stylesheet" type="text/css" href="style/style.css">
+	<!--<link rel="stylesheet" href="lib/bootstrap-material-design.min.css">-->
 
     <!-- NOTE: Call manifest.json -->
 	<link rel="manifest" href="manifest.json">
@@ -68,15 +63,19 @@
 
 	<!-- 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">-->
+<!--<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">-->
 
+	<!-- CSS_Custom Design -->
+	<link rel="stylesheet" type="text/css" href="style/style.css">
+
 	<!-- NOTE: JavaScript Libs & Files -->
     <script src="routes/home.js"></script>
     <script src="routes/files.js"></script>
@@ -98,7 +97,12 @@
             <div class="om-header">
                 <a class="logo-img" href="index.html"><img src="img/app_icon.png" width=45px height=45px></a>
                 <form class="om-searchbar">
-                    <input type="search" placeholder="Search...">
+                    <b-field>
+						<b-input placeholder="Suche..."
+                			type="search"
+                			icon="magnify">
+            			</b-input>
+					</b-field>
                 </form>
             </div>
         </div>
@@ -108,13 +112,33 @@
             <router-view></router-view>
         </div>
 
-        <nav class="nav nav-tabs nav-justified om-nav" v-if="$route.path !=='/createMessage' ">
-            <router-link to="/home" class="nav-item nav-link"><i class="material-icons">home</i></router-link>
-            <router-link to="/files" class="nav-item nav-link"><i class="material-icons">language</i></router-link>
-            <router-link to="/createMessage" class="nav-item nav-link outlined"><i class="material-icons">add_circle</i></router-link>
-            <router-link to="/bookmark" class="nav-item nav-link"><i class="material-icons">bookmark</i></router-link>
-            <router-link to="/profil" class="nav-item nav-link"><i class="material-icons">person</i></router-link>
-        </nav>
+		<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>

public/routes/createMessage.js

@@ -1,52 +1,48 @@
+const data=[
+				'#th',
+				'#efi',
+				'#wichtig',
+    		];
 const CreateMsgRouter = {
 	template: `
-<div class="card om-card">
+<div class="content card om-card">
 	<h4>Neue Nachricht erstellen</h4>
-	<form class="new-msg-form" @submit.prevent=createMsg>
-        <div class="form-group">
-			<label class="bmd-label-floating">User*</label>
-			<input type="text" class="form-control" id="user">
-		</div>
-		<div class="form-group bmd-form-group">
-			<label class="bmd-label-floating">Betreff*</label>
-			<input type="text" class="form-control" id="subject">
-		</div>
-		<div class="form-group bmd-form-group">
-			<label class="bmd-label-floating">Tags</label>
-			<input type="text" class="form-control" id="tag">
-		</div>
 
+	<b-field>
+        <b-input placeholder="User" id="user"></b-input>
+    </b-field>
 
+	<b-field>
+        <b-input placeholder="Betreff" id="subject"></b-input>
+    </b-field>
 
-				  <v-combobox
-					v-model="select"
-					:items="items"
-					label="I use chips"
-					multiple
-					chips
-				  ></v-combobox>
+	<b-field label="Tags">
+		<b-taginput
+			v-model="selected"
+			:data=items
+			autocomplete
+			allow-new:false
+			icon="label"
+			placeholder="#"
+			@typing="getFilteredTags" id="tag">
+		</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="$router.push('/home')">SENDEN</b-button>
 
-		<div class="form-group">
-			<label class="bmd-label-floating">Nachricht*</label>
-			<textarea class="form-control" id="message" rows="5"></textarea>
-		</div>
-		<button class="btn btn-default"><a @click="$router.go(-1)">ABBRECHEN </a></button>
-		<button type="submit" class="btn btn-raised om-btn"><a @click="$router.push('/home')">SENDEN</a></button>
-	</form>
 
 
 </div>
 `,
 	data: function () {
 		return {
-			select: ['Design', 'jj'],
-			items: [
-				'Programming',
-				'Design',
-				'Vue',
-				'Vuetify'
-      		]
+			selected: [],
+			items: data
 		};
 	},
 	methods: {
@@ -76,6 +72,14 @@ const CreateMsgRouter = {
 				console.log(err);
 			}
 		},
+		getFilteredTags(text) {
+			this.items = data.filter((option) => {
+				return option
+					.toString()
+					.toLowerCase()
+					.indexOf(text.toLowerCase()) >= 0
+			})
+		},
 	},
 	mounted: function () {
 		if ($(this).bootstrapMaterialDesign)

public/routes/login.js

@@ -1,34 +1,64 @@
 Vue.component('login-panel', {
     template: `
-		<div class="loginModal modal" tabindex="-1" role="dialog">
+		  <form action="">
+            <div class="modal-card" style="width: auto">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Login</p>
+                </header>
+                <section class="modal-card-body">
+
+					<b-field>
+        				<b-input
+							placeholder="User (Ohmportal)"
+							:value="user"
+							v-model=user
+							required>
+						</b-input>
+    				</b-field>
+					<b-field>
+            			<b-input
+							type="password"
+							placeholder="Password"
+							:value="pwd"
+							required>
+						</b-input>
+        			</b-field>
+					<b-checkbox>Eingeloggt bleiben</b-checkbox>
+                </section>
+                <footer class="modal-card-foot">
+                    <button class="button" type="button" @click="$parent.close()">Close</button>
+                    <button class="button is-primary" on:click="logIn(this.Event)">Login</button>
+                </footer>
+            </div>
+        </form>
+
+
+
+		<!--<div class="loginModal modal" tabindex="-1" role="dialog">
 			<div class="modal-dialog" role="document">
     			<div class="modal-content">
     				<div class="modal-header">
         				<h5 class="modal-title">Login</h5>
     				</div>
     				<div class="modal-body">
-						<form>
-							<div class="form-group">
-								<label class="bmd-label-floating"> User (Ohmportal)</label>
-								<input type="text" class="form-control" length=20 ref=userField v-model=user>
-							</div>
-							<div class="form-group">
-								<label class="bmd-label-floating">Password</label>
-								<input type=password class="form-control" length=20 v-model=pwd>
-							</div>
-						</form>
+						<b-field>
+        					<b-input placeholder="User (Ohmportal)" v-model=user></b-input>
+    					</b-field>
+						<b-field>
+            				<b-input type="password" placeholder="Password"></b-input>
+        				</b-field>
 					</div>
 					<div class="modal-footer">
-						<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Login</button>
-						<button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Close</button>
+						<b-button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Login</b-button>
+						<b-button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Close</b-button>
 					</div>
     			</div>
 			</div>
-		</div>`,
+		</div>-->`,
     data: function () {
 		return {
-			user: "",
-			pwd:"",
+			user: "name",
+			pwd:"password",
 		};
     },
     methods: {
@@ -41,6 +71,6 @@ Vue.component('login-panel', {
     	}
     },
 	mounted: function () {
-		$(".loginModal").modal ('show');
+		//$(".loginModal").modal ('show');
 	},
 });

public/routes/profil.js

@@ -7,34 +7,31 @@ const ProfilRouter = {
 			:key="profil.id"
 			:profil="profil"
 		></ProfilCard>
-		<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut() ">Logout</button>
+		<b-button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut() ">Logout</b-button>
 	</div>
 	<div v-else-if="!isAuthentified">
-		<button v-on:click="showLoginModal=true" @clicked="logIn">Login</button>
-	 	<v-rating v-model="rating"></v-rating>
-		<login-panel v-if="showLoginModal" @clicked="closeModal" ></login-panel>
+		<button class="button is-primary is-medium" @click="isModalActive = true">
+        	Login
+    	</button>
+
+		<!--<login-panel v-if="showLoginModal" @clicked="closeModal" ></login-panel>-->
+
+		<b-modal :active.sync="showLoginModal" has-modal-card>
+			<login-panel v-bind="formProps"></login-panel>
+		</b-modal>
 	</div>
 </div>`,
     data: function () {
         return {
+			isModalActive: false,
 			profilcard: _profilcard,
-			showLoginModal: false,
-			isAuthentified: false,
-			rating: 3,
+
 			};
     },
     methods: {
-		closeModal (value) {
+		checkAuthentication (value) {
 			this.showLoginModal = value;
 			this.isAuthentified = !this.isAuthentified;
-        },
-
-		logIn (value) {
-			this.showLoginModal=false;
-        },
-
-		logOut () {
-			this.isAuthentified=false;
         },
     },
 };

public/style/style.css

@@ -71,6 +71,9 @@
 .om-user-line i {
   margin-right: 2%;
 }
+taginput-container is-focusable:focus {
+  border-color: #0046a0 !important;
+}
 .bookmark-headline {
   margin: 10px;
   padding-bottom: 10px;

public/style/style.less

@@ -89,6 +89,12 @@ a.nav-item.nav-link{
     }
 }
 
+//createMsg
+taginput-container is-focusable:focus {
+	border-color: @color !important;
+	//box-shadow: 0;
+}
+
 // bookmark
 .bookmark-headline{
     margin: 10px;