Compare commits
2 Commits
985d4a62e2
...
645e111f51
| Author | SHA1 | Date | |
|---|---|---|---|
|
645e111f51 | ||
|
|
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: {
|
||||
},
|
||||
};
|
||||
|
||||
@ -50,6 +50,9 @@
|
||||
<script src="profil.js"></script>
|
||||
<script src="msgCard.js"></script>
|
||||
<script src="messageData.js"></script>
|
||||
<script src="profilCard.js"></script>
|
||||
<script src="profilData.js"></script>
|
||||
|
||||
|
||||
|
||||
<title>OMApp</title>
|
||||
@ -66,11 +69,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 +87,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,74 @@
|
||||
.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;
|
||||
}
|
||||
.profil-text {
|
||||
margin-top: 70px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.profil-card {
|
||||
margin: 10px;
|
||||
margin-top: -80px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.profil-img {
|
||||
background-color: #0046a0;
|
||||
border-style: solid;
|
||||
border-color: #0046a0;
|
||||
border-width: thick;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.edit-item {
|
||||
color: #0046a0;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.edit-item i {
|
||||
float: right;
|
||||
font-size: 30px;
|
||||
}
|
||||
.tab {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 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,81 @@
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
//empty state
|
||||
.empty-state{
|
||||
margin: 40px;
|
||||
margin-top: 40%;
|
||||
color: #6c757d;
|
||||
text-align: center;
|
||||
i{
|
||||
font-size: 50px;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// profil
|
||||
.profil-text {
|
||||
margin-top: 70px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.profil-card {
|
||||
margin: 10px;
|
||||
margin-top: -80px;
|
||||
position: relative;
|
||||
z-index:1;
|
||||
}
|
||||
.profil-img {
|
||||
background-color: @color;
|
||||
border-style: solid;
|
||||
border-color: @color;
|
||||
border-width: thick;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
z-index:2;
|
||||
}
|
||||
.edit-item {
|
||||
color: @color;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
i {
|
||||
float: right;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.tab {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 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