Commit acfd0460 authored by Ale's avatar Ale

feat: Review #271020

- Add fragment links to testimonies and share buttons
- Add email and fairy category to testimonies
- Update click behavior on map and timeline items
parent 55646525
......@@ -23,6 +23,7 @@ class TestimonySerializer(serializers.ModelSerializer):
'creation_date',
'name',
'position',
'fairy',
'category',
'other_categories',
'video'
......
......@@ -27,7 +27,7 @@ class TestimonyAdmin(LeafletGeoAdmin):
model = models.Testimony
ordering = ('creation_date',)
list_display = ('name', 'summary', 'owner', 'creation_date', 'update_date')
fields = ( ('name', 'published'), 'category', 'other_categories', 'address', 'position', 'video')
fields = ( ('name', 'published', 'fairy'), 'email', 'category', 'other_categories', 'address', 'position', 'video')
admin.site.register(models.Testimony, TestimonyAdmin)
......
......@@ -14,9 +14,11 @@ class TestimonyForm(forms.ModelForm):
'category',
'other_categories',
'address',
'video'
'video',
'email'
]
def __init__(self, *args, **kwargs):
super(TestimonyForm,self).__init__(*args, **kwargs)
self.fields['category'].empty_label = 'Elige una categoría'
self.fields['email'].required = True
......@@ -36,37 +36,6 @@ class TestimonyCategory(Category):
null = True,
blank = True,
)
# image_small = ImageSpecField(
# source='image',
# processors=[
# ResizeToFill(400, 400)
# ],
# format='JPEG',
# options={
# 'quality': 90
# }
# )
# image_medium = ImageSpecField(
# source='image',
# processors=[
# ResizeToFill(400, 400)
# ],
# format='JPEG',
# options={
# 'quality': 90
# }
# )
# image_small = ImageSpecField(
# source='image',
# processors=[
# ResizeToFill(400, 400)
# ],
# format='JPEG',
# options={
# 'quality': 90
# }
# )
class Testimony(Publishable):
......@@ -137,6 +106,20 @@ class Testimony(Publishable):
blank=False,
null=True
)
email = models.EmailField(
_('Correo electrónico'),
help_text = _(
'Danos un correo electrónico para contactar contigo '
'en caso necesario'
),
blank=True,
null=True
)
fairy = models.BooleanField(
_('¿Es un vídeo de madrina?'),
blank=True,
default=False
)
class Meta:
verbose_name = _('testimonio')
......
......@@ -42,6 +42,7 @@ CONTRIB_APPS = [
'imagekit',
'adminsortable',
'rest_framework',
'django.contrib.humanize'
]
PROJECT_APPS = [
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -24,6 +24,7 @@ let items_lookup = [];
let item_selected = false;
let categories = {};
const videos = document.querySelectorAll('video');
// Leaflet map defaults
const MAP_DEFAULTS = {
......@@ -134,6 +135,9 @@ const show_all_timeline_items = function()
marker.classList.remove('inactive');
});
item_selected = false;
videos.forEach( function(video){
video.pause();
});
}
/**
......@@ -177,13 +181,21 @@ const init_map = function(items)
if(items){
const markers = items.map(i => {
let classes = `item-${i.pk}`;
let marker_img = `static/site/img/markers/marker-${i.main_term}.svg`;
if(i.fairy) classes += ' fairy';
i.terms.forEach( term => { classes += ` ${ slugify(term).toLowerCase() }` });
return L.marker( i.latlon, {
icon : L.icon({
iconUrl : `/static/site/img/markers/marker-${i.main_term}.svg`,
shadowUrl : `/static/site/img/markers/marker-shadow.svg`,
// icon : L.icon({
// iconUrl : `/static/site/img/markers/marker-${i.main_term}.svg`,
// shadowUrl : `/static/site/img/markers/marker-shadow.svg`,
// iconSize : [ 40, 48 ],
// shadowAnchor : [ 20, 0 ],
// className : classes,
// })
icon : L.divIcon({
iconSize : [ 40, 48 ],
shadowAnchor : [ 20, 0 ],
html : `<img src='${marker_img}' />`,
className : classes,
})
}).bindPopup(
......@@ -201,30 +213,16 @@ const init_map = function(items)
}
/**
* Sets up timeline
* Update timeline
* @param {Array} items - Array with data to set items in the timeline
*/
const init_timeline = function(items)
const update_timeline = function(items)
{
if(!items) return;
const timeline = document.querySelector('.timeline');
items.forEach( i => {
var item = document.createElement('div');
item.classList.add( `item-${i.pk}`);
item.classList.add('timeline-item');
var video_holder = document.createElement('div');
video_holder.classList.add('timeline-item__video');
var video = document.createElement('video');
video.setAttribute('controls', true);
video.setAttribute('src', i.video);
video_holder.appendChild(video);
item.innerHTML += `<p class="timeline-item__date">${ dayjs(i.date).fromNow() }</p>`;
item.appendChild(video_holder);
item.innerHTML += `<h3 class="timeline-item__name">${ i.name }</h3>`;
item.innerHTML += `<p class="timeline-item__terms">${ i.cats['category'].join(", ") }</p>`;
item.addEventListener('click', ()=>{ select_item(i.pk); });
timeline.appendChild( item );
} );
const item = document.querySelector(`.timeline-item.item-${ i.pk }`);
item.querySelector('.timeline-item__date').innerHTML = dayjs(i.date).fromNow();
});
}
/**
......@@ -377,6 +375,7 @@ const create_items = function(items)
return items.map(i =>{
var terms = [ i.category.name ];
terms.push( ...i.other_categories.map( j=> j.name ) );
if(i.fairy) terms.push('​Madrinas'); // Content prefixed with u+200b (no-width space) for it to be the last
return {
pk : i.pk,
name : i.name,
......@@ -407,6 +406,12 @@ const load_data = function(endpoint)
items_lookup = items;
init_map( items );
init_legend( items );
update_timeline( items );
if(window.location.hash) {
const hash = window.location.hash.substring(1);
console.log(hash);
select_item(hash);
}
});
} else {
const items_size = 20;
......@@ -439,13 +444,20 @@ const load_data = function(endpoint)
window.onload = ()=>{
load_data('/api/1.0/testimonies/');
var videos = document.querySelectorAll('video');
videos.forEach( function(video){
var pk = video.parentNode.parentNode.dataset.pk;
video.addEventListener('play', function(e){
select_item(pk);
videos.forEach(function(i){
if(i != e.target) i.pause();
if(i != e.target) {
i.pause();
}
});
});
});
document.querySelectorAll('.timeline-item__back').forEach( function(i){
i.addEventListener('click', function(e){
show_all_timeline_items();
})
});
};
......@@ -512,11 +512,17 @@ select:hover {
.legend-category__item:before {
content: "●";
font-size: 2rem;
text-align: center;
width: 2rem;
display: inline-block;
line-height: 1em;
position: relative;
top: -1px;
margin-right: 0.4rem; }
.legend-category__item[data-id="madrinas"]::before {
content: url("/static/site/img/icons/star-small.svg"); }
.legend-category__item[data-id="cultura"]:before {
color: #20dfdf; }
......@@ -592,7 +598,7 @@ select:hover {
#map .leaflet-marker-icon {
transition: opacity 0.5s ease; }
#map .leaflet-marker-icon.inactive {
opacity: 0.25;
opacity: 0.15;
pointer-events: none !important; }
#map .leaflet-marker-icon.hidden {
display: none !important; }
......@@ -600,17 +606,43 @@ select:hover {
#map .leaflet-marker-shadow.hidden {
display: none !important; }
.leaflet-marker-icon.madrinas {
display: block; }
.leaflet-marker-icon.madrinas::after {
position: absolute;
filter: invert(1);
content: url("/static/site/img/icons/star.svg");
transform: scale(0.75);
left: 9px;
top: 5px;
width: 20px;
height: 20px;
z-index: 52000; }
@media screen and (min-width: 768px) {
.leaflet-popup {
display: none; } }
.share img {
max-width: 20px; }
.share__label {
opacity: 0.75;
cursor: pointer; }
.share__items {
display: none;
margin-left: 1.6rem; }
.share__items.visible {
display: inline-block; }
.timeline-wrapper {
padding: 1.6rem; }
.timeline-item {
background: white;
margin-bottom: 3.2rem;
padding-bottom: 3.2rem; }
.timeline-item:not(:last-child):not(.selected) {
border-bottom: 2px solid #43AD36; }
.timeline-item:hover {
cursor: pointer; }
padding: 1.6rem 0;
border-top: 2px solid #ddd; }
.timeline-item > a {
display: block; }
......@@ -650,18 +682,31 @@ select:hover {
text-transform: capitalize;
opacity: 0.75; }
.timeline-item.selected::after {
content: "Pulsa en cualquier lugar del mapa para deseleccionar este elemento";
font-size: 1.6rem;
position: relative;
top: 3.2rem; }
video {
filter: blur(20px);
transition: filter 1s ease; }
video[data-ll-status="loaded"] {
filter: none; }
.timeline-item:not(.selected) .timeline-item__back {
display: none; }
.timeline-item__back {
border: none;
margin-top: 1.6rem;
font-size: 1.4rem;
padding: 0 0.8rem;
line-height: 2.8rem;
transition: background-color 0.2s ease;
border-radius: 2px; }
.timeline-item__back:hover {
cursor: pointer; }
.timeline-item__meta {
display: flex;
align-items: center;
justify-content: space-between; }
.form__field {
margin-bottom: 3.2rem; }
......@@ -687,7 +732,7 @@ video {
appearance: none;
padding: 0.8rem; }
.form input[type=text], select {
.form input[type=text], .form input[type=email], select {
background-color: #f5f5f5; }
.form__submit {
......
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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="127.00006mm"
height="95.250061mm"
viewBox="0 0 127.00006 95.250061"
version="1.1"
id="svg8"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="blank-image.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="208.51804"
inkscape:cy="145.46417"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1052"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<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>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.50006253;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
id="rect815"
width="126.5"
height="94.75"
x="0.25003126"
y="0.25003126" />
<path
style="fill:none;stroke:#000000;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2.11666654, 1.05833327;stroke-dashoffset:0;stroke-opacity:1"
d="M 0.25003126,0.25003126 126.75003,95.000028"
id="path817"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2.11666654, 1.05833327;stroke-dashoffset:0;stroke-opacity:1"
d="M 126.75003,0.25003126 0.25003126,95.000028"
id="path819"
inkscape:connector-curvature="0" />
</g>
</svg>
<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-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
\ No newline at end of file
<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-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
\ No newline at end of file
<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-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
\ No newline at end of file
<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-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
\ No newline at end of file
<?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="11.995498"
height="11.462027"
viewBox="0 0 11.995498 11.462027"
class="feather feather-star"
version="1.1"
id="svg4"
sodipodi:docname="star-small.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
style="fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round">
<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="1366"
inkscape:window-height="744"
id="namedview6"
showgrid="false"
inkscape:zoom="9.8333333"
inkscape:cx="-15.358184"
inkscape:cy="5.0382281"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg4"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 6.0041384,3.8034208e-5 C 5.7944414,-0.00243197 5.6019094,0.11557513 5.5089344,0.30354993 L 3.9509068,3.4600736 0.46637721,3.9701866 c -0.446454,0.065811 -0.6243162,0.614481 -0.301382,0.929705 L 2.6857413,7.3556756 2.0904321,10.824231 c -0.075575,0.445121 0.391583,0.784016 0.7912608,0.574011 l 3.1160555,-1.6379004 3.116056,1.6379004 c 0.399678,0.210005 0.866836,-0.12889 0.791261,-0.574011 l -0.59531,-3.4685554 2.5207466,-2.455784 c 0.322934,-0.315224 0.145072,-0.863894 -0.301383,-0.929705 L 8.0445904,3.4600736 6.4865624,0.30354993 C 6.3956294,0.11970453 6.2092284,0.00243223 6.0041384,3.8034208e-5 Z"
id="polygon2"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccc" />
</svg>
<?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="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-star"
version="1.1"
id="svg4"
sodipodi:docname="star.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
<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="1056"
id="namedview6"
showgrid="false"
inkscape:zoom="9.8333333"
inkscape:cx="12.20339"
inkscape:cy="12"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 12.011719,1 c -0.384584,-0.004524 -0.737688,0.211895 -0.908203,0.5566406 L 8.2460938,7.3457031 1.8554688,8.28125 C 1.0366725,8.4019477 0.71047337,9.4082085 1.3027344,9.9863281 l 4.6230468,4.5039059 -1.0917968,6.361328 c -0.1386052,0.816352 0.718163,1.437884 1.4511718,1.052735 L 12,18.900391 l 5.714844,3.003906 c 0.733009,0.385149 1.589777,-0.236383 1.451172,-1.052735 L 18.074219,14.490234 22.697266,9.9863281 C 23.289527,9.4082083 22.963328,8.4019473 22.144531,8.28125 L 15.753906,7.3457031 12.896484,1.5566406 C 12.729714,1.2194683 12.387855,1.0043911 12.011719,1 Z"
id="polygon2"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccc" />
</svg>
......@@ -65,11 +65,15 @@
.legend-category__item:before
content: "\25CF"
font-size: 2rem
text-align: center
width: 2rem
display: inline-block
line-height: 1em
position: relative
top: -1px
margin-right: $m/4
.legend-category__item[data-id="madrinas"]::before
content: url('/static/site/img/icons/star-small.svg')
.legend-category__item[data-id="cultura"]:before
color: #20dfdf
.legend-category__item[data-id="espacio-publico"]:before
......
......@@ -29,10 +29,27 @@
#map .leaflet-marker-icon
transition: opacity .5s ease
&.inactive
opacity: .25
opacity: .15
pointer-events: none !important
&.hidden
display: none !important
#map .leaflet-marker-shadow.hidden
display: none !important
.leaflet-marker-icon.madrinas
display: block
&::after
position: absolute
filter: invert(1)
content: url('/static/site/img/icons/star.svg')
transform: scale(.75)
left: 9px
top: 5px
width: 20px
height: 20px
z-index: 52000
+breakpoint('sm')
.leaflet-popup
display: none
// Share
.share img
max-width: 20px
.share__label
opacity: .75
cursor: pointer
.share__items
display: none
margin-left: $m
.share__items.visible
display: inline-block
......@@ -4,12 +4,8 @@
padding: $m
.timeline-item
background: white
margin-bottom: $m*2
padding-bottom: $m*2
&:not(:last-child):not(.selected)
border-bottom: 2px solid $green
&:hover
cursor: pointer
padding: $m 0
border-top: 2px solid #ddd
.timeline-item > a
display: block
.timeline-item__name
......@@ -34,14 +30,27 @@
text-transform: capitalize
opacity: .75
.timeline-item.selected::after
content: "Pulsa en cualquier lugar del mapa para deseleccionar este elemento"
font-size: 1.6rem
position: relative
top: $m*2
video
filter: blur(20px)
transition: filter 1s ease
&[data-ll-status="loaded"]
filter: none
.timeline-item:not(.selected) .timeline-item__back
display: none
.timeline-item__back
border: none
margin-top: $m
font-size: 1.4rem
padding: 0 $m/2
line-height: 2.8rem
transition: background-color .2s ease
border-radius: 2px
&:hover
cursor: pointer
.timeline-item__meta
display: flex
align-items: center
justify-content: space-between
......@@ -19,7 +19,7 @@
background: 0
appearance: none
padding: $m/2
.form input[type=text], select
.form input[type=text], .form input[type=email], select
background-color: #f5f5f5
.form__submit
color: white
......
......@@ -4,17 +4,17 @@
<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' %}" />
<img src="{% static 'site/img/icons/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' %}" />
<img src="{% static 'site/img/icons/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' %}" />
<img src="{% static 'site/img/icons/facebook.svg' %}" />
</a>
</li>
</ul>
......
{# Share widget #} {% load static %}
<div class="share">
<img class="share__label" data-show="#share-{{ pk }}" src="{% static '/site/img/icons/share-2.svg' %}" />
<div class="share__items" id="share-{{ pk }}">
<a target="_blank" href="https://twitter.com/intent/tweet?text={{ title }}: {{ request.build_absolute_uri }}#{{ pk }}">
<img src="{% static '/site/img/icons/twitter.svg' %}" />
</a>
<a href="http://www.facebook.com/sharer.php?s=100&p[url]={{ request.build_absolute_uri }}#{{ pk }}&p[title]={{ title }}" target="_blank">