Commit a69549bf authored by gijs's avatar gijs

Put beta styles on normal page

parent 5fc0b13c
......@@ -17,6 +17,7 @@
--green-moon-transparent: #8ec0b800;
--yellow-moon: #fff30e;
--pink: rgb(246, 103, 88);
--highlight-color: black;
}
body {
......@@ -162,6 +163,7 @@ main {
flex: 1 0;
position: relative;
padding: 0 20px;
overflow: hidden;
}
#timeline-content {
......@@ -192,11 +194,15 @@ main {
.loop-description {
position: absolute;
bottom: 0;
height: 8em;
width: calc(33vw - 40px);
max-width: 410px;
width: calc(100vw / 3);
max-width: 450px;
font-family: 'Latin Modern', serif;
}
.loop-description-content {
height: 8em;
overflow: hidden;
padding: 0 1em;
}
.loop-description:after {
......@@ -216,11 +222,12 @@ main {
left: 0;
z-index: 2;
cursor: pointer;
padding: 0 1em;
}
.loop-description[data-expanded="true"] .toggle {
display: block;
padding-top: 1em;
padding-top: 1em;
background: none;
position: relative;
}
......@@ -236,14 +243,15 @@ main {
}
.loop-description[data-expanded="true"] {
height: initial;
top: initial;
max-height: 100%;
padding-top: 4em;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,.9) 3em);
margin-left: -21px;
padding-left: 21px;
padding-right: 21px;
}
.loop-description[data-expanded="true"] .loop-description-content {
height: initial;
max-height: 45vh;
overflow-y: auto;
padding-bottom: 10px;
}
.loop-description .toggle .collapse-label,
......@@ -266,7 +274,7 @@ main {
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: end;
align-items: flex-end;
height: 3em;
}
......@@ -340,28 +348,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;
......@@ -539,6 +525,12 @@ main > * {
cursor: pointer;
}
.loop-header {
display: flex;
flex-wrap: wrap;
}
[data-active="true"] .overlay {
display: none;
}
......@@ -570,6 +562,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 {
......@@ -707,8 +700,6 @@ p, h4 {
.loop-header {
flex: 0 0 auto;
display: flex;
flex-direction: row;
}
.loop-wrapper {
......@@ -719,6 +710,28 @@ p, h4 {
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;
......@@ -783,6 +796,18 @@ p, h4 {
}
@media only screen and (max-width: 600px) {
.loop-wrapper[data-loop="1"] {
--highlight-color: var(--blue-moon);
}
.loop-wrapper[data-loop="2"] {
--highlight-color: var(--goldy);
}
.loop-wrapper[data-loop="3"] {
--highlight-color: var(--green-moon);
}
/* For mobile phones: */
body {
overflow: hidden;
......@@ -891,20 +916,28 @@ p, h4 {
.loop-days .continuous {
display: none;
}
.loop-title, .interbellum .day-date--inline {
display: block;
.loop-header-background {
position: -webkit-sticky;
position: sticky;
top: 0;
background: linear-gradient(to bottom, white 40%, rgba(255,255,255,0) 95%);
padding: .5em .5em 1.5em 0;
text-align: right;
margin: 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-title {
padding-bottom: 2.5em;
.loop-header {
position: -webkit-sticky;
position: sticky;
top: 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 2.5em 0;
z-index: 3;
}
.loop-description-inline {
......@@ -935,19 +968,39 @@ p, h4 {
}
.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;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.loop-header .loop-day-date:hover, .loop-header .loop-day-date[data-active] {
background-color: var(--highlight-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;
......@@ -964,11 +1017,16 @@ p, h4 {
}
.loop-title {
padding-left: 35%
flex: 0 0 calc(100% - 1em);
border-bottom: 2px solid black;
padding: 0.5em;
margin: 0;
}
.loop-day-date--inline {
padding-right: 65%;
border-right: 0;
border-bottom: 0;
}
header {
......@@ -995,7 +1053,7 @@ p, h4 {
text-align: right;
position: -webkit-sticky;
position: sticky;
top: 2em;
top: 5em;
z-index: 2;
}
......@@ -1026,16 +1084,16 @@ p, h4 {
font-size: 97.5%;
}
.loop-title {
/* .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%);
/* background: white; */
}
.loop-day-date, .loop-title, .day-date {
font-size: 1em;
padding-left: .5em;
padding-right: .5em;
}
} */
.date {
font-size: 1em;
......@@ -1051,7 +1109,6 @@ p, h4 {
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
white-space: nowrap;
}
......
......@@ -44,14 +44,18 @@
{% if entry|isTemplateLoop %}
{% with entry as loop %}
{% if loop.page %}
<section class="loop-description" data-loop="{{ loop.index }}">
<section class="loop-description" data-loop="{{ loop.index }}">
<section class="loop-description-content">
{{ loop.page.summary|markdown }}
<br /><br /><a href="{% url 'contour:page' loop.page.slug %}">{% trans "Show full description" %} →</a><br />
<section class="toggle">
<span class="expand-label">↑ {% trans "Read more" %}</span>
<span class="collapse-label">↓ {% trans "Collapse" %}</span>
</section>
<br />
<br />
<a href="{% url 'contour:page' loop.page.slug %}">{% trans "Read full description" %} →</a>
</section>
<section class="toggle">
<span class="expand-label">↑ {% trans "Read more" %}</span>
<span class="collapse-label">↓ {% trans "Collapse" %}</span>
</section>
</section>
{% endif %}
{% endwith %}
{% endif %}
......@@ -119,12 +123,13 @@
// } else {
// if(now < (new Date(timelineEntries[i].dataset.end))) {
// return timelineEntries[i];
// }
// }
// }
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];
}
}
......@@ -140,9 +145,6 @@
if (window.innerWidth < 600) {
getNextEvent().scrollIntoView(true);
window.addEventListener('load', function () {
getNextEvent().scrollIntoView(true);
})
} else {
initScrollbars();
window.addEventListener('load', function () {
......@@ -164,6 +166,7 @@
updateScrollbars();
});
setupTimetravel(document.getElementById('time-travel'));
travelTo(parseInt(getNextEvent().dataset.index));
}
......@@ -177,6 +180,100 @@
})(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'),
activeDayId = null;
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]];
}
}
}
if (mostVisible[0] > 100) {
activateDay(mostVisible[1].id);
}
}, 1000/25, false));
function activateDay (dayId) {
if (dayId != activeDayId) {
if (activeDayId) {
delete document.getElementById(activeDayId).dataset.active;
delete document.querySelector('.loop-day-date[data-target="' + activeDayId + '"]').dataset.active;
}
document.getElementById(dayId).dataset.active = true;
document.querySelector('.loop-day-date[data-target="' + dayId + '"]').dataset.active = true;
activeDayId = dayId;
}
}
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>
......
......@@ -3,10 +3,13 @@
<div class="overlay"></div>
<section class="loop-spacer-before"></section>
<section class="loop" data-loop-length="{{ loop.days|length }}" data-main>
<h3 class="loop-title">{{ loop.name }}</h3>
<section class="loop-header">
<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">{{ day.date|date:"D j M" }}</h3>
<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 %}
......@@ -48,18 +51,24 @@
{% endif %}
<section class="loop-days-wrapper">
{% for day in loop.days %}
<section class="day" data-date="{{ day.date|date:"c" }}">
<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.parent.counter <= 2 %}
{% 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.parent.counter <= 2 %}
{% if forloop.counter <= 2 %}
<time class="hour">16:00 - 21:00</time>
{% else %}
<time class="hour">10:00 - 21:00</time>
......@@ -82,7 +91,7 @@
{% for entry in day.entries %}
{% for event in entry.events %}
<article class="event" data-pk="{{ event.pk }}" style="">
<article class="event" data-pk="{{ event.pk }}">
{% if event.project|cover_image %}
{% with event.project|cover_image as image %}
<figure class="preview">
......
......@@ -182,10 +182,10 @@ def home(request):
timelineEntries.append(interbellum)
if loop.published:
continuous, days = structureLoopEvents(start=loop.start, end=loop.end + timedelta(days=1))
timelineEntries.append(TemplateLoop(continuous = continuous, days = days, name = loop.name, description = loop.description, interbellum = interbellum, index = index, start = loop.start, end = loop.end + timedelta(days=1), page = loop.page))
# if loop.published: Show all
continuous, days = structureLoopEvents(start=loop.start, end=loop.end + timedelta(days=1))
timelineEntries.append(TemplateLoop(continuous = continuous, days = days, name = loop.name, description = loop.description, interbellum = interbellum, index = index, start = loop.start, end = loop.end + timedelta(days=1), page = loop.page))
previousLoopEnd = loop.end + timedelta(days=1)
timelineLabels.append(loop.timeline_label)
......
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