1
0
mirror of https://github.com/vrana/adminer.git synced 2025-08-07 07:06:45 +02:00

CSS: Hide menu on mobile

This commit is contained in:
Jakub Vrana
2025-03-29 11:11:57 +01:00
parent 6cf3d5d2b8
commit 79fbf9c58a
6 changed files with 24 additions and 7 deletions

View File

@@ -1,6 +1,7 @@
## Adminer dev
Export: Fix tar (regression from 5.0.3)
Elasticsearch: Make it work with Elasticsearch 8
CSS: Hide menu on mobile
CSS: Invert icons in dark mode
## Adminer 5.1.0 (released 2025-03-24)

View File

@@ -86,6 +86,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(); }");
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> » ';
@@ -193,9 +194,9 @@ function page_messages(string $error): void {
*/
function page_footer(string $missing = ""): void {
global $adminer;
echo "</div>\n\n<div id='menu'>\n";
echo "</div>\n\n<div id='foot' class='foot'>\n<div id='menu'>\n";
$adminer->navigation($missing);
echo "</div>\n\n";
echo "</div>\n";
if ($missing != "auth") {
?>
<form action="" method="post">
@@ -203,9 +204,9 @@ function page_footer(string $missing = ""): void {
<span><?php echo h($_GET["username"]) . "\n"; ?></span>
<input type="submit" name="logout" value="<?php echo lang('Logout'); ?>" id="logout">
<?php echo input_token(); ?>
</p>
</form>
<?php
}
echo "</div>\n\n";
echo script("setupSubmitHighlight(document);");
}

View File

@@ -353,7 +353,7 @@ function search_tables(): void {
/** Return events to display help on mouse over
* @param string $command JS expression
* @param int $side JS expression
* @param int $side 0 top, 1 left
*/
function on_help(string $command, int $side = 0): string {
return script("mixin(qsl('select, input'), {onmouseover: function (event) { helpMouseover.call(this, event, $command, $side) }, onmouseout: helpMouseout});", "");

View File

@@ -44,3 +44,7 @@ input.required, input.maxlength { box-shadow: 1px 1px 1px red; }
#schema div.table a { color: #3c7bb3; }
#menu .active { color: #398c8d; }
#edit-fields tbody tr:hover td, #edit-fields tbody tr:hover th { background: #3b6f9d; }
@media all and (max-width: 880px) {
#menu { background: #002240; border-color: #a3bdd3; }
}

View File

@@ -81,6 +81,7 @@ input.wayoff { left: -1000px; position: absolute; }
#logins a, #tables a, #tables span { background: #fff; }
#content { margin: 2em 0 0 21em; padding: 10px 20px 20px 0; }
#lang { position: absolute; top: -2.6em; left: 0; padding: .3em 1em; }
#menuopen { display: none; }
#breadcrumb { white-space: nowrap; position: absolute; top: 0; left: 21em; background: #eee; height: 2em; line-height: 1.8em; padding: 0 1em; margin: 0 0 0 -18px; }
#h1 { color: #777; text-decoration: none; font-style: italic; }
#version { color: red; }
@@ -94,6 +95,7 @@ input.wayoff { left: -1000px; position: absolute; }
.icon-down { background-image: url(data:image/gif;base64,R0lGODlhEgASAIEAMe7u7gAAgJmZmQAAACH5BAEAAAEALAAAAAASABIAAQIghI+py+0PTQjxzCopvltX/lyix0wm2ZwdxraVAMfyHBcAOw==); }
.icon-plus { background-image: url(data:image/gif;base64,R0lGODlhEgASAIEAMe7u7gAAgJmZmQAAACH5BAEAAAEALAAAAAASABIAAQIhhI+py+0PTQjxzCopvm/6rykgCHGVGaFliLXuI8TyTMsFADs=); }
.icon-cross { background-image: url(data:image/gif;base64,R0lGODlhEgASAIEAMe7u7gAAgJmZmQAAACH5BAEAAAEALAAAAAASABIAAQIjhI+py+0PIwph1kZvfnnDLoFfd2GU4THnsUruC0fCTNc2XQAAOw==); }
.icon-move { background-image: url(data:image/gif;base64,R0lGODlhEgASAJEAAO7u7gAAAJmZmQAAACH5BAEAAAEALAAAAAASABIAAAIfhI+py+3vgpyU0Rug3gnX5U3cqIWSZZLqigjuC8dvAQA7); }
#schema .arrow { height: 1.25em; background: url(data:image/gif;base64,R0lGODlhCAAKAIAAAICAgP///yH5BAEAAAEALAAAAAAIAAoAAAIPBIJplrGLnpQRqtOy3rsAADs=) no-repeat right center; }
.rtl h2 { margin: 0 -18px 20px 0; }
@@ -108,11 +110,14 @@ input.wayoff { left: -1000px; position: absolute; }
@media all and (max-width: 880px) {
.pages { left: auto; }
.logout { position: static; padding: 1em; }
#menu { position: static; width: auto; }
.logout { padding: 1em; top: 3em; }
#menu { width: auto; background: #fff; border: 1px solid #000; }
#content { margin-left: 10px; }
#lang { position: static; }
#breadcrumb { left: auto; }
#breadcrumb { left: 48px; }
.js .foot { display: none; }
.js #menuopen { display: block; position: absolute; top: 3px; left: 6px; }
.nojs .logout, .nojs #menu { position: static; }
.rtl .pages { right: auto; }
.rtl #content { margin-right: 10px; }
.rtl #breadcrumb { right: auto; }

View File

@@ -849,3 +849,9 @@ oninput = event => {
const maxLength = target.getAttribute('data-maxlength');
alterClass(target, 'maxlength', target.value && maxLength != null && target.value.length > maxLength); // maxLength could be 0
};
addEvent(document, 'click', event => {
if (!qs('#foot').contains(event.target)) {
alterClass(qs('#foot'), 'foot', true);
}
});