route-summary for mobile devices

src/c3nav/site/static/site/css/c3nav.css

@@ -78,6 +78,7 @@ main.map {
 }
 
 #search {
+    transition: margin-bottom 150ms, opacity 150ms;
     z-index: 4;
 }
 
@@ -88,7 +89,8 @@ main:not([data-view^=route]) #origin-input {
     opacity: 0;
 }
 main:not([data-view=location]) #location-buttons,
-main:not([data-view=route-search]) #route-search-buttons {
+main:not([data-view=route-search]) #route-search-buttons,
+main:not([data-view=route-result]) #route-result-buttons{
     margin-bottom: -3.3rem;
     pointer-events: none;
     opacity: 0;
@@ -149,7 +151,7 @@ main:not([data-view=route-search]) #route-search-buttons {
 .locationinput.selected input {
     padding-bottom: 24px;
 }
-.locationinput button, #route-summary button {
+.locationinput button {
     position: absolute;
     top: 6px;
     right: 6px;
@@ -219,29 +221,43 @@ main:not([data-view=route-search]) #route-search-buttons {
     background-color: #eeeeee;
 }
 
-#route-header {
+#route-summary > div:first-child {
+    padding: 10px;
+}
+#route-summary > div > span {
+    display: block;
+    white-space: nowrap;
+    min-width: 50%;
+}
+#route-summary > div > span:not(:last-child) {
+    padding-bottom: 5px;
+}
+#route-summary small {
+    display: block;
+    white-space: nowrap;
+    line-height: 1.1;
+}
+
+#route-summary {
     transition: margin-top 150ms, opacity 150ms;
     z-index: 3;
 }
-main:not([data-view=route-result]) #route-header {
+main:not([data-view=route-result]) #route-summary,
-    margin-top: -97px;
+main:not(.summary-only) #route-summary {
+    margin-top: -163px;
+    opacity: 0;
+    pointer-events: none;
+}
+main[data-view=route-result].summary-only #search {
+    margin-bottom: -142px;
     opacity: 0;
     pointer-events: none;
 }
 
-#route-summary {
+@media (min-width: 1000px) {
-    height: 55px;
+    button.show-map {
-    padding: 6px 10px;
+        display: none;
-    position: relative;
+    }
-}
-#route-summary > * {
-    display: block;
-    white-space: nowrap;
-}
-#route-summary > small {
-    display: block;
-    white-space: nowrap;
-    line-height: 1.1;
 }
 
 /* leaftlet levels control */

src/c3nav/site/static/site/js/c3nav.js

@@ -47,11 +47,15 @@ c3nav = {
             }
         }
 
+        c3nav.narrow = ($(document).width() < 1000);
+
         c3nav.init_locationinputs();
 
         $('#location-buttons').find('.route').on('click', c3nav._location_buttons_route_click);
         $('#route-search-buttons, #route-result-buttons').find('.swap').on('click', c3nav._route_buttons_swap_click);
         $('#route-search-buttons, #route-summary').find('.close').on('click', c3nav._route_buttons_close_click);
+        $('#route-result-buttons').find('.show-map').on('click', c3nav._route_buttons_show_map_click);
+        $('#route-summary-buttons').find('.show-details').on('click', c3nav._route_buttons_show_details_click);
         $('#map').on('click', '.location-popup .button-clear', c3nav._popup_button_click);
 
         window.onpopstate = c3nav._onpopstate;
@@ -181,6 +185,12 @@ c3nav = {
         }
         c3nav.update_state(false);
     },
+    _route_buttons_show_map_click: function () {
+        $('main').addClass('summary-only');
+    },
+    _route_buttons_show_details_click: function () {
+        $('main').removeClass('summary-only');
+    },
     _popup_button_click: function () {
         var location = c3nav.locations_by_id[parseInt($(this).siblings('.location').attr('data-id'))],
             $origin = $('#origin-input'),

src/c3nav/site/templates/site/map.html

@@ -50,17 +50,27 @@
                     <button class="button-clear swap">Swap</button>
                     <button class="button-clear close">Close</button>
                 </div>
-            </section>
-            <section id="route-header">
-                <div id="route-summary">
-                    <span><strong>10min</strong> (100m)… sorry no routing yet</span>
-                    <small><em>default options</em></small>
-                    <button class="button-clear close"></button>
-                </div>
                 <div class="buttons" id="route-result-buttons">
-                    <button class="button-clear swap">Return</button>
+                    <button class="button-clear swap">Swap</button>
-                    <button class="button-clear options">Share</button>
+                    <button class="button-clear show-map">Show Map</button>
-                    <button class="button-clear options">Options</button>
+                    <button class="button-clear close">Close</button>
+                </div>
+            </section>
+            <section id="route-summary">
+                <div>
+                    <span class="origin">
+                        <span class="title">Location1</span>
+                    </span>
+                    <span class="destination">
+                        <span class="title">Location1</span>
+                    </span>
+                    <span class="result">
+                        <span>10min (100m)… sorry no routing yet</span>
+                        <small><em>default options</em></small>
+                    </span>
+                </div>
+                <div class="buttons" id="route-summary-buttons">
+                    <button class="button-clear show-details">Show Details</button>
                 </div>
             </section>
             <div id="resultswrapper">