Merge remote-tracking branch 'origin/developer' into developer

public/index.html

@@ -88,6 +88,7 @@
 	<script src="routes/profilCard.js"></script>
 	<script src="routes/profilData.js"></script>
 	<script src="routes/login.js"></script>
+    <script src="routes/navRoutes.js"></script>
 
 	<title>OHM News</title>
 </head>
@@ -134,8 +135,10 @@
 
         <div class="om-content">
 			<div id=xxx></div>
+            <nav-router></nav-router>
             <router-view></router-view>
         </div>
+    </div>
 
 		<!--<b-tabs type="is-toggle" expanded>
             <b-tab-item><router-link to="/home" >
@@ -152,7 +155,7 @@
 
         </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">
@@ -173,13 +176,13 @@
 			</div>
 		</nav>
 
-        <!--<nav class="nav nav-tabs nav-justified om-nav" v-if="$route.path !=='/createMessage' ">
+        <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>-->
+        </nav>
     </div>
 
     <script>
@@ -201,6 +204,9 @@
         const router = new VueRouter({
 			routes
 		});
+
+        -->
+    <script>
         var app = new Vue({
             router,
             el: '#api',

public/routes/bookmark.js

@@ -7,12 +7,13 @@ const BookmarkRouter = {
                 <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>
+                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>
-				<i class="material-icons">bookmark</i>
+                <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">
@@ -23,8 +24,9 @@ const BookmarkRouter = {
                 <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>
+                Erstellt von User 2</div>
-				<i class="material-icons">bookmark</i>
+				<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">
@@ -35,14 +37,21 @@ const BookmarkRouter = {
                 <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>
+                Erstellt von User 3</div>
-				<i class="material-icons">bookmark</i>
+				<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 };
+        return {
+            messages: _messages,
+            isActive: false,
+        }
     },
     methods: {
+        myFilter () {
+            this.isActive = !this.isActive;
+        }
     },
 };

public/routes/msgCard.js

@@ -10,7 +10,20 @@ Vue.component('MsgCard', {
                 <div class="om-card-footer"> <div class="om-user-line">
                 <i class="material-icons">account_circle</i>
                 Erstellt von {{ msg.user }}</div>
-				<i class="material-icons">bookmark_border</i>
+                <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>`,
-    props: ['msg']
+    props: ['msg'],
+
+    data: function () {
+        return {
+            isActive: false,
+        };
+    },
+
+    methods: {
+           myFilter: function() {
+            this.isActive = !this.isActive;
+        },
+    }
 });

public/routes/navRoutes.js

@@ -0,0 +1,42 @@
+Vue.component('nav-router', {
+    template: `
+                <div>
+                    <nav class="navbar is-fixed-bottom is-expanded is-primary" role="navigation" aria-label="main navigation">
+                        <div class="navbar-brand is-expanded is-primary">
+				            <router-link to="/home" class="navbar-item is-expanded has-text-centered">
+                                <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>
+                </div>`,
+
+});
+
+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,
+});

public/routes/profilCard.js

@@ -1,50 +1,72 @@
 Vue.component('ProfilCard', {
     template: `<div>
-                <img class="profil-img rounded-circle" src="img/profil_icon.png" width=120px height=120px>
                 <div class="profil-card card">
-                    <div class="edit-item"><i class="material-icons"  data-toggle="modal" data-target="#myModal">edit</i></div>
+                    <br/>
-                    <div class="profil-text">
+                    <img class="prof-image" src="img/profil_icon.png" alt="Card image cap">
-                        <h5><b>{{ profil.user }}</b></h5><br>
-                        <h6>{{ profil.major }}<br><br>
-                        {{ profil.semester }}</h6>
-                    </div>
-                    <hr>
-                    <div class="om-tab">
-                        <button class="tablinks om-tablinks"><b>Abonniert<br>{{ profil.abos }}</b></button>
-                        <button class="tablinks om-tablinks"><b>Gespeichert<br>{{ profil.saved }}</b></button>
-                    </div>
-                </div>
 
-                <div class="modal fade" id="myModal" role="dialog">
+                    <div class="logout-item"><i class="material-icons" @click="$router.push('/login')">exit_to_app</i></div>
-                    <div class="modal-dialog modal-dialog-centered">
+
-                        <div class="modal-content">
+                    <div class="profil-text">
-                            <div class="modal-header">
+                        <h6><b>Benutzername:</b><br><br>
-                                <h5 class="modal-title">Profil Bearbeiten</h5>
+                        <b>{{ profil.user }}</b><br><br>
-                                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        <b>Studiengang:</b><br><br>
-                            </div>
+                        {{ profil.major }}<br><br>
-                            <div class="modal-body">
+                        <b>Semester:</b><br><br>
-                                <form class="new-msg-form">
+                        {{ profil.semester }}<br></h6>
-                                    <div class="form-group">
+                    </div>
-                                        <label class="bmd-label-floating">Benutzername*</label>
+
-                                        <input type="text" class="form-control" id="user">
+                    <hr class="first">
+
+                    <div class="btnprofil">
+                        <button @click="isCardModalActive = true"><b>Abonniert: <br/>{{ profil.abos }}</b> <br/></button>
+                        <button @click="$router.push('/bookmark')"><b>Gespeichert:<br/> {{ profil.saved }}</b><br/></button>
+                    </div>
+
+                    <section>
+                        <b-modal :active.sync="isCardModalActive" :width="600" scroll="keep">
+                            <div class="card">
+                                <header class="modal-card-head">
+                                    <p class="modal-card-title">Abonnierte Kanäle</p>
+                                </header>
+                                <div class="card-content">
+                                    <div class="content">
+                                        <ul>
+                                            <li>
+                                            </li>
+                                            <li>
+                                            </li>
+                                            <li>
+                                            </li>
+                                            <li>
+                                            </li>
+                                            <li>
+                                            </li>
+                                            <li>
+                                            </li>
+                                            <li>
+                                            </li>
+                                        </ul>
                                     </div>
-                                    <div class="form-group">
+                                </div>
-                                        <label class="bmd-label-floating">Studiengang*</label>
+                                <footer class="modal-card-foot">
-                                        <input type="text" class="form-control" id="major">
+                                    <b-button size="is-medium" @click="isCardModalActive = false">Close</b-button>
-                                    </div>
+                                </footer>
-                                    <div class="form-group">
-                                        <label class="bmd-label-floating">Semester*</label>
-                                        <input type="text" class="form-control" id="semester">
-                                    </div>
-                                </form>
                             </div>
-                            <div class="modal-footer">
+                        </b-modal>
-                                <button type="button" class ="btn btn-default" data-dismiss="modal" id="close">Close</button>
+                    </section>
-                                <button type="submit" class="btn btn-raised om-btn" data-dismiss="modal" id="save">Save</button>
-                            </div>
-                        </div>
-                </div>
                 </div>
                 </div>`,
-    props: ['profil']
+
+    props: ['profil'],
+
+    data: function () {
+        return {
+            isCardModalActive: false
+        };
+    },
+    methods: {
+        close: function () {
+
+        }
+    }
 });

public/routes/profilData.js

@@ -1,9 +1,9 @@
 _profilcard = [
     {
         id: 1,
-        user: 'Benutzername',
+        user: '',
-        major: 'Studiengang',
+        major: '',
-        semester: 'Semester',
+        semester: '',
         abos: '7',
         saved: '3',
     },

public/style/style.css

@@ -5,6 +5,7 @@
   z-index: 1;
   width: 100%;
   display: block;
+  z-index: 10;
 }
 .om-header {
   justify-content: space-between;
@@ -39,11 +40,19 @@
   height: 65px;
   width: 100%;
   background-color: #0046a0;
-  z-index: 5;
+  z-index: 10;
 }
 .om-nav i {
   color: white;
 }
+.navbar-item {
+  display: inline-block;
+  text-align: center;
+}
+.navbar-item i {
+  margin: auto;
+  text-align: center;
+}
 .om-card {
   margin: 10px;
   margin-bottom: 20px;
@@ -89,45 +98,81 @@ taginput-container is-focusable:focus {
   margin: 10px;
 }
 .profil-text {
-  margin-top: 70px;
+  margin-top: 90px;
-  margin-bottom: 10px;
   text-align: center;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  z-index: 2;
 }
 .profil-card {
-  margin: 10px;
+  margin-left: 10px;
-  margin-top: -80px;
+  margin-right: 10px;
+  margin-top: 130px;
+  padding-top: 10px;
+  margin-bottom: 15px;
   position: relative;
   z-index: 1;
 }
-.profil-img {
+.prof-image {
   background-color: #0046a0;
   border-style: solid;
   border-color: #0046a0;
   border-width: thick;
+  border-radius: 50%;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
   display: block;
+  position: absolute;
+  top: -50px;
+  left: 50%;
+  margin-left: -60px;
+  width: 120px !important;
+  height: 120px;
+  z-index: 4;
+}
+hr.first {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+.btnprofil {
+  height: 60px;
+  margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
-  position: relative;
+  margin-bottom: 10px;
-  z-index: 2;
+  text-align: center;
 }
-.edit-item {
+.btnprofil button {
+  width: 110px;
+  display: inline-block;
+  margin-right: 20px;
+  margin-left: 20px;
+}
+.logout-item {
   color: #0046a0;
-  margin-top: 10px;
+  margin-top: -25px;
   margin-right: 10px;
 }
-.edit-item i {
+.logout-item i {
   float: right;
   font-size: 30px;
+  z-index: 3;
 }
-.modal-dialog {
+.vertical-alignment-helper {
-  height: 90%;
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+.vertical-align-center {
+  /* To center vertically */
+  display: table-cell;
+  vertical-align: middle;
 }
 .modal-content {
-  height: 100%;
+  width: inherit;
+  height: 80%;
+  /* To center horizontally */
+  margin: 0 auto;
 }
 .om-tab {
   font-size: 16px;

public/style/style.less

@@ -7,6 +7,7 @@
     z-index: 1;
     width: 100%;
 	display: block;
+    z-index:10;
 }
 
 .om-header{
@@ -46,7 +47,7 @@
     height: 65px;
     width: 100%;
     background-color: @color;
-    z-index:5;
+    z-index:10;
     i{
         color: white;
     }
@@ -56,6 +57,16 @@ a.nav-item.nav-link{
 
 }
 
+.navbar-item {
+    display: inline-block;
+    text-align: center;
+    i {
+        margin: auto;
+        text-align: center;
+    }
+}
+
+
 //msg-Card
 .om-card{
     margin: 10px;
@@ -115,55 +126,85 @@ taginput-container is-focusable:focus {
 
 // profil
 .profil-text {
-    margin-top: 70px;
+    margin-top: 90px;
-    margin-bottom: 10px;
     text-align: center;
     display: block;
     margin-left: auto;
     margin-right: auto;
+    z-index:2;
 }
 .profil-card {
-    margin: 10px;
+    margin-left: 10px;
-    margin-top: -80px;
+    margin-right: 10px;
+    margin-top: 130px;
+    padding-top: 10px;
+    margin-bottom: 15px;
     position: relative;
     z-index:1;
 }
-.profil-img {
+.prof-image {
     background-color: @color;
     border-style: solid;
     border-color: @color;
     border-width: thick;
+    border-radius: 50%;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
     display: block;
+    position: absolute;
+    top: -50px;
+    left: 50%;
+    margin-left: -60px;
+    width: 120px !important;
+    height: 120px;
+    z-index:4;
+}
+hr.first {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+.btnprofil {
+    height: 60px;
+    margin-top: 10px;
     margin-left: auto;
     margin-right: auto;
-    position: relative;
+    margin-bottom: 10px;
-    z-index:2;
+    text-align: center;
+    button {
+        width: 110px;
+        display: inline-block;
+        margin-right: 20px;
+        margin-left: 20px;
     }
-.edit-item {
+}
+.logout-item {
     color: @color;
-    margin-top: 10px;
+    margin-top: -25px;
     margin-right: 10px;
     i {
         float: right;
         font-size: 30px;
+        z-index:3;
     }
 }
 
 // Modal
-.modal-dialog {
+.vertical-alignment-helper {
-    height: 90%;
+    display:table;
+    height: 100%;
+    width: 100%;
+}
+.vertical-align-center {
+    /* To center vertically */
+    display: table-cell;
+    vertical-align: middle;
 }
-
 .modal-content {
-  height: 100%;
+    width:inherit;
+    height: 80%;
+    /* To center horizontally */
+    margin: 0 auto;
 }
 
-//.modal-header {
-//    background-color: @color;
-//    color: #FFF;
-//}
-
 .om-tab {
     font-size: 16px;
     display: block;