Added Collapse Button

This commit is contained in:
sirsandmann 2017-12-29 22:36:53 +01:00
parent 9a439680f5
commit 5121887fc6
2 changed files with 33 additions and 18 deletions

View File

@ -43,7 +43,7 @@ body {
.scrollbar {
width: 100%;
height: 16px;
height: 16px;
margin-top: 4px;
background-color: hsl(0, 0%, 94.1%);
border: 1px solid hsl(0, 0%, 50.0%);
@ -72,3 +72,8 @@ body {
margin-left: auto;
margin-right: auto;
}
#icon-up-arrow{
width: 1%;
height: 1%;
}

View File

@ -34,28 +34,38 @@
</div>
</nav>
<main role="main" class="container">
<div class="content-box">
<form>
<div class="form-group">
<label for="seasonByYearSelector">Wähle ein Jahr aus!</label>
<select class="form-control" id="seasonByYearSelector">
<!-- This is filled using JS. -->
</select>
<div id="selection-box">
<div class="content-box jahres-selector">
<form>
<div class="form-group">
<label for="seasonByYearSelector">Wähle ein Jahr aus!</label>
<select class="form-control" id="seasonByYearSelector">
<!-- This is filled using JS. -->
</select>
</div>
</form>
</div>
<div class="content-box strecken-selector">
<div class="frame">
<ul class="slidee" id="courseSelection">
</ul>
</div>
<div class="scrollbar">
<div class="handle"></div>
</div>
</form>
</div>
<div class="content-box strecken-selector">
<div class="frame">
<ul class="slidee" id="courseSelection">
</ul>
</div>
<div class="scrollbar">
<div class="handle"></div>
</div>
</div>
<button type="button" class="btn btn-info btn-block" data-toggle="collapse" data-target="#selection-box">
<svg id="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 8 8" xml:space="preserve">
<rect x="0.016" y="1.68" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 6.2428 2.2389)" width="5.283" height="1.466"/>
<rect x="3.161" y="1.604" width="1.683" height="6.375"/>
<rect x="2.709" y="1.674" transform="matrix(0.7073 0.7069 -0.7069 0.7073 3.2674 -3.0786)" width="5.284" height="1.465"/>
</svg>
Collapse
</button>
<div class="content-box chart-box">
<div id="lineGraphBox"></div>
</div>