hopfma/om
4
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Speicherfunktion / Buefy auf Profil angewendet

Browse Source
This commit is contained in:
Edwina Barbalan 2019-06-04 16:42:45 +02:00
parent aba5a9ce8e
commit d77c8d69e3
6 changed files with 200 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/routes/bookmark.js
View File

@ -12,7 +12,7 @@ const BookmarkRouter = {
<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">bookmark</i>
</div></div>
<div class="om-card card">
<h6 class="msg-head">

37
public/routes/msgCard.js
View File

@ -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));
}*/
},
});

99
public/routes/profilCard.js
View File

@ -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>{{ profil.major }}<br><br>
{{ profil.semester }}</h6>
<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>
<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>
<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>
</div>
<section>
<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>
<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>
<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>
<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>
<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 () {
}
}
});

6
public/routes/profilData.js
View File

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

65
public/style/style.css
View File

@ -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-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;

69
public/style/style.less
View File

@ -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,55 +110,85 @@ a.nav-item.nav-link{
// 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;