use css grid for options

merge-requests/1/head
Julien Veyssier 2017-05-05 16:08:58 +02:00
parent 9ad01e2454
commit a12552aae6
2 changed files with 53 additions and 15 deletions

View File

@ -858,3 +858,47 @@ div#ho button {
padding: 0px; padding: 0px;
min-height: 32px; min-height: 32px;
} }
#optiontop {
display: grid;
grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr;
text-align: center;
}
#optiontop label, #optiontop input[type=checkbox] {
margin-top: auto;
margin-bottom: auto;
}
#optiontop input[type=checkbox] {
margin-right: auto;
}
label[for=markerstyleselect] {
grid-column: 1;
grid-row: 1;
}
#markerstyleselect {
grid-column: 2;
grid-row: 1;
}
label[for=tooltipstyleselect] {
grid-column: 1;
grid-row: 2;
}
#tooltipstyleselect {
grid-column: 2;
grid-row: 2;
}
#symboloverwrite {
grid-column: 2;
grid-row: 3;
}
label[for=symboloverwrite] {
grid-column: 1;
grid-row: 3;
}
#clearbeforeload {
grid-column: 2;
grid-row: 4;
}
label[for=clearbeforeload] {
grid-column: 1;
grid-row: 4;
}

View File

@ -85,32 +85,26 @@ echo '</ul>'."\n";
<div class="sidebar-pane" id="gpxeditsettings"> <div class="sidebar-pane" id="gpxeditsettings">
<h1 class="sectiontitle"><?php p($l->t('Options')); ?></h1> <h1 class="sectiontitle"><?php p($l->t('Options')); ?></h1>
<hr/> <hr/>
<br/> <div id="optiontop">
<div title="<?php p($l->t('Default symbol for waypoints when value is not set'));?>"> <label for="markerstyleselect" title="<?php p($l->t('Default symbol for waypoints when value is not set'));?>">
<label><?php p($l->t('Waypoint style'));?>:</label> <?php p($l->t('Waypoint style'));?>:
</label>
<select id="markerstyleselect"> <select id="markerstyleselect">
</select> </select>
</div> <label for="tooltipstyleselect"><?php p($l->t('Tooltip'));?>:</label>
<div>
<label><?php p($l->t('Tooltip'));?>:</label>
<select id="tooltipstyleselect"> <select id="tooltipstyleselect">
<option value="h"><?php p($l->t('on hover')); ?></option> <option value="h"><?php p($l->t('on hover')); ?></option>
<option value="p"><?php p($l->t('permanent')); ?></option> <option value="p"><?php p($l->t('permanent')); ?></option>
</select> </select>
</div> <input title="<?php p($l->t('Use defined symbols instead of default symbol')); ?>"
<div title="<?php p($l->t('Use defined symbols instead of default symbol')); ?>"> id="symboloverwrite" type="checkbox" checked></input>
<input id="symboloverwrite" type="checkbox" checked></input> <label title="<?php p($l->t('Use defined symbols instead of default symbol')); ?>"
<label for="symboloverwrite"><?php p($l->t('Use defined symbols')); ?></label> for="symboloverwrite"><?php p($l->t('Use defined symbols')); ?></label>
</div>
<div>
<input type="checkbox" id="clearbeforeload" checked></input> <input type="checkbox" id="clearbeforeload" checked></input>
<label for="clearbeforeload"><?php p($l->t('Clear map before loading'));?></label> <label for="clearbeforeload"><?php p($l->t('Clear map before loading'));?></label>
</div> </div>
<br/>
<hr/> <hr/>
<br/>
<h3 class="sectiontitle"><?php p($l->t('Custom tile servers')); ?></h3> <h3 class="sectiontitle"><?php p($l->t('Custom tile servers')); ?></h3>
<br/>
<div id="tileserveradd"> <div id="tileserveradd">
<?php p($l->t('Server name (for example \'my custom server\')')); ?> : <?php p($l->t('Server name (for example \'my custom server\')')); ?> :
<input type="text" id="tileservername"><br/> <input type="text" id="tileservername"><br/>