Commit bd6c9c08 authored by gijs's avatar gijs
Browse files

Mobile styles

parent 7af4ce5f
......@@ -27,8 +27,10 @@
</p>
{% with item=event %}{% include "snippets/metadata.html" %}{% endwith %}
</section>
{{ event.summary }}
{{ event.content }}
<section class="long-text">
{{ event.summary }}
{{ event.content }}
</section>
{% if event.notes %}
<h4>Related documents</h4>
<ul class="simplelist">
......
......@@ -31,8 +31,10 @@
</p>
{% with item=event %}{% include "snippets/metadata.html" %}{% endwith %}
</section>
{{ event.summary }}
{{ event.content }}
<section class="long-text">
{{ event.summary }}
{{ event.content }}
</section>
{% if event.notes %}
<h4>Related documents</h4>
<ul class="simplelist">
......
{% extends "generator_base_two_columns.html" %}
{% load generator_utils %}
{% block body_classes %}two-columns home{% endblock %}
{% block title %}Caveat{% endblock %}
{% if event.image %}
......@@ -10,13 +12,14 @@
{% block content_class %}home event-list{% endblock %}
{% block content %}
<section class="sticky-section-header">Activities</section>
{% for event in events %}
<article id="{{ event.key }}" class="event presentation" data-image="{{ event.image }}" {% if forloop.first %} data-active{% endif %}>
<time datetime="2019-05-24" class="date-header"><a href="{{ event.link }}">{{ event.date }}</a></time>
<h2 class="event-title"><a href="{{ event.link }}">{{ event }}</a></h2>
{{ event.summary }}
{% if event.programmeItems %}
<p><a href="{{ event.link }}" class="read-further">See programme ({{ event.programmeItems.value|length }} events)</a></p>
<p><a href="{{ event.link }}" class="read-further">See programme ({{ event.programmeItems.value|length }} programme items)</a></p>
{% endif %}
</article>
{% endfor %}
......
......@@ -8,34 +8,32 @@
<title>{% block title %}Caveat{% endblock %}</title>
</head>
<body class="{% block body_classes %}{% endblock %}">
<header>
<nav>
<a href="{{ SITE_URL }}index.html" id="site-logo">
<img src="{{ SITE_URL }}static/images/logos/caveat.png" />
</a>
<ul>
{% for label, url in MENU_ITEMS %}
<li><a href="{{ SITE_URL}}{{ url }}">{{ label }}</a></li>
{% endfor %}
</ul>
</nav>
<section id="header-map" style="background-image:url({% block sidebar_image %}{{ SITE_URL }}static/images/maps/reading-room8-cover.png{% endblock %});">
</section>
<section id="header-content">
{% block header-text %}
<p>
<em>Caveat</em> is a collective research into the ecology of artistic practice.
It is initiated by Jubilee, in partnership with Open Source Publishing, No New Enemies and Été 78.
<em>Caveat</em> tries to find more sustainable, balanced ways of operating within the existing legal frameworks.
And when the limits of the existing system are reached, it tries to come up with possible new narratives that
open up space for reflection.
</p>
{% endblock %}
</section>
</header>
{% block main %}
<nav id="nav--main">
<a href="{{ SITE_URL }}index.html" id="site-logo">
<img src="{{ SITE_URL }}static/images/logos/caveat.png" />
</a>
<button id="toggle--menu">MENU</button>
<ul>
{% for label, url in MENU_ITEMS %}
<li><a href="{{ SITE_URL}}{{ url }}">{{ label }}</a></li>
{% endfor %}
</ul>
</nav>
<section id="map" style="background-image:url({% block sidebar_image %}{{ SITE_URL }}static/images/maps/reading-room8-cover.png{% endblock %});"></section>
<section id="header-content">
{% block header-text %}
<p>
<em>Caveat</em> is a collective research into the ecology of artistic practice.
It is initiated by Jubilee, in partnership with Open Source Publishing, No New Enemies and Été 78.
<em>Caveat</em> tries to find more sustainable, balanced ways of operating within the existing legal frameworks.
And when the limits of the existing system are reached, it tries to come up with possible new narratives that
open up space for reflection.
</p>
{% endblock %}
</section>
{% block main %}
<main></main>
{% endblock %}
<footer>
<p class="">
<strong>Caveat</strong> is a collective research project convened by the Brussels-based artists’ initiative Jubilee, in partnership with Open Source Publishing, No New Enemies and Été 78. Supported by Innoviris Brussels Institute for Research and Innovation, Flanders State of the Arts, and Vlaamse Gemeenschapscommissie.
......@@ -55,6 +53,13 @@
})
}
})();
(function () {
var toggle = document.querySelector('#toggle--menu')
.addEventListener('click', function () {
document.body.classList.toggle('menu--expanded');
});
})();
</script>
<script src="{{ SITE_URL }}static/js/links.js"></script>
{% block footerresources %}{% endblock %}
......
{% load generator_utils %}
<article class="long-text">
<section class="chrome"><button data-role="close">X</button></section>
<time datetime="2019-05-24" class="date-header"><a href="{{ event.link }}">{{ event.date }}</a></time>
<h2 class="event-title"><a href="{{ event.link }}">{{ event }}</a></h2>
{% if event.time.value %}
......
(function () {
var entries = NodeList;
var entries = NodeList
eventCache = {};
// var eventCloseButton = document.querySelector('#detail-container .close-button');
// eventCloseButton.addEventListener('click', function () {
......@@ -22,15 +23,13 @@
};
function setHash(hash) {
if (hash) {
hash = '#' + hash;
}
else {
hash = '/';
}
if (history.pushState) {
history.pushState(null, null, hash);
if (hash) {
history.pushState(null, null, location.pathname + '#' + hash);
}
else {
history.pushState(null, null, location.pathname);
}
}
else {
location.hash = hash;
......@@ -53,21 +52,39 @@
entry.dataset.active = 'true';
var container = document.querySelector('aside.home.event-detail');
container.dataset.loading = 'true';
container.innerHTML = '';
if (entry.id in eventCache) {
delete container.dataset.loading;
container.innerHTML = eventCache[entry.id];
setImageListeners();
container.querySelector('[data-role="close"]').addEventListener('click', close);
} else {
fetch('/api/activities/' + entry.id + '.html', {
method: "GET"
}).then(function (response) {
if (response.ok) {
response.text().then(function (text) {
delete container.dataset.loading;
eventCache[entry.id] = text;
container.innerHTML = text;
setImageListeners();
container.querySelector('[data-role="close"]').addEventListener('click', close);
});
}
});
}
fetch('/api/activities/' + entry.id + '.html', {
method: "GET"
}).then(function (response) {
if (response.ok) {
response.text().then(function (text) {
container.innerHTML = text;
setImageListeners();
});
}
});
}
function close () {
setHash(null);
document.body.classList.remove('event-active-through-click', 'aside-active-through-click');
}
function show(entry, entries) {
document.body.className += ' event-active-through-click';
document.body.classList.add('event-active-through-click', 'aside-active-through-click');
activate(entry, entries);
}
......@@ -82,6 +99,13 @@
return false
}
function unwrap (node) {
var parent = node.parentElement;
while (node.firstChild) {
parent.insertBefore(node.firstChild, node);
}
}
if (window.location.hash) {
var entry = getEntryByHash(window.location.hash);
......@@ -96,7 +120,7 @@
if (entry) {
show(entry, entries);
} else {
document.body.className = document.body.className.replace(/\s*event-active-through-click/, '');
document.body.classList.remove('event-active-through-click', 'aside-active-through-click');
}
};
......@@ -104,10 +128,13 @@
entries = document.querySelectorAll('.event-list .event');
for (var i = 0; i < entries.length; i++) {
unwrap(entries[i].querySelector('h2 a'))
unwrap(entries[i].querySelector('time a'));
(function (entry, entries) {
entry.addEventListener('click', function () {
setHash(entry.id);
show(entry, entries)
show(entry, entries);
});
})(entries[i], entries);
}
......
......@@ -58,8 +58,8 @@
/* ==========================================================================
Custom medias definitions
========================================================================== */
@custom-media --mobile only screen and (max-width: 767px);
@custom-media --mobile-landscape only screen and (max-width: 767px) and (orientation: landscape);
/* @custom-media --mobile only screen and (max-width: 767px); */
/* @custom-media --mobile-landscape only screen and (max-width: 767px) and (orientation: landscape); */
/* ==========================================================================
Variables
......@@ -83,7 +83,7 @@ body {
line-height: var(--line-height);
font-family: "U001";
padding: 0px;
margin: 0px !important;
margin: 0px;
}
/* ==========================================================================
......@@ -322,8 +322,8 @@ body {
left: 20px;
overflow: hidden;
display: grid;
grid-template-columns: [left sidebar-start] 1fr [sidebar-end content-start] 1fr [content-middle] 1fr [content-end right];
grid-template-rows: [top] repeat(2, 1fr) [footer] min-content [bottom];
grid-template-columns: [left sidebar-start] minmax(200px, 1fr) [sidebar-end content-start] 1fr [content-middle] 1fr [content-end right];
grid-template-rows: [top navbar] min-content [map] 2fr [header-content] 1fr [footer] min-content [bottom]; /* possible add 'main' and 'aside' as names for top line. But might be more confusing than adding clarity */
border-left: 2px solid black;
border-right: 2px solid black;
}
......@@ -332,47 +332,44 @@ main, footer {
padding: 1em;
}
header {
#nav--main {
grid-column: sidebar-start;
grid-row: top / footer;
border-right: 2px solid;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 100vh;
}
header nav {
grid-row: navbar;
flex: 0 0 auto;
border-bottom: 2px solid black;
display: flex;
padding: 1em;
}
header nav a {
#nav--main a {
text-decoration: none;
border: none;
}
header nav a:hover {
#nav--main a:hover {
color: var(--bleu-bille);
}
header nav #site-logo {
#nav--main #site-logo {
flex: 0 0 100px;
}
header nav #site-logo img {
#nav--main #site-logo img {
max-width: 100px;
}
header nav ul {
#nav--main ul {
flex: 1 0;
margin: 0;
}
header #header-map {
flex: 2 1;
#toggle--menu {
display: none;
}
#map {
grid-row: map;
grid-column: sidebar-start;
background: var(--rose-pale);
border-bottom: 2px solid black;
background-repeat: no-repeat;
......@@ -381,7 +378,8 @@ header #header-map {
}
#header-content {
flex: 1 0;
grid-row: header-content;
grid-column: sidebar-start;
overflow-y: auto;
padding: 1em;
}
......@@ -398,6 +396,7 @@ main {
overflow-y: auto;
max-height: 100vh;
scroll-padding-top: 5em;
border-left: 2px solid black;
}
......@@ -438,7 +437,7 @@ footer {
.breadcrumbs ul {
list-style-type: none;
margin: 0;
padding: .5em;
padding: .25em .5em;
font-size: var(--font-size-small);
}
......@@ -458,6 +457,10 @@ footer {
margin-left: 1em;
}
.breadcrumbs a {
border-bottom: none;
}
footer .logo-partners {
float: right;
}
......@@ -600,7 +603,7 @@ a.tag {
.trajectory-list section.trajectory--item {
background: var(--rose-pale);
padding: 1em;
outline: 2px solid black;
outline: 2px solid;
outline-offset: 0px;
padding: 1em;
position: relative;
......@@ -737,7 +740,7 @@ section.audio {
display: block;
height: 10px;
width: 45px;
padding-bottom: 20px;
padding-bottom: 12px;
float: left;
}
......@@ -747,23 +750,24 @@ section.audio {
}
.inline-navigation {
margin: -2em -1em 1em -1em;
padding: .75em 1em .5em 1em;
margin: -2em -1.25em 1em -1.25em;
padding: .75em 1.25em .5em 1.25em;
position: sticky;
top: -1em;
top: -1.25em;
background: white;
z-index: 5;
border-bottom: 2px solid;
z-index: 1;
border-bottom: 2px solid;
font-size: var(--font-size-small);
}
.inline-navigation ul:before {
content: "Go to:";
content: "Jump to:";
}
.produser-list:target:before,
.trajectory-list:target:before {
margin: -3.5em 0 0;
height: 3.5em;
margin: -5.5em 0 0;
height: 5.5em;
content: '';
display: block;
}
......@@ -878,28 +882,10 @@ main.event-list {
cursor: pointer;
}
.event-list .event[data-active],
.event-list .event:hover {
background-color: var(--bleu-bille);
color: white;
}
.event[data-active] .read-further:after,
.event:hover .read-further:after {
background: url(images/jump-arrow-white.svg) no-repeat;
}
.read-further:hover:after,
.event:hover .read-further:hover:after,
.event[data-active] .read-further:hover:after{
background: url(images/jump-arrow-orange.svg) no-repeat;
}
aside.event-detail {
background: var(--bleu-bille);
color: white;
padding: var(--line-height) 1em;
padding: calc(.5 * var(--line-height)) 1em var(--line-height) 1em;
}
.home h2 a,
......@@ -911,4 +897,244 @@ aside.event-detail {
aside.event-detail .question {
-webkit-text-stroke: 1.1px white;
color: transparent;
}
/**
* Header for activities listing
*/
.sticky-section-header {
display: block;
padding: .25em .5em;
font-size: var(--font-size-small);
border-bottom: 2px solid black;
position: sticky;
z-index: 1;
top: 0;
background: white;
}
.chrome {
position: sticky;
top: 0;
margin-right: -.25em;
float: right;
/* background: white; */
}
/* .chrome button {
color: inherit;
font-family: inherit;
border: none;
background: none;
font-size: inherit;
} */
.chrome button {
color: black;
font-family: inherit;
border: none;
background: white;
font-size: inherit;
border: 2px solid black;
font-size: var(--font-size-small);
}
@media screen and (min-width: 768px) {
.event-list .event[data-active],
.event-list .event:hover {
background-color: var(--bleu-bille);
color: white;
}
.event[data-active] .read-further:after,
.event:hover .read-further:after {
background: url(images/jump-arrow-white.svg) no-repeat;
}
.read-further:hover:after,
.event:hover .read-further:hover:after,
.event[data-active] .read-further:hover:after{
background: url(images/jump-arrow-orange.svg) no-repeat;
}
.chrome {
display: none;
}
}
@media screen and (max-width: 767px) {
:root {
--font-size: 13pt;
--line-height: 16pt;
}
body {
position: relative;
top: initial;
right: initial;
bottom: initial;
left: initial;
overflow: initial;
/* Redefining the grid. */
grid-template-columns: [left content-start] 1fr [content-end right];
grid-template-rows: [top navbar] calc(2.5 * var(--line-height)) [map] min-content [header-content] min-content [main] min-content [aside] min-content [footer] min-content [bottom];
margin-left: .25em;
margin-right: .25em;
}
#nav--main {
grid-row: top;
grid-column: left / right;
position: sticky;
top: 0;
background: white;
z-index: 2;
padding: .5em;
justify-content: space-between;
}
#map {
height: 35vh;
}
#header-content, #map {
border-bottom: 2px solid black;
grid-column: left / right;
display: none;
}
.home #header-content,
.home #map {
display: initial;
}
main {
grid-row: main;
grid-column: left / right;
overflow-y: initial;
max-height: initial;
border-left: initial;
border-right: initial;
}
.two-columns main {
grid-row: main;
grid-column: left / right;
border-left: initial;
border-right: initial;
}
.two-columns aside {
grid-row: aside;
grid-column: left / right;
overflow-y: initial;
border-left: initial;
border-right: initial;
}
footer {
border-top: 2px solid;
grid-column: left / right;
grid-row: footer;
background: var(--rose-karel);
}
#site-logo img {
max-height: 100%;
max-width: 100%;
}