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

few changes at the msg-component

Browse Source
This commit is contained in:
Xenia Grünzinger 2018-11-28 14:33:31 +01:00
parent 4eeb3d003b
commit 2a5be0bd77
5 changed files with 26 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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