From b3e640a1f72ab428383a852a35bec4067c5cef4c Mon Sep 17 00:00:00 2001
From: maxpozdeev <maxpozdeev@gmail.com>
Date: Wed, 6 Sep 2023 17:54:00 +0300
Subject: [PATCH] polish mobile task viewer

---
 src/content/mytinytodo.js   |  6 ++++
 src/content/theme/style.css | 60 +++++++++++++++++++++++--------------
 src/includes/lang/en.json   |  1 +
 src/includes/lang/ru.json   |  1 +
 src/includes/theme.php      |  7 +++--
 5 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/src/content/mytinytodo.js b/src/content/mytinytodo.js
index 6b8a422..6eaed67 100644
--- a/src/content/mytinytodo.js
+++ b/src/content/mytinytodo.js
@@ -1769,6 +1769,12 @@ function fillTaskViewer(id)
     $('#page_taskviewer .due .content').html(item.duedate);
     $('#page_taskviewer .tags .content').html(prepareTagsStr(item, ''));
     $('#page_taskviewer .list .content').text(curList.name);
+    if (item.note == '') {
+        $('#page_taskviewer').addClass('no-note');
+    }
+    else {
+        $('#page_taskviewer').removeClass('no-note');
+    }
     return item;
 }
 
diff --git a/src/content/theme/style.css b/src/content/theme/style.css
index ca06691..9b599ae 100644
--- a/src/content/theme/style.css
+++ b/src/content/theme/style.css
@@ -504,6 +504,22 @@ select.form-input {
   background-color: var(--color-btn-reduced);
 }
 
+a.mtt-back-button {
+  font-size:1rem;
+}
+h3.page-title a.mtt-back-button {
+  display:inline-block;
+  width:1.3rem;
+  min-width:1.3rem;
+  height:1.3rem;
+  padding-right:0.4rem;
+  position: relative;
+  top:4px;
+  mask: url(images/back.svg) no-repeat; -webkit-mask: url(images/back.svg) no-repeat;
+  background-color: var(--color-btn-default);
+}
+
+
 /* Tasklist */
 
 .task-toggle {
@@ -749,6 +765,10 @@ li.task-row.task-expanded .task-note-block { display:block; }
 #taskedit_info { font-size:1rem; font-weight:normal; color:var(--color-text-reduced2); margin-bottom:6px; }
 #taskedit_info > div { margin-top:6px; }
 
+#page_taskviewer h3 {
+  display: flex;
+  align-items: baseline;
+}
 #page_taskviewer .container {
   display: flex;
   max-width: 100%;
@@ -772,23 +792,24 @@ li.task-row.task-expanded .task-note-block { display:block; }
 #page_taskviewer .container .right .form-bottom-buttons .mtt-back-button {
   display: none;
 }
-
 #page_taskviewer .title {
-  /*font-weight: bold;*/
-  font-size: 1.4rem;
-  margin-top: 1rem;
-  padding-bottom: 1rem;
-  margin-bottom: 1rem;
-  border-bottom: 1px solid var(--color-tasklist-row-expanded-border);
+  word-break: break-word;
 }
 #page_taskviewer .note {
   line-height: 1.3;
   display: block;
   white-space: normal;
   word-wrap: break-word;
-  padding: 1rem;
-  border:1px solid var(--color-tasklist-row-expanded-border);
-  border-radius: 5px;
+}
+#page_taskviewer .no-note {
+  color: var(--color-text-reduced3);
+  display: none;
+}
+#page_taskviewer.no-note .no-note {
+  display: block;
+}
+#page_taskviewer.no-note .note {
+  display: none;
 }
 #page_taskviewer .property.tags .content {
   display: inline-flex;
@@ -796,18 +817,6 @@ li.task-row.task-expanded .task-note-block { display:block; }
   max-width: 100%;
 }
 
-a.mtt-back-button { font-size:1rem; }
-h3.page-title a.mtt-back-button {
-  display:inline-block;
-  width:1.3rem;
-  height:1.3rem;
-  padding-right:0.4rem;
-  position: relative;
-  top:4px;
-  mask: url(images/back.svg) no-repeat; -webkit-mask: url(images/back.svg) no-repeat;
-  background-color: var(--color-btn-default);
-}
-
 /* 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; }
 .ui-autocomplete {
@@ -1310,11 +1319,16 @@ li.mtt-item-hidden { display:none; }
     padding-left: 0;
   }
   #page_taskviewer .container .right .property {
-    padding: 0.8rem 0.5rem;
+    padding: 0.8rem 0;
   }
   #page_taskviewer .container .right .form-bottom-buttons .mtt-back-button {
     display: block;
   }
+  #page_taskviewer .note,
+  #page_taskviewer .no-note {
+    padding-bottom:10px;
+    border-bottom: 2px solid var(--color-tasklist-row-expanded-border);
+  }
 
   .mtt-settings-table .tr:not(.form-bottom-buttons) {
     display: block;
diff --git a/src/includes/lang/en.json b/src/includes/lang/en.json
index e58daa2..3576adf 100644
--- a/src/includes/lang/en.json
+++ b/src/includes/lang/en.json
@@ -30,6 +30,7 @@
     "note": "Note",
     "tags": "Tags",
     "list": "List",
+    "no_note": "No notes",
     "save": "Save",
     "cancel": "Cancel",
     "close": "Close",
diff --git a/src/includes/lang/ru.json b/src/includes/lang/ru.json
index 3e4b23d..c13f6a0 100644
--- a/src/includes/lang/ru.json
+++ b/src/includes/lang/ru.json
@@ -30,6 +30,7 @@
     "note": "Заметка",
     "tags": "Теги",
     "list": "Список",
+    "no_note": "Нет заметки",
     "save": "Сохранить",
     "cancel": "Отмена",
     "close": "Закрыть",
diff --git a/src/includes/theme.php b/src/includes/theme.php
index 5ab2bc4..5fe5d29 100644
--- a/src/includes/theme.php
+++ b/src/includes/theme.php
@@ -175,10 +175,13 @@ $().ready(function(){
 
 <!-- Page: View Task -->
 <div id="page_taskviewer" style="display:none">
-<h3 class="page-title"><a class="mtt-back-button"></a><?php _e('task');?> <span id="taskviewer_id"></span></h3>
-  <div class="title"></div>
+<h3 class="page-title">
+  <a class="mtt-back-button"></a>
+  <div><span class="title"></span> <span id="taskviewer_id"></span></div>
+</h3>
   <div class="container">
     <div class="left">
+      <div class="no-note"><?php _e('no_note'); ?></div>
       <div class="note markdown-note"></div>
     </div>
     <div class="right">