Commit 528cc7a4 authored by gijs's avatar gijs

Proposal for the continuous events

parent cdac5260
Pipeline #158 failed with stages
......@@ -21,8 +21,8 @@
body {
font-family: 'Lack';
font-size: 1.2em;
line-height: 1.3em;
font-size: 1.1em;
line-height: 1.2em;
color: black;
display: flex;
flex-direction: row;
......@@ -84,7 +84,7 @@ header {
max-width: 450px;
flex-direction: column;
padding-bottom: 10px;
border-right: 9px double black;
border-right: 2px solid black;
}
main {
......@@ -246,21 +246,16 @@ main {
.loop-continuous {
/* display: flex; */
/* flex-direction: row; */
background: linear-gradient(to right, white, var(--blue-moon-light));
/* padding: .5em; */
background: var(--blue-moon-light) linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.3));
border-top: 2px solid black;
border-bottom: 2px solid black;
overflow: hidden;
max-height: 90px;
font-size: 90%;
white-space: nowrap;
/* overflow: hidden; */
/* max-height: 90px; */
/* font-size: 90%; */
hyphens: auto;
}
.loop-continuous [data-panel-container] {
display: block;
white-space: nowrap;
}
.loop-days {
flex: 1 0;
display: flex;
......@@ -293,10 +288,17 @@ main {
}
.loop-header .loop-day-date {
margin: .5em;
padding: .5em;
flex: 1 0 calc(33% - 1em);
font-weight: 900;
font-family: 'Syne';
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 {
......@@ -329,11 +331,8 @@ main {
line-height: 1.4em;
}
.loop-continuous .event-data {
max-height: 108px;
padding-right: 1em;
}
.loop-continuous .event:nth-of-type(n+2) .event-data {
border-left: 2px solid black;
/* max-height: 108px; */
display: inline;
}
.event span, .event h4 {
padding: 0;
......@@ -442,22 +441,21 @@ main {
z-index: 1;
}
.loop-continuous .event {
padding: 0px;
width: 80%;
height: 100%;
vertical-align: top;
display: inline-block;
/* overflow: hidden; */
.loop-continuous-events {
padding: .5em;
}
.loop-continuous .event-data {
padding: 10px 30px;
height: calc(100% - 20px);
.loop-continuous-events-title {
font-family: 'Latin Modern';
font-style: italic;
font-size: 120%;
}
.loop-continuous .event:first-of-type .event-data {
padding-left: 10px;
.loop-continuous .event {
padding: 0 0 0 1em;
vertical-align: top;
display: inline;
/* overflow: hidden; */
}
.loop-continuous [data-panel] {
......@@ -468,6 +466,23 @@ main {
white-space: normal;
}
.loop-continuous .opening-times {
display: flex;
}
.loop-continuous .opening-times span {
flex: 1 0;
font-family: "Syne";
font-weight: 900;
text-align: left;
border-right: 2px solid black;
padding-left: .5em;
}
.loop-continuous .opening-times span:last-of-type {
border-right: none;
}
/* .loop-continuous [data-panel-position="left"] .panel-toggle {
background: linear-gradient(to left, rgba(0,0,0,0.05), rgba(0,0,0,.75) 75%);
}
......@@ -533,13 +548,17 @@ main {
display: none;
}
.loop-continuous .event figure {
float: left;
/* float: left; */
margin-right: .5em;
display: none;
/* display: none; */
display: inline;
}
.loop-continuous .event figure.preview img {
max-width: 50px;
max-height: 1.5em;
vertical-align: top;
margin-top: -.05em;
margin-bottom: -.05em;
}
main {
......
......@@ -61,7 +61,7 @@
<article class="event" data-pk="{{ event.pk }}" style="grid-row:{{ event.grid_coord }}">
{% if event.project|cover_image %}
{% with event.project|cover_image as image %}
{% thumbnail image.image "500" upscale=False as im %}
{% thumbnail image.image "x50" upscale=False as im %}
<figure class="preview">
<a href="{% url 'contour:event' event.pk %}"><img src="{{ im.url }}"></a>
</figure>
......@@ -102,35 +102,35 @@
</section>
{% if loop.continuous %}
{% spaceless %}
<section class="loop-continuous" data-panel-container {% with loop.continuous|first as e %}data-active-panel="{{ e.pk }}"{% endwith %}>
{% for event in loop.continuous %}
<article class="event" data-pk="{{ event.pk }}" data-panel="{{ event.pk }}">
<div class="panel-toggle">
<div class="panel-toggle-handle">
<img src="/static/contour/images/arrow-left-no-tail.svg" class="icon">
</div>
</div>
{% if event.project|cover_image %}
{% with event.project|cover_image as image %}
{% thumbnail image.image "500" upscale=False as im %}
<figure class="preview">
<a href="{% url 'contour:event' event.pk %}"><img src="{{ im.url }}"></a>
</figure>
{% endthumbnail %}
{% endwith %}
{% endif %}
<section class="event-data">
<time class="date" datetime="{{ event.start|date:'c' }}">{{ event.start|date:"j M" }}{% if event.end and event.start|date:"j M" != event.end|date:"j M" %} - {{ event.end|date:"j M" }}{% endif %}&nbsp;</time>
<span class="hour">{{ event.start|date:"H:i" }}{% if event.end %} - {{ event.end|date:"H:i" }}{% endif %}&nbsp;</span>
<span class="type">{{ event.event_type }}</span>&nbsp;
<span class="venue">{% trans "at" %} <a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a>&nbsp;</span>
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a>&nbsp;</h4>
{% for participant in event.project|sorted_participants|slice:":5" %}
{% if forloop.first %}{% trans "with" %}:&nbsp;{% endif %}<span class="contributor"><a href="{% url 'contour:contributor' participant.pk %}">{{ participant.name }}</a></span>&nbsp;
{% endfor %}
</section>
</article>
{% endfor %}
<section class="loop-continuous">
<section class="opening-times">
{% for day in loop.days %}
<span>10:00 - 20:00</span>
{% endfor %}
</section>
<section class="loop-continuous-events">
<span class="loop-continuous-events-title">{% trans "installations" %} </span>
{% for event in loop.continuous %}
<article class="event">
{% if event.project|cover_image %}
{% with event.project|cover_image as image %}
{% thumbnail image.image "x500" upscale=False as im %}
<figure class="preview">
<a href="{% url 'contour:event' event.pk %}"><img src="{{ im.url }}"></a>
</figure>
{% endthumbnail %}
{% endwith %}
{% endif %}
<section class="event-data">
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a>&nbsp;</h4>
<span class="venue">{% trans "at" %} <a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a>&nbsp;</span>
{% for participant in event.project|sorted_participants|slice:":5" %}
{% if forloop.first %}{% trans "with" %}:&nbsp;{% endif %}<span class="contributor"><a href="{% url 'contour:contributor' participant.pk %}">{{ participant.name }}</a></span>&nbsp;
{% endfor %}
</section>
</article>
{% endfor %}
</section>
</section>
{% endspaceless %}
{% endif %}
......@@ -152,7 +152,7 @@
<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" %} <a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a></span>
<span class="venue">{% trans "at" %}&nbsp;<a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a></span>
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
{% for participant in event.project|sorted_participants|slice:":5" %}
{% if forloop.first %}{% trans "with" %}:&nbsp;{% endif %}<span class="contributor"><a href="{% url 'contour:contributor' participant.pk %}">{{ participant.name }}</a></span>
......
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