Design Anpassungen für Mockup

This commit is contained in:
Xenia Grünzinger
2018-11-21 14:42:59 +01:00
parent c3d8d2c49d
commit 7043e5b2ed
4 changed files with 262 additions and 42 deletions
+58 -42
View File
@@ -26,51 +26,67 @@
</head>
<body>
<div class="om-header">
<img src="https://is3-ssl.mzstatic.com/image/thumb/Purple118/v4/19/8c/c9/198cc9de-ad68-2ff6-82c0-25e7cf0f6c64/source/512x512bb.jpg" width="15%">
<form>
<input type="search" placeholder="Search...">
<!--<div class="bmd-form-group bmd-collapse-inline pull-xs-right">
<button class="btn bmd-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search">
<i class="material-icons">search</i>
</button>
<span id="collapse-search" class="collapse">
<input class="form-control" type="text" id="search" placeholder="Enter your query...">
</span>
</div>-->
</form>
</div>
<div class="om-content">
<div class="om-message">
<h5><i class="material-icons">account_circle</i> <b> User1</b></h5><br>
<h6><b>Betreff</b></h6><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>
<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>
<form class="om-searchbar">
<input type="search" placeholder="Search...">
</form>
</div>
</div>
</div>
<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>
<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">
<i class="material-icons">account_circle</i>
<b> User2</b>
</h5>
<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 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>
<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="om-card card">
<h5 class="om-user-head">
<i class="material-icons">account_circle</i>
<b> User2</b>
</h5>
<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>
<!--
<button type="button" class="btn btn-secondary bmd-btn-fab add-msg-button">
<i class="material-icons">add</i>
</button>
-->
</div>
<div class="om-nav">
<!--<v-tabs fixed-tabs>
<v-tab to="/home"><i class="material-icons">home</i></v-tab>
<v-tab to="/folder"><i class="material-icons">folder</i></v-tab>
<v-tab to="/bookmark"><i class="material-icons">bookmark</i></v-tab>
<v-tab to="/person"><i class="material-icons">person</i></v-tab>
</v-tabs>-->
<div class="row">
<div class="col-sm-12" style="height: 60px">
<router-link to="/home" class="col-sm-3 button" v-on:click.native="menu=false"><i class="material-icons">home</i></router-link>
<router-link to="/folder" class="col-sm-3 button" v-on:click.native="menu=false"><i class="material-icons">folder</i></router-link>
<router-link to="/bookmark" class="col-sm-3 button" v-on:click.native="menu=false"><i class="material-icons">bookmark</i></router-link>
<router-link to="/profil" class="col-sm-3 button" v-on:click.native="menu=false"><i class="material-icons">person</i></router-link>
</div>
<router-view></router-view>
</div>
</div>
<nav class="nav nav-tabs nav-justified om-nav ">
<a class="nav-item nav-link" href="#"><i class="material-icons">home</i></a>
<a class="nav-item nav-link" href="#"><i class="material-icons">folder</i></a>
<a class="nav-item nav-link outlined" href="message.html"><i class="material-icons">add_circle</i></a>
<a class="nav-item nav-link" href="#"><i class="material-icons">bookmark</i></a>
<a class="nav-item nav-link" href="#"><i class="material-icons">person</i></a>
</nav>
<!-- NOTE: JavaScript Libs & Files -->
<!-- CDN_Vue.js developmement lib -->