franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Rounded legend tracks

Browse Source
This commit is contained in:
Franzz
2019-10-13 11:22:22 +02:00
parent 5addf8717b
commit df82b27d80
5 changed files with 28 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
masks/project.html
View File

@@ -13,9 +13,9 @@
<div id="elems"> <div id="elems">
<div id="post-button"><i class="fa fa-fw"></i></div> <div id="post-button"><i class="fa fa-fw"></i></div>
<div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"> <div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded">
<div class="line main">Trajet principal</div> <div class="track"><span class="line main"></span><span class="desc">Trajet principal</span></div>
<div class="line off-track">Variante</div> <div class="track"><span class="line off-track"></span><span class="desc">Variante</span></div>
<div class="line hitchhiking">Hors rando</div> <div class="track"><span class="line hitchhiking"></span><span class="desc">Hors rando</span></div>
</div> </div>
</div> </div>
</div> </div>
@@ -99,7 +99,7 @@ function initPage(asHash) {
$('#legend').find('.line').each(function(iKey, oLegend){ $('#legend').find('.line').each(function(iKey, oLegend){
var $Legend = $(oLegend); var $Legend = $(oLegend);
var sTrackType = $Legend.attr('class').replace('line', '').trim(); var sTrackType = $Legend.attr('class').replace('line', '').trim();
self.tmp(['track-type-styles', sTrackType], {weight: parseInt($Legend.css('line-height')), color: $Legend.css('border-top-color'), opacity: 1}); self.tmp(['track-type-styles', sTrackType], {weight: parseInt($Legend.css('height')), color: $Legend.css('background-color'), opacity: 1});
}); });
//Scrollbar //Scrollbar

30
style/_mask_project.scss
View File

@@ -140,27 +140,29 @@ $legend-color: #222;
} }
#legend { #legend {
.track {
.line { .line {
display: block; width: 2em;
border-left: 2em solid; height: 4px;
line-height: 4px; display: inline-block;
padding-left: 0.5em; border-radius: 2px;
margin: 1em 1em 0.5em; vertical-align: middle;
font-size: 1em;
color: $legend-color;
&:first-child {
margin-top: 0.5em;
}
&.main { &.main {
border-color: $track-main-color; background-color: $track-main-color;
} }
&.off-track { &.off-track {
border-color: $track-off-track-color; background-color: $track-off-track-color;
} }
&.hitchhiking { &.hitchhiking {
border-color: $track-hitchhiking-color; background-color: $track-hitchhiking-color;
}
}
.desc {
font-size: 1em;
margin-left: 0.5em;
color: $legend-color;
} }
} }
} }

2
style/scss.bat
View File

@@ -1 +1 @@
sass --unix-newline -l --style=compressed --watch spot.scss:spot.css sass --style=compressed --watch spot.scss:spot.css

3
style/spot.css
View File

File diff suppressed because one or more lines are too long

8
style/spot.css.map
View File

File diff suppressed because one or more lines are too long