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

Design Anpassungen für Mockup

pull/1/head
Xenia Grünzinger 5 years ago
parent
c3d8d2c49d
commit
7043e5b2ed
4 changed files with 262 additions and 42 deletions
Split View Show Diff Stats
  1. 58
    42
      public/index.html
  2. 76
    0
      public/message.html
  3. 58
    0
      public/style.css
  4. 70
    0
      public/style.less

+ 58
- 42
public/index.html 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 -->

+ 76
- 0
public/message.html View File

@@ -0,0 +1,76 @@
<!doctype html>
<html lang="de">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--vue:-->
<script src=lib/vue.js> </script> <script src=lib/vue-router.js> </script> <script src=lib/jquery-3.3.1.min.js> </script> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="message.css">

<!-- Material Design for Bootstrap fonts and icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">

<!-- Material Design for Bootstrap CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">

<title>oma</title>
</head>

<body>
<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 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">Hashtags</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>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('body').bootstrapMaterialDesign();
});
</script>


</body>

</html>

+ 58
- 0
public/style.css View File

@@ -1 +1,59 @@
/* Generated by less 2.5.1 */
.om-header-container {
position: fixed;
top: 0px;
z-index: 1;
width: 100%;
}
.om-header {
justify-content: space-between;
display: flex;
padding-left: 2%;
padding-right: 2%;
height: 8%;
background-color: #0046a0;
}
.om-searchbar {
display: inline-block;
padding-bottom: 0%;
margin: 3%;
}
.om-content {
margin: 10px;
margin-top: 75px;
margin-bottom: 70px;
}
.om-content a {
color: #0046a0;
}
.om-content a:hover {
color: #0046a0;
}
.om-card {
margin: 10px;
margin-bottom: 20px;
padding: 20px;
}
.om-btn {
background-color: #0046a0;
}
.om-user-head {
display: flex;
margin-bottom: 5%;
}
.om-user-head i {
margin-right: 2%;
}
.om-nav {
position: fixed;
bottom: 0;
height: 8%;
width: 100%;
background-color: #0046a0;
}
.om-nav i {
color: white;
}
.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);
}

+ 70
- 0
public/style.less View File

@@ -0,0 +1,70 @@
@color: #0046a0;

//header
.om-header-container{
position: fixed;
top: 0px;
z-index: 1;
width: 100%;
}

.om-header{
justify-content:space-between;
display: flex;
padding-left: 2%;
padding-right: 2%;
height: 8%;
background-color: @color;
}

.om-searchbar{
display: inline-block;
padding-bottom: 0%;
margin: 3%;
}

//content
.om-content{
margin: 10px;
margin-top: 75px;
margin-bottom: 70px;
a{
color: @color;
&:hover{color:@color;}
}
}

.om-card{
margin: 10px;
margin-bottom: 20px;
padding: 20px;
}
.om-btn{
background-color: @color;
}
.om-user-head{
display: flex;
margin-bottom: 5%;
i{
margin-right: 2%;
}
}

//footer
.om-nav{
position:fixed;
bottom: 0;
height: 8%;
width: 100%;
background-color: @color;
i{
color: white;
}
}


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

Write Preview
Loading…
Cancel
Save