symposion_app Changeset - ffe0f64182ac

Changeset - ffe0f64182ac

Parent rev.

Child rev.

[Not reviewed]

0 2 0

James Polley - 6 years ago 2018-01-12 13:26:49
jp@jamezpolley.com

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.

2 files changed with 11 insertions and 8 deletions:

pinaxcon/templates/symposion/schedule/_grid.html

static/src/css/app.css

0 comments (0 inline, 0 general)

pinaxcon/templates/symposion/schedule/_grid.html

➞

Show inline comments

 {% load lca2018_tags %}
 {% load waffle_tags %}
 <table class="calendar table table-bordered">
   <thead>
     <tr>
       <th class="time">&nbsp;</th>
         {% for room in timetable.rooms %}
           <th>{{ room.name }}</th>
           {% endfor %}
     </tr>
     {% with timetable|day_has_tracks:timetable.day as has_tracks %}
       {% if has_tracks %}
@@ ... / @@ -31,48 +32,46 @@ @@
               {% if not slot.content %}
               {% else %}
                 <span class="title">
                   <a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a>
                 </span>
                 <span class="speaker">
                   {{ slot.content.speakers|join:", " }}
                 </span>
                 {% flag "session_chair" %}
                   {% 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 %}
                 {% endflag %}
               {% endif %}
             {% elif slot.kind.label == "shortbreak" %}
             {% else %}
               {% if slot.content_override %}
                 {{ slot.content_override_html|safe }}
               {% else %}
                 {{ slot.kind.label }}
               {% endif %}
             {% endif %}
             {% 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>
         {% endfor %}
         {% if forloop.last %}
           <td colspan="{{ timetable.rooms|length }}"></td>
         {% endif %}
       </tr>
     {% endfor %}
   </tbody>
 </table>

static/src/css/app.css

➞

Show inline comments

@@ ... / @@ -197,39 +197,43 @@ div.system-message p.system-message-title { @@
 .StripeElement--invalid {
     border-color: #fa755a;
+}
 .StripeElement--webkit-autofill {
     background-color: #fefde5 !important;
+}
 /* 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;
     margin-left: 10px;
+}
 .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) {
 	/* Force table to not be like tables anymore */
 	table {
         display: table-row;
+    }
     thead {
         display: none;
+    }
     tbody, th, td, tr {
 		display: block;

0 comments (0 inline, 0 general)