From ffe0f64182ac5a18a0b08ce8aabad008e93193b2 Mon Sep 17 00:00:00 2001 From: James Polley <jp@jamezpolley.com> Date: Fri, 12 Jan 2018 14:55:42 +1100 Subject: [PATCH] Make narrow-screen schedule details more distinct In the narrow view, lots of details that aren't in the normal view appear to compensate for not having clear row/column headers any more. However, all the detail can look very same-same; this tweak makes rooms and end times more distinct. Session chair info is made always italic, and a label is added to make it clear that this person is not the speaker. --- pinaxcon/templates/symposion/schedule/_grid.html | 11 +++++------ static/src/css/app.css | 8 ++++++-- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/pinaxcon/templates/symposion/schedule/_grid.html b/pinaxcon/templates/symposion/schedule/_grid.html index fb8cbfd0..bdbdcb4f 100644 --- a/pinaxcon/templates/symposion/schedule/_grid.html +++ b/pinaxcon/templates/symposion/schedule/_grid.html @@ -1,3 +1,4 @@ + {% load lca2018_tags %} {% load waffle_tags %} <table class="calendar table table-bordered"> @@ -40,14 +41,12 @@ {% if slot.sessions %} <div> {% for session in slot.sessions.all %} + <em>Session chair: {% if not session.chair %} - <br /> <a href="{% url "schedule_session_detail" session.id %}">Volunteer! 🙋</a> {% elif session.chair.user == request.user %} - <br /> - <a href="{% url "schedule_session_detail" session.id %}">(You are session chair)</a> - {% endif %} - </a> + <a href="{% url "schedule_session_detail" session.id %}"><strong>You!</strong></a> + {% endif %}</em> {% endfor %} </div> {% endif %} @@ -64,7 +63,7 @@ {% if "break" in slot.kind.label %} {% else %} <span class="room"> - {{ slot.rooms|join:", "}} + {{ slot.rooms|join:", "}}<span class="endtime"> ends {{ slot.end|date:"h:iA" }}</span> </span> {% endif %} </td> diff --git a/static/src/css/app.css b/static/src/css/app.css index d86d51d7..c7ba24ca 100644 --- a/static/src/css/app.css +++ b/static/src/css/app.css @@ -206,12 +206,15 @@ div.system-message p.system-message-title { /* Schedule, proposal and presenter display */ /* Make sure twitter/link buttons get displayed */ -.room { +.mw760, .room { display: none; } .speaker { display: block; } +.endtime { + font-style: italic; +} .presenters .btn-group { display: inline-flex; @@ -220,7 +223,8 @@ div.system-message p.system-message-title { .presenters .btn-svg { width: 20px; } @media all and (max-width: 760px) { - .room { display: block; } + .mw760, .room { display: block; } + .speaker { font-weight: bold; } } @media only screen and (max-width: 760px) {