Files und NewMsg Componente hinzugefügt

public/bookmark.js

@@ -1,7 +1,7 @@
 const BookmarkRouter = {
     template: `
 <div>
-    <div class="bookmark-headline"><h4><b>Gepeicherte Beiträge</b></h4></div>
+    <div class="bookmark-headline"><h3>Gepeicherte Beiträge</h3></div>
     <MsgCard
         v-for="(msg, index) in messages"
         :key="msg.id"

public/createMessage.js

@@ -0,0 +1,34 @@
+const CreateMsgRouter = {
+    template: `
+<div class="card om-card">
+	<h5>Neue Nachricht erstellen</h5>
+	<form class="new-msg-form" action="#" methord="GET">
+		<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="hashtags">
+		</div>
+		<div class="form-group">
+			<label class="bmd-label-floating">Nachricht</label>
+			<textarea class="form-control" id="message" rows="5"></textarea>
+		</div>
+		<div class="form-group">
+			<div class="checkbox">
+				<label>
+					<input type="checkbox"> Zusätzlich als E-mail versenden
+				</label>
+			</div>
+		</div>
+		<button class="btn btn-default"><a href="index.html#/home">ABBRECHEN </a></button>
+		<button type="submit" class="btn btn-raised om-btn">SENDEN</button>
+	</form>
+</div>
+`,
+    data: function () {
+    },
+    methods: {
+    },
+};

public/files.js

@@ -1,8 +1,15 @@
-Vue.component('Files', {
-    data: function() {
-        return {
-            count: 0
-        }
+const FileRouter = {
+    template: `
+<div>
+	<h3>Dateiablage</h3>
+	<div class="empty-state">
+	<i class="material-icons"> folder_open </i><br>
+	Diese Funktion steht noch nicht bereit.
+	</div>
+</div>
+`,
+    data: function () {
     },
-    template: `<button v-on:click="count++"> You clicked me {{ count }} times. </button>`
-})
+    methods: {
+    },
+};

public/index.html

@@ -66,11 +66,10 @@
             </div>
         </div>
 
-
-
         <div class="om-content">
             <router-view></router-view>
         </div>
+
         <nav class="nav nav-tabs nav-justified om-nav ">
             <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">folder</i></router-link>
@@ -85,10 +84,10 @@
         const routes = [
             { path: "/",                component: HomeRouter },
             { path: "/home",            component: HomeRouter },
+			{ path: "/files",           component: FileRouter },
+			{ path: "/createMessage",   component: CreateMsgRouter },
             { path: "/bookmark",        component: BookmarkRouter },
-/*          { path: "/files",           component: FileRouter },
-            { path: "/createMessage",   component: CreateMsgRouter },
-            { path: "/profil",          component: ProfilRouter },*/
+			{ path: "/profil",          component: ProfilRouter },
         ];
         const router = new VueRouter({
 			routes

public/style/style.css

@@ -65,9 +65,32 @@
 .bookmark-headline {
   margin: 10px;
 }
-.form-group.is-focused .form-control {
+.empty-state {
+  margin: 40px;
+  margin-top: 40%;
+  color: #6c757d;
+  text-align: center;
+}
+.empty-state i {
+  font-size: 50px;
+  margin: 10px;
+}
+.form-group.is-focused .form-control .custom-file-control,
+.form-control,
+.is-focused .custom-file-control,
+.is-focused .form-control {
   background-image: linear-gradient(0deg, #0046a0 2px, rgba(0, 150, 136, 0) 0), linear-gradient(0deg, rgba(0, 0, 0, 0.26) 1px, transparent 0);
 }
-.form-group .bmd-form-group .is-focused .bmd-label-floating {
+.checkbox label input[type=checkbox]:checked + .checkbox-decorator .check:before,
+label.checkbox-inline input[type=checkbox]:checked + .checkbox-decorator .check:before {
+  color: #0046a0;
+}
+.checkbox label input[type=checkbox]:checked + .checkbox-decorator .check,
+label.checkbox-inline input[type=checkbox]:checked + .checkbox-decorator .check {
+  color: #0046a0;
+  border-color: #0046a0;
+}
+.is-focused [class*="bmd-label"],
+.is-focused[class^=bmd-label] {
   color: #0046a0;
 }

public/style/style.less

@@ -78,16 +78,37 @@
     margin: 10px;
 }
 
+//empty state
+.empty-state{
+	margin: 40px;
+	margin-top: 40%;
+	color: #6c757d;
+	text-align: center;
+	i{
+		font-size: 50px;
+		margin: 10px;
+	}
+}
 
-//bmd changes
 
+//bmd changes
 
-.form-group.is-focused .form-control {
-    background-image: linear-gradient(0deg,@color 2px,rgba(0,150,136,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
+//border
+.form-group.is-focused .form-control .custom-file-control, .form-control, .is-focused .custom-file-control, .is-focused .form-control {
+    background-image: linear-gradient(0deg, @color 2px,rgba(0,150,136,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
 }
 
-.form-group .bmd-form-group .is-focused .bmd-label-floating{
+//checkbox
+.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check:before, label.checkbox-inline input[type=checkbox]:checked+.checkbox-decorator .check:before {
+    color: @color;
+}
 
-		color: @color;
+.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, label.checkbox-inline input[type=checkbox]:checked+.checkbox-decorator .check {
+    color: @color;
+    border-color: @color;
+}
 
+//label
+.is-focused [class*="bmd-label"], .is-focused[class^=bmd-label]{
+	color: @color;
 }

public/message.html → public/template-test.html

@@ -28,32 +28,17 @@
     </div>
 
     <div class="om-content">
-        <div class="card om-card">
-            <h5>Neue Nachricht erstellen</h5>
-            <form class="new-msg-form">
-                <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="hashtags">
-                </div>
-                <div class="form-group">
-                    <label class="bmd-label-floating">Nachricht</label>
-                    <textarea class="form-control" id="message" rows="5"></textarea>
-                </div>
-                <div class="form-group">
-                    <div class="checkbox">
-                        <label>
-                            <input type="checkbox"> Zusätzlich als E-mail versenden
-                        </label>
-                    </div>
-                </div>
-                <button class="btn btn-default"><a href="index.html">ABBRECHEN </a></button>
-                <button type="submit" class="btn btn-raised om-btn">SENDEN</button>
-            </form>
-        </div>
+
+	</div>
+
+    <div>
+		<nav class="nav nav-tabs nav-justified om-nav ">
+            <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">folder</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>
     </div>
 
         <!-- Optional JavaScript -->