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

Sketch in tooltip, section intro, tweak header.

Browse Source
This commit is contained in:
Tom Russell 2018-08-10 09:57:09 +01:00
parent 02dd88936c
commit e3b3355e97
2 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/building-view.html
View File

@ -61,9 +61,27 @@
<section class="data-section">
<h3 class="h3 bullet-prefix location toggled-on"
data-toggle="collapse"
data-target="#data-list-location">Location</h3>
data-target="#data-list-location">
Location
</h3>
<p class="data-intro">
Section introduction of up to roughly 100 characters will take approx&shy;imately this much space.
<a href="#">Read more</a>.
</p>
<dl id="data-list-location" class="data-list collapse show">
<dt>Building Name</dt>
<dt>
Building Name
<span class="tooltip-hook" data-toggle="tooltip">
?
<div class="tooltip bs-tooltip-bottom">
<div class="arrow"></div>
<div class="tooltip-inner">
Hint tooltip content should be ~40 chars.
</div>
</div>
</span>
</dt>
<dd><span class="no-data">no data</span></dd>
<dt>Building Number</dt>
<dd><span class="no-data">no data</span></dd>

40
frontend/main.css
View File

@ -41,10 +41,11 @@ main.beta {
@media (min-width: 768px){
main.beta {
position: absolute;
top: 114px; /* 32px banner + 82px header */
top: 117px; /* 32px banner + 82px header + 3px border */
bottom: 0;
left: 0;
right: 0;
min-height: auto;
}
}
#map {
@ -160,6 +161,7 @@ hr {
.beta-banner {
width: 100%;
min-height: 32px;
font-size: 0.8333rem;
padding: 0.25em 1em;
background: #c57d00;
color: #fff;
@ -197,7 +199,7 @@ hr {
*/
.logo {
display: block;
font-size: 2em;
font-size: 1.8rem;
width: 6em;
padding: 0;
text-transform: uppercase;
@ -460,9 +462,43 @@ small {
.bullet-prefix.toggled-on::before {
background-color: #222;
}
.tooltip-hook {
display: inline-block;
position: relative;
cursor: pointer;
color: #222;
background: #fff;
border: 1px solid #222;
width: 22px;
height: 22px;
border-radius: 11px;
padding: 0 0 0 1px;
font-size: 0.8rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-align: center;
}
.tooltip {
display: none;
opacity: 1;
min-width: 11em;
left: -3px;
top: 25px;
}
.tooltip .arrow {
left: 5px;
}
.tooltip-hook:hover .tooltip,
.tooltip-hook:hover + .tooltip {
display: block;
opacity: 1;
}
.data-section .h3 {
margin: 0;
}
.data-intro {
padding-left: 1.5rem;
font-size: 0.8333rem;
}
.data-list {
margin: 0rem 0 1rem;
padding-left: 1.5rem;