From 79fbf9c58aec4f82db9a417bba81570e047fd0b3 Mon Sep 17 00:00:00 2001 From: Jakub Vrana Date: Sat, 29 Mar 2025 11:11:57 +0100 Subject: [PATCH] CSS: Hide menu on mobile --- CHANGELOG.md | 1 + adminer/include/design.inc.php | 7 ++++--- adminer/include/html.inc.php | 2 +- adminer/static/dark.css | 4 ++++ adminer/static/default.css | 11 ++++++++--- adminer/static/functions.js | 6 ++++++ 6 files changed, 24 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 290c1f86..03be428e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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) diff --git a/adminer/include/design.inc.php b/adminer/include/design.inc.php index ad28e373..c4bcf682 100644 --- a/adminer/include/design.inc.php +++ b/adminer/include/design.inc.php @@ -86,6 +86,7 @@ const thousandsSeparator = '" . js_escape(lang(',')) . "';") echo "\n"; echo script("mixin(qs('#help'), {onmouseover: () => { helpOpen = 1; }, onmouseout: helpMouseout});"); echo "
\n"; + echo "" . icon("move", "", "menu", "") . "" . 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 '
\n\n\n\n\n"; if ($missing != "auth") { ?>
@@ -203,9 +204,9 @@ function page_footer(string $missing = ""): void { -

\n\n"; echo script("setupSubmitHighlight(document);"); } diff --git a/adminer/include/html.inc.php b/adminer/include/html.inc.php index 18e8cd98..ad9260c9 100644 --- a/adminer/include/html.inc.php +++ b/adminer/include/html.inc.php @@ -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});", ""); diff --git a/adminer/static/dark.css b/adminer/static/dark.css index 9a226a33..04a88faf 100644 --- a/adminer/static/dark.css +++ b/adminer/static/dark.css @@ -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; } +} diff --git a/adminer/static/default.css b/adminer/static/default.css index 71d46840..129e5fd7 100644 --- a/adminer/static/default.css +++ b/adminer/static/default.css @@ -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; } diff --git a/adminer/static/functions.js b/adminer/static/functions.js index c2aa419b..6d6012a0 100644 --- a/adminer/static/functions.js +++ b/adminer/static/functions.js @@ -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); + } +}); -- 2.39.5