From 5bdd6caf9c837d140b80c833eeeb07efdbe692a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Kl=C3=BCnder?= <laura@codingcatgirl.de>
Date: Tue, 21 Nov 2017 22:14:09 +0100
Subject: [PATCH] add base for location and route details in map.html

---
 src/c3nav/site/static/site/css/c3nav.css | 18 ++++++++++++++++--
 src/c3nav/site/templates/site/map.html   |  2 ++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/c3nav/site/static/site/css/c3nav.css b/src/c3nav/site/static/site/css/c3nav.css
index 94c87f3c..9c81bf5e 100644
--- a/src/c3nav/site/static/site/css/c3nav.css
+++ b/src/c3nav/site/static/site/css/c3nav.css
@@ -56,7 +56,7 @@ main.map {
     position: absolute;
     z-index: 2;
     top: 0;
-    padding: 10px 10px 16px;
+    padding: 10px 10px 32px;
     width: 100%;
     bottom: 0;
     max-width: 420px;
@@ -77,7 +77,6 @@ main.map {
     border-radius: 2px;
     overflow: hidden;
     margin-bottom: 10px;
-    flex-shrink: 0;
 }
 #sidebar section > div {
     border: 0 #dddddd solid;
@@ -97,6 +96,7 @@ main.map {
     min-width: 54px;
     width: 100%;
     transition: width 150ms;
+    flex-shrink: 0;
 }
 #search.loading {
     width: 5%;
@@ -117,10 +117,24 @@ main:not([data-view=route-result]) #route-result-buttons {
 }
 #resultswrapper {
     flex-grow: 1;
+    flex-shrink: 1;
+    display: flex;
+    flex-direction: column;
 }
 #resultswrapper section {
     max-height: 100%;
     overflow: auto;
+    margin: 0;
+}
+#location-details, #route-details {
+    padding: 10px;
+}
+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 {
+    display:none;
 }
 
 .location {
diff --git a/src/c3nav/site/templates/site/map.html b/src/c3nav/site/templates/site/map.html
index 88974103..ca8260ef 100644
--- a/src/c3nav/site/templates/site/map.html
+++ b/src/c3nav/site/templates/site/map.html
@@ -87,6 +87,8 @@
             </section>
             <div id="resultswrapper">
                 <section id="autocomplete"></section>
+                <section id="location-details"></section>
+                <section id="route-details"></section>
             </div>
         </section>
     </main>