diff options
| author | emkael <emkael@tlen.pl> | 2021-01-20 01:28:00 +0100 |
|---|---|---|
| committer | emkael <emkael@tlen.pl> | 2021-01-20 01:28:00 +0100 |
| commit | 60a12b346aba5a8a91eba5de4454be24f060b119 (patch) | |
| tree | 875127107e6b989407a701f394ddbb93588115e7 | |
| parent | ac61d5d0cd4bb1dc6cc59af64495d99895e1db04 (diff) | |
Collapsible filters panel and final style touches
| -rw-r--r-- | result/index.html | 41 | ||||
| -rw-r--r-- | result/krafcik.css | 9 |
2 files changed, 34 insertions, 16 deletions
diff --git a/result/index.html b/result/index.html index cfd2473..a6b057b 100644 --- a/result/index.html +++ b/result/index.html @@ -15,26 +15,35 @@ </head> <body> - <main class="container"> + <main class="container mt-2"> <h1>Polski Krafcik <span class="lead">2012-2020 <small>(R.I.P.)</small></span></h1> - - <form id="filters"> - <div id="date-filter" class="form-group"> - <label>Zakres dat</label> - <input type="text" name="date" data-slider-id="date-slider" /> + <div class="card mb-2"> + <div class="card-header"> + Filtruj + <span class="btn btn-sm btn-outline-dark float-end" data-bs-toggle="collapse" href="#filters" role="button" aria-expanded="true" aria-controls="filters">↨</span> </div> - <div id="brewery-filter" class="form-group"> - <label>Browary</label><br /> - <div class="form-check"> - <input class="form-check-input" id="brewery-all" type="checkbox" checked="checked" /> - <label class="form-check-label" for="brewery-all"> - Wszystkie - </label> - </div> + <div id="filters" class="card-body collapse show"> + <form id="filters-form"> + <div id="date-filter" class="form-group"> + <label>Zakres dat</label> + <div class="slider-box"> + <input type="text" name="date" data-slider-id="date-slider" /> + </div> + </div> + <div id="brewery-filter" class="form-group"> + <label>Browary</label><br /> + <div class="form-check"> + <input class="form-check-input" id="brewery-all" type="checkbox" checked="checked" /> + <label class="form-check-label" for="brewery-all"> + Wszystkie + </label> + </div> + </div> + </form> </div> - </form> + </div> <ul class="nav nav-tabs" id="tab-menu" role="tablist"> <li class="nav-item"> @@ -73,7 +82,7 @@ </div> </div> - <div class="card"> + <div class="card mt-2"> <div class="card-body"> Browary o co najmniej 10.000 ocen. Piwa o co najmniej 15 ocenach, o określonym ABV i dodane w 2020 lub wcześniej.<br /> Liczba ocen przeliczana per miesiąc od czasu dodania; dla piw nieprodukowanych: max. 12 miesięcy.<br /> diff --git a/result/krafcik.css b/result/krafcik.css index b994830..af4f65b 100644 --- a/result/krafcik.css +++ b/result/krafcik.css @@ -7,6 +7,15 @@ html, body { width: 100%; } +#date-filter .slider-box { + width: 90%; + margin: auto; +} + +#date-filter .slider.slider-horizontal { + width: 100%; +} + #date-filter .slider-rangeHighlight.odd { background: #0000CC; } |