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
Unified 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

<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>


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


<!-- <!--

+ 1
- 1
public/message.html View File

<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
- 0
public/style.css View File

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;
} }
.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;
.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;
.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
- 0
public/style.less View File

top: 0px; top: 0px;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
display: block;
} }


.om-header{ .om-header{
} }
.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%;
margin-right: 2%; margin-right: 2%;
} }
} }
.om-user-line{
display: flex;
i{
margin-right: 2%;
}
}


//footer //footer
.om-nav{ .om-nav{


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

}

Write Preview
Loading…
Cancel
Save