replace css float with flex in top block

This commit is contained in:
Max Pozdeev 2020-09-13 22:48:35 +03:00
parent 27220c974d
commit 3529269f36
3 changed files with 36 additions and 32 deletions

View file

@ -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;

View file

@ -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">

View file

@ -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; }