From 476abbd08b9cf6d00bf00e9e76be56909c5e237c Mon Sep 17 00:00:00 2001
From: Max Pozdeev <maxpozdeev@gmail.com>
Date: Sun, 25 Jul 2021 16:46:52 +0300
Subject: [PATCH] make settings UI more mobile friendly

---
 src/content/themes/default/images/back.svg |   4 +
 src/content/themes/default/style.css       |  29 ++++-
 src/settings.php                           | 139 ++++++++++-----------
 3 files changed, 95 insertions(+), 77 deletions(-)
 create mode 100644 src/content/themes/default/images/back.svg

diff --git a/src/content/themes/default/images/back.svg b/src/content/themes/default/images/back.svg
new file mode 100644
index 0000000..c32ce2d
--- /dev/null
+++ b/src/content/themes/default/images/back.svg
@@ -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>
diff --git a/src/content/themes/default/style.css b/src/content/themes/default/style.css
index aead8d9..6b4e3f2 100644
--- a/src/content/themes/default/style.css
+++ b/src/content/themes/default/style.css
@@ -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 */
diff --git a/src/settings.php b/src/settings.php
index 2ece27a..242a688 100644
--- a/src/settings.php
+++ b/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">(&lt;mytinytodo_dir&gt;/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>
\ No newline at end of file