details html and css

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

@@ -123,19 +123,80 @@ main:not([data-view=route-result]) #route-result-buttons {
 }
 #resultswrapper section {
     max-height: 100%;
-    overflow: auto;
     margin: 0;
 }
-#location-details, #route-details {
-    padding: 10px;
+
+h2 {
+    font-size: 2.5rem;
+    margin: 0;
 }
+
+section.details {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+section.details > * {
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+section.details > .details-head {
+    padding: 11px 10px 9px;
+}
+.details-head > button {
+    margin: 0;
+}
+#sidebar section.details > .details-body {
+    border: 0;
+    padding-top: 0;
+    overflow: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+#location-details .details-body {
+    padding: 0 10px 5px;
+}
+#location-details dl {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+}
+#location-details dt {
+    width: 29%;
+    margin: 0 0 1rem;
+    font-weight: 700;
+}
+#location-details dd {
+    width: 70%;
+    margin: 0 0 1rem;
+    padding: 0 0 0 1rem;
+}
+
 main:not([data-view$=search]) #autocomplete,
 main:not([data-view=location]) #location-details,
-main:not(.show-details) #location-details,
 main:not([data-view=route-result]) #route-details,
-main:not(.show-details) #route-details {
+main:not(.show-details) #resultswrapper .details {
     display:none;
 }
+main.show-details #resultswrapper .details {
+    animation: show-details;
+    animation-duration: 150ms;
+    -webkit-animation-timing-function: ease-out;
+    -moz-animation-timing-function: ease-out;
+    -o-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+}
+@keyframes show-details {
+    from {
+        opacity: 0;
+        top: 10px;
+    }
+    to {
+        opacity: 1;
+        top: 0;
+    }
+}
 
 .location {
     position: relative;
@@ -302,7 +363,13 @@ main:not([data-view=route-result]) #route-dots {
 .buttons > *:hover, .buttons > *:active {
     background-color: #eeeeee;
 }
-.buttons .material-icons {
+button {
+    font-size: 1.3rem;
+    line-height: 1.3;
+    height: 3.3rem;
+    padding: 0;
+}
+button .material-icons {
     font-size: 15px;
     vertical-align: -3px;
 }

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

@@ -87,8 +87,24 @@
             </section>
             <div id="resultswrapper">
                 <section id="autocomplete"></section>
-                <section id="location-details"></section>
-                <section id="route-details"></section>
+                <section id="location-details" class="details">
+                    <div class="details-head">
+                        <button class="button-clear editor float-right">
+                            <i class="material-icons">edit</i>
+                            Open in Editor
+                        </button>
+                        <h2>Details</h2>
+                    </div>
+                    <div class="details-body">
+                        <dl>
+                            <dt>Name</dt>
+                            <dd>CCL Atrium Ebene 1</dd>
+                            <dt>Name</dt>
+                            <dd>CCL Atrium Ebene 1</dd>
+                        </dl>
+                    </div class="details-body">
+                </section>
+                <section id="route-details" class="details"></section>
             </div>
         </section>
     </main>