From 3529269f360048dee7c486dd3e144f03fb7eec1b Mon Sep 17 00:00:00 2001
From: Max Pozdeev <maxpozdeev@gmail.com>
Date: Sun, 13 Sep 2020 22:48:35 +0300
Subject: [PATCH] replace css float with flex in top block

---
 src/includes/mytinytodo.js   | 13 ++++---------
 src/themes/default/index.php | 36 +++++++++++++++++++++---------------
 src/themes/default/style.css | 19 +++++++++++--------
 3 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/includes/mytinytodo.js b/src/includes/mytinytodo.js
index 70c4d5f..0a26f7e 100644
--- a/src/includes/mytinytodo.js
+++ b/src/includes/mytinytodo.js
@@ -2155,20 +2155,15 @@ function updateAccessStatus()
 	// flag.needAuth is not changed after pageload
 	if(flag.needAuth)
 	{
-		$('#bar_auth').show();
-		if(flag.isLogged) {
-			showhide($("#bar_logout"),$("#bar_login"));
-			$('#bar .menu-owner').show();
-			$('#bar .bar-delim').show();
+		if (flag.isLogged) {
+			showhide( $("#bar_logout"), $("#bar_login") );
 		}
 		else {
-			showhide($("#bar_login"),$("#bar_logout"));
-			$('#bar .menu-owner').hide();
-			$('#bar .bar-delim').hide();
+			showhide( $("#bar_login"), $("#bar_logout") );
 		}
 	}
 	else {
-		$('#bar .menu-owner').show();
+		$('#mtt_body').addClass('no-need-auth');
 	}
 	if(flag.needAuth && !flag.isLogged) {
 		flag.readOnly = true;
diff --git a/src/themes/default/index.php b/src/themes/default/index.php
index d161799..77b727b 100644
--- a/src/themes/default/index.php
+++ b/src/themes/default/index.php
@@ -47,26 +47,31 @@ $().ready(function(){
 <div id="container">
 <div id="mtt_body">
 
-<h2><?php mttinfo('title'); ?></h2>
+<!-- Top block -->
+<div class="topblock">
+ <div class="topblock-title">
+   <h2><?php mttinfo('title'); ?></h2>
+ </div>
 
-<div id="loading"></div>
-
-<div id="bar">
+<div class="topblock-bar">
+ <div id="loading"></div>
  <div id="msg"><span class="msg-text"></span><div class="msg-details"></div></div>
  <div class="bar-menu">
- <span class="menu-owner" style="display:none">
-   <a href="#settings" id="settings"><?php _e('a_settings');?></a>
- </span>
- <span class="bar-delim" style="display:none"> | </span>
- <span id="bar_auth">
-  <span id="bar_public" style="display:none"><?php _e('public_tasks');?> |</span>
-  <a href="#login" id="bar_login" class="nodecor"><u><?php _e('a_login');?></u> <span class="arrdown"></span></a>
-  <a href="#logout" id="bar_logout"><?php _e('a_logout');?></a>
- </span>
+   <span class="need-owner">
+     <a href="#settings" id="settings"><?php _e('a_settings');?></a>
+   </span>
+   <span id="bar_auth">
+	 <span class="need-owner"> | </span>
+     <span id="bar_public" style="display:none"><?php _e('public_tasks');?> |</span>
+     <a href="#login" id="bar_login" class="nodecor"><u><?php _e('a_login');?></u> <span class="arrdown"></span></a>
+     <a href="#logout" id="bar_logout"><?php _e('a_logout');?></a>
+   </span>
  </div>
 </div>
 
-<br clear="all" />
+</div>
+<!-- End of Top block -->
+
 
 <div id="page_tasks" style="display:none">
 
@@ -133,7 +138,8 @@ $().ready(function(){
  <ol id="tasklist" class="sortable"></ol>
 </div>
 
-</div> <!-- end of page_tasks -->
+</div>
+<!-- End of page_tasks -->
 
 
 <div id="page_taskedit" style="display:none">
diff --git a/src/themes/default/style.css b/src/themes/default/style.css
index e77eb23..c04137b 100644
--- a/src/themes/default/style.css
+++ b/src/themes/default/style.css
@@ -15,31 +15,34 @@ body { margin:0px; padding:0px;  height:100%; min-height:100%; background-color:
 td, th, input, textarea, select { font-family:arial; font-size:1rem; }
 form { display: inline; }
 h2,h3 { margin:0; }
-h2 { font-size:1.5rem; float:left; padding-right:10px; background-color:#ffffff; }
+h2 { font-size:1.5rem; padding-right:10px; }
 h3 { border-bottom:2px solid #B5D5FF; margin-bottom:10px; padding:0.6rem 0; font-size:1.1rem; }
 a { color:#0000ff; cursor:pointer; text-decoration:underline; }
 
+.topblock { display:flex; align-items:flex-start; margin-bottom:1rem; }
 #space { height:30px; }
 #footer { height:30px; margin-top:-30px; }
 #footer_content { background-color:#b5d5ff; padding:5px; font-size:0.85rem; }
 #footer_content a { color:#000000; }
 #mobileordesktop { float:right; }
 
-#bar { border-bottom:1px solid #b5d5ff; padding-bottom:5px; height:15px; }
-.bar-menu { float:right; }
+.topblock-title { display:flex; align-items:center; }
+.topblock-bar { flex-grow:1; display:flex; justify-content:flex-start; border-bottom:1px solid #b5d5ff; padding-bottom:5px; }
+#mtt_body.readonly .need-owner { display:none; }
+.bar-menu { flex-grow:1; text-align:right; }
 .nodecor { text-decoration:none; }
 #bar_logout { display:none; }
-#bar_auth { display:none; }
+#mtt_body.no-need-auth #bar_auth { display:none; }
 #authform { overflow: hidden; z-index:100; background-color:#f9f9f9; border:1px solid #cccccc; border-radius:2px; padding:10px; min-width:160px; box-shadow:1px 2px 5px rgba(0,0,0,0.5); }
 #authform div { padding:2px 0px; }
 #authform div.h { font-weight:bold; }
 #authform input { padding:3px; border:1px solid #ccc; border-radius:2px; }
 #authform input[type="submit"] { padding:4px; border-radius:3px; background-color:#efefef; }
-#loading { float:left; padding-top:5px; background-color:#ffffff; display:none; padding-right:6px; width:16px; height:16px; background:url(images/loading48.gif) no-repeat; background-size:16px 16px; }
+#loading { background-color:#ffffff; display:none; padding-right:6px; width:16px; height:16px; background:url(images/loading48.gif) no-repeat; background-size:16px 16px; }
 
-#msg { float:left; }
-#msg .msg-text {  padding:1px 4px; font-weight:bold; cursor:pointer; }
-#msg .msg-details { padding:1px 4px; background-color:#fff; display:none; max-width:700px;  }
+#msg {  }
+#msg .msg-text {  font-weight:bold; cursor:pointer; }
+#msg .msg-details { padding:1px 4px; background-color:#fff; display:none; max-width:700px; position:absolute; z-index:2; }
 #msg.mtt-error .msg-text { background-color:#ff3333; }
 #msg.mtt-error .msg-details { border:1px solid #ff3333;  }
 #msg.mtt-info .msg-text { background-color:#EFC300; }