Design Sidebar

← zurück zum Umsetzung Wiki

Verantwortlicher:
Simon Künnen

Beschreibung:
Umsetzung des Optionsmenü, welches von der Seite in den Bildschirm fährt. Weiterhin wird dieses Menü als Sidebar beschrieben. Von hier werden diverse Filter gesetzt und Routen bearbeitet.

Betroffende Dateien:
style.css
elements.css

Eingebundene Bibliotheken:
ion-rangeslider

Einzelne Elemente:
Icons
Popup
weitere Elemente

Darstellung:

---

###CSS style.css

/*** Sidebar - Simon ***/
#sidebar-head-topbar {
height: 65px;
padding-top: 5px;
box-shadow: 0px 1px 15px #000;
}
.is__ios-fullscreen #sidebar-head-topbar {
height: 80px;
padding-top: 20px;
}
#sidebar[class*="i-f__"] {
margin-right: 10px;
}
#sidebar-head-topbar-title {
font-size: 1.6rem;
font-weight: 200;
text-align: left;
display: inline-block;
line-height: 55px;
color: #fff;
}
#sidebar-head-topbar .i__options {
margin: 5px;
float: left;
position: relative;
top: 12px;
margin-right: 15px;
}
.sidebar-head-topbar-box {
padding-left: 20px;
}
#sidebar-theatre {
height: 100%;
margin-top: 0px;
}
#sidebar-theatre h3 {
font-size: 1rem;
font-weight: 200;
line-height: 2;
margin: 0;
padding: 0;
}
.sidebar-theatre-box {
padding-left: 20px;
margin-top: 15px;
padding-right: 20px;
}
.sidebar-theatre-box #location {
margin-top: -15px;
}
.sidebar-theatre-box h3 {
color: #fff;
display: inline;
}
.sidebar-theatre-box h4 {
color: #c7c7c7;
font-size: 1.0rem;
font-weight: 200;
margin: 0;
padding: 0;
}
.sidebar-theatre-box img {
margin-right: 15px;
position: relative;
top: 1px;
}
.sidebar-theatre-box input {
padding: 4px;
background: #d1d1d1;
border: 1px solid #1d1d1d;
width: 100%;
line-height: 1.5;
font-size: 1rem;
}
.seperator {
height: 1px;
min-height: 1px;
background: #292929;
margin-top: 10px;
}
/*** /Sidebar - Simon ***/

HTML Code

<aside id="sidebar">
<div id="sidebar-head-topbar">
<div class="sidebar-head-topbar-box">
<span class="i-f__options"></span>
<h1 id="sidebar-head-topbar-title">Optionen</h1>
</div>
</div>
<div id="sidebar-theatre">
<div class="sidebar-theatre-box">
<h3>Ort / Plz</h3><br/>
<div class="col-11">
<input type="form"/>
</div>
<div class="col-1 align-right">
<a href="#location" class="e__btn i-f__maps" id="location"></a>
</div>
</div>
<div class="sidebar-theatre-box">
<br/>
<h3>Tag</h3><br/>
<div class="col-1"><h4>&lt;</h4></div>
<div class="col-10" style="text-align:center;">
<h4 style="color: #fff">Montag</h4>
</div>
<div class="col-1" style="text-align:right;"><h4>&gt;</h4></div>
</div>
<div class="sidebar-theatre-box">
<br/><br/>
<h3>Radius (km)</h3>
<input id="radius"/>
</div>
<div class="sidebar-theatre-box">
<h3>Uhrzeit (h)</h3>
<input id="time"/>
</div>
<div class="sidebar-theatre-box">
<h3>Verweilzeit (h)</h3>
<input id="resttime"/>
</div>
<div class="seperator"></div>
<div class="sidebar-theatre-box">
<span class="i-f__star"></span><span class="i-f-label">Sharen</span>
</div>
<div class="seperator"></div>
<div class="sidebar-theatre-box">
<span class="i-f__download"></span><span class="i-f-label">Offline speichern</span>
</div>
<div class="seperator"></div>
<div class="sidebar-theatre-box">
<span class="i-f__impressum"></span><span class="i-f-label">Impressum</span>
</div>
<div class="seperator"></div>
</div>
</aside>