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

View/edit design

Browse Source
This commit is contained in:
Tom Russell 2018-08-09 12:37:53 +01:00
parent 84e8d3ce55
commit ebcc96559e
4 changed files with 267 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
frontend/building-edit.html
View File

@ -21,30 +21,30 @@
<header class="main-header">
<nav class="navbar navbar-light navbar-expand">
<a href="index.html" class="logo navbar-brand" id="top">
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<h1 class="logotype">
<span>Colouring</span>
<span>London</span>
</h1>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<h1 class="logotype">
<span>Colouring</span>
<span>London</span>
</h1>
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="maps.html" class="nav-link">View Maps</a></li>
@ -57,31 +57,71 @@
<main class="beta">
<div id="map"></div>
<div id="legend">
<h2 class="h2">Edit Building</h2>
<h2 class="h2">Edit building data</h2>
<form action="building-view.html" method="GET">
<h3 class="h3">Age</h3>
<label for="">Year built</label>
<input type="text" value="2018">
<label for="">Source</label>
<input type="text">
<label for="">Facade date</label>
<input type="text" value="2018">
<h3 class="h3">Size</h3>
<label for="">Number of storeys</label>
<input type="text" value="3">
<h3 class="h3">Like Me!</h3>
<label for="">Like this building?</label>
<input type="checkbox" checked>
<input type="submit" value="Save" class="btn">
<fieldset class="data-section">
<legend class="h3 bullet-prefix location">Location</legend>
<div class="data-list">
<label for="">Building name</label>
<input class="form-control" type="text" value="">
<label for="">Building number</label>
<input class="form-control" type="text" value="">
<label for="">Street</label>
<input class="form-control" type="text" value="">
<label for="">Address line 2</label>
<input class="form-control" type="text" value="">
<label for="">Town</label>
<input class="form-control" type="text" value="">
<label for="">Postcode</label>
<input class="form-control" type="text" value="">
</div>
</fieldset>
<fieldset class="data-section">
<legend class="h3 bullet-prefix age">Age</legend>
<div class="data-list">
<label for="">Year built (best estimate)</label>
<input class="form-control" type="number" step="1" value="2018">
<label for="">Year built (upper estimate)</label>
<input class="form-control" type="number" step="1" value="2018">
<label for="">Year built (lower estimate)</label>
<input class="form-control" type="number" step="1" value="2018">
<label for="">Facade date</label>
<input class="form-control" type="number" step="1" value="">
<label for="">Source</label>
<input class="form-control" type="text">
</div>
</fieldset>
<fieldset class="data-section">
<legend class="h3 bullet-prefix size">Size</legend>
<div class="data-list">
<label for="">Attic storeys</label>
<input class="form-control" type="number" step="1" value="0">
<label for="">Core storeys</label>
<input class="form-control" type="number" step="1" value="3">
<label for="">Basement storeys</label>
<input class="form-control" type="number" step="1" value="1">
</div>
</fieldset>
<fieldset class="data-section">
<legend class="h3 bullet-prefix like">Like Me!</legend>
<div class="data-list">
<label for="">Like this building?</label>
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" checked>
</div>
</div>
</fieldset>
<div class="buttons-container">
<a href="/building-view.html" class="btn btn-secondary">Cancel</a>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js" integrity="sha256-ROS+XfN+WVpU3giGt7Fwy92u3h4at1gN7Z5xQ2Ke1lw=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</main>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js" integrity="sha256-ROS+XfN+WVpU3giGt7Fwy92u3h4at1gN7Z5xQ2Ke1lw=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>

127
frontend/building-view.html
View File

@ -21,30 +21,30 @@
<header class="main-header">
<nav class="navbar navbar-light navbar-expand">
<a href="index.html" class="logo navbar-brand" id="top">
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<h1 class="logotype">
<span>Colouring</span>
<span>London</span>
</h1>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<h1 class="logotype">
<span>Colouring</span>
<span>London</span>
</h1>
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="maps.html" class="nav-link">View Maps</a></li>
@ -57,26 +57,67 @@
<main class="beta">
<div id="map"></div>
<div id="legend">
<h2 class="h2">View Building</h2>
<h3 class="h3">Age</h3>
<p>Year built: 2018</p>
<p>Source:</p>
<p>Facade date: 2018</p>
<h3 class="h3">Size</h3>
<p>Number of storeys: 3</p>
<h3 class="h3">Like Me!</h3>
<p>Likes: 25</p>
<a href="building-edit.html" class="btn">Edit</a>
<a href="maps.html">&lt; Back to maps</a>
<h2 class="h2">Building data</h2>
<section class="data-section">
<h3 class="h3 bullet-prefix location">Location</h3>
<dl class="data-list">
<dt>Building Name</dt>
<dd><span class="no-data">no data</span></dd>
<dt>Building Number</dt>
<dd><span class="no-data">no data</span></dd>
<dt>Street</dt>
<dd><span class="no-data">no data</span></dd>
<dt>Address line 2</dt>
<dd><span class="no-data">no data</span></dd>
<dt>Town</dt>
<dd><span class="no-data">no data</span></dd>
<dt>Postcode</dt>
<dd><span class="no-data">no data</span></dd>
</dl>
</section>
<section class="data-section">
<h3 class="h3 bullet-prefix age">Age</h3>
<dl class="data-list">
<dt>Year built (best estimate)</dt>
<dd>2018</dd>
<dt>Year built (lower estimate)</dt>
<dd>2018</dd>
<dt>Year built (upper estimate)</dt>
<dd>2018</dd>
<dt>Date Source</dt>
<dd>Pevsner</dd>
<dt>Facade date</dt>
<dd>2018</dd>
</dl>
</section>
<section class="data-section">
<h3 class="h3 bullet-prefix size">Size</h3>
<dl class="data-list">
<dt>Attic storeys</dt>
<dd>0</dd>
<dt>Core storeys</dt>
<dd>3</dd>
<dt>Basement storeys</dt>
<dd>1</dd>
</dl>
</section>
<section class="data-section">
<h3 class="h3 bullet-prefix like">Like Me!</h3>
<dl class="data-list">
<dt>Likes</dt>
<dd> 25</dd>
</dl>
</section>
<div class="buttons-container">
<a href="maps.html" class="btn btn-secondary">Back to maps</a>
<a href="building-edit.html" class="btn btn-primary">Edit data</a>
</div>
</div>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js" integrity="sha256-ROS+XfN+WVpU3giGt7Fwy92u3h4at1gN7Z5xQ2Ke1lw=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</main>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js" integrity="sha256-ROS+XfN+WVpU3giGt7Fwy92u3h4at1gN7Z5xQ2Ke1lw=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>

127
frontend/main.css
View File

@ -10,7 +10,6 @@
}
html,
body {
font-family: 'glacial_cl', sans-serif;
background: #fff;
color: #222;
min-width: 40em; /* jumbotron */
@ -18,7 +17,6 @@ body {
.h2 {
font-family: 'glacial_cl', sans-serif;
font-weight: normal;
padding: 0.1em 0 0.2em;
margin: 0;
}
.h3, .h4, .h5 {
@ -55,7 +53,7 @@ main.beta {
left: 0;
width: 20em;
bottom: 0;
padding: 1em;
padding: 0.25em 0.75em;
background: #fff;
z-index: 1000;
overflow-y: auto;
@ -70,40 +68,10 @@ main.beta {
background-color: rgba(255,255,255,0.8);
}
/**
* Legend
*/
.maps-list {
list-style: none;
padding-left: 17px;
}
.maps-list li {
position: relative;
}
.maps-list li:before {
display: block;
position: absolute;
left: -15px;
top: 7px;
width: 10px;
height: 10px;
background-color: #000;
content: ' ';
}
.maps-list li:nth-child(1)::before {
background-color: #ffad00;
}
.maps-list li:nth-child(2)::before {
background-color: #72b2fe;
}
.maps-list li:nth-child(3)::before {
background-color: #e96762;
}
/**
* Text pages
*/
section {
.main-col section {
overflow: hidden;
margin: 2.25em 0 4em;
padding: 2em 0 4em;
@ -174,8 +142,9 @@ hr {
text-decoration: none;
}
.logo .logotype {
font-family: 'glacial_cl', sans-serif;
font-size: 1em;
margin: 0 0 -3px 0;;
margin: 0 0 0 0;;
display: inline-block;
vertical-align: bottom;
}
@ -375,7 +344,7 @@ p a.btn:active {
input {
font-family: 'glacial_cl', sans-serif;
}
h1, h2, h3, h4 {
font-weight: normal;
@ -405,41 +374,77 @@ small {
}
/**
* Form
* View/edit, maps legend
*/
.maps-list {
list-style: none;
padding-left: 17px;
}
.bullet-prefix {
position: relative;
padding-left: 1.5rem;
}
.bullet-prefix:before {
display: block;
position: absolute;
left: 0px;
top: 6px;
width: 10px;
height: 10px;
background-color: #7d7d7d;
content: ' ';
}
.data-section {
}
.data-section .h3 {
margin: 0;
}
.data-list {
margin: 0.5rem 0 1rem;
padding-left: 1.5rem;
}
.data-list dt,
.data-section label {
margin: 0;
font-size: 0.8333rem;
font-weight: normal;
text-transform: uppercase;
color: #555;
}
.data-list dd,
.data-list input {
margin: 0 0 0.5rem;
line-height: 1.5;
}
.data-list .no-data {
color: #999;
}
/**
* Forms
*/
input[type="text"],
input[type="number"],
input[type="email"] {
display: block;
width: 100%;
border: 1px solid #222;
padding: 0.5em 0.25em;
margin: 0 0 0.5em;
border-color: #999;
padding: 0.25rem 0.5rem;
border-radius: 0;
}
input[type="number"] {
padding-right: 0.25rem;
}
.form-check {
padding-left: 0;
}
label {
margin: 0.5em 0 0;
}
.buttons-container {
margin-bottom: 0.75rem;
}
form .btn {
margin-top: 1em;
}
.btn {
background: #cecfd3;
border: 0;
border-radius: 1em;
margin: 0.5em 0;
padding: 0.5em 1em;
width: 100%;
font-size: 1em;
text-align: center;
display: inline-block;
color: #000;
text-decoration: none;
cursor: pointer;
}
.btn:hover,
.btn:focus,
.btn:active {
background-color: #bcbec0;
}
.btn.btn-half {
width: 49%;
margin-left: 0;

62
frontend/maps.html
View File

@ -21,30 +21,30 @@
<header class="main-header">
<nav class="navbar navbar-light navbar-expand">
<a href="index.html" class="logo navbar-brand" id="top">
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<h1 class="logotype">
<span>Colouring</span>
<span>London</span>
</h1>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<h1 class="logotype">
<span>Colouring</span>
<span>London</span>
</h1>
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="maps.html" class="nav-link">View Maps</a></li>
@ -57,15 +57,15 @@
<main class="beta">
<div id="map"></div>
<div id="legend">
<h2>View Maps</h2>
<ul class="maps-list">
<li data-map="date_year">Year Built</li>
<li data-map="size_storeys">Number of storeys</li>
</ul>
<h3>Building</h3>
<pre id="building-detail">
<h2>View Maps</h2>
<ul class="maps-list">
<li class="bullet-prefix age" data-map="date_year">Year Built</li>
<li class="bullet-prefix size" data-map="size_storeys">Number of storeys</li>
</ul>
<h3>Building</h3>
<pre id="building-detail">
Click a building to see data.
</pre>
</pre>
</div>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="