hopfma
/
om
Watch 4
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Kleine Design Anpassungen des Mockups

pull/1/head
Xenia Grünzinger 6 years ago
parent
bdf4157b08
commit
75add7333d
4 changed files with 87 additions and 22 deletions
Split View Show Diff Stats
  1. 50
    21
      public/index.html
  2. 1
    1
      public/message.html
  3. 14
    0
      public/style.css
  4. 22
    0
      public/style.less

+ 50
- 21
public/index.html View File

@@ -26,7 +26,7 @@
<div class="om-header-container">
<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="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">
<input type="search" placeholder="Search...">
</form>
@@ -35,41 +35,70 @@

<div class="om-content">
<div class="om-card card">
<h5 class="om-user-head">
<i class="material-icons">account_circle</i>
<b> User1</b>
</h5>
<h6><b>Betreff</b></h6>
<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>
<div class="card om-card">
<h5 class="om-user-head">
<div class="om-user-line">
<i class="material-icons">account_circle</i>
<b> User2</b>
</h5>
<h6><b>Betreff</b></h6>
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 class="om-card card">
<h5 class="om-user-head">
<i class="material-icons">account_circle</i>
<b> User2</b>
</h5>
<h6><b>Betreff</b></h6>
<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">
<h5 class="om-user-head">
<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>
<b> User2</b>
</h5>
<h6><b>Betreff</b></h6>
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>

<!--

+ 1
- 1
public/message.html View File

@@ -20,7 +20,7 @@
<body>
<div class="om-header-container ">
<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">
<input type="search" placeholder="Search...">
</form>

+ 14
- 0
public/style.css View File

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

+ 22
- 0
public/style.less View File

@@ -6,6 +6,7 @@
top: 0px;
z-index: 1;
width: 100%;
display: block;
}

.om-header{
@@ -41,7 +42,15 @@
}
.om-btn{
background-color: @color;
color: white;
}

.msg-head{
img{
float: right
}
}

.om-user-head{
display: flex;
margin-bottom: 5%;
@@ -49,6 +58,12 @@
margin-right: 2%;
}
}
.om-user-line{
display: flex;
i{
margin-right: 2%;
}
}

//footer
.om-nav{
@@ -65,6 +80,13 @@

//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);
}

.form-group .bmd-form-group .is-focused .bmd-label-floating{

color: @color;

}

Write Preview
Loading…
Cancel
Save