hopfma
/
om
Watch 4
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

few changes at the msg-component

pull/1/head
Xenia Grünzinger 5 years ago
parent
4eeb3d003b
commit
2a5be0bd77
5 changed files with 26 additions and 69 deletions
Unified View Show Diff Stats
  1. 14
    48
      public/home.js
  2. 4
    6
      public/index.html
  3. 1
    1
      public/message.html
  4. 4
    7
      public/style.css
  5. 3
    7
      public/style.less

+ 14
- 48
public/home.js View File

Vue.component('msg-item', { Vue.component('msg-item', {
template: `<div class="om-card card"> template: `<div class="om-card card">
<h6 class="msg-head"> <h6 class="msg-head">
<b>{{ title }}</b>
<b>{{ subject }}</b>
<img src="favicon.ico" width=20px height=20px> <img src="favicon.ico" width=20px height=20px>
</h6><br>
{{ subject }}<br><br>
</h6>
{{ message }}<br><br>
<a href="#">{{ tag }}</a></p> <a href="#">{{ tag }}</a></p>
<div class="om-user-line"> <div class="om-user-line">
<i class="material-icons">account_circle</i> <i class="material-icons">account_circle</i>
Erstellt von {{ user }} Erstellt von {{ user }}
</div>`, </div>`,
props: ['title', 'subject', 'tag', 'user']
props: ['subject', 'message', 'tag', 'user']
}) })


new Vue({ new Vue({
el: '#newmessages-example',
el: '#message-list',
data: { data: {
messages: [ messages: [
{ {
id: 1, 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' user: 'user_1'
}, },
{ {
id: 2, 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' user: 'user_2'
}, },
{ {
id: 3, 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' user: 'user_3'
} }
], ],
</div>` </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

<body> <body>
<div class="om-header-container"> <div class="om-header-container">
<div class="om-header"> <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> <a href="index.html"><img src="th_nbg_ohmicon_amp.png" width=55px height=55px></a>
<form class="om-searchbar"> <form class="om-searchbar">
<input type="search" placeholder="Search..."> <input type="search" placeholder="Search...">


<script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue"></script>
<div class="om-content"> <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-for="(msg, index) in messages"
v-bind:key="msg.id" v-bind:key="msg.id"
v-bind:title="msg.title"
v-bind:subject="msg.subject" v-bind:subject="msg.subject"
v-bind:message="msg.message"
v-bind:tag="msg.tag" v-bind:tag="msg.tag"
v-bind:user="msg.user" v-bind:user="msg.user"
></div>
></msg-item>
</div> </div>
</div> </div>
<script src="./home.js"></script> <script src="./home.js"></script>

+ 1
- 1
public/message.html View File

<input type="text" class="form-control" id="subject"> <input type="text" class="form-control" id="subject">
</div> </div>
<div class="form-group bmd-form-group"> <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"> <input type="text" class="form-control" id="hashtags">
</div> </div>
<div class="form-group"> <div class="form-group">

+ 4
- 7
public/style.css View File

background-color: #0046a0; background-color: #0046a0;
color: white; color: white;
} }
.msg-head {
margin-top: 10px;
margin-bottom: 10px;
}
.msg-head img { .msg-head img {
float: right; float: right;
} }
.om-user-head {
display: flex;
margin-bottom: 5%;
}
.om-user-head i {
margin-right: 2%;
}
.om-user-line { .om-user-line {
display: flex; display: flex;
} }

+ 3
- 7
public/style.less View File

} }


.msg-head{ .msg-head{
margin-top: 10px;
margin-bottom: 10px;
img{ img{
float: right float: right
} }
} }


.om-user-head{
display: flex;
margin-bottom: 5%;
i{
margin-right: 2%;
}
}

.om-user-line{ .om-user-line{
display: flex; display: flex;
i{ i{

Write Preview
Loading…
Cancel
Save