symposion_app Changeset - fa9bb1a9f9d2

Changeset - fa9bb1a9f9d2

Parent rev.

Child rev.

[Not reviewed]

0 4 0

Christopher Neugebauer - 7 years ago 2016-12-10 06:11:40
_@chrisjrn.com

Adds mobile-friendly schedule view and paged schedule view (#81)

* Adds responsive mobile CSS for schedule timetable

* Adds by-day schedule view

* Displays content_override in schedule

* Adds twitter/homepage links for speakers.

4 files changed with 124 insertions and 40 deletions:

pinaxcon/templates/symposion/schedule/_grid.html

pinaxcon/templates/symposion/schedule/presentation_detail.html

pinaxcon/templates/symposion/schedule/schedule_conference.html

static/src/lca2017/css/app.css

0 comments (0 inline, 0 general)

pinaxcon/templates/symposion/schedule/_grid.html

➞

Show inline comments

@@ ... / @@ -10,7 +10,7 @@ @@
   <tbody>
     {% for row in timetable %}
       <tr>
         <td class="time">{{ row.time|date:"h:iA" }}</td>
+        <td class="time"><h4>{{ row.time|date:"h:iA" }}</h4></td>
         {% for slot in row.slots %}
           <td class="slot slot-{{ slot.kind.label }}" colspan="{{ slot.colspan }}" rowspan="{{ slot.rowspan }}">
             {% if slot.kind.label == "talk" or slot.kind.label == "tutorial" %}
@@ ... / @@ -22,11 +22,14 @@ @@
                 <span class="speaker">
                   {{ slot.content.speakers|join:", " }}
                 </span>
                 <span class="room">
                   {{ slot.rooms|join:", "}}
                 </span>
               {% endif %}
             {% elif slot.kind.label == "shortbreak" %}
             {% else %}
               {% if slot.content_override.raw %}
                 {{ slot.content_override.rendered|safe }}
               {% if slot.content_override %}
                 {{ slot.content_override_html|safe }}
               {% else %}
                 {{ slot.kind.label }}
               {% endif %}

pinaxcon/templates/symposion/schedule/presentation_detail.html

➞

Show inline comments

@@ ... / @@ -49,6 +49,24 @@ @@
     {% include "lca2017/_right_floating_image.html" with image_url=speaker_photo_url %}
     <h3><a href="{% url "speaker_profile" speaker.pk %}">{{ speaker }}</a></h3>
     {% if speaker.homepage or speaker.twitter_username %}
       <p><div class="btn-group">
         {% if speaker.homepage %}
           <a href="{{ speaker.homepage}}" class="btn-svg" title="Homepage">
             {% include "cms_pages/home_page_blocks/btn_generic_link.html" %}
           </a>
         {% endif %}
         {% if speaker.twitter_username %}
           <a href="https://twitter.com/{{ speaker.twitter_username }}" class="btn-svg" title="{{ speaker}} on twitter">
             {% include "cms_pages/home_page_blocks/btn_twitter.html" %}
           </a>
         {% endif %}
       </div></p>
     {% endif %}
     {{ speaker.biography_html|safe}}
   {% endfor %}

pinaxcon/templates/symposion/schedule/schedule_conference.html

➞

Show inline comments

@@ ... / @@ -15,19 +15,36 @@ @@
 {% block right %}
 {% endblock %}
-{% block content %}
+{% block content_base %}
   <div class="page-head">
     {% block breadcrumbs %}{% endblock %}
   </div>
   {% for section in sections %}
    {% cache 600 "schedule-table" section.schedule.section %}
       {% for timetable in section.days %}
         <h3>{{ section.schedule.section.name }} — {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</h3>
         {% include "symposion/schedule/_grid.html" %}
   <div class="panel panel__compact">
     <div class="panel--content">
       <div class="panel--tab-controls">
         <div class="panel--tabs">
           {% for section in sections %}
             {% for timetable in section.days %}
               <a data-tab-control="{{ timetable.day.date|date:"l"}}" class="panel--tab-switch {% if forloop.is_first and forloop.parentloop.is_first %}is-active{% endif %}">{{ timetable.day.date|date:"l"}}</a>
             {% endfor %}
           {% endfor %}
         </div>
       </div>
       {% for section in sections %}
          {% cache 600 "schedule-table" section.schedule.section %}
             {% for timetable in section.days %}
               <div data-tab-content="{{ timetable.day.date|date:"l"}}" class="panel--tab-content is-active">
                 <h3>{{ section.schedule.section.name }} — {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</h3>
                 {% include "symposion/schedule/_grid.html" %}
               </div>
             {% endfor %}
           {% endcache %}
       {% endfor %}
     {% endcache %}
   {% endfor %}
     </div>
   </div>
 {% endblock %}

static/src/lca2017/css/app.css

➞

Show inline comments

@@ ... / @@ -1607,43 +1607,89 @@ table.alt tr:not(:last-of-type) { @@
   margin-top: 2em;
+}
 /* Schedule timetable needs some more specific font sizes */
 .calendar td {
   font-size: 0.9vw;
+}
 /* Schedule timetable for mobile */
 .slot {
   padding-left: 0.625rem;
   padding-top: 0.2rem;
   padding-bottom: 0.625rem;
   padding-right: 0.625rem;
   vertical-align: middle;
+}
 @media only screen and (max-width: 480px)  {
 .calendar th {
   border-bottom: 1px solid #0c486c;
   border-left: 0px !important;
+}
   .calendar {
     line-height: 1.0;
+  }
 .calendar .title {
   display: block;
   padding-bottom: 0.5vh;
+}
   .calendar thead {
     display: none;
+  }
 .slot-shortbreak {
   color: #fff ;
+}
   .calendar tr,
   .calendar td
+  {
     display: block;
     padding: 0.5ex;
+  }
 .slot-tutorial {
   vertical-align: top;
   .calendar td,
   .calendar td:not(:first-of-type) {
     border: 0px;
+  }
   .calendar .slot .title,
   .calendar .slot .speaker,
   .calendar .slot .room
+  {
     display: block;
     line-height: 1.2;
+  }
   .calendar .slot .room
+  {
     font-style: italic;
+  }
+}
 .time {
   font-size: 0.5vw;
   line-height: 0.4;
   vertical-align: middle;
   padding-top: 0.25rem;
 /* Schedule timetable needs some more specific font sizes */
 @media not screen and (max-width: 480px)  {
   .calendar td {
     font-size: 0.9vw;
+  }
   .slot {
     padding-left: 0.625rem;
     padding-top: 0.2rem;
     padding-bottom: 0.625rem;
     padding-right: 0.625rem;
     vertical-align: middle;
+  }
   .calendar th {
     border-bottom: 1px solid #0c486c;
     border-left: 0px !important;
+  }
   .calendar .title {
     display: block;
     padding-bottom: 0.5vh;
+  }
   .slot-shortbreak {
     color: #fff ;
+  }
   .slot-tutorial {
     vertical-align: top;
+  }
   .time {
     font-size: 0.5vw;
     line-height: 0.4;
     vertical-align: middle;
     padding-top: 0.25rem;
+  }
   .calendar .slot .room {
     display: none;
+  }
+}

0 comments (0 inline, 0 general)