From 0168dbb541f1b93cbb3ae8422e59c2779b84677d Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Wed, 3 Sep 2014 15:29:07 +0200
Subject: [PATCH] replace absolute positioning with flexbox layout for profile
 and data tabs

---
 css/style.css | 70 +++++++++++++++++++++++++++++----------------------
 index.html    | 16 ++++++------
 2 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/css/style.css b/css/style.css
index 7348209..0753812 100644
--- a/css/style.css
+++ b/css/style.css
@@ -15,11 +15,6 @@ html, body, #map {
 div.elevation {
     margin-bottom: -2px !important;
 }
-/*
-.info, div.elevation {
-    display:table-row;
-}
-*/
 
 .hidden {
     display: none;
@@ -44,8 +39,6 @@ div.elevation {
 }
 .title {
     padding-top: 4px;
-    /* normalize height, for absolute Profile control positioning */
-    height: 21px;
 }
 .title-name {
     font-size: larger;
@@ -75,8 +68,6 @@ div.elevation {
 
 select {
     max-width: 176px;
-    /* normalize height, for absolute Profile control positioning */
-    height: 24px;
 }
 
 table {
@@ -126,32 +117,51 @@ td {
 
 /* Profile Control */
 
-.leaflet-leftpane .leaflet-control:last-child {
-    position: absolute;
-    top: 461px;
-    bottom: 0px;
+/* flexbox layout: maximize textarea and data table (nested container/box path) */
+.flex_container,
+.leaflet-leftpane,
+.leaflet-leftpane .leaflet-control:last-child,
+#tabs_div,
+.tab-content,
+.tab-pane.active,
+#profile_upload,
+#datatable_wrapper,
+.dataTables_scroll,
+.dataTables_scrollBody {
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-flex-direction: column;
+  flex-direction: column;
 }
 
-.tab-content {
-    padding: 5px 0px;
+.flex_box_none,
+.leaflet-leftpane .leaflet-control,
+#tab,
+.dataTables_scrollHead {
+  -webkit-flex: none;
+  flex: none;
 }
-/*
-#profile_upload input {
-    position: absolute;
-    top: 6px;
-    right: 8px;
-}
-*/
-
-/* http://snook.ca/archives/html_and_css/absolute-position-textarea */
-#textarea_container {
-    position: absolute;
-    top: 64px;
-    bottom: 6px;
-    left: 8px;
-    right: 8px;
 
+.flex_box,
+.leaflet-leftpane .leaflet-control:last-child,
+#tabs_div,
+.tab-content,
+.tab-pane.active,
+#profile_upload,
+textarea,
+#datatable_wrapper,
+.dataTables_scroll,
+.dataTables_scrollBody,
+#datatable {
+  -webkit-flex: auto;
+  flex: auto;
 }
+
+#profile_buttons {
+    padding-top: 4px;
+}
+
 textarea {
     width: 100%;
     height: 100%;
diff --git a/index.html b/index.html
index 592d967..3bef48e 100644
--- a/index.html
+++ b/index.html
@@ -61,14 +61,14 @@
         <div class="tab-content">
             <div class="tab-pane active" id="tab_profile">
                 <form id="profile_upload" name="profile_upload">
-                    &nbsp;<div class="btn-group">
-                        <button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-upload"></span> Upload</button>
-                        <!-- TODO type="reset" -->
-                        <button id="clear" type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-ban-circle"></span> Clear</button>
-                    </div>
-                    <a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn-xs">Help</a>
-                    <div id="textarea_container">
-                        <textarea type="text" name="profile" spellcheck="false" wrap="off" maxlength="100000" placeholder="... paste your custom routing profile here ..."></textarea>
+                    <textarea type="text" name="profile" spellcheck="false" wrap="off" maxlength="100000" placeholder="... paste your custom routing profile here ..."></textarea>
+                    <div id="profile_buttons">
+                        <div class="btn-group">
+                            <button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-upload"></span> Upload</button>
+                            <!-- TODO type="reset" -->
+                            <button id="clear" type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-ban-circle"></span> Clear</button>
+                        </div>
+                        <a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn-xs">Help</a>
                     </div>
                 </form>
             </div>