Commit fbb50824 authored by gijs's avatar gijs

Overflow for loop description

parent 94a36102
......@@ -163,6 +163,7 @@ main {
flex: 1 0;
position: relative;
padding: 0 20px;
overflow: hidden;
}
#timeline-content {
......@@ -193,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 {
......@@ -217,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;
}
......@@ -237,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: 60vh;
overflow-y: auto;
padding-bottom: 10px;
}
.loop-description .toggle .collapse-label,
......
......@@ -45,13 +45,17 @@
{% with entry as loop %}
{% if loop.page %}
<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 "Read 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,6 +123,7 @@
// } else {
// if(now < (new Date(timelineEntries[i].dataset.end))) {
// return timelineEntries[i];
// }
// }
// }
......
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