Commit 942a08f1 authored by Ale's avatar Ale

feat: Minor improvements

parent da843ffd
......@@ -10,7 +10,7 @@ from .serializers import TestimonySerializer
from apps.map.forms import TestimonyForm
class TestimonyViewSet(viewsets.ModelViewSet):
queryset = models.Testimony.objects.filter(published=True).order_by('name')
queryset = models.Testimony.objects.filter(published=True).order_by('-creation_date')
serializer_class = TestimonySerializer
# TODO: move into the viewset
......
This diff is collapsed.
This diff is collapsed.
......@@ -2046,6 +2046,11 @@
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
"dev": true
},
"dayjs": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.9.3.tgz",
"integrity": "sha512-V+1SyIvkS+HmNbN1G7A9+ERbFTV9KTXu6Oor98v2xHmzzpp52OIJhQuJSTywWuBY5pyAEmlwbCi1Me87n/SLOw=="
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
......
......@@ -16,6 +16,7 @@
"webpack-cli": "^3.3.11"
},
"dependencies": {
"dayjs": "^1.9.3",
"leaflet": "^1.6.0",
"lorem-ipsum": "^2.0.3",
"slugify": "^1.4.5"
......
import L from 'leaflet';
import { LoremIpsum } from "lorem-ipsum";
import slugify from "slugify";
var dayjs = require('dayjs')
var relativeTime = require('dayjs/plugin/relativeTime')
var dayjs_es = require('dayjs/locale/es');
dayjs.extend(relativeTime);
dayjs.locale('es');
// Detect if device is mobile
// Check breakpoints in sass so this value matches breakpoints in the layout
......@@ -210,10 +215,10 @@ const init_timeline = function(items)
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"><em>Categorías</em><br/> ${ i.cats['category'].join(", ") }</p>`;
item.innerHTML += `<p class="timeline-item__date"><em>Fecha</em> ${ i.date }</p>`;
item.innerHTML += `<p class="timeline-item__terms">${ i.cats['category'].join(", ") }</p>`;
item.addEventListener('click', ()=>{ select_item(i.pk); });
timeline.appendChild( item );
} );
......
......@@ -459,6 +459,10 @@ select:hover {
top: 1.6rem;
right: 1.6rem; } }
.legend__help {
margin-top: 0.8rem;
font-size: 1.4rem; }
.legend__label {
font-size: 1.6rem;
margin: 0;
......@@ -495,10 +499,11 @@ select:hover {
.legend-category__unfilter {
margin-top: 1.6rem;
color: #555;
text-align: right; }
.legend-category__unfilter:before {
content: "🞨";
margin-right: 0.8rem; }
background: #eee;
text-align: center;
transition: background-color 0.2s ease; }
.legend-category__unfilter:hover {
background: #ddd; }
.legend-category__item:before {
content: "●";
......@@ -593,17 +598,18 @@ select:hover {
.timeline-item {
background: white;
margin-bottom: 1.6rem;
padding-bottom: 1.6rem; }
margin-bottom: 3.2rem;
padding-bottom: 3.2rem; }
.timeline-item:not(:last-child) {
border-bottom: 2px dashed; }
border-bottom: 2px solid #43AD36; }
.timeline-item > a {
display: block; }
.timeline-item__name {
margin: 0.8rem 0;
font-size: 2rem; }
font-size: 2rem;
text-transform: uppercase; }
.timeline-item a:link {
color: #FD4741; }
......@@ -621,19 +627,19 @@ select:hover {
.timeline-item__video video {
max-width: 100%;
height: auto; }
height: auto;
margin: 0.8rem 0; }
.timeline-item__video video:hover {
cursor: pointer; }
.timeline-item__terms,
.timeline-item__date {
font-size: 0.6em;
text-transform: uppercase;
.timeline-item__terms {
font-size: 1.4rem;
margin-top: 0.5333333333rem; }
.timeline-item__terms em,
.timeline-item__date em {
font-style: normal;
opacity: 0.7; }
.timeline-item__date {
font-size: 1.4rem;
text-transform: capitalize;
opacity: 0.75; }
.form__field {
margin-bottom: 3.2rem; }
......
This diff is collapsed.
......@@ -12,6 +12,10 @@
top: $m
right: $m
.legend__help
margin-top: $m/2
font-size: 1.4rem
.legend__label
font-size: 1.6rem
margin: 0
......@@ -48,10 +52,11 @@
.legend-category__unfilter
margin-top: $m
color: #555
text-align: right
&:before
content: "🞨"
margin-right: $m/2
background: #eee
text-align: center
transition: background-color .2s ease
&:hover
background: #ddd
.legend-category__item:before
content: "\25CF"
......
......@@ -4,16 +4,16 @@
padding: $m
.timeline-item
background: white
margin-bottom: $m
padding-bottom: $m
margin-bottom: $m*2
padding-bottom: $m*2
&:not(:last-child)
border-bottom: 2px dashed
border-bottom: 2px solid $green
.timeline-item > a
display: block
&:hover
.timeline-item__name
margin: $m/2 0
font-size: 2rem
text-transform: uppercase
.timeline-item
+link_colors($red, $green)
.timeline-item.hidden
......@@ -21,13 +21,13 @@
.timeline-item__video video
max-width: 100%
height: auto
margin: $m/2 0
&:hover
cursor: pointer
.timeline-item__terms,
.timeline-item__date
font-size: .6em
text-transform: uppercase
.timeline-item__terms
font-size: 1.4rem
margin-top: $m/3
em
font-style: normal
opacity: .7
.timeline-item__date
font-size: 1.4rem
text-transform: capitalize
opacity: .75
......@@ -49,6 +49,10 @@
<h4 class="legend__label">
Leyenda
</h4>
<p class="legend__help">
Puedes pinchar en los elementos de la leyenda para filtrar
según tus intereses
</p>
<div class="legend__categories">
</div>
</div>
......
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