Conservancy/symposion_app
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make narrow-screen schedule details more distinct

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

11
pinaxcon/templates/symposion/schedule/_grid.html
View file

@ -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>

8
static/src/css/app.css
View file

@ -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) {