Files und NewMsg Componente hinzugefügt
This commit is contained in:
Xenia Grünzinger
parent
985d4a62e2
commit
b2df5884dd
@ -1,7 +1,7 @@
|
|||||||
const BookmarkRouter = {
|
const BookmarkRouter = {
|
||||||
template: `
|
template: `
|
||||||
<div>
|
<div>
|
||||||
<div class="bookmark-headline"><h4><b>Gepeicherte Beiträge</b></h4></div>
|
<div class="bookmark-headline"><h3>Gepeicherte Beiträge</h3></div>
|
||||||
<MsgCard
|
<MsgCard
|
||||||
v-for="(msg, index) in messages"
|
v-for="(msg, index) in messages"
|
||||||
:key="msg.id"
|
: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', {
|
const FileRouter = {
|
||||||
data: function() {
|
template: `
|
||||||
return {
|
<div>
|
||||||
count: 0
|
<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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="om-content">
|
<div class="om-content">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav class="nav nav-tabs nav-justified om-nav ">
|
<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="/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="/files" class="nav-item nav-link"><i class="material-icons">folder</i></router-link>
|
||||||
@ -85,10 +84,10 @@
|
|||||||
const routes = [
|
const routes = [
|
||||||
{ path: "/", component: HomeRouter },
|
{ path: "/", component: HomeRouter },
|
||||||
{ path: "/home", component: HomeRouter },
|
{ path: "/home", component: HomeRouter },
|
||||||
|
{ path: "/files", component: FileRouter },
|
||||||
|
{ path: "/createMessage", component: CreateMsgRouter },
|
||||||
{ path: "/bookmark", component: BookmarkRouter },
|
{ path: "/bookmark", component: BookmarkRouter },
|
||||||
/* { path: "/files", component: FileRouter },
|
{ path: "/profil", component: ProfilRouter },
|
||||||
{ path: "/createMessage", component: CreateMsgRouter },
|
|
||||||
{ path: "/profil", component: ProfilRouter },*/
|
|
||||||
];
|
];
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
routes
|
routes
|
||||||
|
|||||||
@ -65,9 +65,32 @@
|
|||||||
.bookmark-headline {
|
.bookmark-headline {
|
||||||
margin: 10px;
|
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);
|
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;
|
color: #0046a0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -78,16 +78,37 @@
|
|||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//empty state
|
||||||
|
.empty-state{
|
||||||
|
margin: 40px;
|
||||||
|
margin-top: 40%;
|
||||||
|
color: #6c757d;
|
||||||
|
text-align: center;
|
||||||
|
i{
|
||||||
|
font-size: 50px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
//bmd changes
|
//bmd changes
|
||||||
|
|
||||||
|
//border
|
||||||
.form-group.is-focused .form-control {
|
.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);
|
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{
|
//checkbox
|
||||||
|
.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check:before, label.checkbox-inline input[type=checkbox]:checked+.checkbox-decorator .check:before {
|
||||||
color: @color;
|
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>
|
||||||
|
|
||||||
<div class="om-content">
|
<div class="om-content">
|
||||||
<div class="card om-card">
|
|
||||||
<h5>Neue Nachricht erstellen</h5>
|
</div>
|
||||||
<form class="new-msg-form">
|
|
||||||
<div class="form-group bmd-form-group">
|
<div>
|
||||||
<label class="bmd-label-floating">Betreff</label>
|
<nav class="nav nav-tabs nav-justified om-nav ">
|
||||||
<input type="text" class="form-control" id="subject">
|
<router-link to="/home" class="nav-item nav-link"><i class="material-icons">home</i></router-link>
|
||||||
</div>
|
<router-link to="/files" class="nav-item nav-link"><i class="material-icons">folder</i></router-link>
|
||||||
<div class="form-group bmd-form-group">
|
<router-link to="/createMessage" class="nav-item nav-link outlined"><i class="material-icons">add_circle</i></router-link>
|
||||||
<label class="bmd-label-floating">Tags</label>
|
<router-link to="/bookmark" class="nav-item nav-link"><i class="material-icons">bookmark</i></router-link>
|
||||||
<input type="text" class="form-control" id="hashtags">
|
<router-link to="/profil" class="nav-item nav-link"><i class="material-icons">person</i></router-link>
|
||||||
</div>
|
</nav>
|
||||||
<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>
|
||||||
|
|
||||||
<!-- Optional JavaScript -->
|
<!-- Optional JavaScript -->
|
||||||
Loading…
x
Reference in New Issue
Block a user