FbIN/htmly
1
0
Fork 0
mirror of https://github.com/danpros/htmly.git synced 2026-04-22 05:26:22 +05:30
Code Issues Projects Releases Packages Wiki Activity

Improve toolbar

Browse source 
Add menu button for mobile
This commit is contained in:
Dan 2025-04-21 09:21:41 +07:00
commit 4fda99425d
2 changed files with 54 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

4
system/admin/admin.php
View file

@ -1628,7 +1628,7 @@ function toolbar()
$toolbar .= <<<EOF $toolbar .= <<<EOF
<link href="{$base}system/resources/css/toolbar.css" rel="stylesheet" /> <link href="{$base}system/resources/css/toolbar.css" rel="stylesheet" />
EOF; EOF;
$toolbar .= '<div id="toolbar"><ul>'; $toolbar .= '<div id="toolbar"><label for="menu-toggle" id="menu-button">☰ Menu</label><input type="checkbox" id="menu-toggle"><div id="menu"><ul>';
$toolbar .= '<li class="tb-admin"><a href="' . $base . 'admin">' . i18n('Admin') . '</a></li>'; $toolbar .= '<li class="tb-admin"><a href="' . $base . 'admin">' . i18n('Admin') . '</a></li>';
$toolbar .= '<li class="tb-addcontent"><a href="' . $base . 'admin/content">' . i18n('Add_content') . '</a></li>'; $toolbar .= '<li class="tb-addcontent"><a href="' . $base . 'admin/content">' . i18n('Add_content') . '</a></li>';
if ($role === 'editor' || $role === 'admin') { if ($role === 'editor' || $role === 'admin') {
@ -1655,7 +1655,7 @@ EOF;
$toolbar .= '<li class="tb-editprofile"><a href="' . $base . 'edit/profile">' . i18n('Edit_profile') . '</a></li>'; $toolbar .= '<li class="tb-editprofile"><a href="' . $base . 'edit/profile">' . i18n('Edit_profile') . '</a></li>';
$toolbar .= '<li class="tb-logout"><a href="' . $base . 'logout">' . i18n('Logout') . '</a></li>'; $toolbar .= '<li class="tb-logout"><a href="' . $base . 'logout">' . i18n('Logout') . '</a></li>';
$toolbar .= '</ul></div>'; $toolbar .= '</ul></div></div><script>function adjustPaddingTop() {const toolbarHeight = document.getElementById("toolbar").offsetHeight;document.body.style.paddingTop = `${toolbarHeight}px`;}window.addEventListener("load", adjustPaddingTop);window.addEventListener("resize", adjustPaddingTop);</script>';
echo $toolbar; echo $toolbar;
} }

76
system/resources/css/toolbar.css
View file

@ -2,22 +2,6 @@ body {
padding-top: 30px padding-top: 30px
} }
.admin-front .tb-admin,
.all-posts .tb-posts,
.admin-popular .tb-popular,
.admin-mine .tb-mine,
.admin-draft .tb-draft,
.admin-content .tb-addcontent,
.admin-categories .tb-categories,
.edit-profile .tb-editprofile,
.admin-import .tb-import,
.admin-backup .tb-backup,
.admin-config .tb-config,
.admin-clear-cache .tb-clearcache,
.admin-update .tb-update {
background:#400;
}
#toolbar { #toolbar {
background: #666; background: #666;
box-shadow: 0 5px 15px #000; box-shadow: 0 5px 15px #000;
@ -40,7 +24,6 @@ body {
#toolbar ul { #toolbar ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
padding-left: 30px;
} }
#toolbar ul li, #toolbar ul li a { #toolbar ul li, #toolbar ul li a {
@ -55,16 +38,9 @@ body {
color: #FFF; color: #FFF;
font-size: .846em; font-size: .846em;
text-decoration: none; text-decoration: none;
border-radius: 10px;
padding: 0 10px; padding: 0 10px;
} }
@media all and (max-width: 550px) {
body {
padding-top: 60px
}
}
table#config td:first-child { table#config td:first-child {
width: 30% width: 30%
} }
@ -81,3 +57,55 @@ table#config input {
table#config tr:last-child td { table#config tr:last-child td {
border-bottom: none border-bottom: none
} }
#menu-toggle {
display: none;
background: #666;
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 18px;
}
#menu {
display: block;
}
#menu-toggle {
display: none;
}
#menu-button {
display: none;
background: #666;
color: white;
padding: 10px;
cursor: pointer;
font-size: 18px;
}
@media all and (max-width: 550px) {
#menu-button {
display: block;
}
#menu {
display: none;
background: #666;
position: absolute;
top: 50px;
left: 0;
width: 100%;
box-shadow: 0 5px 15px #000;
}
#menu ul {
display: flex;
flex-direction: column;
text-align: center;
}
#menu-toggle:checked + #menu {
display: block;
}
}