Styling for schedule

Update to Bootstrap 4 throughout.
Remove unused blocks and elements from past conferences.
Ensure schedule works in print mode.
This commit is contained in:
Joel Addison 2019-10-20 23:16:29 +10:00
parent 7365eeacc8
commit 1022a42cf7
16 changed files with 210 additions and 197 deletions

View file

@ -37,8 +37,8 @@
</header>
{% if messages %}
<div class="container my-5 alert alert-primary">
<ul class="messagelist d-print-none list-unstyled">
<div class="container my-5 alert alert-primary d-print-none">
<ul class="messagelist list-unstyled">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
@ -47,9 +47,11 @@
{% endif %}
<main role="main" class="{% block main_class %}container{% endblock %}">
<div class="page-header mb-5">
<h1 class="page-title">{% block page_title %}{% endblock %}</h1>
<p class="lead">{% block page_lead %}{% endblock %}</p>
<div class="row">
<div class="col page-header">
<h1 class="page-title">{% block page_title %}{% endblock %}</h1>
<p class="lead">{% block page_lead %}{% endblock %}</p>
</div>
</div>
{% block body_base %}

View file

@ -1,21 +1,21 @@
{% load lca2018_tags %}
{% load waffle_tags %}
<table class="calendar table">
<table class="calendar table table-bordered">
<thead>
<tr>
<th class="time">&nbsp;</th>
{% for room in timetable.rooms %}
<th>{{ room.name }}</th>
{% endfor %}
<th scope="row" class="time"><em>Room</em></th>
{% for room in timetable.rooms %}
<th scope="column">{{ room.name }}</th>
{% endfor %}
</tr>
{% with timetable|day_has_tracks:timetable.day as has_tracks %}
{% if has_tracks %}
<tr>
<th class="time">&nbsp;</th>
<th scope="row" class="time"><em>Miniconf</em></th>
{% for room in timetable.rooms %}
{% with room|trackname:timetable.day as track_name %}
<th class="track-name">{% if track_name %}<p>{{ track_name }}{% endif %}</th>
<th scope="column" class="track-name">{% if track_name %}<p>{{ track_name }}</p>{% endif %}</th>
{% endwith %}
{% endfor %}
</tr>
@ -25,17 +25,19 @@
<tbody>
{% for row in timetable %}
{% if forloop.last %}
{% else %}
<tr class="calendar-row">
<td class="time"><p>{{ row.time|date:"h:iA" }} <br />{{ row.end|date:"h:iA" }}</p></td>
<th scope="row" class="time"><p>{{ row.time|date:"h:iA" }}</p></th>
{% for slot in row.slots %}
<td class="slot slot-{{ slot.kind.label }}" colspan="{{ slot.colspan }}" rowspan="{% if slot.rowspan > 1%}{{ slot.rowspan|add:-1 }}{% else %}1{% endif %}" >
{% with slot.kind.label.lower as label %}
{% if label == "talk" or label == "tutorial" %}
{% if slot.content %}
<div>
<p><a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a><br />{{ slot.content.speakers|join:", " }}</p>
<p>
<a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a>
<br />
{{ slot.content.speakers|join:", " }}
</p>
</div>
{% flag "session_chair" %}
{% if slot.sessions %}
@ -58,7 +60,7 @@
{% if slot.content_override %}
{{ slot.content_override_html|safe }}
{% else %}
<div class="center-flex">
<div class="d-flex align-items-center">
<p>{{ slot.kind.label }}</p>
</div>
{% endif %}
@ -66,9 +68,10 @@
{% endwith %}
</td>
{% endfor %}
{% if forloop.last %}
<td colspan="{{ timetable.rooms|length }}"><em>Day End</em></td>
{% endif %}
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>

View file

@ -7,17 +7,20 @@
{% if forloop.last %}
{% else %}
{% for slot in row.slots %}
<div class="mobile-slot my-3" style="border-bottom: 1px solid #CCD5C5;">
<div class="mobile-slot my-3">
{% if forloop.first %}
<h3>{{ row.time|date:"h:iA" }}&ndash;{{ row.end|date:"h:iA" }}</h3>
{% endif %}
{% with slot.kind.label.lower as label %}
{% if label == "talk" or label == "tutorial" %}
{% if slot.content %}
<p><a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a></p>
<p>{{ slot.content.speakers|join:", "}}</p>
{% listlookup timetable.rooms forloop.counter0 as value %}
<p><em>{{ value }}<br />ends {{ slot.end }}</em></p>
<p>
<a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a>
<br>
{{ slot.content.speakers|join:", "}}
</p>
{% listlookup timetable.rooms forloop.counter0 as room_names %}
<p><em>{{ room_names }}<br />ends {{ slot.end }}</em></p>
{% endif %}
{% else %}
<p>{{ slot.kind.label }}</p>
@ -27,4 +30,3 @@
{% endfor %}
{% endif %}
{% endfor %}

View file

@ -1,9 +1,10 @@
<a
class="nav-item nav-link {% if active %}active{% endif %}"
id="{{ section.schedule.section.slug }}-{{ timetable.day.date|date:"l"|lower}}-tab"
data-toggle="tab" href="#{{section.schedule.section.slug}}-{{ timetable.day.date|date:"l"|lower}}"
class="nav-link {% if active %}active{% endif %}"
id="schedule_day_{{ label|lower }}-tab"
href="#{{ label|lower }}"
data-toggle="pill"
role="tab"
aria-controls="{{section.schedule.section.slug}}-{{ timetable.day.date|date:"l"|lower}}"
aria-controls="schedule_day_{{ label|lower }}"
aria-selected="{% if active %}true{% else %}false{% endif %}">
{{ label }}
</a>
</a>

View file

@ -7,22 +7,22 @@
{% load thumbnail %}
{% block head_title %}Presentation: {{ presentation.title }}{% endblock %}
{% block page_title %}{{ presentation.title }}{% endblock %}
{% block page_lead %}{{ presentation.slot.rooms.0 }} | {{ presentation.slot.day.date|date:"D d M" }} | {{ presentation.slot.start}}&ndash;{{ presentation.slot.end }}{% endblock %}
{% block content %}
{% if presentation.unpublish %}
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<h1 class="mb-4" style="max-width: 800px;">{{ presentation.title }}</h1>
<p>
<strong>{{ presentation.slot.rooms.0 }} | {{ presentation.slot.day.date|date:"D d M" }} | {{ presentation.slot.start}}&ndash;{{ presentation.slot.end }}</strong>
</p>
<hr class="green">
<div class="col">
<p><strong>Presentation not published.</strong></p>
</div>
</div>
{% endif %}
<div class="col-12 col-lg-3 offset-lg-1 order-2 order-md-1 px-4" >
<p class="pt-4"><strong>Presented by</strong></p>
<div class="row presentation-details">
<div class="col-md-3">
<h2 class="mt-4">Presented by</h4>
<ul class="list-unstyled">
{% for speaker in presentation.speakers %}
<li class="mb-4 pb-2">
{% speaker_photo speaker 120 as speaker_photo_url %}
@ -40,17 +40,14 @@
</p>
</li>
{% endfor %}
</ul>
</div>
<div class="col-12 col-lg-7 order-1 order-lg-2 px-4 talk-abstract">
<h4 class="mt-4">Abstract</h4>
<div class="col-md-9 presentation-abstract">
<h2 class="mt-4">Abstract</h4>
{% autoescape off %}
<div class="abstract pb-4"><p>{{ presentation.abstract_html|safe|clean_text|urlize }}</p></div>
{% endautoescape %}
</div>
{% if presentation.unpublish %}
<p><strong>Presentation not published.</strong></p>
{% endif %}
</div>
{% endblock %}

View file

@ -1,7 +0,0 @@
{% extends "content_page.html" %}
{% load staticfiles %}
{% comment %}
{% block header_background_image %}{% static "lca2018/images/hobart_bg_optimised.jpg" %}{% endblock %}
{% endcomment %}

View file

@ -1,119 +1,106 @@
{% extends "utility_page.html" %}
{% extends "site_base.html" %}
{% load i18n %}
{% load cache %}
{% load lca2018_tags %}
{% block head_title %}Conference Schedule{% endblock %}
{% block header_title %}Conference Schedule{% endblock %}
{% block body_class %}bg-primary text-secondary{% endblock body_class %}
{% block right %}
{% endblock %}
{% block navbar %}{% include 'nav.html' with color='green' %}{% endblock %}
{% block main_class %}container-fluid{% endblock %}
{% block page_title %}Conference Schedule{% endblock %}
{% block content %}
<div class="schedule-header text-center">
<h1>Schedule</h1>
<h3 id="schedule-date">wednesday 23 January 2019</h3>
<nav class="mb-4">
<div class="nav schedule-nav" id="schedule-nav" role="tablist">
Monday miniconfs
{% for section in sections %}
{% if "Miniconf" in section.schedule.section.name %}
{% for timetable in section.days %}
{% if timetable.day.date|date:"Y-m-d" == "2019-01-21" %}
{% include "symposion/schedule/_schedule_nav_link.html" with label=section.schedule.section.name|cut:" Miniconf" %}
{% endif %}
<div class="row d-print-none">
<div class="col">
<ul class="nav nav-pills flex-column flex-md-row" id="schedule-tabs" role="tablist">
{% for section in sections %}
{% for timetable in section.days %}
<li class="nav-item flex-md-fill text-md-center">
{% include "symposion/schedule/_schedule_nav_link.html" with active=forloop.first label=timetable.day.date|date:"l" %}
</li>
{% endfor %}
{% endfor %}
{% endif %}
{% endfor %}
<br />
Tuesday miniconfs
{% for section in sections %}
{% if "Miniconf" in section.schedule.section.name %}
{% for timetable in section.days %}
{% if timetable.day.date|date:"Y-m-d" == "2019-01-22" %}
{% include "symposion/schedule/_schedule_nav_link.html" with label=section.schedule.section.name|cut:" Miniconf" %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
<br />
{% for section in sections %}
{% if "Miniconf" not in section.schedule.section.name %}
{% for timetable in section.days %}
{% include "symposion/schedule/_schedule_nav_link.html" with active=forloop.first label=timetable.day.date|date:"l" %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</nav>
</div>
<div class="schedule-page bg-secondary pt-4 pb-4 mb-0">
<div class="container">
<div class="row">
<div class="col">
<div class="tab-content">
{% for section in sections %}
{% for timetable in section.days %}
<div class="tab-pane fade {% if timetable.day.date|date:'Y-m-d' == '2019-01-23' %}show active{% endif %}" id="{{ section.schedule.section.slug }}-{{ timetable.day.date|date:"l"|lower}}"
role="tabpanel" aria-labelledby="{{ section.schedule.section.slug }}-{{ timetable.day.date|date:"l"|lower}}-tab">
<div class="table-responsive hidden-md-down">
{% include "symposion/schedule/_grid.html" %}
</div>
<div class="mobile-schedule">
{% include "symposion/schedule/_mobile.html" %}
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="tab-content d-print-block my-3" id="schedule-tabContent">
{% for section in sections %}
{% cache 600 "schedule-table" section.schedule.section %}
{% for timetable in section.days %}
<div class="row tab-pane fade {% if forloop.first %}show active{% endif %} d-print-block" id="{{ timetable.day.date|date:"l"|lower}}" role="tabpanel" aria-labelledby="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab">
<div class="col-12">
<h2 class="my-4">
{{ section.schedule.section.name }}
<span class="clearfix d-sm-block d-md-none"></span>
<small class="text-muted">{{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</small>
</h2>
<div class="table-responsive d-none d-md-block">
{% include "symposion/schedule/_grid.html" %}
</div>
<div class="mobile-schedule d-sm-block d-md-none">
{% include "symposion/schedule/_mobile.html" %}
</div>
</div>
</div>
{% endfor %}
{% endcache %}
{% endfor %}
</div>
{% endblock %}
{%block footer_class %}footer-no-margin{% endblock %}
{% block scripts_extra %}
<script type="text/javascript">
var dates = {
'monday': '21',
'tuesday': '22',
'wednesday': '23',
'thursday': '24',
'friday': '25'
};
var trailing = ' January 2019';
<script type="text/javascript">
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var controls = e.target.attributes['aria-controls'].value
var day = controls.split('-');
day = day[day.length - 1];
$('#schedule-date').text(day + ' ' + dates[day] + trailing);
var loc = window.location.toString().split('?')[0] += '?schedule=' + controls;
window.history.pushState({path: loc}, '', loc);
})
</script>
fragment = window.location.hash.toLowerCase().substring(1);
<script>
const urlParams = new URLSearchParams(window.location.search);
const scheduleName = urlParams.get('schedule');
if(scheduleName !== null) {
$('a[href="#' + scheduleName + '"]').tab('show');
} else {
var currLoc = $('a[data-toggle="tab"].active').first().attr('aria-controls');
var loc = window.location.toString().split('?')[0] += '?schedule=' + currLoc;
window.history.replaceState({path: loc}, '', loc);
if (!fragment) {
OFFSET = -10 * (60 * 60 * 1000); // Gold Coast is 10 hours ahead of UTC in Jan.
JAN = 0; // because January is 0, not 1
fragments = [
{"day": "monday", "time": Date.UTC(2020, JAN, 13)},
{"day": "tuesday", "time": Date.UTC(2020, JAN, 14)},
{"day": "wednesday", "time": Date.UTC(2020, JAN, 15)},
{"day": "thursday", "time": Date.UTC(2020, JAN, 16)},
{"day": "friday", "time": Date.UTC(2020, JAN, 17)},
{"day": "saturday", "time": Date.UTC(2020, JAN, 18)},
];
now = new Date().getTime();
for (i = 0; i < 5; i++) {
f = fragments[i];
g = fragments[i+1];
if ((f.time + OFFSET) <= now && now < (g.time + OFFSET)) {
fragment = f.day;
}
}
}
document.addEventListener("hashchange", function(event) {
fragment = window.location.hash.toLowerCase().substring(1);
if (!fragment) {
return;
};
fragmentid = "#schedule_day_" + fragment + "-tab";
$(fragmentid).tab('show');
});
$(".nav-item").click(function(event) {
// This updates the window location fragment so that
// the URL bar is updated, and so that when you go
// back, it loads the right page.
// len("schedule_day_") == 13
day_tab = event.target.id.substring(13);
day = day_tab.substr(0, day_tab.length-4);
if(history.pushState) {
history.pushState(null, null, "#" + day);
}
});
</script>
{{ block.super }}
{% endblock %}
{{ block.super }}
{% endblock %}

View file

@ -1,28 +1,29 @@
{% extends "symposion/schedule/public_base.html" %}
{% extends "site_base.html" %}
{% load i18n %}
{% load cache %}
{% load lca2018_tags %}
{% load sitetree %}
{% block head_title %}{{ schedule.section }} Schedule{% endblock %}
{% block header_title %}{{ schedule.section }} Schedule{% endblock%}
{% block header_paragraph %}{{ schedule.header_paragraph.text }}{% endblock%}
{% block header_inset_image %}{% illustration "devil.svg" %}{% endblock %}
{% block body_class %}full{% endblock %}
{% block head_title %}{{ schedule.section.name }} Schedule{% endblock %}
{% block page_title %}{{ schedule.section.name }} Schedule{% endblock%}
{% block content %}
<div class="page-head">
{% block breadcrumbs %}{% sitetree_breadcrumbs from "main" %}{% endblock %}
</div>
{% cache 600 "schedule-table" schedule.section %}
{% cache 600 "schedule-detail-table" schedule.section %}
{% for timetable in days %}
<h3>{{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</h3>
<br />
{% include "symposion/schedule/_grid.html" %}
<br />
<div class="row">
<div class="col-12">
<h2 class="my-4">
{{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}
</h2>
<div class="table-responsive d-none d-md-block">
{% include "symposion/schedule/_grid.html" %}
</div>
<div class="mobile-schedule d-sm-block d-md-none">
{% include "symposion/schedule/_mobile.html" %}
</div>
</div>
</div>
{% endfor %}
{% endcache %}
{% endblock %}

View file

@ -1,4 +1,4 @@
{% extends "symposion/schedule/public_base.html" %}
{% extends "site_base.html" %}
{% load i18n %}
{% load cache %}
@ -7,14 +7,12 @@
{% block head_title %}Presentation Listing{% endblock %}
{% block header_title %}{{ schedule.section.name }} List{% endblock %}
{% block header_paragraph %}{{ schedule.header_paragraph.text }}{% endblock%}
{% block header_inset_image %}{% illustration "lavender.svg" %}{% endblock %}
{% block page_title %}Presentation List{% endblock %}
{% block page_lead %}{{ schedule.section.name }}{% endblock%}
{% block breadcrumbs %}{% sitetree_breadcrumbs from "main" %}{% endblock %}
{% block content %}
<div class="jumbotron">
{% cache 600 "schedule-list" schedule.section.name %}
<ul>
{% for presentation in presentations %}
@ -31,5 +29,4 @@
{% endfor %}
</ul>
{% endcache %}
</div>
{% endblock %}

View file

@ -1,4 +1,4 @@
{% extends "symposion/schedule/public_base.html" %}
{% extends "site_base.html" %}
{% load lca2018_tags %}
{% load sitetree %}
@ -11,9 +11,6 @@
{% block breadcrumbs %}{% sitetree_breadcrumbs from "main" %}{% endblock %}
{% block header_inset_image %}{{ block.super }}{% endblock %}
{% block header_background_image %}{{ block.super }}{% endblock %}
{% block header_title %}Session: {{ session }}{% endblock %}

View file

@ -1,4 +1,4 @@
{% extends "symposion/schedule/public_base.html" %}
{% extends "site_base.html" %}
{% load lca2018_tags %}
{% load sitetree %}
@ -11,10 +11,6 @@
{% block breadcrumbs %}{% sitetree_breadcrumbs from "main" %}{% endblock %}
{% block header_inset_image %}{{ block.super }}{% endblock %}
{% block header_background_image %}{{ block.super }}{% endblock %}
{% block header_title %}Sessions{% endblock %}
{% block header_paragraph %}

View file

@ -1,4 +1,4 @@
{% extends "symposion/schedule/public_base.html" %}
{% extends "site_base.html" %}
{% load i18n %}
{% load lca2018_tags %}

View file

@ -1,4 +1,4 @@
{% extends "content_page.html" %}
{% extends "site_base.html" %}
{% load staticfiles %}
{% block head_title %}{% block page_title %}{% endblock %}{% endblock %}

View file

@ -36,11 +36,6 @@ def proposal_permission(context, permname, proposal):
return context.request.user.has_perm(perm)
@register.simple_tag(takes_context=False)
def illustration(name):
return staticfiles.static('lca2018/images/') + name
@register.simple_tag(takes_context=True)
def speaker_photo(context, speaker, size):
''' Provides the speaker profile, or else fall back to libravatar or gravatar. '''
@ -81,6 +76,21 @@ def conference_name():
return conference_models.Conference.objects.get(id=CONFERENCE_ID).title
@register.simple_tag()
def conference_start_date():
return conference_models.Conference.objects.get(id=CONFERENCE_ID).start_date
@register.simple_tag()
def conference_end_date():
return conference_models.Conference.objects.get(id=CONFERENCE_ID).end_date
@register.simple_tag()
def conference_timezone():
return conference_models.Conference.objects.get(id=CONFERENCE_ID).timezone
@register.filter()
def day_has_tracks(timetable, day):
try:

View file

@ -61,6 +61,7 @@ def clean_text(txt):
# Remove double/triple/+ spaces from `txt` and replace with single space
return re.sub(r' {2,}' , ' ', txt)
@register.filter
def twitter_handle(txt):
# Add @ to twitter handle if not present

View file

@ -4,6 +4,12 @@
/* START LCA2020 */
$dawn-sea: rgb(0, 177, 197);
$blaze : rgb(250, 166, 26);
$dusk-sea : rgb(0, 113, 144);
$noon-sea : rgb(0, 141, 162);
body {
font-family: 'Source Sans Pro', sans-serif;
}
@ -16,19 +22,19 @@ h3, .h3 {
}
.bg-dawn-sea {
background-color: rgb(0, 177, 197);
background-color: $dawn-sea;
}
.bg-blaze {
background-color: rgb(250, 166, 26);
background-color: $blaze;
}
.bg-dusk-sea {
background-color: rgb(0, 113, 144);
background-color: $dusk-sea;
}
.bg-noon-sea {
background-color: rgb(0, 141, 162);
background-color: $noon-sea;
}
.banner-subscribe {
@ -50,7 +56,7 @@ h3, .h3 {
}
.footer {
border-top: 1px rgb(0, 177, 197) solid;
border-top: 1px solid $dawn-sea;
}
.footer-logo {
@ -66,6 +72,18 @@ h3, .h3 {
background-color: #fff;
}
.presentation-details {
border-top: 1px solid $noon-sea;
}
.presentation-abstract {
border-left: 1px solid $noon-sea;
}
.mobile-slot {
border-bottom: 1px solid $noon-sea;
}
/* END LCA2020 */
.messagelist {
@ -80,3 +98,11 @@ label.label-required:after { content: ' *'; }
font-family: Hack, monospace;
white-space: pre-wrap;
}
@media print {
.fade {
&:not(.show) {
opacity: 100 !important;
}
}
}