Hochschulprojekte
/
f1vis
0
0
Fork 0
Code Issues Pull Requests Activity

Introduce a basic card-based layout

This commit is contained in:
Jan Philipp Timme 2017-12-29 22:31:07 +01:00
parent 6a82e9e925
commit ec2e72e2db
2 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/main.css
View File

@ -12,7 +12,7 @@ body {
} }
.chart-box { .chart-box {
border: 1px solid grey; /*border: 1px solid grey;*/
} }
/* This container will allow scaling svg, so we don't need to care about it in d3.js */ /* This container will allow scaling svg, so we don't need to care about it in d3.js */

65
index.html
View File

@ -34,35 +34,52 @@
</div> </div>
</nav> </nav>
<main role="main" class="container"> <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>
</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>
<div class="content-box chart-box"> <!-- Navigation card -->
<div id="lineGraphBox"></div> <div class="card" id="selector-card">
</div> <div class="card-header">Welches Rennen interessiert dich?</div>
<div class="card-body">
<!-- Year 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>
<!-- Course selector -->
<div class="content-box strecken-selector">
<div class="frame">
<ul class="slidee" id="courseSelection"><!-- This will be filled by JS. --></ul>
</div>
<div class="scrollbar">
<div class="handle"></div>
</div>
</div>
</div> <!-- card-body -->
</div> <!-- card -->
<br>
<!-- Diagram card -->
<div class="card" id="diagram-card">
<div class="card-header">Diagramm</div>
<div class="card-body">
<div class="content-box chart-box">
<div id="lineGraphBox"></div>
</div>
</div> <!-- card-body -->
</div> <!-- card -->
</main><!-- /.container --> </main><!-- /.container -->
<!-- Other utility infrastructure -->
<div id="loading-dialog" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;"> <div id="loading-dialog" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">
<div class="modal-dialog modal-m"> <div class="modal-dialog modal-m">
<div class="modal-content"> <div class="modal-content">