Skip to content

Commit 58cd7da

Browse files
AlecRustAlecRust
authored
Full width top bar dropdowns on mobile (hestiacp#3765)
* Improve consistency of top bar dropdowns HTML And fix "click away to close" not working on List Server Info and List Weblog. * Refactor top bar dropdowns to be full width on mobile
1 parent d68985d commit 58cd7da

File tree

7 files changed

+266
-208
lines changed

7 files changed

+266
-208
lines changed

‎web/css/src/themes/dark.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,10 @@
5151

5252
.top-bar-notifications-panel {
5353
background-color: rgb(50 50 50 / 99%);
54-
border: 1px solid #404040;
54+
55+
@media (--viewport-small) {
56+
border-color: #404040;
57+
}
5558
}
5659

5760
.top-bar-notifications-empty {
@@ -82,7 +85,7 @@
8285
border-top-color: #282828;
8386
}
8487

85-
.top-bar-menu-list {
88+
.top-bar-menu-panel {
8689
background-color: #454545;
8790
}
8891

‎web/css/src/themes/default.css‎

Lines changed: 61 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -137,26 +137,32 @@
137137

138138
.top-bar-notifications {
139139
display: flex;
140-
position: relative;
140+
141+
@media (--viewport-small) {
142+
position: relative;
143+
}
141144
}
142145

143146
.top-bar-notifications-panel {
144147
background-color: #fff;
145148
box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
146-
max-height: 500px;
149+
max-height: 50vh;
147150
overflow-y: auto;
148151
position: absolute;
149152
top: 100%;
150-
right: 0;
151-
width: 280px;
153+
left: 0;
154+
width: 100%;
152155
z-index: 1;
153-
border-bottom-left-radius: 6px;
154-
border-bottom-right-radius: 6px;
155-
border: 1px solid #fff;
156-
border-top: none;
157156

158157
@media (--viewport-small) {
159-
width: 330px;
158+
left: initial;
159+
right: 0;
160+
width: 350px;
161+
max-height: 500px;
162+
border-bottom-left-radius: 6px;
163+
border-bottom-right-radius: 6px;
164+
border: 1px solid #fff;
165+
border-top: none;
160166
}
161167

162168
@media (--viewport-medium) {
@@ -180,7 +186,7 @@
180186
color: #6f6f6f;
181187
font-size: 0.8rem;
182188
border-bottom: 1px solid #e9e4e4;
183-
padding: 15px;
189+
padding: 15px 20px;
184190

185191
&:last-child {
186192
border-bottom: none;
@@ -199,6 +205,11 @@
199205
& a {
200206
font-weight: 600;
201207
}
208+
209+
@media (--viewport-small) {
210+
padding-left: 15px;
211+
padding-right: 15px;
212+
}
202213
}
203214

204215
.top-bar-notification-timestamp {
@@ -279,24 +290,59 @@
279290

280291
.top-bar-menu {
281292
display: flex;
282-
position: relative;
293+
294+
@media (--viewport-small) {
295+
position: relative;
296+
}
283297
}
284298

285-
.top-bar-menu-list {
299+
.top-bar-menu-panel {
286300
display: block;
287301
background-color: #4673b6;
288302
box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
289303
position: absolute;
290304
top: 100%;
291-
right: 0;
292-
animation-duration: var(--animate-duration);
305+
left: 0;
306+
width: 100%;
307+
z-index: 1;
308+
309+
@media (--viewport-small) {
310+
left: initial;
311+
right: 0;
312+
width: 350px;
313+
border-bottom-left-radius: 6px;
314+
border-bottom-right-radius: 6px;
315+
}
293316

294317
@media (--viewport-medium) {
295318
display: flex !important; /* NOTE: Overrides inline style set by JS */
319+
width: auto;
296320
background-color: transparent;
297321
box-shadow: none;
298322
position: static;
299-
animation-duration: 0s;
323+
}
324+
}
325+
326+
.top-bar-menu-list {
327+
& .top-bar-menu-link {
328+
padding-left: 20px;
329+
padding-right: 20px;
330+
}
331+
332+
@media (--viewport-small) {
333+
& .top-bar-menu-link {
334+
padding-left: 15px;
335+
padding-right: 15px;
336+
}
337+
}
338+
339+
@media (--viewport-medium) {
340+
display: flex;
341+
342+
& .top-bar-menu-link {
343+
padding-left: 10px;
344+
padding-right: 10px;
345+
}
300346
}
301347
}
302348

@@ -371,7 +417,6 @@
371417

372418
.top-bar-menu-link-label {
373419
margin-left: 6px;
374-
white-space: nowrap;
375420

376421
@media (--viewport-medium) {
377422
display: none;

‎web/css/src/themes/flat.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,10 @@
2525
}
2626

2727
.top-bar-notifications-panel {
28-
box-shadow: none;
29-
border-color: #ccc;
28+
@media (--viewport-small) {
29+
box-shadow: none;
30+
border-color: #ccc;
31+
}
3032
}
3133

3234
.top-bar-menu-link {

‎web/css/src/themes/vestia.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,12 @@ h1 {
3030
}
3131

3232
.top-bar-notifications-panel {
33-
border-color: #ccc;
34-
border-bottom-left-radius: 2px;
35-
border-bottom-right-radius: 2px;
36-
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
33+
@media (--viewport-small) {
34+
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
35+
border-color: #ccc;
36+
border-bottom-left-radius: 2px;
37+
border-bottom-right-radius: 2px;
38+
}
3739
}
3840

3941
.top-bar-notification-item {
@@ -48,7 +50,7 @@ h1 {
4850
}
4951
}
5052

51-
.top-bar-menu-list {
53+
.top-bar-menu-panel {
5254
background-color: #5d5d5d;
5355
}
5456

‎web/templates/includes/panel.php‎

Lines changed: 71 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -149,91 +149,93 @@ class="top-bar-menu-link u-hide-tablet"
149149
</span>
150150
</button>
151151

152-
<ul x-cloak x-show="open" x-on:click.outside="open = false" class="top-bar-menu-list">
152+
<div x-cloak x-show="open" x-on:click.outside="open = false" class="top-bar-menu-panel">
153+
<ul class="top-bar-menu-list">
153154

154-
<!-- File Manager -->
155-
<?php if (isset($_SESSION["FILE_MANAGER"]) && !empty($_SESSION["FILE_MANAGER"]) && $_SESSION["FILE_MANAGER"] == "true") { ?>
156-
<?php if ($_SESSION["userContext"] === "admin" && (isset($_SESSION["look"]) && $_SESSION["look"] === "admin" && $_SESSION["POLICY_SYSTEM_PROTECTED_ADMIN"] == "yes")) { ?>
157-
<!-- Hide file manager when impersonating admin-->
158-
<?php } else { ?>
159-
<li class="top-bar-menu-item">
160-
<a title="<?= _("File manager") ?>" class="top-bar-menu-link <?php if ($TAB == 'FM') echo 'active' ?>" href="/fm/">
161-
<i class="fas fa-folder-open"></i>
162-
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("File manager") ?></span>
163-
</a>
164-
</li>
155+
<!-- File Manager -->
156+
<?php if (isset($_SESSION["FILE_MANAGER"]) && !empty($_SESSION["FILE_MANAGER"]) && $_SESSION["FILE_MANAGER"] == "true") { ?>
157+
<?php if ($_SESSION["userContext"] === "admin" && (isset($_SESSION["look"]) && $_SESSION["look"] === "admin" && $_SESSION["POLICY_SYSTEM_PROTECTED_ADMIN"] == "yes")) { ?>
158+
<!-- Hide file manager when impersonating admin-->
159+
<?php } else { ?>
160+
<li class="top-bar-menu-item">
161+
<a title="<?= _("File manager") ?>" class="top-bar-menu-link <?php if ($TAB == 'FM') echo 'active' ?>" href="/fm/">
162+
<i class="fas fa-folder-open"></i>
163+
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("File manager") ?></span>
164+
</a>
165+
</li>
166+
<?php } ?>
165167
<?php } ?>
166-
<?php } ?>
167168

168-
<!-- Server Settings -->
169-
<?php if (($_SESSION["userContext"] === "admin" && $_SESSION["POLICY_SYSTEM_HIDE_SERVICES"] !== "yes") || $_SESSION["user"] === "admin") { ?>
170-
<?php if ($_SESSION["userContext"] === "admin" && !empty($_SESSION["look"])) { ?>
171-
<!-- Hide 'Server Settings' button when impersonating 'admin' or other users -->
172-
<?php } else { ?>
169+
<!-- Server Settings -->
170+
<?php if (($_SESSION["userContext"] === "admin" && $_SESSION["POLICY_SYSTEM_HIDE_SERVICES"] !== "yes") || $_SESSION["user"] === "admin") { ?>
171+
<?php if ($_SESSION["userContext"] === "admin" && !empty($_SESSION["look"])) { ?>
172+
<!-- Hide 'Server Settings' button when impersonating 'admin' or other users -->
173+
<?php } else { ?>
174+
<li class="top-bar-menu-item">
175+
<a title="<?= _("Server settings") ?>" class="top-bar-menu-link <?php if (in_array($TAB, ['SERVER', 'IP', 'RRD', 'FIREWALL'])) echo 'active' ?>" href="/list/server/">
176+
<i class="fas fa-gear"></i>
177+
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Server settings") ?></span>
178+
</a>
179+
</li>
180+
<?php } ?>
181+
<?php } ?>
182+
183+
<!-- Edit User -->
184+
<?php if ($_SESSION["userContext"] === "admin" && (isset($_SESSION["look"]) && $user == "admin")) { ?>
185+
<!-- Hide 'edit user' entry point from other administrators for default 'admin' account-->
173186
<li class="top-bar-menu-item">
174-
<a title="<?= _("Server settings") ?>" class="top-bar-menu-link <?php if (in_array($TAB, ['SERVER', 'IP', 'RRD', 'FIREWALL'])) echo 'active' ?>" href="/list/server/">
175-
<i class="fas fa-gear"></i>
176-
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Server settings") ?></span>
187+
<a title="<?= _("Logs") ?>" class="top-bar-menu-link <?php if ($TAB == 'LOG') echo 'active' ?>" href="/list/log/">
188+
<i class="fas fa-clock-rotate-left"></i>
189+
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Logs") ?></span>
177190
</a>
178191
</li>
192+
<?php } else { ?>
193+
<?php if ($panel[$user]["SUSPENDED"] === "no") { ?>
194+
<li class="top-bar-menu-item">
195+
<a title="<?= htmlspecialchars($user) ?> (<?= htmlspecialchars($panel[$user]["NAME"]) ?>)" class="top-bar-menu-link" href="/edit/user/?user=<?= $user ?>&token=<?= $_SESSION["token"] ?>">
196+
<i class="fas fa-circle-user"></i>
197+
<span class="top-bar-menu-link-label u-hide-desktop"><?= htmlspecialchars($user) ?> (<?= htmlspecialchars($panel[$user]["NAME"]) ?>)</span>
198+
</a>
199+
</li>
200+
<?php } ?>
179201
<?php } ?>
180-
<?php } ?>
181202

182-
<!-- Edit User -->
183-
<?php if ($_SESSION["userContext"] === "admin" && (isset($_SESSION["look"]) && $user == "admin")) { ?>
184-
<!-- Hide 'edit user' entry point from other administrators for default 'admin' account-->
203+
<!-- Statistics -->
185204
<li class="top-bar-menu-item">
186-
<a title="<?= _("Logs") ?>" class="top-bar-menu-link <?php if ($TAB == 'LOG') echo 'active' ?>" href="/list/log/">
187-
<i class="fas fa-clock-rotate-left"></i>
188-
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Logs") ?></span>
205+
<a title="<?= _("Statistics") ?>" class="top-bar-menu-link <?php if ($TAB == 'STATS') echo 'active' ?>" href="/list/stats/">
206+
<i class="fas fa-chart-line"></i>
207+
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Statistics") ?></span>
189208
</a>
190209
</li>
191-
<?php } else { ?>
192-
<?php if ($panel[$user]["SUSPENDED"] === "no") { ?>
210+
<?php if ( $_SESSION['HIDE_DOCS'] != 'yes'){
211+
?>
212+
<!-- Help / Documentation -->
193213
<li class="top-bar-menu-item">
194-
<a title="<?= htmlspecialchars($user) ?> (<?= htmlspecialchars($panel[$user]["NAME"]) ?>)" class="top-bar-menu-link" href="/edit/user/?user=<?= $user ?>&token=<?= $_SESSION["token"] ?>">
195-
<i class="fas fa-circle-user"></i>
196-
<span class="top-bar-menu-link-label u-hide-desktop"><?= htmlspecialchars($user) ?> (<?= htmlspecialchars($panel[$user]["NAME"]) ?>)</span>
214+
<a title="<?= _("Help") ?>" class="top-bar-menu-link" href="https://hestiacp.com/docs/" target="_blank" rel="noopener">
215+
<i class="fas fa-circle-question"></i>
216+
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Help") ?></span>
217+
</a>
218+
</li>
219+
<?php } ?>
220+
<!-- Logout -->
221+
<?php if (isset($_SESSION["look"]) && !empty($_SESSION["look"])) { ?>
222+
<li class="top-bar-menu-item">
223+
<a title="<?= _("Log out") ?> (<?= $user ?>)" class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>">
224+
<i class="fas fa-circle-up"></i>
225+
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Log out") ?> (<?= $user ?>)</span>
226+
</a>
227+
</li>
228+
<?php } else { ?>
229+
<li class="top-bar-menu-item">
230+
<a title="<?= _("Log out") ?>" class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>">
231+
<i class="fas fa-right-from-bracket"></i>
232+
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Log out") ?></span>
197233
</a>
198234
</li>
199235
<?php } ?>
200-
<?php } ?>
201-
202-
<!-- Statistics -->
203-
<li class="top-bar-menu-item">
204-
<a title="<?= _("Statistics") ?>" class="top-bar-menu-link <?php if ($TAB == 'STATS') echo 'active' ?>" href="/list/stats/">
205-
<i class="fas fa-chart-line"></i>
206-
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Statistics") ?></span>
207-
</a>
208-
</li>
209-
<?php if ( $_SESSION['HIDE_DOCS'] != 'yes'){
210-
?>
211-
<!-- Help / Documentation -->
212-
<li class="top-bar-menu-item">
213-
<a title="<?= _("Help") ?>" class="top-bar-menu-link" href="https://hestiacp.com/docs/" target="_blank" rel="noopener">
214-
<i class="fas fa-circle-question"></i>
215-
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Help") ?></span>
216-
</a>
217-
</li>
218-
<?php } ?>
219-
<!-- Logout -->
220-
<?php if (isset($_SESSION["look"]) && !empty($_SESSION["look"])) { ?>
221-
<li class="top-bar-menu-item">
222-
<a title="<?= _("Log out") ?> (<?= $user ?>)" class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>">
223-
<i class="fas fa-circle-up"></i>
224-
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Log out") ?> (<?= $user ?>)</span>
225-
</a>
226-
</li>
227-
<?php } else { ?>
228-
<li class="top-bar-menu-item">
229-
<a title="<?= _("Log out") ?>" class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>">
230-
<i class="fas fa-right-from-bracket"></i>
231-
<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Log out") ?></span>
232-
</a>
233-
</li>
234-
<?php } ?>
235236

236-
</ul>
237+
</ul>
238+
</div>
237239
</nav>
238240

239241
</div>

0 commit comments

Comments
 (0)