Commit 606e7b22 authored by Ale's avatar Ale

fix: Improve responsive styles

parent 8eeba445
......@@ -222,7 +222,8 @@ const init_legend = function(items)
{
// Iterate over elements grabbing its categories
items.forEach( item => {
for(const cat in item.cats){
for(const cat in item.cats)
{
const terms = item.cats[cat];
// If already created push only new terms into the category
if(cat in categories){
......@@ -315,7 +316,14 @@ const init_legend = function(items)
}
check_items();
}
})
});
var legend = document.querySelector('.legend');
document.querySelector('.legend__label').addEventListener('click', function(){
legend.classList.toggle('collapsed');
});
if(is_mobile){
legend.classList.add('collapsed')
}
}
/**
......
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="18"
height="18"
viewBox="0 0 18 18"
class="feather feather-chevron-down"
version="1.1"
id="svg4"
sodipodi:docname="chevron.svg"
style="fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"
inkscape:version="0.92.5 (0.92.5+68)">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1053"
id="namedview6"
showgrid="false"
inkscape:zoom="9.8333333"
inkscape:cx="15.864407"
inkscape:cy="12"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<polyline
points="6 9 12 15 18 9"
id="polyline2"
style="fill:none;fill-opacity:1;stroke:#fd4741;stroke-opacity:1"
transform="translate(-3,-2.9949292)" />
</svg>
......@@ -67,8 +67,8 @@ select
background: white
::-webkit-scrollbar-thumb
background-color: $green
background-color: #ddd
*
scrollbar-color: $green white
scrollbar-color: #ddd white
scrollbar-width: thin
......@@ -25,7 +25,8 @@
padding: 0 $m/2
margin: $m/2 0
background: white
height: $height_header
+breakpoint('sm')
height: $height_header
.site-logo
width: 50%
......
.legend
position: absolute
font-family: $font_text
+breakpoint('sm')
position: fixed
z-index: 120000
width: $m*15
top: $m
right: $m
background: white
padding: $m
font-size: 1.6rem
z-index: 120000
width: 100%
+breakpoint('sm')
position: fixed
width: $m*15
top: $m
right: $m
.legend__label
font-size: 1.6rem
margin-top: 0
margin: 0
text-transform: uppercase
color: $red
&:hover
cursor: pointer
&:after
content: url('/static/site/img/icons/chevron.svg')
float: right
margin-top: -3px
transition: transform .2s ease
transform: scaleY(-1)
.collapsed
.legend__label:after
transform: scaleY(1)
margin-top: 3px
.legend-category__items
display: none
.legend-category__items
margin-top: $m
.legend-category__items li:hover
cursor: pointer
......@@ -29,13 +47,11 @@
.legend-category__unfilter
margin-top: $m
font-size: 1.4rem
text-transform: uppercase
color: #555
text-align: center
text-align: right
&:before
content: "🞨"
margin-right: $m/4
margin-right: $m/2
.legend-category__item:before
content: "\25CF"
......@@ -43,7 +59,7 @@
line-height: 1em
position: relative
top: -1px
margin-right: $m/2
margin-right: $m/4
.legend-category__item[data-id="cultura"]:before
color: #20dfdf
......
// timeline items
.timeline-wrapper
max-height: calc(100vh - #{ $height_header } - #{ $m*2 })
border-top: 4px dashed $red
overflow-y: auto
+breakpoint('sm')
max-height: calc(100vh - #{ $height_header } - #{ $m*2 })
overflow-y: auto
padding: $m
.timeline-item
background: white
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment