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

Kleine Design Anpassungen des Mockups

Browse Source
This commit is contained in:
Xenia Grünzinger 2018-11-22 11:48:01 +01:00
parent bdf4157b08
commit 75add7333d
4 changed files with 90 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
public/index.html
View File

@ -26,7 +26,7 @@
<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> --> <!-- <img src="https://www.chaac.tf.fau.de/files/2018/06/csm_th_nuernberg_ohmicon_amp_0b08e6a9c0.png" width=55px height=55px> -->
<img src="th_nbg_ohmicon_amp.png" width=55px height=55px> <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...">
</form> </form>
@ -35,41 +35,70 @@
<div class="om-content"> <div class="om-content">
<div class="om-card card"> <div class="om-card card">
<h5 class="om-user-head"> <h6 class="msg-head">
<i class="material-icons">account_circle</i> <b>Betreff</b>
<b> User1</b> <img src="favicon.ico" width=20px height=20px>
</h5> </h6>
<h6><b>Betreff</b></h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br>
<a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p> <a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p>
</div> <div class="om-user-line">
<div class="card om-card">
<h5 class="om-user-head">
<i class="material-icons">account_circle</i> <i class="material-icons">account_circle</i>
<b> User2</b> Erstellt von User1
</h5> </div>
<h6><b>Betreff</b></h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br>
<a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p>
</div> </div>
<div class="om-card card"> <div class="om-card card">
<h5 class="om-user-head"> <h6 class="msg-head">
<i class="material-icons">account_circle</i> <b>Betreff</b>
<b> User2</b> <img src="favicon.ico" width=20px height=20px>
</h5> </h6>
<h6><b>Betreff</b></h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br>
<a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p> <a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User1
</div>
</div> </div>
<div class="om-card card"> <div class="om-card card">
<h5 class="om-user-head"> <h6 class="msg-head">
<i class="material-icons">account_circle</i> <b>Betreff</b>
<b> User2</b> <img src="favicon.ico" width=20px height=20px>
</h5> </h6>
<h6><b>Betreff</b></h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br>
<a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p> <a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User1
</div>
</div> </div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br>
<a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User1
</div>
</div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br>
<a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User1
</div>
</div>
</div> </div>
<!-- <!--

2
public/message.html
View File

@ -20,7 +20,7 @@
<body> <body>
<div class="om-header-container "> <div class="om-header-container ">
<div class="om-header"> <div class="om-header">
<img src="th_nbg_ohmicon_amp.png" width=55px height=55px> <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...">
</form> </form>

14
public/style.css
View File

@ -4,6 +4,7 @@
top: 0px; top: 0px;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
display: block;
} }
.om-header { .om-header {
justify-content: space-between; justify-content: space-between;
@ -36,6 +37,10 @@
} }
.om-btn { .om-btn {
background-color: #0046a0; background-color: #0046a0;
color: white;
}
.msg-head img {
float: right;
} }
.om-user-head { .om-user-head {
display: flex; display: flex;
@ -44,6 +49,12 @@
.om-user-head i { .om-user-head i {
margin-right: 2%; margin-right: 2%;
} }
.om-user-line {
display: flex;
}
.om-user-line i {
margin-right: 2%;
}
.om-nav { .om-nav {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -57,3 +68,6 @@
.form-group.is-focused .form-control { .form-group.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 {
color: #0046a0;
}

22
public/style.less
View File

@ -6,6 +6,7 @@
top: 0px; top: 0px;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
display: block;
} }
.om-header{ .om-header{
@ -41,7 +42,15 @@
} }
.om-btn{ .om-btn{
background-color: @color; background-color: @color;
color: white;
} }
.msg-head{
img{
float: right
}
}
.om-user-head{ .om-user-head{
display: flex; display: flex;
margin-bottom: 5%; margin-bottom: 5%;
@ -49,6 +58,12 @@
margin-right: 2%; margin-right: 2%;
} }
} }
.om-user-line{
display: flex;
i{
margin-right: 2%;
}
}
//footer //footer
.om-nav{ .om-nav{
@ -65,6 +80,13 @@
//bmd changes //bmd changes
.form-group.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);
} }
.form-group .bmd-form-group .is-focused .bmd-label-floating{
color: @color;
}