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

Router Componente erstellt / Navbar bearbeitet
2019-07-02 14:59:17 +02:00 · 2019-07-02 14:59:11 +02:00 · 2019-06-18 14:47:38 +02:00 · 2019-06-18 09:37:48 +02:00 · 2019-06-04 16:42:52 +02:00 · 2019-06-04 16:42:45 +02:00
8 changed files with 267 additions and 89 deletions
--- a/public/index.html
+++ b/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',
--- a/public/routes/bookmark.js
+++ b/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>
-				<i class="material-icons">bookmark</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">
@ -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>
-				<i class="material-icons">bookmark</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 };
+        return {
+            messages: _messages,
+            isActive: false,
+        }
    },
    methods: {
+        myFilter () {
+            this.isActive = !this.isActive;
+        }
    },
 };
--- a/public/routes/msgCard.js
+++ b/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;
+        },
+    }
 });
--- a/public/routes/navRoutes.js
+++ b/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,
+});
--- a/public/routes/profilCard.js
+++ b/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>
-                    <div class="profil-text">
-                        <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>
+                    <br/>
+                    <img class="prof-image" src="img/profil_icon.png" alt="Card image cap">

-                <div class="modal fade" id="myModal" role="dialog">
-                    <div class="modal-dialog modal-dialog-centered">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h5 class="modal-title">Profil Bearbeiten</h5>
-                                <button type="button" class="close" data-dismiss="modal">&times;</button>
-                            </div>
-                            <div class="modal-body">
-                                <form class="new-msg-form">
-                                    <div class="form-group">
-                                        <label class="bmd-label-floating">Benutzername*</label>
-                                        <input type="text" class="form-control" id="user">
+                    <div class="logout-item"><i class="material-icons" @click="$router.push('/login')">exit_to_app</i></div>
+
+                    <div class="profil-text">
+                        <h6><b>Benutzername:</b><br><br>
+                        <b>{{ profil.user }}</b><br><br>
+                        <b>Studiengang:</b><br><br>
+                        {{ profil.major }}<br><br>
+                        <b>Semester:</b><br><br>
+                        {{ profil.semester }}<br></h6>
+                    </div>
+
+                    <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">
-                                        <label class="bmd-label-floating">Studiengang*</label>
-                                        <input type="text" class="form-control" id="major">
-                                    </div>
-                                    <div class="form-group">
-                                        <label class="bmd-label-floating">Semester*</label>
-                                        <input type="text" class="form-control" id="semester">
-                                    </div>
-                                </form>
+                                </div>
+                                <footer class="modal-card-foot">
+                                    <b-button size="is-medium" @click="isCardModalActive = false">Close</b-button>
+                                </footer>
                            </div>
-                            <div class="modal-footer">
-                                <button type="button" class ="btn btn-default" data-dismiss="modal" id="close">Close</button>
-                                <button type="submit" class="btn btn-raised om-btn" data-dismiss="modal" id="save">Save</button>
-                            </div>
-                        </div>
-                </div>
+                        </b-modal>
+                    </section>
                </div>
                </div>`,
-    props: ['profil']
+
+    props: ['profil'],
+
+    data: function () {
+        return {
+            isCardModalActive: false
+        };
+    },
+    methods: {
+        close: function () {
+
+        }
+    }
 });
--- a/public/routes/profilData.js
+++ b/public/routes/profilData.js
@ -1,9 +1,9 @@
 _profilcard = [
    {
        id: 1,
-        user: 'Benutzername',
-        major: 'Studiengang',
-        semester: 'Semester',
+        user: '',
+        major: '',
+        semester: '',
        abos: '7',
        saved: '3',
    },
--- a/public/style/style.css
+++ b/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-bottom: 10px;
+  margin-top: 90px;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
+  z-index: 2;
 }
 .profil-card {
-  margin: 10px;
-  margin-top: -80px;
+  margin-left: 10px;
+  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;
-  z-index: 2;
+  margin-bottom: 10px;
+  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 {
-  height: 90%;
+.vertical-alignment-helper {
+  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;
--- a/public/style/style.less
+++ b/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-bottom: 10px;
+    margin-top: 90px;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
+    z-index:2;
 }
 .profil-card {
-    margin: 10px;
-    margin-top: -80px;
+    margin-left: 10px;
+    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;
-    z-index:2;
+    margin-bottom: 10px;
+    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 {
-    height: 90%;
+.vertical-alignment-helper {
+    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;
Author	SHA1	Message	Date
Edwina Barbalan	83d1d4dea8	Merge remote-tracking branch 'origin/developer' into developer	2019-07-02 14:59:17 +02:00
Edwina Barbalan	9375316956	Router Componente erstellt / Navbar bearbeitet	2019-07-02 14:59:11 +02:00
Edwina Barbalan	d61def25b9	Merge remote-tracking branch 'origin/developer' into developer	2019-06-18 14:47:38 +02:00
Edwina Barbalan	d71c50ef22	Profil änderungen	2019-06-18 09:37:48 +02:00
Edwina Barbalan	c3073101b1	Merge remote-tracking branch 'origin/developer' into developer	2019-06-04 16:42:52 +02:00
Edwina Barbalan	d77c8d69e3	Speicherfunktion / Buefy auf Profil angewendet	2019-06-04 16:42:45 +02:00