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

 <table class="calendar table table-bordered">
   <thead>
     <tr>
       <th class="time">&nbsp;</th>
         {% for room in timetable.rooms %}
           <th>{{ room.name }}</th>
           {% endfor %}
     </tr>
   </thead>
   <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" %}
               {% 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>
                 <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 %}
             {% endif %}
           </td>
         {% endfor %}
         {% if forloop.last %}
           <td colspan="{{ timetable.rooms|length }}"></td>
         {% endif %}
       </tr>
     {% endfor %}
   </tbody>
 </table>

pinaxcon/templates/symposion/schedule/presentation_detail.html

➞

Show inline comments

@@ ... / @@ -28,29 +28,47 @@ @@
     <br />
   {% endif %}
   {% if presentation.proposal.get_target_audience_display %}
     <strong>Target audience:</strong>
     {{ presentation.proposal.get_target_audience_display }}
   {% endif %}
 {% endblock %}
 {% block content %}
   {% if presentation.unpublish %}
     <p><strong>Presentation not published.</strong></p>
   {% endif %}
   <h2>Abstract</h2>
   <div class="abstract">{{ presentation.abstract_html|safe }}</div>
   <h2>Presented by</h2>
   {% for speaker in presentation.speakers %}
     {% speaker_photo speaker 512 as speaker_photo_url %}
     {% 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 %}
 {% endblock %}

pinaxcon/templates/symposion/schedule/schedule_conference.html

➞

Show inline comments

 {% extends "symposion/schedule/public_base.html" %}
 {% load i18n %}
 {% load pinax_boxes_tags %}
 {% load cache %}
 {% load lca2017_tags %}
 {% block head_title %}Conference Schedule{% endblock %}
 {% block header_title %}Conference Schedule{% endblock %}
 {% block header_paragraph %}{% header_paragraph "conference_schedule" %}{% endblock %}
 {% block header_inset_image %}{% illustration "cradle.svg" %}{% endblock %}
 {% block body_class %}full{% endblock %}
 {% 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

@@ ... / @@ -1586,84 +1586,130 @@ table.alt tr:not(:last-of-type) { @@
   margin-bottom: 0.5em;
   padding: 0.5em;
   background-color: #ebe0e0;
+}
 .errorlist {
   margin-top: 0.1em;
   list-style-type: none;
   color: #6c0c0c;
+}
 .text-right {
   text-align: right;
+}
 .vertical-small {
   margin-top: 1em;
+}
 .vertical-bigger {
   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;
+  }
+}
 /* ------------------------------------------------------------------------------------------------
 Shame
 =====
 . 	If it’s a hack, it goes in shame.css.
 . 	Document all hacks fully:
   a. 	What part of the codebase does it relate to?
   b. 	Why was this needed?
   c. 	How does this fix it?
   d. 	How might you fix it properly, given more time?
 . 	Do not blame the developer; if they explained why they had to do it then their reasons are
 probably (hopefully) valid.
 . 	Try and clean shame.css up when you have some down time.
 via: http://csswizardry.com/2013/04/shame-css/
 ------------------------------------------------------------------------------------------------ */
 /*# sourceMappingURL=maps/app.css.map */

0 comments (0 inline, 0 general)