Commit d609a34e authored by gijs's avatar gijs

Day navigation within the loops on mobile

parent 1f354322
......@@ -224,7 +224,7 @@ main {
background: none;
position: relative;
}
/*
/*
.loop-description[data-expanded="true"] {
height: initial;
top: 0;
......@@ -325,8 +325,8 @@ main {
/* display: flex; */
/* flex-direction: column; */
/* overflow-y: auto; */
display: grid;
grid-template-rows: repeat(24, minmax(1em, max-content));
/* display: grid; */
/* grid-template-rows: repeat(24, minmax(1em, max-content)); */
/* grid-template-rows: repeat(28, auto); */
border-right: 2px solid black;
}
......@@ -340,28 +340,6 @@ main {
border-right: 0;
}
.loop-day-date {
text-transform: uppercase;
}
.loop-header .loop-day-date {
padding: .5em;
flex: 1 0 calc(33% - 1em);
font-weight: 900;
font-family: 'Syne';
border-right: 2px solid black;
padding-bottom: 1em;
margin-bottom: 0;
}
.loop-header .loop-day-date:last-of-type {
border-right: none;
}
.loop-day-date--inline {
display: none;
}
.loop-title, .continuous-title {
/* display: none; */
margin-bottom: 0;
......@@ -373,7 +351,9 @@ main {
/**
* Timeline event
*/
.interbellum .day .event {
margin: 0 0 2em 0;
}
.loop .day .event {
margin: 2em 0;
}
......@@ -408,21 +388,40 @@ main {
font-family: 'Syne';
font-weight: 900;
}
.event .date {
font-family: 'Syne';
font-weight: 900;
text-transform: initial;
}
.date + .hour {
/* .date + .hour {
padding-left: 9px;
} */
.event-data--event {
display: inline;
}
.event-data.event-data--event {
display: inline-block;
}
.loop-days .hour::before, .loop-continuous .date::before {
.event-data--event > :first-child::before {
content: url("/static/contour/images/small-loop.png");
vertical-align: text-top;
padding-right: 2px;
}
.daterange__end {
display: inline-block;
}
.daterange__end::before {
vertical-align: bottom;
padding-right: 4px;
content: url("/static/contour/images/arrow-smaller.png");
}
.venue, .contributor, .hour {
font-family: 'Lack';
}
......@@ -460,7 +459,9 @@ main {
vertical-align: middle;
}
img.contour9-partners {
width: 100%;
}
/**
* Continuous content
*/
......@@ -516,6 +517,12 @@ main > * {
cursor: pointer;
}
.loop-header {
display: flex;
flex-wrap: wrap;
}
[data-active="true"] .overlay {
display: none;
}
......@@ -547,6 +554,7 @@ p, h4 {
.loop-title, .continuous-title {
font-family: 'Syne';
margin: .5em .5em 0 .5em;
flex: 0 0 calc(100% - 1em);
}
.loop .day .event:last-of-type {
......@@ -616,7 +624,6 @@ p, h4 {
max-width: 300px;
}
.loop[data-loop-length="1"] {
flex: 3 0 300px;
max-width: 23vw;
......@@ -685,14 +692,38 @@ p, h4 {
.loop-header {
flex: 0 0 auto;
display: flex;
flex-direction: row;
}
.loop-wrapper {
margin-right: 200px;
}
.loop-description-inline {
display: none;
}
.loop-day-date {
text-transform: uppercase;
}
.loop-header .loop-day-date {
padding: .5em;
flex: 1 0 calc(33% - 1em);
font-weight: 900;
font-family: 'Syne';
border-right: 2px solid black;
padding-bottom: 1em;
margin-bottom: 0;
}
.loop-header .loop-day-date:last-of-type {
border-right: none;
}
.loop-day-date--inline {
display: none;
}
.continuous {
display: block;
border: 2px solid black;
......@@ -724,11 +755,6 @@ p, h4 {
line-height: 1.75;
}
.continuous-event .event-data::before {
content: url("/static/contour/images/small-loop.png");
vertical-align: text-top;
display: inline-block;
}
.continuous-event .event-data {
margin: 0;
}
......@@ -762,6 +788,18 @@ p, h4 {
}
@media only screen and (max-width: 600px) {
.loop-wrapper[data-loop="1"] {
--higlight-color: var(--blue-moon);
}
.loop-wrapper[data-loop="2"] {
--higlight-color: var(--goldy);
}
.loop-wrapper[data-loop="3"] {
--higlight-color: var(--green-moon);
}
/* For mobile phones: */
body {
overflow: hidden;
......@@ -816,7 +854,10 @@ p, h4 {
height: initial;
min-height: 8em;
padding-top: 0;
border-bottom: 2px solid black;
}
.loop {
border-top: 2px solid black;
}
.interbellum {
......@@ -824,7 +865,7 @@ p, h4 {
padding-top: .5em;
padding-bottom: 3em;
}
.loop-wrapper .overlay, .interbellum .overlay {
display: none;
}
......@@ -838,13 +879,13 @@ p, h4 {
background: none;
}
.loop-wrapper[data-loop="1"] .loop {
background: linear-gradient(to bottom, var(--blue-moon-transparent), var(--blue-moon-alpha));
background: linear-gradient(to bottom, var(--blue-moon-transparent), var(--blue-moon-alpha) 125vh);
}
.loop-wrapper[data-loop="2"] .loop {
background: linear-gradient(to bottom, var(--goldy-transparent), var(--goldy-alpha));
background: linear-gradient(to bottom, var(--goldy-transparent), var(--goldy-alpha) 125vh);
}
.loop-wrapper[data-loop="3"] .loop {
background: linear-gradient(to bottom, var(--green-moon-transparent), var(--green-moon-alpha));
background: linear-gradient(to bottom, var(--green-moon-transparent), var(--green-moon-alpha) 125vh);
}
.continuous-title {
......@@ -867,16 +908,37 @@ p, h4 {
.loop-days .continuous {
display: none;
}
.loop-title, .interbellum .day-date--inline {
.loop-header-background {
position: -webkit-sticky;
position: sticky;
top: 0;
background: linear-gradient(to top, rgba(255,255,255,0), rgba(255, 255, 255, .75) 2em);
height: 7em;
z-index: 2;
margin-bottom: -7em;
}
.loop-header {
display: block;
position: -webkit-sticky;
position: sticky;
top: 0;
background: linear-gradient(to bottom, white 15%, rgba(255,255,255,0) 95%);
padding: .5em .5em 2em 0;
/* background: linear-gradient(to top, rgba(255,255,255,0), white 2.5em); */
/* padding: 0 0 3em 0; */
background: rgba(255, 255, 255, .75);
padding: 0;
text-align: right;
margin: 0 0 -5em 0;
z-index: 2;
margin: 0 0 2.5em 0;
z-index: 3;
}
.loop-description-inline {
font-family: 'Latin Modern', serif;
font-size: 1.1em;
line-height: 1.15em;
margin: 0 .5em 1.15em .5em;
display: block;
}
.interbellum .day-date--inline {
......@@ -891,28 +953,50 @@ p, h4 {
display: block;
border: none;
max-width: initial;
border-top: 2px solid black;
}
.loop .day {
padding-top: 0;
}
.loop-day-date {
display: none;
padding: .5em;
margin: 0;
font-size: 1em;
text-align: left;
/* transition: background-color 250ms; */
}
.loop-header .loop-day-date {
border-width: 0 2px 2px 0;
border-color: black;
border-style: solid;
flex: 1 0 calc(33% - 1em - 2px);
cursor: pointer;
}
.loop-header .loop-day-date:hover, .loop-header .loop-day-date[data-active="true"] {
background-color: var(--higlight-color);
color: white;
/* transition: background-color 250ms; */
}
.loop-header .loop-day-date:last-of-type {
border-right: none;
}
.loop-day-date--inline {
/* border-top: 2px solid black; */
display: block;
position: -webkit-sticky;
position: sticky;
top: 0em;
padding: .5em;
margin: 0;
text-transform: uppercase;
z-index: 2;
}
.loop-overlay {
display: none;
}
.loop .day .event {
margin-bottom: 3em;
margin-bottom: 2em;
}
#timeline {
display: none;
......@@ -923,11 +1007,16 @@ p, h4 {
}
.loop-title {
padding-left: 35%
flex: 0 0 100%;
border-bottom: 2px solid black;
padding: 0.5em;
margin: 0;
}
.loop-day-date--inline {
padding-right: 65%;
border-right: 0;
border-bottom: 0;
}
header {
......@@ -943,23 +1032,40 @@ p, h4 {
}
.loop-days .continuous-inline .event {
margin: 0;
margin: 1em 0 0 0;
}
.loop-days .continuous-inline .hour {
font-family: 'Syne';
font-weight: 900;
margin: 1em .5em 0 .5em;
display: inline-block;
margin: calc(-2.25em - 2px) .5em 1em .5em;
display: block;
text-align: right;
position: -webkit-sticky;
position: sticky;
top: 5em;
z-index: 2;
}
.loop-days .continuous-inline .hour::before {
content: "";
}
.continuous-inline .event .event-data {
margin-left: 0;
margin-right: 0;
}
.loop-days .continuous-inline .hour::before {
content: "";
.loop-days .continuous-inline {
padding: .5em;
margin-bottom: 1em;
margin: 0 .5em 1em .5em;
border: 2px solid black;
}
.continuous-inline {
margin-bottom: 3em;
.daterange__end::before {
position: relative;
top: 1px;
}
}
......@@ -968,16 +1074,16 @@ p, h4 {
font-size: 97.5%;
}
.loop-title {
margin-bottom: -3.5em;
background: linear-gradient(to bottom, white 20%, rgba(255,255,255,0) 95%);
/* .loop-title {
background: linear-gradient(to bottom, rgba(255,255,255,.95) 50%, rgba(255,255,255,.7) 70%, rgba(255,255,255,0) 100%);
}
.loop-day-date, .loop-title, .day-date {
font-size: 1em;
padding-left: .5em;
padding-right: .5em;
}
} */
.date {
font-size: 1em;
......
......@@ -70,7 +70,7 @@
{% endwith %}
{% elif entry|isTemplateLoop %}
{% with entry as loop %}
{% include "./partials/home__loop.html" %}
{% include "./partials/home__loop__beta.html" %}
{% endwith %}
{% endif %}
{% endfor %}
......@@ -124,7 +124,7 @@
// }
for (var i=0; i < timelineEntries.length; i++) {
if (timelineEntries[i].dataset.type == 'loop' && timelineEntries[i].dataset.loop == '2') {
if (timelineEntries[i].dataset.type == 'loop' && timelineEntries[i].dataset.loop == '3') {
return timelineEntries[i];
}
}
......@@ -175,6 +175,97 @@
})(descriptions[i], descriptions[i].querySelector('.toggle'));
}
})();
// http://davidwalsh.name/javascript-debounce-function
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// Jump to days in the loop
(function () {
var loops = document.querySelectorAll('section[data-type="loop"]'),
loopDays = document.querySelectorAll('.loop-days .day'),
viewport = document.querySelector('main');
if (window.innerWidth < 600) {
viewport.addEventListener('scroll', debounce(function () {
// go through all loop days, see wich of them has the most
// pixels in view, mark it as active
var viewportRect = viewport.getBoundingClientRect(),
mostVisible = [0, null];
for (var i = 0; i < loopDays.length; i++) {
var dayRect = loopDays[i].getBoundingClientRect();
if (dayRect.bottom > viewportRect.top && dayRect.top < viewportRect.bottom) {
// At least partially visible
visible = Math.min(viewportRect.bottom, dayRect.bottom) - Math.max(viewportRect.top, dayRect.top);
if (visible > mostVisible[0]) {
mostVisible = [visible, loopDays[i]];
}
}
}
activateDay(mostVisible[1].id);
}, 1000/25, false));
function activateDay (dayId) {
console.log(dayId);
var activeLink = document.querySelector('.loop-day-date[data-active="true"]'),
newLink = document.querySelector('.loop-day-date[data-target="' + dayId + '"]');
if (! newLink.isSameNode(activeLink)) {
newLink.dataset.active = "true";
if (activeLink) {
activeLink.dataset.active = false;
}
}
}
for (var l=0; l < loops.length; l++) {
var loop = loops[l],
header = loop.querySelector('.loop-header'),
links = header.querySelectorAll('.loop-day-date');
for (var i=0; i < links.length; i++) {
var link = links[i],
target = document.getElementById(link.dataset.target);
(function (link, loop, header, target) {
link.addEventListener('click', function () {
/*
get coordinates of the viewport: loop
coordinates of the navigation bar
coordinates of the day
position the day within the viewport such that it's
not covered by the navigation bar
*/
var viewportRect = viewport.getBoundingClientRect(),
headerRect = header.getBoundingClientRect(),
dayRect = target.getBoundingClientRect();
activateDay(link.dataset.target);
viewport.scrollBy({
'top': dayRect.top - (viewportRect.top + headerRect.height),
'behavior': 'smooth'
});
});
})(link, loop, header, target);
}
}
}
})();
</script>
<!-- <script src="{% static 'contour/js/eventHighlighter.js' %}"></script> -->
</body>
......
{% load static contour thumbnail i18n %}
{% for day in interbellum.days %}
<section class="interbellum" data-label="{{ day.date|date:'D j M' }}" data-type="interbellum" data-t="{{ interbellum.t|stringformat:'0.2f' }}" data-date="{{ day.date|date:"c" }}">
<div class="overlay"></div>
<section class="interbellum-spacer-before"></section>
<section class="day" data-main>
<h3 class="loop-title"></h3>
<h3 class="day-date day-date--inline">{{ day.date|date:"D j M" }}</h3>
{% for event in day.events %}
<article class="event" data-pk="{{ event.pk }}" style="">
{% if event.project|cover_image %}
{% with event.project|cover_image as image %}
<figure class="preview">
<a href="{% url 'contour:event' event.pk %}">
<img src="{% thumbnail image.image 500x250 crop upscale subject_location=image.image.subject_location %}">
</a>
</figure>
{% endwith %}
{% endif %}
<section class="event-data">
<time class="hour" datetime="{{ event.start|date:'c' }}">{{ event.start|date:"H:i" }}{% if event.end %} - {{ event.end|date:"H:i" }}{% endif %}</time>
<span class="type">{{ event.event_type }} </span>
<span class="venue">{% trans "at" %}&nbsp;{% if event.venue.published %}<a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a>{% else %}{{ event.venue }}{% endif %}</span>
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
{% for participant in event.project|sorted_participants %}
{% if forloop.first %}{% trans "with" %}:&nbsp;{% endif %}<span class="contributor">{% if participant.published %}<a href="{% url 'contour:contributor' participant.pk %}">{{ participant.name }}</a>{% else %}{{ participant.name }}{% endif %}</span>
{% endfor %}
</section>
</article>
{% endfor %}
</section>
<section class="interbellum-spacer-after"></section>
</section>
{% endfor %}
\ No newline at end of file
{% load static contour thumbnail i18n %}
<section class="loop-wrapper" data-loop="{{ loop.index }}" id="{{loop.name|slugify}}" data-label="{{ loop.name }}" data-type="loop" data-start="{{ loop.start|date:"c" }}" data-end="{{ loop.end|date:"c" }}" {% if loop.index == 1 %}data-focus{% endif %}>
<div class="overlay"></div>
<section class="loop-spacer-before"></section>
<section class="loop" data-loop-length="{{ loop.days|length }}" data-main>
<section class="loop-header-background"></section>
<section class="loop-header">
<h3 class="loop-title">{{ loop.name }}</h3>
{% for day in loop.days %}
<h3 class="loop-day-date" data-day="{{ forloop.counter }}" data-target="loop-{{ loop.index }}-day-{{ forloop.counter }}">
{{ day.date|date:"D j M" }}
</h3>
{% endfor %}
</section>
{% if loop.page %}
<section class="loop-description-inline">
{{ loop.page.summary|markdown }}
<br /><br /><a href="{% url 'contour:page' loop.page.slug %}">{% trans "Show full description" %} →</a><br />
</section>
{% endif %}
<section class="loop-days">
{% if loop.continuous %}
<h3 class="continuous-title">Continuous</h3>
<section class="continuous">
{% if loop.index == 1 %}
<section class="opening-times">
<time class="hour">10:00 - 20:00</time>
<time class="hour">10:00 - 20:00</time>
<time class="hour">12:00 - 17:00</time>
</section>
{% else %}
<section class="opening-times">
<time class="hour">16:00 - 21:00</time>
<time class="hour">10:00 - 21:00</time>
<time class="hour">10:00 - 21:00</time>
</section>
{% endif %}
{% for event in loop.continuous %}
<article class="event continuous-event" data-pk="{{ event.pk }}">
<section class="event-data event-data--event">
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
<span class="type">{{ event.event_type }} </span>
<span class="venue">{% trans "at" %}&nbsp;{% if event.venue.published %}<a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a>{% else %}{{ event.venue }}{% endif %}</span>
{% for participant in event.project|sorted_participants %}
{% if forloop.first %}{% trans "with" %}:&nbsp;{% endif %}<span class="contributor">{% if participant.published %}<a href="{% url 'contour:contributor' participant.pk %}">{{ participant.name }}</a>{% else %}{{ participant.name }}{% endif %}</span>
{% endfor %}
</section>
</article>
{% endfor %}
</section>
{% endif %}
<section class="loop-days-wrapper">
{% for day in loop.days %}
<section class="day" data-date="{{ day.date|date:"c" }}" id="loop-{{ loop.index }}-day-{{ forloop.counter }}">
<h3 class="loop-day-date loop-day-date--inline">{{ day.date|date:"D j M" }}</h3>
{% if loop.continuous %}
<section class="continuous-inline">
{% if loop.index == 1 %}
{% if forloop.counter <= 2 %}
<time class="hour">10:00 - 20:00</time>
{% else %}
<time class="hour">12:00 - 17:00</time>
{% endif %}
{% elif loop.idex == 3 %}
{% if forloop.counter <= 2 %}
<time class="hour">15:00 - 21:00</time>
{% else %}
<time class="hour">11:00 - 21:00</time>
{% endif %}
{% else %}
{% if forloop.counter <= 2 %}
<time class="hour">16:00 - 21:00</time>
{% else %}
<time class="hour">10:00 - 21:00</time>
{% endif %}
{% endif %}
{% for event in loop.continuous %}
<article class="event continuous-event" data-pk="{{ event.pk }}">
<section class="event-data event-data--event">
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
<span class="type">{{ event.event_type }} </span>
<span class="venue">{% trans "at" %}&nbsp;{% if event.venue.published %}<a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a>{% else %}{{ event.venue }}{% endif %}</span>
{% for participant in event.project|sorted_participants %}
{% if forloop.first %}{% trans "with" %}:&nbsp;{% endif %}<span class="contributor">{% if participant.published %}<a href="{% url 'contour:contributor' participant.pk %}">{{ participant.name }}</a>{% else %}{{ participant.name }}{% endif %}</span>
{% endfor %}
</section>
</article>
{% endfor %}
</section>
{% endif %}
{% for entry in day.entries %}
{% for event in entry.events %}
<article class="event" data-pk="{{ event.pk }}">
{% if event.project|cover_image %}
{% with event.project|cover_image as image %}
<figure class="preview">
<a href="{% url 'contour:event' event.pk %}">
<picture>
<source srcset="{% thumbnail image.image 600x170 crop upscale subject_location=image.image.subject_location %}"
media="(max-width: 600px)">
<img src="{% thumbnail image.image 400x250 crop upscale subject_location=image.image.subject_location %}" />
</picture>
<!-- <img src="{% thumbnail image.image 500x250 crop upscale subject_location=image.image.subject_location %}"> -->
</a>
</figure>
{% endwith %}
{% endif %}
<section class="event-data event-data--event">
<time class="hour" datetime="{{ event.start|date:'c' }}">{{ event.start|date:"H:i" }}{% if event.end %} - {{ event.end|date:"H:i" }}{% endif %}</time>
<span class="type">{{ event.event_type }} </span>
<span class="venue">{% trans "at" %}&nbsp;{% if event.venue.published %}<a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a>{% else %}{{ event.venue }}{% endif %}</span>
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
{% for participant in event.project|sorted_participants %}
{% if forloop.first %}{% trans "with" %}:&nbsp;{% endif %}<span class="contributor">{% if participant.published %}<a href="{% url 'contour:contributor' participant.pk %}">{{ participant.name }}</a>{% else %}{{ participant.name }}{% endif %}</span>
{% endfor %}
</section>
</article>
{% endfor %}
{% endfor %}
</section>
{% endfor %}
</section>
</section>
</section>
<section class="loop-spacer-after"></section>
</section>
\ No newline at end of file
......@@ -233,7 +233,7 @@ def homeBeta(request):
interbellum = Interbellum(continuous=continuous, days=days, t=len(loops) + .5)
timelineEntries.append(interbellum)
return render(request, 'contour/home.html', {
return render(request, 'contour/home.beta.html', {
'timelineEntries': timelineEntries,
'timelineLabels': timelineLabels,
'Interbellum': Interbellum,
......