Design Anpassungen für Mockup
This commit is contained in:
Xenia Grünzinger
parent
c3d8d2c49d
commit
7043e5b2ed
@ -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
public/message.html
Normal file
76
public/message.html
Normal 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>
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user