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.
This commit is contained in:
James Polley 2018-01-12 14:55:42 +11:00
parent 54f53cd2c6
commit ffe0f64182
2 changed files with 11 additions and 8 deletions

View file

@ -1,3 +1,4 @@
{% load lca2018_tags %} {% load lca2018_tags %}
{% load waffle_tags %} {% load waffle_tags %}
<table class="calendar table table-bordered"> <table class="calendar table table-bordered">
@ -40,14 +41,12 @@
{% if slot.sessions %} {% if slot.sessions %}
<div> <div>
{% for session in slot.sessions.all %} {% for session in slot.sessions.all %}
<em>Session chair:
{% if not session.chair %} {% if not session.chair %}
<br />
<a href="{% url "schedule_session_detail" session.id %}">Volunteer! 🙋</a> <a href="{% url "schedule_session_detail" session.id %}">Volunteer! 🙋</a>
{% elif session.chair.user == request.user %} {% elif session.chair.user == request.user %}
<br /> <a href="{% url "schedule_session_detail" session.id %}"><strong>You!</strong></a>
<a href="{% url "schedule_session_detail" session.id %}">(You are session chair)</a> {% endif %}</em>
{% endif %}
</a>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
@ -64,7 +63,7 @@
{% if "break" in slot.kind.label %} {% if "break" in slot.kind.label %}
{% else %} {% else %}
<span class="room"> <span class="room">
{{ slot.rooms|join:", "}} {{ slot.rooms|join:", "}}<span class="endtime"> ends {{ slot.end|date:"h:iA" }}</span>
</span> </span>
{% endif %} {% endif %}
</td> </td>

View file

@ -206,12 +206,15 @@ div.system-message p.system-message-title {
/* Schedule, proposal and presenter display */ /* Schedule, proposal and presenter display */
/* Make sure twitter/link buttons get displayed */ /* Make sure twitter/link buttons get displayed */
.room { .mw760, .room {
display: none; display: none;
} }
.speaker { .speaker {
display: block; display: block;
} }
.endtime {
font-style: italic;
}
.presenters .btn-group { .presenters .btn-group {
display: inline-flex; display: inline-flex;
@ -220,7 +223,8 @@ div.system-message p.system-message-title {
.presenters .btn-svg { width: 20px; } .presenters .btn-svg { width: 20px; }
@media all and (max-width: 760px) { @media all and (max-width: 760px) {
.room { display: block; } .mw760, .room { display: block; }
.speaker { font-weight: bold; }
} }
@media only screen and (max-width: 760px) { @media only screen and (max-width: 760px) {