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> <h2 class="h2">Edit building data</h2>
<form action="building-view.html" method="GET"> <form action="building-view.html" method="GET">
<fieldset class="data-section"> <fieldset class="data-section">
<legend class="h3 bullet-prefix location">Location</legend> <legend
<div class="data-list"> 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> <label for="">Building name</label>
<input class="form-control" type="text" value=""> <input class="form-control" type="text" value="">
<label for="">Building number</label> <label for="">Building number</label>
@ -77,8 +80,11 @@
</div> </div>
</fieldset> </fieldset>
<fieldset class="data-section"> <fieldset class="data-section">
<legend class="h3 bullet-prefix age">Age</legend> <legend
<div class="data-list"> 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> <label for="">Year built (best estimate)</label>
<input class="form-control" type="number" step="1" value="2018"> <input class="form-control" type="number" step="1" value="2018">
<label for="">Year built (upper estimate)</label> <label for="">Year built (upper estimate)</label>
@ -92,8 +98,11 @@
</div> </div>
</fieldset> </fieldset>
<fieldset class="data-section"> <fieldset class="data-section">
<legend class="h3 bullet-prefix size">Size</legend> <legend
<div class="data-list"> 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> <label for="">Attic storeys</label>
<input class="form-control" type="number" step="1" value="0"> <input class="form-control" type="number" step="1" value="0">
<label for="">Core storeys</label> <label for="">Core storeys</label>
@ -103,8 +112,11 @@
</div> </div>
</fieldset> </fieldset>
<fieldset class="data-section"> <fieldset class="data-section">
<legend class="h3 bullet-prefix like">Like Me!</legend> <legend
<div class="data-list"> 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> <label for="">Like this building?</label>
<div class="form-check"> <div class="form-check">
<input class="form-check-input position-static" type="checkbox" checked> <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"> <div id="legend" class="info-container">
<h2 class="h2">Building data</h2> <h2 class="h2">Building data</h2>
<section class="data-section"> <section class="data-section">
<h3 class="h3 bullet-prefix location">Location</h3> <h3 class="h3 bullet-prefix location toggled-on"
<dl class="data-list"> data-toggle="collapse"
data-target="#data-list-location">Location</h3>
<dl id="data-list-location" class="data-list collapse show">
<dt>Building Name</dt> <dt>Building Name</dt>
<dd><span class="no-data">no data</span></dd> <dd><span class="no-data">no data</span></dd>
<dt>Building Number</dt> <dt>Building Number</dt>
@ -76,8 +78,10 @@
</dl> </dl>
</section> </section>
<section class="data-section"> <section class="data-section">
<h3 class="h3 bullet-prefix age">Age</h3> <h3 class="h3 bullet-prefix age"
<dl class="data-list"> 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> <dt>Year built (best estimate)</dt>
<dd>2018</dd> <dd>2018</dd>
<dt>Year built (lower estimate)</dt> <dt>Year built (lower estimate)</dt>
@ -91,8 +95,10 @@
</dl> </dl>
</section> </section>
<section class="data-section"> <section class="data-section">
<h3 class="h3 bullet-prefix size">Size</h3> <h3 class="h3 bullet-prefix size"
<dl class="data-list"> data-toggle="collapse"
data-target="#data-list-size">Size</h3>
<dl id="data-list-size" class="data-list collapse">
<dt>Attic storeys</dt> <dt>Attic storeys</dt>
<dd>0</dd> <dd>0</dd>
<dt>Core storeys</dt> <dt>Core storeys</dt>
@ -102,8 +108,10 @@
</dl> </dl>
</section> </section>
<section class="data-section"> <section class="data-section">
<h3 class="h3 bullet-prefix like">Like Me!</h3> <h3 class="h3 bullet-prefix like"
<dl class="data-list"> data-toggle="collapse"
data-target="#data-list-like">Like Me!</h3>
<dl id="data-list-like" class="data-list collapse">
<dt>Likes</dt> <dt>Likes</dt>
<dd> 25</dd> <dd> 25</dd>
</dl> </dl>

20
frontend/index.html
View File

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

12
frontend/main.css
View File

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

38
frontend/main.js
View File

@ -152,6 +152,41 @@ function carousel(){
navigate(0); 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 * Intro interactions
*/ */
@ -159,7 +194,7 @@ function intro(){
var welcome = document.querySelector('.welcome-float') var welcome = document.querySelector('.welcome-float')
var info = document.querySelector('.info-container') var info = document.querySelector('.info-container')
var links = document.querySelectorAll('a[href="maps.html"]') var links = document.querySelectorAll('a[href="maps.html"]')
if(!welcome || !info || !links){ if(!welcome || !info || !links.length){
return; return;
} }
function from_intro_to_maps(e){ function from_intro_to_maps(e){
@ -191,4 +226,5 @@ if('querySelector' in document
carousel(); carousel();
map(); map();
intro(); intro();
collapse();
} }

20
frontend/maps.html
View File

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