redesign details and details buttons

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

@@ -347,14 +347,15 @@ section.details > .details-head {
     padding: 11px 10px 8px;
 }
 section.details > .details-head > .button {
-    margin: -2px 0 0;
+    font-size: 30px;
+    line-height: 1.0;
+    color: $color-icon-light;
+    margin: -2px -2px 0 0;
     -webkit-transition: none;
     -o-transition: none;
     transition: none;
-    line-height: 2.5;
 }
 #sidebar section.details > .details-body {
-    border: 0;
     overflow: auto;
     -ms-scroll-chaining: none;
         overscroll-behavior: contain;
@@ -435,7 +436,7 @@ section.details {
 }
 
 #location-details .details-body {
-    padding: 0 10px;
+    padding: 10px 10px 0;
 }
 #location-details dl {
     display: -webkit-box;
@@ -536,11 +537,6 @@ main.show-options #resultswrapper #route-options {
         -ms-flex-positive: 1;
             flex-grow: 1;
 }
-#route-options .details-head button {
-    font-size: 30px;
-    line-height: 1.0;
-    color: $color-icon-light;
-}
 
 .location {
     position: relative;
@@ -794,7 +790,7 @@ main:not([data-view=route-result]) #route-dots {
     margin-left: -1px;
     height: 3.3rem;
 }
-.buttons > button.button-clear {
+.buttons > button.button-clear, .buttons > .button.button-clear {
     width: 1px;
     -webkit-box-flex: 1;
         -ms-flex-positive: 1;
@@ -811,9 +807,9 @@ main:not([data-view=route-result]) #route-dots {
 .buttons > *:hover, .buttons > *:active {
     background-color: #eeeeee;
 }
-#search button, .leaflet-popup button, .details-head .button {
+#search button, .leaflet-popup button, .details-head .button, .buttons.details-buttons button, .buttons.details-buttons .button {
     font-size: 1.3rem;
-    line-height: 1.3;
+    line-height: 3.3rem;
     height: 3.3rem;
     padding: 0;
 }

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

@@ -186,6 +186,8 @@ c3nav = {
         $route_options.find('button').on('click', c3nav._route_options_submit);
         $('#map').on('click', '.location-popup .button-clear', c3nav._popup_button_click);
 
+        $('.details .close').on('click', c3nav._buttons_details_close_click);
+
         $('#modal').on('click', c3nav._modal_click)
             .on('click', 'a', c3nav._modal_link_click)
             .on('submit', 'form', c3nav._modal_submit)
@@ -349,6 +351,7 @@ c3nav = {
         var $location_details = $('#location-details');
         if ($location_details.attr('data-id') !== String(location.id)) {
             $location_details.addClass('loading').attr('data-id', location.id);
+            $location_details.find('.details-buttons').hide();
             c3nav._clear_route_layers();
             $.getJSON('/api/locations/'+location.id+'/details', c3nav._location_details_loaded).fail(function (data) {
                 var $location_details = $('#location-details');
@@ -391,6 +394,7 @@ c3nav = {
                 elem.append(loclist);
             }
         }
+        $location_details.find('.details-buttons').show();
         $location_details.find('.details-body').html('').append(elem);
 
         var $editor = $location_details.find('.editor');
@@ -716,6 +720,9 @@ c3nav = {
     _buttons_details_click: function () {
         c3nav.update_state(null, null, !c3nav.state.details);
     },
+    _buttons_details_close_click: function () {
+        c3nav.update_state(null, null, false);
+    },
     _buttons_options_click: function () {
         c3nav.update_state(null, null, null, !c3nav.state.options);
     },

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

@@ -129,16 +129,20 @@
                     <section id="autocomplete"></section>
                     <section id="location-details" class="details">
                         <div class="details-head">
-                            <a class="button button-clear editor float-right" target="_blank">
+                            <button class="button close button-clear material-icons float-right">close</button>
+                            <h2>{% trans 'Details' %}</h2>
+                        </div>
+                        <div class="details-buttons buttons">
+                            <a class="button button-clear editor" target="_blank">
                                 <i class="material-icons">edit</i>
                                 {% trans 'Open in Editor' %}
                             </a>
-                            <h2>{% trans 'Details' %}</h2>
                         </div>
                         <div class="details-body"></div>
                     </section>
                     <section id="route-details" class="details">
                         <div class="details-head">
+                            <button class="button close button-clear material-icons float-right">close</button>
                             <h2>{% trans 'Details' %}</h2>
                         </div>
                         <div class="details-body"></div>