From 7b5cf1b07cf1008c74e9a8386835f13035166099 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <eneiluj@gmx.fr>
Date: Fri, 5 May 2017 00:05:47 +0200
Subject: [PATCH] use css grid

---
 css/gpxedit.css          | 32 +++++++++++++++++++++++---------
 templates/gpxcontent.php | 23 ++++++++++-------------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/css/gpxedit.css b/css/gpxedit.css
index 64fb9b2..f7f21b2 100644
--- a/css/gpxedit.css
+++ b/css/gpxedit.css
@@ -787,11 +787,14 @@ h2#loadtitle, h2#savetitle{
 h2.popupTitle{
     text-align: center;
 }
-#clearButton, .popupOkButton{
+.popupOkButton{
     margin-left: auto;
     margin-right: auto;
     display:block;
 }
+#clearButton {
+    width: 100%;
+}
 #saveButton i{
     color: blue;
 }
@@ -799,10 +802,6 @@ h2.popupTitle{
     color: red;
 }
 
-#divloadfolder{
-    width: 80%;
-    margin: 0 auto;
-}
 select#loadtypeselect{
     float: right;
 }
@@ -810,10 +809,8 @@ select#loadtypeselect{
     float: left;
 }
 
-#saveButton, #loadButton{
-    display:block;
-    margin-left: auto;
-    margin-right: auto;
+#saveButton {
+    width: 100%;
 }
 #loadButton i, #loadFolderButton i{
     color: blue;
@@ -850,3 +847,20 @@ select#loadtypeselect{
 .popupdatatable input, #gpxeditsettings input {
     min-height: 0px;
 }
+#loaddiv {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-template-rows: 50% 50%;
+}
+#loadButton {
+    grid-column: 1 / 3;
+    grid-row: 1;
+}
+#loadFolderButton {
+    grid-column: 1;
+    grid-row: 2;
+}
+#loadtypeselect {
+    grid-column: 2;
+    grid-row: 2;
+}
diff --git a/templates/gpxcontent.php b/templates/gpxcontent.php
index 31ac223..11b34c0 100644
--- a/templates/gpxcontent.php
+++ b/templates/gpxcontent.php
@@ -8,7 +8,6 @@
 <!-- Tab panes -->
 <div class="sidebar-content active">
 <div class="sidebar-pane active" id="ho">
-    <form name="choosedir" method="get" action="?">
     <div id="logofolder">
         <div id="logo">
             <!--p align="center"><img src="gpxedit.png"/></p-->
@@ -22,18 +21,17 @@ p($_['gpxedit_version']);
         </div>
     </div>
     <div style="clear:both"></div>
-    </form>
     <hr/>
-    <button id="loadButton"><i class="fa fa-file-o"></i> <?php p($l->t('Load file'));?></button>
-    <div id="divloadfolder">
-    <button id="loadFolderButton"><i class="fa fa-folder-open-o"></i> <?php p($l->t('Load directory'));?></button>
-    <select id="loadtypeselect">
-        <option value="all">all</option>
-        <option value=".jpg">jpg</option>
-        <option value=".gpx">gpx</option>
-        <option value=".kml">kml</option>
-        <option value=".csv">csv</option>
-    </select>
+    <div id="loaddiv">
+        <button id="loadButton"><i class="fa fa-file-o"></i> <?php p($l->t('Load file'));?></button>
+        <button id="loadFolderButton"><i class="fa fa-folder-open-o"></i> <?php p($l->t('Load directory'));?></button>
+        <select id="loadtypeselect">
+            <option value="all">all</option>
+            <option value=".jpg">jpg</option>
+            <option value=".gpx">gpx</option>
+            <option value=".kml">kml</option>
+            <option value=".csv">csv</option>
+        </select>
     </div>
     <div style="clear:both"></div>
     <hr/>
@@ -48,7 +46,6 @@ p($_['gpxedit_version']);
     <button id="saveButton"><i class="fa fa-save"></i> <?php p($l->t('Choose directory and save'));?></button>
     <div style="clear:both"></div>
     <hr/>
-    <br/>
     <button id="clearButton"><i class="fa fa-bomb"></i> <?php p($l->t('Clear map'));?></button>
     <div id="saved"><p>
         <i class="fa fa-save fa-spin fa-3x fa-fw"></i>