Xenia Grünzinger
6 years ago
5 changed files with 26 additions and 69 deletions
+ 14
- 48
public/home.js
View File
| @@ -1,41 +1,41 @@ | |||
| Vue.component('msg-item', { | |||
| template: `<div class="om-card card"> | |||
| <h6 class="msg-head"> | |||
| <b>{{ title }}</b> | |||
| <b>{{ subject }}</b> | |||
| <img src="favicon.ico" width=20px height=20px> | |||
| </h6><br> | |||
| {{ subject }}<br><br> | |||
| </h6> | |||
| {{ message }}<br><br> | |||
| <a href="#">{{ tag }}</a></p> | |||
| <div class="om-user-line"> | |||
| <i class="material-icons">account_circle</i> | |||
| Erstellt von {{ user }} | |||
| </div>`, | |||
| props: ['title', 'subject', 'tag', 'user'] | |||
| props: ['subject', 'message', 'tag', 'user'] | |||
| }) | |||
| new Vue({ | |||
| el: '#newmessages-example', | |||
| el: '#message-list', | |||
| data: { | |||
| messages: [ | |||
| { | |||
| id: 1, | |||
| title: 'Betreff_1', | |||
| subject: 'Nachricht_1', | |||
| tag: '#tag_1', | |||
| subject: 'Betreff_1', | |||
| message: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.', | |||
| tag: '#efi #bme #semester', | |||
| user: 'user_1' | |||
| }, | |||
| { | |||
| id: 2, | |||
| title: 'Betreff_2', | |||
| subject: 'Nachricht_2', | |||
| tag: '#tag_2', | |||
| subject: 'Betreff_2', | |||
| message: '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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.', | |||
| tag: '#efi #fachschaft', | |||
| user: 'user_2' | |||
| }, | |||
| { | |||
| id: 3, | |||
| title: 'Betreff_3', | |||
| subject: 'Nachricht_3', | |||
| tag: '#tag_3', | |||
| subject: 'Betreff_3', | |||
| message: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.', | |||
| tag: '#efi #bei #wichtig', | |||
| user: 'user_3' | |||
| } | |||
| ], | |||
| @@ -68,38 +68,4 @@ Vue.component('home', { | |||
| </div>` | |||
| }) | |||
| new Vue({ | |||
| el: '#sample', | |||
| data: { | |||
| private: { | |||
| messages : [ | |||
| { | |||
| message : [ | |||
| {subject : 'Betreff_1'}, | |||
| { msg : 'Nachricht_1' }, | |||
| { tags : '#tag_1' }, | |||
| { user : 'user_1' } | |||
| ] | |||
| }, | |||
| { | |||
| message : [ | |||
| {subject : 'Betreff_2'}, | |||
| { msg : 'Nachricht_2' }, | |||
| { tags : '#tag_2' }, | |||
| { user : 'user_2' } | |||
| ] | |||
| }, | |||
| { | |||
| message : [ | |||
| {subject : 'Betreff_3'}, | |||
| { msg : 'Nachricht_3' }, | |||
| { tags : '#tag_3' }, | |||
| { user : 'user_3' } | |||
| ] | |||
| } | |||
| ] | |||
| } | |||
| } | |||
| }) | |||
| */ | |||
+ 4
- 6
public/index.html
View File
| @@ -26,7 +26,6 @@ | |||
| <body> | |||
| <div class="om-header-container"> | |||
| <div class="om-header"> | |||
| <!-- <img src="https://www.chaac.tf.fau.de/files/2018/06/csm_th_nuernberg_ohmicon_amp_0b08e6a9c0.png" width=55px height=55px> --> | |||
| <a href="index.html"><img src="th_nbg_ohmicon_amp.png" width=55px height=55px></a> | |||
| <form class="om-searchbar"> | |||
| <input type="search" placeholder="Search..."> | |||
| @@ -36,16 +35,15 @@ | |||
| <script src="https://unpkg.com/vue"></script> | |||
| <div class="om-content"> | |||
| <div id="newmessages-example"> | |||
| <div | |||
| is="msg-item" | |||
| <div id="message-list"> | |||
| <msg-item | |||
| v-for="(msg, index) in messages" | |||
| v-bind:key="msg.id" | |||
| v-bind:title="msg.title" | |||
| v-bind:subject="msg.subject" | |||
| v-bind:message="msg.message" | |||
| v-bind:tag="msg.tag" | |||
| v-bind:user="msg.user" | |||
| ></div> | |||
| ></msg-item> | |||
| </div> | |||
| </div> | |||
| <script src="./home.js"></script> | |||
+ 1
- 1
public/message.html
View File
| @@ -36,7 +36,7 @@ | |||
| <input type="text" class="form-control" id="subject"> | |||
| </div> | |||
| <div class="form-group bmd-form-group"> | |||
| <label class="bmd-label-floating">Hashtags</label> | |||
| <label class="bmd-label-floating">Tags</label> | |||
| <input type="text" class="form-control" id="hashtags"> | |||
| </div> | |||
| <div class="form-group"> | |||
+ 4
- 7
public/style.css
View File
| @@ -39,16 +39,13 @@ | |||
| background-color: #0046a0; | |||
| color: white; | |||
| } | |||
| .msg-head { | |||
| margin-top: 10px; | |||
| margin-bottom: 10px; | |||
| } | |||
| .msg-head img { | |||
| float: right; | |||
| } | |||
| .om-user-head { | |||
| display: flex; | |||
| margin-bottom: 5%; | |||
| } | |||
| .om-user-head i { | |||
| margin-right: 2%; | |||
| } | |||
| .om-user-line { | |||
| display: flex; | |||
| } | |||
+ 3
- 7
public/style.less
View File
| @@ -46,18 +46,14 @@ | |||
| } | |||
| .msg-head{ | |||
| margin-top: 10px; | |||
| margin-bottom: 10px; | |||
| img{ | |||
| float: right | |||
| } | |||
| } | |||
| .om-user-head{ | |||
| display: flex; | |||
| margin-bottom: 5%; | |||
| i{ | |||
| margin-right: 2%; | |||
| } | |||
| } | |||
| .om-user-line{ | |||
| display: flex; | |||
| i{ | |||
Loading…