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

Compare commits

...

2 Commits
97c82b5d92 ... 03935ea5c3

Author SHA1 Message Date
Xenia Grünzinger
03935ea5c3 Merge remote-tracking branch 'origin/master' 2018-11-28 14:33:43 +01:00
Xenia Grünzinger
2a5be0bd77 few changes at the msg-component 2018-11-28 14:33:31 +01:00
5 changed files with 26 additions and 69 deletions

62
public/home.js

@ -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' }
]
}
]
}
}
})
*/

10
public/index.html

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

2
public/message.html

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

11
public/style.css

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

10
public/style.less

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