Updating UI to also fit on mobile devices. Fix nrenner#34

.gitignore

@@ -5,3 +5,4 @@ nbproject/
 bingkey.txt
 /.project
 /keys.js
+/dist

bower.json

@@ -13,7 +13,7 @@
     "async": "~0.9.2",
     "d3": "~3.5.5",
     "leaflet.draw": "~0.2.3",
-    "bootstrap": "~3.3.4",
+    "bootstrap": "4",
     "DataTables": "~1.10.5",
     "leaflet.elevation": "MrMufflon/Leaflet.Elevation#master",
     "leaflet-control-geocoder": "~1.1.0",
@@ -60,9 +60,7 @@
     "bootstrap": {
       "main": [
         "dist/js/bootstrap.js",
-        "dist/css/bootstrap.css",
-        "dist/css/bootstrap-theme.css",
-        "dist/fonts/*"
+        "dist/css/bootstrap.css"
       ]
     },
     "leaflet.elevation": {
@@ -83,6 +81,12 @@
     "url-search-params": {
       "main": "build/url-search-params.js"
     },
+    "font-awesome": {
+      "main": [
+        "css/font-awesome.css",
+        "fonts/*"
+      ]
+    },
     "Leaflet.RestoreView": {
       "main": "leaflet.restoreview.js"
     },

config.js

@@ -51,10 +51,10 @@
             'car-test'
         ];
 
-        BR.conf.host = 'http://localhost:17777';
+        BR.conf.host = 'http://0.0.0.0:17777';
 
         // Pre-loading selected profile disabled locally. Needs brouter-web to run on a
-        // local web server with the profiles in a subdirectory or allowing file access 
+        // local web server with the profiles in a subdirectory or allowing file access
         // in the Browser (security!), see
         // https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
         //BR.conf.profilesUrl = 'http://localhost:8000/profiles2/';

css/style.css

@@ -2,195 +2,74 @@ html, body, #map {
     height: 100%;
 }
 
-.info {
-    padding: 6px 8px;
-    font: 14px/16px "Helvetica Neue", Arial, Helvetica, sans-serif;
-  	box-shadow: 0px 0px 0px 3px rgba(70,130,180,0.2), 0 1px 5px rgba(0,0,0,0.4);
-    background: rgba(255,255,255,0.9);
-    border-radius: 5px;
+body {
+    display: flex;
+    flex-direction: column;
 }
-.leaflet-control.elevation .background {
-    box-shadow: 0px 0px 0px 3px rgba(70,130,180,0.2);
-}
-div.elevation {
-    margin-bottom: -2px !important;
-}
-
-.hidden {
-    display: none;
+#content{
+    flex-grow: 1;
 }
 
-#message {
-    position: absolute;
-    left: 446px; /* 400 + 10 + 26 + 10 */
-    top: 0px;
-    margin-top: 10px;
-    z-index: 1000;
+footer {
+    display: flex;
+    background-color: #f7f7f9;
 }
 
-#header {
-    width: 100%;
-    margin: auto;
-    text-align: center;
-}
-#header, .heading {
-    color: #333;
-}
-.title {
-    padding-top: 4px;
-}
-.title-name {
-    font-size: larger;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
-}
-.version {
-    font-size: x-small;
+#stats {
+    flex-grow: 1;
+    margin: 0;
+    padding: 0;
 }
-.header-text {
-    font-size: small;
-    margin-top: 0.5em;
-    line-height: 1.4em;
+#stats li {
+    margin: 0 1rem;
 }
 
-.heading {
-    font-weight: bold;
-}
-.heading, .content, .content > .label, .content > .value {
-    float: left;
+#elevation-chart {
+    height: 150px;
+    font-size: 80%;
 }
 
-select {
-    max-width: 176px;
+.axis path,
+.axis line {
+    stroke: #818a91;
+    fill: none;
+    shape-rendering: crispEdges;
 }
 
-table {
-    border-collapse: separate;
-    border-spacing: 4px;
-    /* spacing between cells only */
-    margin: -4px;
+.axis text {
+    fill: #818a91;
 }
 
-td {
-    vertical-align: top;
-    padding: 0;
-}
-#stats td:nth-child(2) {
-    text-align: right;
+.area {
+    fill: rgba(129, 138, 145, 0.45);
 }
 
-.heading, tr > td:first-child, .label {
-    /* 1/4 of net info control width (370), so that values start at 50% */
-    width: 95px;
+#elevation-btn {
+    display: flex;
+    align-items: center;
+    margin-right: 0.5rem;
 }
 
 .routing-draw-enabled {
-	cursor: crosshair;
+    cursor: crosshair;
 }
 
-/* left sidebar as additional control position */
-
-.leaflet-left {
-	left: 400px !important;
+/* FIXME permalink temporary hack */
+.leaflet-control-permalink {
+    display: none;
 }
 
-.leaflet-leftpane {
-	left: 5px;
-    top: 7px;
-    bottom: 7px;
+/* FIXME */
+.elevation {
+    display: none;
+}
 
+#message {
     position: absolute;
+    left: 446px; /* 400 + 10 + 26 + 10 */
+    top: 0px;
+    margin-top: 10px;
     z-index: 1000;
-    pointer-events: none;
-}
-
-.leaflet-leftpane .leaflet-control {
-    margin: 3px 5px;
-    width: 386px;
-}
-
-/* margin left sidebar + Scale */
-.leaflet-control-attribution {
-    margin-left: 515px !important;
-}
-
-/* Profile Control */
-
-/* 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,
-#iternity {
-  display: -webkit-flex;
-  display: flex;
-
-  -webkit-flex-direction: column;
-  flex-direction: column;
-}
-
-.flex_box_none,
-.leaflet-leftpane .leaflet-control,
-#tab,
-.dataTables_scrollHead {
-  -webkit-flex: none;
-  flex: none;
-}
-
-.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,
-#iternity,
-#iternity pre {
-  -webkit-flex: auto;
-  flex: auto;
-}
-
-#iternity pre {
-    font-size: small;
-    /* turn off bootstrap 'break-word' */
-    word-wrap: normal;
-}
-
-#profile_buttons {
-    padding-top: 4px;
-}
-
-textarea {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-
-    font-size: 10px;
-    font-family: "Courier New", Courier, monospace;
-    line-height: 1.2em;
-
-    background-color: rgba(255,255,255,0);
-}
-textarea:focus {
-    background-color: rgba(255,255,255,255);
-}
-
-/* track messages (data tab) */
-#tab_data {
-    font-size: x-small;
-}
-
-#about {
-    display: none;
 }
 
 /* dashed line animation, derived from Chris Coyier and others
@@ -217,77 +96,6 @@ textarea:focus {
   }
 }
 
-/*
- * Bootstrap
- */
-
-/* override Bootstrap label for Leaflet layer switcher */
-.leaflet-control-layers label {
-    max-width: none;
-    margin-bottom: 0px;
-    font-weight: normal;
-    /* normalize label height
-                    | Firefox | Chrome |
-       Leaflet only | 21      | 20     |
-       Bootstrap    | 23      | 22     |*/
-    height: 21px;
-}
-
-/* smaller tab height */
-.nav > li > a {
-    padding: 2px 15px;
-}
-
-.alert {
-    margin-top: 3px;
-    margin-bottom: 0px;
-    padding-left: 35px;
-}
-.alert span.fa {
-    position: relative;
-    left: -23px;
-    margin-right: -1em;
-}
-
-/* activated Font Awesome icon (for EasyButton add ' active' to icon class property) */
-.fa.active {
-    /* use same color as leaflet-locatecontrol */
-    color: #2074B6;
-}
-
-.leaflet-bar .fa {
-    font-size: 16px;
-}
-
-/*
- * DataTables
- */
-
-table.dataTable.mini thead th,
-table.dataTable.mini thead td {
-  padding: 3px 13px 3px 2px;
-}
-
-table.dataTable.mini tbody th,
-table.dataTable.mini tbody td {
-  padding: 2px 2px;
-  white-space: nowrap;
-}
-table.dataTable thead .sorting_asc,
-table.dataTable thead .sorting_desc,
-table.dataTable thead .sorting {
-  background-position: center right -3px;
-}
-
-table.dataTable.hover tbody tr:hover,
-table.dataTable.hover tbody tr.odd:hover,
-table.dataTable.hover tbody tr.even:hover,
-table.dataTable.display tbody tr:hover,
-table.dataTable.display tbody tr.odd:hover,
-table.dataTable.display tbody tr.even:hover {
-  background-color: rgba(255,255,0,0.2);
-}
-
 /*
  * opacity slider control (seiyria-bootstrap-slider)
  */
@@ -329,9 +137,20 @@ table.dataTable.display tbody tr.even:hover {
   box-sizing: border-box;
   background: none;
 
-  /* bootstrap .btn-default */ 
+  /* bootstrap .btn-default */
   background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
   background-repeat: repeat-x;
   box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
   border: 1px solid #adadad;
 }
+
+/* activated Font Awesome icon (for EasyButton add ' active' to icon class property) */
+.fa.active {
+    /* use same color as leaflet-locatecontrol */
+    color: #2074B6;
+}
+
+.stats-label {
+    word-break: break-all;
+    font-weight: bold;
+}