From: Jakub Vrana <jakub@vrana.cz>
Date: Fri, 4 Apr 2025 07:28:28 +0000 (+0200)
Subject: CSS: Move Logout on mobile (fix #979)
X-Git-Tag: v5.2.0~75
X-Git-Url: https://git.joonet.de/?a=commitdiff_plain;h=e277d051625f198919700aa8c34bf2d58d348f62;p=adminer.git

CSS: Move Logout on mobile (fix #979)
---

diff --git a/adminer/include/design.inc.php b/adminer/include/design.inc.php
index 2f93baf5..c8b74be9 100644
--- a/adminer/include/design.inc.php
+++ b/adminer/include/design.inc.php
@@ -85,7 +85,7 @@ const thousandsSeparator = '" . js_escape(lang(',')) . "';")
 	echo "<div id='help' class='jush-" . JUSH . " jsonly hidden'></div>\n";
 	echo script("mixin(qs('#help'), {onmouseover: () => { helpOpen = 1; }, onmouseout: helpMouseout});");
 	echo "<div id='content'>\n";
-	echo "<span id='menuopen' class='jsonly'>" . icon("move", "", "menu", "") . "</span>" . script("qs('#menuopen').onclick = event => { qs('#foot').classList.toggle('foot'); event.stopPropagation(); }");
+	echo "<span id='menuopen' class='jsonly'>" . icon("move", "", "menu", "") . "</span>" . script("qs('#menuopen').onclick = event => { qs('#menu').classList.toggle('foot'); event.stopPropagation(); }");
 	if ($breadcrumb !== null) {
 		$link = substr(preg_replace('~\b(username|db|ns)=[^&]*&~', '', ME), 0, -1);
 		echo '<p id="breadcrumb"><a href="' . h($link ?: ".") . '">' . get_driver(DRIVER) . '</a> » ';
@@ -190,16 +190,16 @@ function page_messages(string $error): void {
 * @param ''|'auth'|'db'|'ns' $missing
 */
 function page_footer(string $missing = ""): void {
-	echo "</div>\n\n<div id='foot' class='foot'>\n<div id='menu'>\n";
+	echo "</div>\n\n<div id='menu' class='foot'>\n";
 	adminer()->navigation($missing);
-	echo "</div>\n";
 	if ($missing != "auth") {
 		?>
 <form action="" method="post">
-<p class="logout">
+<div class="logout">
 <span><?php echo h($_GET["username"]) . "\n"; ?></span>
 <input type="submit" name="logout" value="<?php echo lang('Logout'); ?>" id="logout">
 <?php echo input_token(); ?>
+</div>
 </form>
 <?php
 	}
diff --git a/adminer/static/default.css b/adminer/static/default.css
index d0b0da5d..6c5a8ce0 100644
--- a/adminer/static/default.css
+++ b/adminer/static/default.css
@@ -75,7 +75,7 @@ input.wayoff { left: -1000px; position: absolute; }
 .footer > div { background: var(--bg); padding: 0 0 .5em; }
 .footer fieldset { margin-top: 0; }
 .links a { white-space: nowrap; margin-right: 20px; }
-.logout { margin-top: .5em; position: absolute; top: 0; right: 0; }
+.logout { position: fixed; top: .5em; right: 20px; }
 .loadmore { margin-left: 1ex; }
 /* .edit used in designs */
 #menu { position: absolute; margin: 10px 0 0; top: 2em; left: 0; width: 19em; }
@@ -116,14 +116,15 @@ input.wayoff { left: -1000px; position: absolute; }
 
 @media all and (max-width: 880px) {
 	.pages { left: auto; }
-	.logout { padding: 1em; top: 3em; }
+	.logout { position: absolute; top: 1.667em; }
 	#menu { width: auto; background: var(--bg); border: 1px solid var(--fg); margin-top: 9px; box-shadow: 0 0 20px rgb(from var(--fg) r g b / .7); }
 	#content { margin-left: 10px; }
 	#lang { position: static; }
 	#breadcrumb { left: 48px; }
 	.js .foot { display: none; }
 	.js #menuopen { display: block; position: absolute; top: 3px; left: 6px; }
-	.nojs .logout, .nojs #menu { position: static; }
+	.nojs #menu { position: static; }
+	.nojs .logout { position: static; padding: 1em; }
 	.rtl .pages { right: auto; }
 	.rtl #content { margin-right: 10px; }
 	.rtl #breadcrumb { right: auto; }
diff --git a/adminer/static/functions.js b/adminer/static/functions.js
index 3103a73e..5e38f0d2 100644
--- a/adminer/static/functions.js
+++ b/adminer/static/functions.js
@@ -848,7 +848,7 @@ oninput = event => {
 };
 
 addEvent(document, 'click', event => {
-	if (!qs('#foot').contains(event.target)) {
-		alterClass(qs('#foot'), 'foot', true);
+	if (!qs('#menu').contains(event.target)) {
+		alterClass(qs('#menu'), 'foot', true);
 	}
 });