Commit 0b896c1b authored by Ale's avatar Ale

feat: Add video to output

parent d4d3529a
......@@ -25,4 +25,5 @@ class TestimonySerializer(serializers.ModelSerializer):
'position',
'category',
'other_categories',
'video'
)
This diff is collapsed.
......@@ -199,16 +199,18 @@ const init_map = function(items)
const init_timeline = function(items)
{
if(!items) return;
const timeline = document.querySelector('.timeline');
console.log(items);
items.forEach( i => {
var item = document.createElement('div');
item.classList.add( `item-${i.pk}`);
item.classList.add('timeline-item');
item.innerHTML = i.img ? `<img class="timeline-item__img" src="${ i.img }" />` : '';
item.innerHTML += `<h3 class="timeline-item__name">${ i.name }</h3>`;
item.innerHTML += `<p class="timeline-item__date">${ i.date }</p>`;
item.innerHTML += '<div class="timeline-item__video"><video src="' + i.video + '" controls></video></div>';
item.innerHTML += `<p class="timeline-item__terms"><b>Categorías</b><br/> ${ i.cats['category'].join(", ") }</p>`;
item.innerHTML += `<p class="timeline-item__date"><b>Fecha</b> ${ i.date }</p>`;
console.log ( item.innerHTML );
item.addEventListener('click', ()=>{ select_item(i.pk) });
timeline.appendChild( item );
} );
......@@ -372,6 +374,7 @@ const create_items = function(items)
terms : terms.map( j => slugify(j.toLowerCase() )),
date : i.creation_date,
latlon : i.position.coordinates.reverse(),
video : i.video,
}
});
}
......
......@@ -375,10 +375,10 @@ select:hover {
@media screen and (min-width: 768px) {
.page--map .region-content__inner--twocol {
grid-template-columns: 1fr 3fr; } }
grid-template-columns: 25% 75%; } }
@media screen and (min-width: 1400px) {
.page--map .region-content__inner--twocol {
grid-template-columns: 1fr 4fr; } }
grid-template-columns: 20% 80%; } }
.region-content__inner--twocol.show-right {
grid-template-columns: 1fr 0fr !important; }
......@@ -594,7 +594,6 @@ select:hover {
.timeline-item {
background: white;
padding: 0.8rem;
margin-bottom: 1.6rem; }
.timeline-item:hover:not(.selected) {
......@@ -611,9 +610,6 @@ select:hover {
margin: 0.8rem 0;
color: #333; }
.timeline-item__date {
font-size: 1.2rem; }
.timeline-item a:link {
color: #FD4741; }
.timeline-item a:visited {
......@@ -628,6 +624,16 @@ select:hover {
.timeline-item.hidden {
display: none; }
.timeline-item__video video {
max-width: 100%;
height: auto; }
.timeline-item__terms,
.timeline-item__date {
font-size: 0.7em;
opacity: 0.8;
text-transform: uppercase; }
.form__field {
margin-bottom: 3.2rem; }
......
This diff is collapsed.
......@@ -10,10 +10,10 @@
+breakpoint('sm')
.page--map .region-content__inner--twocol
grid-template-columns: 1fr 3fr
grid-template-columns: 25% 75%
+breakpoint('xl')
.page--map .region-content__inner--twocol
grid-template-columns: 1fr 4fr
grid-template-columns: 20% 80%
.region-content__inner--twocol.show-right
grid-template-columns: 1fr 0fr !important
......
......@@ -7,7 +7,6 @@
padding: $m
.timeline-item
background: white
padding: $m/2
margin-bottom: $m
.timeline-item:hover:not(.selected)
outline: 2px solid rgba(black, .05)
......@@ -20,9 +19,15 @@
.timeline-item__name
margin: $m/2 0
color: #333
.timeline-item__date
font-size: $size_small
.timeline-item
+link_colors($red, $green)
.timeline-item.hidden
display: none
.timeline-item__video video
max-width: 100%
height: auto
.timeline-item__terms,
.timeline-item__date
font-size: .7em
opacity: .8
text-transform: uppercase
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