Merge lp:~sil/summit/mobile-view-for-daily-page into lp:summit

[Stuart Langridge]

Custom styles for devices less than 480px wide; tiny bit of JS to override the hover stuff and toggle the details div on and off; one extra class added as a convenience hook.

Custom styles for devices less than 480px wide; tiny bit of JS to override the hover stuff and toggle the details div on and off; one extra class added as a convenience hook.

[lp:~sil/summit/mobile-view-for-daily-page]

280. By Stuart Langridge on 2012-01-28

tweak width to 481 to cope with 480px wide phones like mhall's droidx; make mouseover override dynamic rather than onload; black background for track titles in details

281. By Stuart Langridge on 2012-01-28

tweak track titles ul background

[Michael Hall (mhall119)]

awesome!

review: Approve

=== modified file 'summit/schedule/templates/schedule/daily.html'
--- summit/schedule/templates/schedule/daily.html	2012-01-27 02:03:43 +0000
+++ summit/schedule/templates/schedule/daily.html	2012-01-28 02:38:24 +0000
@@ -6,6 +6,7 @@
 {% endblock %}
 
 {% block head %}
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 {{ block.super }}
 <script language="JavaScript">
 
@@ -70,6 +71,55 @@
     font-size: 0.7pc;
 }
 
+/* Mobile view */
+@media screen and (max-width: 481px) {
+    /* turn off a bunch of stuff */
+    aside#top-nav, header#page-header, aside#page-related, footer#page-footer { display: none; }
+    section#main-section .container, article.main-content { 
+        width: auto; 
+        margin: 0; padding: 0;
+    }
+    .schedule-head > a { display: none; } /* qr code */
+    div.schedule-head .schedule-date { 
+        display: block;
+        overflow: auto;
+        font-size: 16px;
+        text-align: center;
+        margin: 0;
+    }
+    div.schedule-head .schedule-date a {
+        display: block;
+        float: right;
+        background: #eee;
+        width: 33%;
+        text-align: center;
+    }
+    div.schedule-head .schedule-date a:nth-child(1) {
+        float: left;
+    }
+    table.basic {
+        margin-top: 0;
+        width: 100%;
+    }
+    div.agenda-details {
+        background-color: #eee;
+        border-width: 0;
+        color: black;
+        font-size: 1em;
+        position: static;
+        max-width: 100%;
+        min-width: 100%;
+        width: 100%;
+        padding: 5px;
+        margin: 0;
+        border-radius: 0;
+    }
+    div.agenda-details ul {
+        background: #101010;
+        padding-left: 4px;
+    }
+}
+
 </style>
 {% endblock %}
 
@@ -108,7 +158,7 @@
 <tr style="background-color: {% ifequal agenda.meeting.type 'plenary' %}#ffffe0{% else %}{{ agenda.meeting.track_color }}{% endifequal %}; {% if agenda.meeting.private %}border: 1px; border-style: solid; border-color: #FF0000;{% endif %}">
 <td width="75%">
     <span onMouseOver="show_agenda_details({{agenda.id}});" onMouseOut="hide_agenda_details({{agenda.id}});;">
-    <a href="{{agenda.meeting.meeting_page_url}}" style="color: #000000;">
+    <a href="{{agenda.meeting.meeting_page_url}}" style="color: #000000;" class="main-agenda-item-name">
         {% if attendee in agenda.meeting.attendees %}
             <img class="icon" src="/media/img/attending.png">
         {% else %}
@@ -153,4 +203,46 @@
 <br /><br /><br /><br />
 </article>
 
+<script>
+/* Mobile handler for clicking a link */
+/* put at the bottom of the page so that the relevant elements exist */
+document.querySelector("article.main-content").addEventListener("click", function(e) {
+    /* Only handle clicking on the main links in the table */
+    if (e.target.nodeName.toLowerCase() == "a" && e.target.className == "main-agenda-item-name") {
+        /* only override links if we're in mobile mode */
+        if (document.documentElement.clientWidth > 481) return;
+        e.stopPropagation();
+        e.preventDefault();
+        /* toggle display of the details div */
+        var details_div = e.target.parentNode.getElementsByTagName("div")[0];
+        details_div.style.display = details_div.style.display == "block" ? "none" : "block";
+        /* and add a link to the specific page to the top of the details div, if
+           we haven't already */
+        var links = details_div.getElementsByClassName("real-link");
+        if (links.length == 0) {
+            var a = document.createElement("a");
+            a.href = e.target.href;
+            a.appendChild(document.createTextNode("View details of this session"));
+            a.className = "real-link";
+            details_div.insertBefore(a, details_div.firstChild);
+        }
+    }
+});
+
+/* override the mouseover/mouseout functions in mobile mode */
+var old_show_agenda_details = show_agenda_details;
+var old_hide_agenda_details = hide_agenda_details;
+show_agenda_details = function(agenda_id) {
+    if (document.documentElement.clientWidth > 481) {
+        return old_show_agenda_details(agenda_id);
+    }
+};
+hide_agenda_details = function(agenda_id) {
+    if (document.documentElement.clientWidth > 481) {
+        return old_hide_agenda_details(agenda_id);
+    }
+};
+
+</script>
+
 {% endblock %}