Skip to content

Mapa de afectos de Sevilla
Mapa de afectos de Sevilla
Commit 3d5c23f2 authored by Ale's avatar Ale
Browse files
Options

feat: Minor updates 

- Change zoom settings
- Improve responsive behavior
- Add social menu
- Change labels
parent def70ab5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 38 deletions
patio108/static/map/js/dist/map.js
View file @ 3d5c23f2
This diff is collapsed.
patio108/static/map/js/src/index.js
View file @ 3d5c23f2
......@@ -27,7 +27,7 @@ let categories = {};
// Leaflet map defaults
const MAP_DEFAULTS = {
view : [ [37.3808, -5.9700], 12 ],
view : [ [37.3808, -5.9700], 13.3 ],
providers : {
osm : {
tiles : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
......@@ -157,6 +157,8 @@ const init_map = function(items)
map = L.map('map' , {
scrollWheelZoom : !is_mobile, // disable wheelzoom only in small devices
zoomControl : false,
minZoom: 12,
maxZoom: 16
}).setView(
...MAP_DEFAULTS.view
);
......
patio108/static/site/css/style.css
View file @ 3d5c23f2
......@@ -355,7 +355,7 @@ select:hover {
::-webkit-scrollbar {
height: 1.6rem;
width: 0.5333333333rem;
width: 0.53333rem;
background: white; }
::-webkit-scrollbar-thumb {
......@@ -448,13 +448,14 @@ select:hover {
position: absolute;
font-family: "rubik", sans-serif;
background: white;
padding: 1.6rem;
padding: 0 0 1.6rem;
font-size: 1.6rem;
z-index: 120000;
width: 100%; }
@media screen and (min-width: 768px) {
.legend {
position: fixed;
padding: 1.6rem;
width: 24rem;
top: 1.6rem;
right: 1.6rem; } }
......@@ -553,7 +554,10 @@ select:hover {
color: #df2020; }
.map-wrapper {
padding: 0.8rem 0.8rem 0.8rem 0; }
padding: 0 30px 30px; }
@media screen and (min-width: 768px) {
.map-wrapper {
padding: 0.8rem; } }
#map {
background-color: #eee; }
......@@ -639,7 +643,7 @@ select:hover {
.timeline-item__terms {
font-size: 1.4rem;
margin-top: 0.5333333333rem; }
margin-top: 0.53333rem; }
.timeline-item__date {
font-size: 1.4rem;
......@@ -742,21 +746,44 @@ select:hover {
color: #43AD36;
text-transform: uppercase;
transition: color 0.2s ease;
font-size: 1.6rem; }
font-size: 1.5rem; }
.menu-main__items .menu-main__item {
margin-bottom: 1.6rem; }
@media screen and (min-width: 1200px) {
.menu-main__items {
display: flex; }
.menu-main__items .menu-main__item:not(:last-child) {
margin-right: 1.6rem;
margin-bottom: 0; } }
.menu-main__items {
margin: 0;
padding: 0; }
.menu-main__items .menu-main__item {
margin-bottom: 1.6rem; }
@media screen and (min-width: 1200px) {
.menu-main__items {
display: flex;
justify-content: space-between; }
.menu-main__items .menu-main__item:not(:last-child) {
margin-right: 1.6rem;
margin-bottom: 0; } }
.menu-main__item:hover {
cursor: pointer;
color: #fc160f; }
.site-header {
position: relative; }
.menu-social {
position: absolute;
right: 1.6rem;
top: 15px; }
.menu-social img {
width: 20px;
transition: filter 0.2s ease;
filter: invert(35%) sepia(86%) saturate(3147%) hue-rotate(340deg) brightness(116%) contrast(107%); }
.menu-social img:hover {
filter: invert(49%) sepia(61%) saturate(541%) hue-rotate(66deg) brightness(101%) contrast(90%); }
.menu-social__item {
display: inline; }
.menu-social__item:not(:last-child) {
margin-right: 0.8rem; }
.site-messages {
position: fixed;
width: 400px;
......
patio108/static/site/css/style.css.map
View file @ 3d5c23f2
This diff is collapsed.
patio108/static/site/img/facebook.svg 0 → 100644
View file @ 3d5c23f2
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
\ No newline at end of file
patio108/static/site/img/instagram.svg 0 → 100644
View file @ 3d5c23f2
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
\ No newline at end of file
patio108/static/site/img/twitter.svg 0 → 100644
View file @ 3d5c23f2
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
\ No newline at end of file
patio108/static/site/sass/components/_block-legend.sass
View file @ 3d5c23f2
......@@ -2,12 +2,13 @@
position: absolute
font-family: $font_text
background: white
padding: $m
padding: 0 0 $m
font-size: 1.6rem
z-index: 120000
width: 100%
+breakpoint('sm')
position: fixed
padding: $m
width: $m*15
top: $m
right: $m
......
patio108/static/site/sass/components/_block-map.sass
View file @ 3d5c23f2
// Map block
.map-wrapper
padding: $m/2 $m/2 $m/2 0
padding: 0 30px 30px
+breakpoint('sm')
padding: $m/2
#map
background-color: #eee
......
patio108/static/site/sass/components/_menu-main.sass
View file @ 3d5c23f2
// Main menu
.menu-main
padding: $m/2 $m/2 $m
font-weight: bold
color: $green
text-transform: uppercase
transition: color .2s ease
font-size: 1.6rem
font-size: 1.5rem
.menu-main__items
margin: 0
padding: 0
.menu-main__item
margin-bottom: $m
+breakpoint('lg')
display: flex
justify-content: space-between
.menu-main__item:not(:last-child)
margin-right: $m
margin-bottom: 0
......
patio108/static/site/sass/components/_menu-social.sass 0 → 100644
View file @ 3d5c23f2
// social menu
.site-header
position: relative
.menu-social
position: absolute
right: $m
top: 15px
img
width: 20px
transition: filter .2s ease
filter: invert(35%) sepia(86%) saturate(3147%) hue-rotate(340deg) brightness(116%) contrast(107%)
img:hover
filter: invert(49%) sepia(61%) saturate(541%) hue-rotate(66deg) brightness(101%) contrast(90%)
.menu-social__item
display: inline
&:not(:last-child)
margin-right: $m/2
patio108/templates/components/menu-main.html 0 → 100644
View file @ 3d5c23f2
{# main menu #} {% load textblock_tags %}
{% textblock 'acerca' as about_block %}
<div class="menu-main">
<ul class="menu-main__items">
{% if about_block %}
<li class="menu-main__item" data-show="#{{ about_block.slug }}" data-hide=".modal">
{{ about_block.title }}
</li>
{% endif %}
<li class="menu-main__item" data-show="#categories" data-hide=".modal">
Categorías
</li>
<li class="menu-main__item" data-show="#contacta" data-hide=".modal">
Participa
</li>
</ul>
</div>
patio108/templates/components/menu-social.html 0 → 100644
View file @ 3d5c23f2
{# social #} {% load static %}
<div class="menu-social">
<ul class="menu-social__items">
<li class="menu-social__item">
<a target="_blank" href="https://twitter.com/patio_108">
<img src="{% static 'site/img/twitter.svg' %}" />
</a>
</li>
<li class="menu-social__item">
<a target="_blank" href="https://www.instagram.com/patio_108/">
<img src="{% static 'site/img/instagram.svg' %}" />
</a>
</li>
<li class="menu-social__item">
<a target="_blank" href="https://www.facebook.com/patio108/">
<img src="{% static 'site/img/facebook.svg' %}" />
</a>
</li>
</ul>
</div>
patio108/templates/pages/map.html
View file @ 3d5c23f2
......@@ -16,24 +16,10 @@
<div class="site-header">
<div class="left">
<img class="site-logo" src="{% static 'site/img/logos/logo-patio108.jpg' %}" >
{% include 'components/menu-social.html' %}
</div>
<div class="right">
<div class="menu-main">
<ul class="menu-main__items">
{% textblock 'acerca' as about_block %}
{% if about_block %}
<li class="menu-main__item" data-show="#{{ about_block.slug }}" data-hide=".modal">
{{ about_block.title }}
</li>
{% endif %}
<li class="menu-main__item" data-show="#categories" data-hide=".modal">
Glosario
</li>
<li class="menu-main__item" data-show="#contacta" data-hide=".modal">
Contacta
</li>
</ul>
</div>
{% include 'components/menu-main.html' %}
</div>
</div>
<div class="timeline-wrapper">
......
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