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

Compare commits

base: hopfma:645e111f51abcc4b43aca460e3c905eaf4fa0b46
Branches Tags
hopfma:developer
hopfma:master
..
compare: hopfma:985d4a62e2339c8b69cfd63019cb5ca246b19002
Branches Tags
hopfma:developer
hopfma:master

No commits in common. "645e111f51abcc4b43aca460e3c905eaf4fa0b46" and "985d4a62e2339c8b69cfd63019cb5ca246b19002" have entirely different histories.
645e111f51 ... 985d4a62e2

7 changed files with 46 additions and 204 deletions
Show Stats Expand all files Collapse all files

2
public/bookmark.js
View File

@ -1,7 +1,7 @@
const BookmarkRouter = { const BookmarkRouter = {
template: ` template: `
<div> <div>
<div class="bookmark-headline"><h3>Gepeicherte Beiträge</h3></div> <div class="bookmark-headline"><h4><b>Gepeicherte Beiträge</b></h4></div>
<MsgCard <MsgCard
v-for="(msg, index) in messages" v-for="(msg, index) in messages"
:key="msg.id" :key="msg.id"

34
public/createMessage.js
View File

@ -1,34 +0,0 @@
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: {
},
};

19
public/files.js
View File

@ -1,15 +1,8 @@
const FileRouter = { Vue.component('Files', {
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() { data: function() {
return {
count: 0
}
}, },
methods: { template: `<button v-on:click="count++"> You clicked me {{ count }} times. </button>`
}, })
};

12
public/index.html
View File

@ -50,9 +50,6 @@
<script src="profil.js"></script> <script src="profil.js"></script>
<script src="msgCard.js"></script> <script src="msgCard.js"></script>
<script src="messageData.js"></script> <script src="messageData.js"></script>
<script src="profilCard.js"></script>
<script src="profilData.js"></script>
<title>OMApp</title> <title>OMApp</title>
@ -69,10 +66,11 @@
</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>
@ -87,10 +85,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: "/profil", component: ProfilRouter }, /* { path: "/files", component: FileRouter },
{ path: "/createMessage", component: CreateMsgRouter },
{ path: "/profil", component: ProfilRouter },*/
]; ];
const router = new VueRouter({ const router = new VueRouter({
routes routes

35
public/template-test.html → public/message.html
View File

@ -28,17 +28,32 @@
</div> </div>
<div class="om-content"> <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> </div>
<!-- Optional JavaScript --> <!-- Optional JavaScript -->

69
public/style/style.css
View File

@ -65,74 +65,9 @@
.bookmark-headline { .bookmark-headline {
margin: 10px; margin: 10px;
} }
.empty-state { .form-group.is-focused .form-control {
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); 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);
} }
.checkbox label input[type=checkbox]:checked + .checkbox-decorator .check:before, .form-group .bmd-form-group .is-focused .bmd-label-floating {
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;
} }

71
public/style/style.less
View File

@ -78,81 +78,16 @@
margin: 10px; 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 //bmd changes
//border
.form-group.is-focused .form-control .custom-file-control, .form-control, .is-focused .custom-file-control, .is-focused .form-control { .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); background-image: linear-gradient(0deg,@color 2px,rgba(0,150,136,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
} }
//checkbox .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: @color;
}
.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, label.checkbox-inline input[type=checkbox]:checked+.checkbox-decorator .check {
color: @color; color: @color;
border-color: @color;
}
//label
.is-focused [class*="bmd-label"], .is-focused[class^=bmd-label]{
color: @color;
} }