Speicherfunktion / Buefy auf Profil angewendet

public/routes/msgCard.js

@@ -9,7 +9,40 @@ 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>
+
+                <a href="#" v-if="isFavorited" @click.prevent="unFavorite(post)">
+				<i class="material-icons">bookmark_border</i></a>
+
+                <a href="#" v-else @click.prevent="favorite(post)">
+                <i  class="bookmark"></i>
+                </a>
+
                 </div></div>`,
-    props: ['msg']
+    props: ['msg'],
+   // props: ['post', 'favorited'],
+    data: function () {
+        return {
+            // isFavorited: '',
+        };
+    },
+   /* mounted() {
+            this.isFavorited = this.isFavorite ? true : false;
+        },
+        computed: {
+            isFavorite() {
+                return this.favorited;
+            },
+        },*/
+    methods: {
+           /* favorite(post) {
+                $.ajax({url: "api/ids", method: "POST"})
+                    .then(response => this.isFavorited = true)
+                    .catch(response => console.log(response.data));
+            },
+            unFavorite(post) {
+                $.ajax({url: "api/ids", method: "POST"})
+                    .then(response => this.isFavorited = false)
+                    .catch(response => console.log(response.data));
+            }*/
+        },
 });

public/routes/profilCard.js

@@ -1,50 +1,71 @@
 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/>
+                    <img class="prof-image" src="img/profil_icon.png" alt="Card image cap">
+                    <div class="logout-item"><i class="material-icons" @click="$router.push('/login')">exit_to_app</i></div>
                     <div class="profil-text">
-                        <h5><b>{{ profil.user }}</b></h5><br>
+                        <h6><b>Benutzername:</b><br><br>
-                        <h6>{{ profil.major }}<br><br>
+                        <b>{{ profil.user }}</b><br><br>
-                        {{ profil.semester }}</h6>
+                        <b>Studiengang:</b><br><br>
-                    </div>
+                        {{ profil.major }}<br><br>
-                    <hr>
+                        <b>Semester:</b><br><br>
-                    <div class="om-tab">
+                        {{ profil.semester }}<br></h6>
-                        <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>
+                    <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>
 
-                <div class="modal fade" id="myModal" role="dialog">
+                        <b-modal :active.sync="isCardModalActive" :width="600" scroll="keep">
-                    <div class="modal-dialog modal-dialog-centered">
+            <div class="card">
-                        <div class="modal-content">
+            <header class="modal-card-head">
-                            <div class="modal-header">
+                        <p class="modal-card-title">Abonnierte Kanäle</p>
-                                <h5 class="modal-title">Profil Bearbeiten</h5>
+                    </header>
-                                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <div class="card-content">
-                            </div>
+                    <div class="content">
-                            <div class="modal-body">
+                        <ul>
-                                <form class="new-msg-form">
+                            <li>
-                                    <div class="form-group">
+                            </li>
-                                        <label class="bmd-label-floating">Benutzername*</label>
+                            <li>
-                                        <input type="text" class="form-control" id="user">
+                            </li>
-                                    </div>
+                            <li>
-                                    <div class="form-group">
+                            </li>
-                                        <label class="bmd-label-floating">Studiengang*</label>
+                            <li>
-                                        <input type="text" class="form-control" id="major">
+                            </li>
-                                    </div>
+                            <li>
-                                    <div class="form-group">
+                            </li>
-                                        <label class="bmd-label-floating">Semester*</label>
+                            <li>
-                                        <input type="text" class="form-control" id="semester">
+                            </li>
-                                    </div>
+                            <li>
-                                </form>
+                            </li>
-                            </div>
+                        </ul>
-                            <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>
+                <footer class="modal-card-foot">
+                        <b-button size="is-medium" @click="isCardModalActive = false">Close</b-button>
+                    </footer>
             </div>
+        </b-modal>
+
+                    </section>
+
                 </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,7 +40,7 @@
   height: 65px;
   width: 100%;
   background-color: #0046a0;
-  z-index: 5;
+  z-index: 10;
 }
 .om-nav i {
   color: white;
@@ -86,45 +87,81 @@
   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;
     }
@@ -109,54 +110,84 @@ a.nav-item.nav-link{
 
 // 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;
-}
-
-.modal-content {
     height: 100%;
+    width: 100%;
+}
+.vertical-align-center {
+    /* To center vertically */
+    display: table-cell;
+    vertical-align: middle;
+}
+.modal-content {
+    width:inherit;
+    height: 80%;
+    /* To center horizontally */
+    margin: 0 auto;
 }
-
-//.modal-header {
-//    background-color: @color;
-//    color: #FFF;
-//}
 
 .om-tab {
     font-size: 16px;