From 8b45cae0ad1535b31ddc1dea1ea13f9e1bf8a004 Mon Sep 17 00:00:00 2001
From: Max Pozdeev <maxpozdeev@gmail.com>
Date: Mon, 14 Sep 2020 20:32:26 +0300
Subject: [PATCH] replace float in #toolbar

---
 src/themes/default/index.php  | 39 ++++++++++++++---------------------
 src/themes/default/mobile.css | 10 ++++-----
 src/themes/default/style.css  | 21 +++++++------------
 3 files changed, 27 insertions(+), 43 deletions(-)

diff --git a/src/themes/default/index.php b/src/themes/default/index.php
index e1e467b..35654cc 100644
--- a/src/themes/default/index.php
+++ b/src/themes/default/index.php
@@ -88,36 +88,27 @@ $().ready(function(){
 
 <div id="toolbar">
 
-<div id="htab_search">
- <table class="mtt-searchbox"><tr><td>
-  <div class="mtt-searchbox-c">
-   <input type="text" name="search" value="" maxlength="250" id="search" autocomplete="off" />
-   <div class="mtt-searchbox-icon mtt-icon-search"></div>
-   <div id="search_close" class="mtt-searchbox-icon mtt-icon-cancelsearch"></div>
-  </div> 
- </td></tr></table>
-</div>
-
-<div id="htab_newtask">
- <table class="mtt-taskbox"><tr><td class="mtt-tb-cell">
-  <div class="mtt-tb-c">
+<div class="newtask-n-search-container">
+<div class="taskbox-c">
+  <div class="mtt-taskbox">
    <form id="newtask_form" method="post">
-    <label id="task_placeholder" class="placeholding" for="task">
-     <input type="text" name="task" value="" maxlength="250" id="task" autocomplete="off" />
-     <span><?php _e('htab_newtask');?></span>
-    </label>
-    <div id="newtask_submit" class="mtt-taskbox-icon mtt-icon-submittask" title="<?php _e('btn_add');?>"></div>
+     <input type="text" name="task" value="" maxlength="250" id="task" autocomplete="off" placeholder="<?php _e('htab_newtask');?>"/>
+     <div id="newtask_submit" class="mtt-taskbox-icon" title="<?php _e('btn_add');?>"></div>
    </form>
-  </div>
- </td>
- <td><a href="#" id="newtask_adv" class="mtt-img-button" title="<?php _e('advanced_add');?>"><span></span></a></td>
- </tr></table>
+  </div>	
+  <a href="#" id="newtask_adv" class="mtt-img-button" title="<?php _e('advanced_add');?>"><span></span></a>	
+</div>
+<div class="searchbox-c">
+  <div class="mtt-searchbox">
+    <input type="text" name="search" value="" maxlength="250" id="search" autocomplete="off" />
+    <div class="mtt-searchbox-icon mtt-icon-search"></div>
+    <div id="search_close" class="mtt-searchbox-icon mtt-icon-cancelsearch"></div>
+  </div> 
+</div>
 </div>
  
 <div id="searchbar" style="display:none"><?php _e('searching');?> <span id="searchbarkeyword"></span></div>
 
-<div style="clear:both"></div>
-
 <div id="mtt-tag-toolbar" style="display:none">
   <div class="tag-toolbar-content">
 	<span id="mtt-tag-filters"></span>
diff --git a/src/themes/default/mobile.css b/src/themes/default/mobile.css
index c3a8880..6cb7338 100644
--- a/src/themes/default/mobile.css
+++ b/src/themes/default/mobile.css
@@ -20,12 +20,10 @@ h2 { margin:0; margin-bottom:2px; font-size:1rem; }
 #task { padding:5px; padding-right:18px; margin-left:-22px; }
 #task_placeholder span { padding:6px; }
 
-#htab_search { width:30%; max-width:190px; }
-.mtt-searchbox { float:right; }
-.mtt-searchbox td { width:450px; max-width:100%; }
-#toolbar.mtt-intask #htab_search { display:none; }
-#toolbar.mtt-insearch #htab_newtask { display:none; }
-#toolbar.mtt-insearch #htab_search { width:100%; max-width:100%; }
+.searchbox-c { width:30%; max-width:190px; }
+#toolbar.mtt-intask .searchbox-c { display:none; }
+#toolbar.mtt-insearch .taskbox-c { display:none; }
+#toolbar.mtt-insearch .searchbox-c { width:100%; max-width:100%; }
 #search { padding:5px 20px; border-radius:15px; }
 
 #tasklist li { padding:0.5rem 3px; overflow:hidden;  }
diff --git a/src/themes/default/style.css b/src/themes/default/style.css
index b851ded..1179e80 100644
--- a/src/themes/default/style.css
+++ b/src/themes/default/style.css
@@ -115,34 +115,29 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
 .arrdown2 { display:inline-block; height:7px; width:7px; background:url(images/arrdown2.svg) no-repeat; }
 
 
-/* Quick Task Add */
+.newtask-n-search-container { display:flex; justify-content:flex-end; }
 
-.mtt-taskbox td { padding:0; }
-.mtt-taskbox td.mtt-tb-cell { width:450px; }
-.mtt-tb-c { position:relative; padding-left:22px; /*input padding+border*/ }
+/* Quick Task Add */
+.taskbox-c { flex-grow:1; display:flex; align-items:center; }
+.mtt-taskbox { position:relative; padding-left:22px; /*input padding+border*/ width:100%; max-width:430px; }
 #task { color:#444444; background:#fff; height:1.35rem; padding:2px 4px; padding-right:18px; border:1px solid #ccc; border-radius:3px; width:100%; margin-left:-22px; }
-#task_placeholder span { cursor:text; display:none; color:#ccc; position:absolute; left:0; top:0; height:1.35rem; line-height:1.35rem; padding:3px 5px; /*input top and left padding+border*/  }
-#task_placeholder.placeholding span { display:inline-block; }
+#mtt_body.show-all-tasks .taskbox-c, #mtt_body.readonly .taskbox-c { display:none; }
 
 .mtt-taskbox-icon { width:16px; height:16px; position:absolute; top:50%; margin-top:-8px; }
-.mtt-taskbox-icon.mtt-icon-submittask { background:url(images/add.svg) no-repeat; opacity:0.45; right:2px; cursor:pointer; transition:opacity .1s ease-in; }
-.mtt-taskbox-icon.mtt-icon-submittask:hover { opacity:0.7; }
-
+.mtt-taskbox-icon { background:url(images/add.svg) no-repeat; opacity:0.45; right:2px; cursor:pointer; transition:opacity .1s ease-in; }
+.mtt-taskbox-icon:hover { opacity:0.7; }
 #newtask_adv { margin-left:0.5rem; }
 #newtask_adv span { background:url(images/newtask-ext.svg) no-repeat; }
-#mtt_body.show-all-tasks #htab_newtask, #mtt_body.readonly #htab_newtask { display:none; }
 
 
 /* Live Search */
-#htab_search { float:right; }
 #search {
  color:#444444; background:#fff; height:1.35rem; padding:2px 20px; width:100%; margin-left:-42px; /*padding+border*/
  border:1px solid #ccc; border-radius:10px; 
 }
 #search_close { display:none; }
 
-.mtt-searchbox td { padding:0px; max-width:180px; }
-.mtt-searchbox-c { position:relative; padding-left:42px; /*input padding+border*/ }
+.mtt-searchbox { position:relative; padding-left:42px; /*input padding+border*/ }
 .mtt-searchbox-icon { width:16px; height:16px; position:absolute; top:50%; margin-top:-8px; }
 
 .mtt-searchbox-icon.mtt-icon-search { background:url(images/search.svg) no-repeat; left:4px; }