From d77c8d69e3edf36b547d7f2652e75b28c2260050 Mon Sep 17 00:00:00 2001 From: Edwina Barbalan Date: Tue, 4 Jun 2019 16:42:45 +0200 Subject: [PATCH] Speicherfunktion / Buefy auf Profil angewendet --- public/routes/bookmark.js | 2 +- public/routes/msgCard.js | 37 +++++++++++++- public/routes/profilCard.js | 99 ++++++++++++++++++++++--------------- public/routes/profilData.js | 6 +-- public/style/style.css | 65 ++++++++++++++++++------ public/style/style.less | 69 +++++++++++++++++++------- 6 files changed, 200 insertions(+), 78 deletions(-) diff --git a/public/routes/bookmark.js b/public/routes/bookmark.js index 020a7d3..be4d169 100644 --- a/public/routes/bookmark.js +++ b/public/routes/bookmark.js @@ -12,7 +12,7 @@ const BookmarkRouter = {
account_circle Erstellt von User 1
- bookmark + bookmark
diff --git a/public/routes/msgCard.js b/public/routes/msgCard.js index 5276995..e86ecb5 100644 --- a/public/routes/msgCard.js +++ b/public/routes/msgCard.js @@ -9,7 +9,40 @@ Vue.component('MsgCard', {
account_circle Erstellt von {{ msg.user }}
- bookmark_border + + + bookmark_border + + + + +
`, - 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)); + }*/ + }, }); diff --git a/public/routes/profilCard.js b/public/routes/profilCard.js index 7a061d2..7697537 100644 --- a/public/routes/profilCard.js +++ b/public/routes/profilCard.js @@ -1,50 +1,71 @@ Vue.component('ProfilCard', { template: `
-
-
edit
+
+ Card image cap +
exit_to_app
-
{{ profil.user }}

-
{{ profil.major }}

- {{ profil.semester }}
+
Benutzername:

+ {{ profil.user }}

+ Studiengang:

+ {{ profil.major }}

+ Semester:

+ {{ profil.semester }}
-
-
- - +
+
+ +
-
+
-
+
`, - props: ['profil'] + + props: ['profil'], + + data: function () { + return { + isCardModalActive: false + }; + }, + methods: { + close: function () { + + } + } }); diff --git a/public/routes/profilData.js b/public/routes/profilData.js index e460572..dcc9bac 100644 --- 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', }, diff --git a/public/style/style.css b/public/style/style.css index 2147abe..e7951cb 100644 --- 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,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; diff --git a/public/style/style.less b/public/style/style.less index c1b9d5f..b8e7af3 100644 --- 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; } @@ -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;