mirror of
https://github.com/maxpozdeev/mytinytodo.git
synced 2026-03-11 08:55:27 +00:00
make settings UI more mobile friendly
This commit is contained in:
Max Pozdeev
parent
2c2255d73b
commit
476abbd08b
3 changed files with 95 additions and 77 deletions
4
src/content/themes/default/images/back.svg
Normal file
4
src/content/themes/default/images/back.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
|
||||
<!--<rect x="0" y="0" width="14" height="14" fill="lightpink"/>-->
|
||||
<polyline points="9 2, 4 7, 9 12" stroke-width="1.5" stroke="#000" fill="none" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 217 B |
|
|
@ -303,6 +303,16 @@ li.task-row.task-completed .task-note-block .task-note { text-decoration:line-th
|
|||
#taskedit-date { font-size:1rem; font-weight:normal; display:inline; color:#777; margin-left:8px; }
|
||||
|
||||
a.mtt-back-button { font-size:1rem; }
|
||||
h3.page-title a.mtt-back-button {
|
||||
display:inline-block;
|
||||
width:1.3rem;
|
||||
height:1.3rem;
|
||||
margin-right:0.5rem;
|
||||
background:url(images/back.svg) no-repeat;
|
||||
background-size:1.3rem;
|
||||
position: relative;
|
||||
top:4px;
|
||||
}
|
||||
|
||||
/* autocomplete */
|
||||
.ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
|
||||
|
|
@ -432,16 +442,18 @@ li.mtt-item-hidden { display:none; }
|
|||
outline:none; border-color:#5a8df0; box-shadow:0 0 0 2px rgba(90,141,240,0.7);
|
||||
}
|
||||
|
||||
.mtt-settings-table { width:100%; border-collapse:collapse; }
|
||||
.mtt-settings-table th, .mtt-settings-table td { border-bottom:1px solid #dedede; padding:8px; vertical-align:top; }
|
||||
.mtt-settings-table .form-bottom-buttons { border-bottom:none; text-align:center; }
|
||||
.mtt-settings-table th { text-align:left; width:30%; padding-left:8px; }
|
||||
.mtt-settings-table { width:100%; }
|
||||
.mtt-settings-table .tr { border-bottom:1px solid #dedede; padding:0px; vertical-align:top; display: flex;}
|
||||
.mtt-settings-table .form-bottom-buttons { border-bottom:none; text-align:center; display: block; padding:8px 0px; }
|
||||
.mtt-settings-table .th, .mtt-settings-table .td { padding:8px; }
|
||||
.mtt-settings-table .th { width:30%; font-weight: bold; }
|
||||
.mtt-settings-table .descr { font-size:0.8rem; font-weight:normal; color:#222; }
|
||||
.mtt-settings-table .in350 { min-width:350px; }
|
||||
.mtt-settings-table input { padding:3px; border:1px solid #ccc; border-radius:2px; }
|
||||
.mtt-settings-table input { padding:3px; border:1px solid #ccc; border-radius:2px; }
|
||||
.mtt-settings-table select { padding:2px; border:1px solid #ccc; border-radius:2px; }
|
||||
.mtt-settings-table .form-bottom-buttons input { padding:4px; border:1px solid #ccc; border-radius:3px; background-color:#efefef; margin:2px; }
|
||||
.mtt-settings-table input:focus, .mtt-settings-table select:focus { outline:none; border-color:#5a8df0; box-shadow:0 0 0 2px rgba(90,141,240,0.7); }
|
||||
.mtt-settings-table input:focus,
|
||||
.mtt-settings-table select:focus { outline:none; border-color:#5a8df0; box-shadow:0 0 0 2px rgba(90,141,240,0.7); }
|
||||
|
||||
|
||||
/* font for small screens */
|
||||
|
|
@ -511,4 +523,9 @@ li.mtt-item-hidden { display:none; }
|
|||
|
||||
.mtt-menu-container li { padding-top:0.3rem; padding-bottom:0.3rem; }
|
||||
|
||||
.mtt-settings-table .tr { display: block; }
|
||||
.mtt-settings-table .th { width: auto; padding-bottom: 4px; padding-left: 0px; }
|
||||
.mtt-settings-table .td { padding-top: 4px; padding-left: 0px; }
|
||||
.mtt-settings-table input , .mtt-settings-table select, .mtt-settings-table label { margin-top:5px; }
|
||||
|
||||
} /* end of @media min 600px */
|
||||
|
|
|
|||
139
src/settings.php
139
src/settings.php
|
|
@ -173,24 +173,22 @@ function timezoneIdentifiers()
|
|||
header('Content-type:text/html; charset=utf-8');
|
||||
?>
|
||||
|
||||
<div><a href="#" class="mtt-back-button"><?php _e('go_back');?></a></div>
|
||||
|
||||
<h3 class="page-title"><?php _e('set_header');?></h3>
|
||||
<h3 class="page-title"><a class="mtt-back-button"></a><?php _e('set_header');?></h3>
|
||||
|
||||
<div id="settings_msg" style="display:none"></div>
|
||||
|
||||
<form id="settings_form" method="post" action="settings.php">
|
||||
|
||||
<table class="mtt-settings-table">
|
||||
<div class="mtt-settings-table">
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_title');?>:<br/><span class="descr"><?php _e('set_title_descr');?></span></th>
|
||||
<td> <input name="title" value="<?php echo htmlspecialchars(_c('title'));?>" class="in350" autocomplete="off" /> </td>
|
||||
</tr>
|
||||
<div class="tr">
|
||||
<div class="th"> <?php _e('set_title');?>:<br/><span class="descr"><?php _e('set_title_descr');?></span></div>
|
||||
<div class="td"> <input name="title" value="<?php echo htmlspecialchars(_c('title'));?>" class="in350" autocomplete="off" /> </div>
|
||||
</div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_language');?>:</th>
|
||||
<td>
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_language');?>:</div>
|
||||
<div class="td">
|
||||
<select name="lang"><?php echo selectOptionsA(getLangs(), _c('lang')); ?></select>
|
||||
<?php if ($oldLangs) { ?>
|
||||
<br><br>
|
||||
|
|
@ -204,68 +202,68 @@ header('Content-type:text/html; charset=utf-8');
|
|||
$('#mtt_old_langs_link').attr('href', mytinytodo.mttUrl + 'mytinytodo_lang.php?jsonfile&lang=' + $('#mtt_old_langs').val());
|
||||
</script>
|
||||
<?php } ?>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_protection');?>:</th>
|
||||
<td>
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_protection');?>:</div>
|
||||
<div class="td">
|
||||
<label><input type="radio" name="allowpassword" value="1" <?php if(_c('password')!='') echo 'checked="checked"'; ?> onclick='$(this.form).find("input[name=password]").attr("disabled",false)' /><?php _e('set_enabled');?></label> <br/>
|
||||
<label><input type="radio" name="allowpassword" value="0" <?php if(_c('password')=='') echo 'checked="checked"'; ?> onclick='$(this.form).find("input[name=password]").attr("disabled","disabled")' /><?php _e('set_disabled');?></label> <br/>
|
||||
</td></tr>
|
||||
</div></div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_newpass');?>:<br/><span class="descr"><?php _e('set_newpass_descr');?></span></th>
|
||||
<td> <input type="password" name="password" <?php if(_c('password')=='') echo "disabled"; ?> /> </td>
|
||||
</tr>
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_newpass');?>:<br/><span class="descr"><?php _e('set_newpass_descr');?></span></div>
|
||||
<div class="td"> <input type="password" name="password" <?php if(_c('password')=='') echo "disabled"; ?> /> </div>
|
||||
</div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_smartsyntax');?>:<br/><span class="descr"><?php _e('set_smartsyntax2_descr');?></span></th>
|
||||
<td>
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_smartsyntax');?>:<br/><span class="descr"><?php _e('set_smartsyntax2_descr');?></span></div>
|
||||
<div class="td">
|
||||
<label><input type="radio" name="smartsyntax" value="1" <?php if(_c('smartsyntax')) echo 'checked="checked"'; ?> /><?php _e('set_enabled');?></label> <br/>
|
||||
<label><input type="radio" name="smartsyntax" value="0" <?php if(!_c('smartsyntax')) echo 'checked="checked"'; ?> /><?php _e('set_disabled');?></label>
|
||||
</td></tr>
|
||||
</div></div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_autotag');?>:<br/><span class="descr"><?php _e('set_autotag_descr');?></span></th>
|
||||
<td>
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_autotag');?>:<br/><span class="descr"><?php _e('set_autotag_descr');?></span></div>
|
||||
<div class="td">
|
||||
<label><input type="radio" name="autotag" value="1" <?php if(_c('autotag')) echo 'checked="checked"'; ?> /><?php _e('set_enabled');?></label> <br/>
|
||||
<label><input type="radio" name="autotag" value="0" <?php if(!_c('autotag')) echo 'checked="checked"'; ?> /><?php _e('set_disabled');?></label>
|
||||
</td></tr>
|
||||
</div></div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_sessions');?>:</th>
|
||||
<td>
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_sessions');?>:</div>
|
||||
<div class="td">
|
||||
<label><input type="radio" name="session" value="default" <?php if(_c('session')=='default') echo 'checked="checked"'; ?> /><?php _e('set_sessions_php');?></label> <br/>
|
||||
<label><input type="radio" name="session" value="files" <?php if(_c('session')=='files') echo 'checked="checked"'; ?> /><?php _e('set_sessions_files');?></label> <span class="descr">(<mytinytodo_dir>/tmp/sessions)</span>
|
||||
</td></tr>
|
||||
</div></div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_timezone');?>:</th>
|
||||
<td>
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_timezone');?>:</div>
|
||||
<div class="td">
|
||||
<select name="timezone"><?php echo selectOptions(timezoneIdentifiers(), _c('timezone')); ?></select>
|
||||
</td></tr>
|
||||
</div></div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_firstdayofweek');?>:</th>
|
||||
<td>
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_firstdayofweek');?>:</div>
|
||||
<div class="td">
|
||||
<select name="firstdayofweek"><?php echo selectOptions(__('days_long'), _c('firstdayofweek')); ?></select>
|
||||
</td></tr>
|
||||
</div></div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_date');?>:</th>
|
||||
<td>
|
||||
<input name="dateformat" value="<?php echo htmlspecialchars(_c('dateformat'));?>" />
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_date');?>:</div>
|
||||
<div class="td">
|
||||
<input name="dateformat" size="8" value="<?php echo htmlspecialchars(_c('dateformat'));?>" />
|
||||
<select onchange="if(this.value!=0) this.form.dateformat.value=this.value;">
|
||||
<?php echo selectOptions(array('F j, Y'=>formatTime('F j, Y'), 'M d, Y'=>formatTime('M d, Y'), 'j M Y'=>formatTime('j M Y'), 'd F Y'=>formatTime('d F Y'),
|
||||
'n/j/Y'=>formatTime('n/j/Y'), 'd.m.Y'=>formatTime('d.m.Y'), 'j. F Y'=>formatTime('j. F Y'), 0=>__('set_custom')), _c('dateformat'), 0); ?>
|
||||
</select>
|
||||
</td></tr>
|
||||
</div></div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_date2');?>:</th>
|
||||
<td>
|
||||
<input name="dateformat2" value="<?php echo htmlspecialchars(_c('dateformat2'));?>" />
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_date2');?>:</div>
|
||||
<div class="td">
|
||||
<input name="dateformat2" size="8" value="<?php echo htmlspecialchars(_c('dateformat2'));?>" />
|
||||
<select onchange="if(this.value!=0) this.form.dateformat2.value=this.value;">
|
||||
<?php echo selectOptions(array(
|
||||
'Y-m-d'=>'yyyy-mm-dd ('.date('Y-m-d').')',
|
||||
|
|
@ -274,37 +272,36 @@ header('Content-type:text/html; charset=utf-8');
|
|||
'd/m/y'=>'dd/mm/yy ('.date('d/m/y').')',
|
||||
0=>__('set_custom')), _c('dateformat2'), 0); ?>
|
||||
</select>
|
||||
</td></tr>
|
||||
</div></div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_shortdate');?>:</th>
|
||||
<td>
|
||||
<input name="dateformatshort" value="<?php echo htmlspecialchars(_c('dateformatshort'));?>" />
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_shortdate');?>:</div>
|
||||
<div class="td">
|
||||
<input name="dateformatshort" size="8" value="<?php echo htmlspecialchars(_c('dateformatshort'));?>" />
|
||||
<select onchange="if(this.value!=0) this.form.dateformatshort.value=this.value;">
|
||||
<?php echo selectOptions(array('M d'=>formatTime('M d'), 'j M'=>formatTime('j M'), 'n/j'=>formatTime('n/j'), 'd.m'=>formatTime('d.m'), 0=>__('set_custom')), _c('dateformatshort'), 0); ?>
|
||||
</select>
|
||||
</td></tr>
|
||||
</div></div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_clock');?>:</th>
|
||||
<td>
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_clock');?>:</div>
|
||||
<div class="td">
|
||||
<select name="clock"><?php echo selectOptions(array(12=>__('set_12hour').' ('.date('g:i A').')', 24=>__('set_24hour').' ('.date('H:i').')'), _c('clock')); ?></select>
|
||||
</td></tr>
|
||||
</div></div>
|
||||
|
||||
<tr>
|
||||
<th><?php _e('set_showdate');?>:</th>
|
||||
<td>
|
||||
<div class="tr">
|
||||
<div class="th"><?php _e('set_showdate');?>:</div>
|
||||
<div class="td">
|
||||
<label><input type="radio" name="showdate" value="1" <?php if(_c('showdate')) echo 'checked="checked"'; ?> /><?php _e('set_enabled');?></label> <br/>
|
||||
<label><input type="radio" name="showdate" value="0" <?php if(!_c('showdate')) echo 'checked="checked"'; ?> /><?php _e('set_disabled');?></label>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tr><td colspan="2" class="form-bottom-buttons">
|
||||
<div class="tr form-bottom-buttons">
|
||||
<input type="submit" value="<?php _e('set_submit');?>" />
|
||||
<input type="button" class="mtt-back-button" value="<?php _e('set_cancel');?>" />
|
||||
</div>
|
||||
|
||||
<input type="submit" value="<?php _e('set_submit');?>" />
|
||||
<input type="button" class="mtt-back-button" value="<?php _e('set_cancel');?>" />
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
Loading…
Reference in a new issue