a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Toggle category sections

Browse Source
This commit is contained in:
Tom Russell 2018-08-09 16:41:30 +01:00
parent f9cf06e203
commit 1d4822968e
6 changed files with 110 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/building-edit.html
View File

@ -60,8 +60,11 @@
<h2 class="h2">Edit building data</h2>
<form action="building-view.html" method="GET">
<fieldset class="data-section">
<legend class="h3 bullet-prefix location">Location</legend>
<div class="data-list">
<legend
class="h3 bullet-prefix location toggled-on"
data-toggle="collapse"
data-target="#data-list-location">Location</legend>
<div id="data-list-location" class="data-list collapse show">
<label for="">Building name</label>
<input class="form-control" type="text" value="">
<label for="">Building number</label>
@ -77,8 +80,11 @@
</div>
</fieldset>
<fieldset class="data-section">
<legend class="h3 bullet-prefix age">Age</legend>
<div class="data-list">
<legend
class="h3 bullet-prefix age"
data-toggle="collapse"
data-target="#data-list-age">Age</legend>
<div id="data-list-age" class="data-list collapse">
<label for="">Year built (best estimate)</label>
<input class="form-control" type="number" step="1" value="2018">
<label for="">Year built (upper estimate)</label>
@ -92,8 +98,11 @@
</div>
</fieldset>
<fieldset class="data-section">
<legend class="h3 bullet-prefix size">Size</legend>
<div class="data-list">
<legend
class="h3 bullet-prefix size"
data-toggle="collapse"
data-target="#data-list-size">Size</legend>
<div id="data-list-size" class="data-list collapse">
<label for="">Attic storeys</label>
<input class="form-control" type="number" step="1" value="0">
<label for="">Core storeys</label>
@ -103,8 +112,11 @@
</div>
</fieldset>
<fieldset class="data-section">
<legend class="h3 bullet-prefix like">Like Me!</legend>
<div class="data-list">
<legend
class="h3 bullet-prefix like"
data-toggle="collapse"
data-target="#data-list-like">Like Me!</legend>
<div id="data-list-like" class="data-list collapse">
<label for="">Like this building?</label>
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" checked>

24
frontend/building-view.html
View File

@ -59,8 +59,10 @@
<div id="legend" class="info-container">
<h2 class="h2">Building data</h2>
<section class="data-section">
<h3 class="h3 bullet-prefix location">Location</h3>
<dl class="data-list">
<h3 class="h3 bullet-prefix location toggled-on"
data-toggle="collapse"
data-target="#data-list-location">Location</h3>
<dl id="data-list-location" class="data-list collapse show">
<dt>Building Name</dt>
<dd><span class="no-data">no data</span></dd>
<dt>Building Number</dt>
@ -76,8 +78,10 @@
</dl>
</section>
<section class="data-section">
<h3 class="h3 bullet-prefix age">Age</h3>
<dl class="data-list">
<h3 class="h3 bullet-prefix age"
data-toggle="collapse"
data-target="#data-list-age">Age</h3>
<dl id="data-list-age" class="data-list collapse">
<dt>Year built (best estimate)</dt>
<dd>2018</dd>
<dt>Year built (lower estimate)</dt>
@ -91,8 +95,10 @@
</dl>
</section>
<section class="data-section">
<h3 class="h3 bullet-prefix size">Size</h3>
<dl class="data-list">
<h3 class="h3 bullet-prefix size"
data-toggle="collapse"
data-target="#data-list-size">Size</h3>
<dl id="data-list-size" class="data-list collapse">
<dt>Attic storeys</dt>
<dd>0</dd>
<dt>Core storeys</dt>
@ -102,8 +108,10 @@
</dl>
</section>
<section class="data-section">
<h3 class="h3 bullet-prefix like">Like Me!</h3>
<dl class="data-list">
<h3 class="h3 bullet-prefix like"
data-toggle="collapse"
data-target="#data-list-like">Like Me!</h3>
<dl id="data-list-like" class="data-list collapse">
<dt>Likes</dt>
<dd> 25</dd>
</dl>

20
frontend/index.html
View File

@ -65,9 +65,13 @@
<div id="legend" class="info-container offscreen">
<h2 class="h2">Maps</h2>
<div class="data-section">
<h3 class="h3 bullet-prefix age">Age</h3>
<dl class="data-list">
<dt><a href="/maps/date_year" data-map="date_year">Year Built</a></dt>
<h3 class="h3 bullet-prefix age toggled-on"
data-toggle="collapse"
data-target="#data-list-age">Age</h3>
<dl id="data-list-age" class="data-list collapse show">
<dt>
<a href="/maps/date_year"
data-map="date_year">Year Built</a></dt>
<dd>
<ul class="data-legend">
<li>
@ -151,9 +155,13 @@
</dl>
</div>
<div class="data-section">
<h3 class="h3 bullet-prefix size">Size</h3>
<dl class="data-list">
<dt><a href="/maps/size_storeys" data-map="size_storeys">Number of storeys</a></dt>
<h3 class="h3 bullet-prefix size"
data-toggle="collapse"
data-target="#data-list-size">Size</h3>
<dl id="data-list-size" class="data-list collapse">
<dt>
<a href="/maps/size_storeys"
data-map="size_storeys">Number of storeys</a></dt>
<dd>
<ul class="data-legend">
<li>

12
frontend/main.css
View File

@ -442,9 +442,10 @@ small {
}
.bullet-prefix {
position: relative;
padding-left: 1.5rem;
padding: 0rem 0.5rem 0.5rem 1.5rem;
cursor: pointer;
}
.bullet-prefix:before {
.bullet-prefix::before {
display: block;
position: absolute;
left: 0px;
@ -453,12 +454,17 @@ small {
height: 10px;
background-color: #7d7d7d;
content: ' ';
transition: background-color 0.2s;
}
.bullet-prefix:hover::before,
.bullet-prefix.toggled-on::before {
background-color: #222;
}
.data-section .h3 {
margin: 0;
}
.data-list {
margin: 0.5rem 0 1rem;
margin: 0rem 0 1rem;
padding-left: 1.5rem;
}
.data-list a {

38
frontend/main.js
View File

@ -152,6 +152,41 @@ function carousel(){
navigate(0);
}
/**
* Expand/collapse
*
* Create a toggle with:
* - data-toggle="collapse"
* - data-target="<CSS-selector>"
* E.g.
* <button data-toggle="collapse" data-target="#section1">Toggle 1<button>
* <div id="section1">...</div>
*/
function collapse(){
var toggles = document.querySelectorAll('[data-toggle="collapse"]')
if(!toggles.length){
return
}
function toggle_collapse(e){
e.preventDefault()
var toggle = e.target
var targets = document.querySelectorAll(toggle.dataset.target)
for (let index = 0; index < targets.length; index++) {
const target = targets[index];
const now_showing = target.classList.toggle('show')
if (now_showing){
toggle.classList.add('toggled-on')
} else {
toggle.classList.remove('toggled-on')
}
}
}
for (let index = 0; index < toggles.length; index++) {
const toggle = toggles[index];
toggle.addEventListener("click", toggle_collapse)
}
}
/**
* Intro interactions
*/
@ -159,7 +194,7 @@ function intro(){
var welcome = document.querySelector('.welcome-float')
var info = document.querySelector('.info-container')
var links = document.querySelectorAll('a[href="maps.html"]')
if(!welcome || !info || !links){
if(!welcome || !info || !links.length){
return;
}
function from_intro_to_maps(e){
@ -191,4 +226,5 @@ if('querySelector' in document
carousel();
map();
intro();
collapse();
}

20
frontend/maps.html
View File

@ -59,9 +59,13 @@
<div id="legend" class="info-container">
<h2 class="h2">Maps</h2>
<div class="data-section">
<h3 class="h3 bullet-prefix age">Age</h3>
<dl class="data-list">
<dt><a href="/maps/date_year" data-map="date_year">Year Built</a></dt>
<h3 class="h3 bullet-prefix age toggled-on"
data-toggle="collapse"
data-target="#data-list-age">Age</h3>
<dl id="data-list-age" class="data-list collapse show">
<dt>
<a href="/maps/date_year"
data-map="date_year">Year Built</a></dt>
<dd>
<ul class="data-legend">
<li>
@ -145,9 +149,13 @@
</dl>
</div>
<div class="data-section">
<h3 class="h3 bullet-prefix size">Size</h3>
<dl class="data-list">
<dt><a href="/maps/size_storeys" data-map="size_storeys">Number of storeys</a></dt>
<h3 class="h3 bullet-prefix size"
data-toggle="collapse"
data-target="#data-list-size">Size</h3>
<dl id="data-list-size" class="data-list collapse">
<dt>
<a href="/maps/size_storeys"
data-map="size_storeys">Number of storeys</a></dt>
<dd>
<ul class="data-legend">
<li>