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{ h2.popupTitle{
text-align: center; text-align: center;
} }
#clearButton, .popupOkButton{ .popupOkButton{
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display:block; display:block;
} }
#clearButton {
width: 100%;
}
#saveButton i{ #saveButton i{
color: blue; color: blue;
} }
@ -799,10 +802,6 @@ h2.popupTitle{
color: red; color: red;
} }
#divloadfolder{
width: 80%;
margin: 0 auto;
}
select#loadtypeselect{ select#loadtypeselect{
float: right; float: right;
} }
@ -810,10 +809,8 @@ select#loadtypeselect{
float: left; float: left;
} }
#saveButton, #loadButton{ #saveButton {
display:block; width: 100%;
margin-left: auto;
margin-right: auto;
} }
#loadButton i, #loadFolderButton i{ #loadButton i, #loadFolderButton i{
color: blue; color: blue;
@ -850,3 +847,20 @@ select#loadtypeselect{
.popupdatatable input, #gpxeditsettings input { .popupdatatable input, #gpxeditsettings input {
min-height: 0px; 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 --> <!-- Tab panes -->
<div class="sidebar-content active"> <div class="sidebar-content active">
<div class="sidebar-pane active" id="ho"> <div class="sidebar-pane active" id="ho">
<form name="choosedir" method="get" action="?">
<div id="logofolder"> <div id="logofolder">
<div id="logo"> <div id="logo">
<!--p align="center"><img src="gpxedit.png"/></p--> <!--p align="center"><img src="gpxedit.png"/></p-->
@ -22,10 +21,9 @@ p($_['gpxedit_version']);
</div> </div>
</div> </div>
<div style="clear:both"></div> <div style="clear:both"></div>
</form>
<hr/> <hr/>
<div id="loaddiv">
<button id="loadButton"><i class="fa fa-file-o"></i> <?php p($l->t('Load file'));?></button> <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> <button id="loadFolderButton"><i class="fa fa-folder-open-o"></i> <?php p($l->t('Load directory'));?></button>
<select id="loadtypeselect"> <select id="loadtypeselect">
<option value="all">all</option> <option value="all">all</option>
@ -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> <button id="saveButton"><i class="fa fa-save"></i> <?php p($l->t('Choose directory and save'));?></button>
<div style="clear:both"></div> <div style="clear:both"></div>
<hr/> <hr/>
<br/>
<button id="clearButton"><i class="fa fa-bomb"></i> <?php p($l->t('Clear map'));?></button> <button id="clearButton"><i class="fa fa-bomb"></i> <?php p($l->t('Clear map'));?></button>
<div id="saved"><p> <div id="saved"><p>
<i class="fa fa-save fa-spin fa-3x fa-fw"></i> <i class="fa fa-save fa-spin fa-3x fa-fw"></i>