Files und NewMsg Componente hinzugefügt
This commit is contained in:
Xenia Grünzinger
parent
985d4a62e2
commit
b2df5884dd
@ -1,7 +1,7 @@
|
||||
const BookmarkRouter = {
|
||||
template: `
|
||||
<div>
|
||||
<div class="bookmark-headline"><h4><b>Gepeicherte Beiträge</b></h4></div>
|
||||
<div class="bookmark-headline"><h3>Gepeicherte Beiträge</h3></div>
|
||||
<MsgCard
|
||||
v-for="(msg, index) in messages"
|
||||
:key="msg.id"
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
const CreateMsgRouter = {
|
||||
template: `
|
||||
<div class="card om-card">
|
||||
<h5>Neue Nachricht erstellen</h5>
|
||||
<form class="new-msg-form" action="#" methord="GET">
|
||||
<div class="form-group bmd-form-group">
|
||||
<label class="bmd-label-floating">Betreff</label>
|
||||
<input type="text" class="form-control" id="subject">
|
||||
</div>
|
||||
<div class="form-group bmd-form-group">
|
||||
<label class="bmd-label-floating">Tags</label>
|
||||
<input type="text" class="form-control" id="hashtags">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Nachricht</label>
|
||||
<textarea class="form-control" id="message" rows="5"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Zusätzlich als E-mail versenden
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-default"><a href="index.html#/home">ABBRECHEN </a></button>
|
||||
<button type="submit" class="btn btn-raised om-btn">SENDEN</button>
|
||||
</form>
|
||||
</div>
|
||||
`,
|
||||
data: function () {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
};
|
||||
@ -1,8 +1,15 @@
|
||||
Vue.component('Files', {
|
||||
data: function() {
|
||||
return {
|
||||
count: 0
|
||||
}
|
||||
const FileRouter = {
|
||||
template: `
|
||||
<div>
|
||||
<h3>Dateiablage</h3>
|
||||
<div class="empty-state">
|
||||
<i class="material-icons"> folder_open </i><br>
|
||||
Diese Funktion steht noch nicht bereit.
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data: function () {
|
||||
},
|
||||
template: `<button v-on:click="count++"> You clicked me {{ count }} times. </button>`
|
||||
})
|
||||
methods: {
|
||||
},
|
||||
};
|
||||
|
||||
@ -66,11 +66,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="om-content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
<nav class="nav nav-tabs nav-justified om-nav ">
|
||||
<router-link to="/home" class="nav-item nav-link"><i class="material-icons">home</i></router-link>
|
||||
<router-link to="/files" class="nav-item nav-link"><i class="material-icons">folder</i></router-link>
|
||||
@ -85,10 +84,10 @@
|
||||
const routes = [
|
||||
{ path: "/", component: HomeRouter },
|
||||
{ path: "/home", component: HomeRouter },
|
||||
{ path: "/files", component: FileRouter },
|
||||
{ path: "/createMessage", component: CreateMsgRouter },
|
||||
{ path: "/bookmark", component: BookmarkRouter },
|
||||
/* { path: "/files", component: FileRouter },
|
||||
{ path: "/createMessage", component: CreateMsgRouter },
|
||||
{ path: "/profil", component: ProfilRouter },*/
|
||||
{ path: "/profil", component: ProfilRouter },
|
||||
];
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
|
||||
@ -65,9 +65,32 @@
|
||||
.bookmark-headline {
|
||||
margin: 10px;
|
||||
}
|
||||
.form-group.is-focused .form-control {
|
||||
.empty-state {
|
||||
margin: 40px;
|
||||
margin-top: 40%;
|
||||
color: #6c757d;
|
||||
text-align: center;
|
||||
}
|
||||
.empty-state i {
|
||||
font-size: 50px;
|
||||
margin: 10px;
|
||||
}
|
||||
.form-group.is-focused .form-control .custom-file-control,
|
||||
.form-control,
|
||||
.is-focused .custom-file-control,
|
||||
.is-focused .form-control {
|
||||
background-image: linear-gradient(0deg, #0046a0 2px, rgba(0, 150, 136, 0) 0), linear-gradient(0deg, rgba(0, 0, 0, 0.26) 1px, transparent 0);
|
||||
}
|
||||
.form-group .bmd-form-group .is-focused .bmd-label-floating {
|
||||
.checkbox label input[type=checkbox]:checked + .checkbox-decorator .check:before,
|
||||
label.checkbox-inline input[type=checkbox]:checked + .checkbox-decorator .check:before {
|
||||
color: #0046a0;
|
||||
}
|
||||
.checkbox label input[type=checkbox]:checked + .checkbox-decorator .check,
|
||||
label.checkbox-inline input[type=checkbox]:checked + .checkbox-decorator .check {
|
||||
color: #0046a0;
|
||||
border-color: #0046a0;
|
||||
}
|
||||
.is-focused [class*="bmd-label"],
|
||||
.is-focused[class^=bmd-label] {
|
||||
color: #0046a0;
|
||||
}
|
||||
|
||||
@ -78,16 +78,37 @@
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
//empty state
|
||||
.empty-state{
|
||||
margin: 40px;
|
||||
margin-top: 40%;
|
||||
color: #6c757d;
|
||||
text-align: center;
|
||||
i{
|
||||
font-size: 50px;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//bmd changes
|
||||
|
||||
|
||||
.form-group.is-focused .form-control {
|
||||
background-image: linear-gradient(0deg,@color 2px,rgba(0,150,136,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
|
||||
//border
|
||||
.form-group.is-focused .form-control .custom-file-control, .form-control, .is-focused .custom-file-control, .is-focused .form-control {
|
||||
background-image: linear-gradient(0deg, @color 2px,rgba(0,150,136,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
|
||||
}
|
||||
|
||||
.form-group .bmd-form-group .is-focused .bmd-label-floating{
|
||||
|
||||
color: @color;
|
||||
|
||||
//checkbox
|
||||
.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check:before, label.checkbox-inline input[type=checkbox]:checked+.checkbox-decorator .check:before {
|
||||
color: @color;
|
||||
}
|
||||
|
||||
.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, label.checkbox-inline input[type=checkbox]:checked+.checkbox-decorator .check {
|
||||
color: @color;
|
||||
border-color: @color;
|
||||
}
|
||||
|
||||
//label
|
||||
.is-focused [class*="bmd-label"], .is-focused[class^=bmd-label]{
|
||||
color: @color;
|
||||
}
|
||||
|
||||
@ -28,32 +28,17 @@
|
||||
</div>
|
||||
|
||||
<div class="om-content">
|
||||
<div class="card om-card">
|
||||
<h5>Neue Nachricht erstellen</h5>
|
||||
<form class="new-msg-form">
|
||||
<div class="form-group bmd-form-group">
|
||||
<label class="bmd-label-floating">Betreff</label>
|
||||
<input type="text" class="form-control" id="subject">
|
||||
</div>
|
||||
<div class="form-group bmd-form-group">
|
||||
<label class="bmd-label-floating">Tags</label>
|
||||
<input type="text" class="form-control" id="hashtags">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Nachricht</label>
|
||||
<textarea class="form-control" id="message" rows="5"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Zusätzlich als E-mail versenden
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-default"><a href="index.html">ABBRECHEN </a></button>
|
||||
<button type="submit" class="btn btn-raised om-btn">SENDEN</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<nav class="nav nav-tabs nav-justified om-nav ">
|
||||
<router-link to="/home" class="nav-item nav-link"><i class="material-icons">home</i></router-link>
|
||||
<router-link to="/files" class="nav-item nav-link"><i class="material-icons">folder</i></router-link>
|
||||
<router-link to="/createMessage" class="nav-item nav-link outlined"><i class="material-icons">add_circle</i></router-link>
|
||||
<router-link to="/bookmark" class="nav-item nav-link"><i class="material-icons">bookmark</i></router-link>
|
||||
<router-link to="/profil" class="nav-item nav-link"><i class="material-icons">person</i></router-link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Optional JavaScript -->
|
||||
Loading…
x
Reference in New Issue
Block a user