use css grid

merge-requests/1/head
Julien Veyssier 2017-05-05 00:05:47 +02:00
parent edfdf17f7a
commit 7b5cf1b07c
2 changed files with 33 additions and 22 deletions

View File

@ -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;
}

View File

@ -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>