Skip to content

Commit f1039ce

Browse files
jc21jc21
authored
Merge pull request #4928 from 7heMech/develop
UI/UX improvements
2 parents d49ff6e + fdc0c29 commit f1039ce

File tree

9 files changed

+70
-35
lines changed

9 files changed

+70
-35
lines changed

‎frontend/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<title>Nginx Proxy Manager</title>
77
<meta name="description" content="In The Office Planner" />
8+
<link rel="preload" href="/images/logo-no-text.svg" as="image" type="image/svg+xml" fetchPriority="high">
89
<link
910
rel="apple-touch-icon"
1011
sizes="180x180"

‎frontend/src/App.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,15 @@
1313
--tblr-backdrop-opacity: 0.8 !important;
1414
}
1515

16+
[data-bs-theme="dark"] .modal-content {
17+
--tblr-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
18+
}
19+
20+
[data-bs-theme="dark"] .modal-backdrop {
21+
--tblr-backdrop-bg: #000 !important;
22+
--tblr-backdrop-opacity: 0.65 !important;
23+
}
24+
1625
.domain-name {
1726
font-family: monospace;
1827
}
@@ -95,3 +104,15 @@ label.row {
95104
border-radius: var(--tblr-border-radius) 0 0 var(--tblr-border-radius);
96105
}
97106
}
107+
108+
/* Fix for dropdown menus being clipped by table-responsive containers. */
109+
.table-responsive .dropdown {
110+
position: static;
111+
}
112+
113+
/* Fix for Tabler scrollbar compensation */
114+
@media (min-width: 992px) {
115+
:host, :root {
116+
margin-left: 0;
117+
}
118+
}

‎frontend/src/components/LocalePicker.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import { useTheme } from "src/hooks";
55
import { changeLocale, getFlagCodeForLocale, localeOptions, T } from "src/locale";
66
import styles from "./LocalePicker.module.css";
77

8-
function LocalePicker() {
8+
interface Props {
9+
menuAlign?: "start" | "end";
10+
}
11+
12+
function LocalePicker({ menuAlign = "start" }: Props) {
913
const { locale, setLocale } = useLocaleState();
1014
const { getTheme } = useTheme();
1115

@@ -23,7 +27,10 @@ function LocalePicker() {
2327
<button type="button" className={cns} data-bs-toggle="dropdown">
2428
<Flag countryCode={getFlagCodeForLocale(locale)} />
2529
</button>
26-
<div className="dropdown-menu">
30+
<div className={cn("dropdown-menu", {
31+
"dropdown-menu-end": menuAlign === "end",
32+
})}
33+
>
2734
{localeOptions.map((item) => {
2835
return (
2936
<a

‎frontend/src/components/SiteContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ interface Props {
22
children: React.ReactNode;
33
}
44
export function SiteContainer({ children }: Props) {
5-
return <div className="container-xl py-3">{children}</div>;
5+
return <div className="container-xl py-3 min-w-0 overflow-x-auto">{children}</div>;
66
}

‎frontend/src/components/SiteHeader.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function SiteHeader() {
2525
>
2626
<span className="navbar-toggler-icon" />
2727
</button>
28-
<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
28+
<div className="navbar-brand navbar-brand-autodark pe-0 pe-md-3">
2929
<NavLink to="/">
3030
<div className={styles.logo}>
3131
<img
@@ -48,11 +48,11 @@ export function SiteHeader() {
4848
<ThemeSwitcher />
4949
</div>
5050
</div>
51-
<div className="nav-item d-none d-md-flex me-3">
51+
<div className="nav-item d-md-flex">
5252
<div className="nav-item dropdown">
5353
<a
5454
href="/"
55-
className="nav-link d-flex lh-1 p-0 px-2"
55+
className="nav-link d-flex lh-1"
5656
data-bs-toggle="dropdown"
5757
aria-label="Open user menu"
5858
>
@@ -70,6 +70,22 @@ export function SiteHeader() {
7070
</div>
7171
</a>
7272
<div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
73+
<div className="d-md-none">
74+
{/* biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents: This div is not interactive. */}
75+
<div className="p-2 pb-1 pe-1 d-flex align-items-center" onClick={e => e.stopPropagation()}>
76+
<div className="ps-2 pe-1 me-auto">
77+
<div>{currentUser?.nickname}</div>
78+
<div className="mt-1 small text-secondary text-nowrap">
79+
<T id={isAdmin ? "role.admin" : "role.standard-user"} />
80+
</div>
81+
</div>
82+
<div className="d-flex align-items-center">
83+
<ThemeSwitcher className="me-n2" />
84+
<LocalePicker menuAlign="end" />
85+
</div>
86+
</div>
87+
<div className="dropdown-divider" />
88+
</div>
7389
<a
7490
href="?"
7591
className="dropdown-item"

‎frontend/src/components/SiteMenu.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -176,17 +176,13 @@ const getMenuDropown = (item: MenuItem, onClick?: () => void) => {
176176
};
177177

178178
export function SiteMenu() {
179-
// This is hacky AF. But that's the price of using a non-react UI kit.
180-
const closeMenus = () => {
181-
const navMenus = document.querySelectorAll(".nav-item.dropdown");
182-
navMenus.forEach((menu) => {
183-
menu.classList.remove("show");
184-
const dropdown = menu.querySelector(".dropdown-menu");
185-
if (dropdown) {
186-
dropdown.classList.remove("show");
187-
}
188-
});
189-
};
179+
const closeMenu = () => setTimeout(() => {
180+
const navbarToggler = document.querySelector<HTMLElement>(".navbar-toggler");
181+
const navbarMenu = document.querySelector("#navbar-menu");
182+
if (navbarToggler && navbarMenu?.classList.contains("show")) {
183+
navbarToggler.click();
184+
}
185+
}, 300);
190186

191187
return (
192188
<header className="navbar-expand-md">
@@ -198,7 +194,7 @@ export function SiteMenu() {
198194
<ul className="navbar-nav">
199195
{menuItems.length > 0 &&
200196
menuItems.map((item) => {
201-
return getMenuItem(item, closeMenus);
197+
return getMenuItem(item, closeMenu);
202198
})}
203199
</ul>
204200
</div>

‎frontend/src/components/Table/TableLayout.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@ interface TableLayoutProps<TFields> {
1212
function TableLayout<TFields>(props: TableLayoutProps<TFields>) {
1313
const hasRows = props.tableInstance.getRowModel().rows.length > 0;
1414
return (
15-
<table className="table table-vcenter table-selectable mb-0">
16-
{hasRows ? <TableHeader tableInstance={props.tableInstance} /> : null}
17-
<TableBody {...props} />
18-
</table>
15+
<div className="table-responsive">
16+
<table className="table table-vcenter table-selectable mb-0">
17+
{hasRows ? <TableHeader tableInstance={props.tableInstance} /> : null}
18+
<TableBody {...props} />
19+
</table>
20+
</div>
1921
);
2022
}
2123

‎frontend/src/pages/Login/index.module.css‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
11
.logo {
22
width: 200px;
33
}
4-
5-
.helperBtns {
6-
position: absolute;
7-
top: 10px;
8-
right: 10px;
9-
z-index: 1000;
10-
}

‎frontend/src/pages/Login/index.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import cn from "classnames";
21
import { Field, Form, Formik } from "formik";
32
import { useEffect, useRef, useState } from "react";
43
import Alert from "react-bootstrap/Alert";
@@ -43,17 +42,17 @@ export default function Login() {
4342

4443
return (
4544
<Page className="page page-center">
46-
<div className={cn("d-none", "d-md-flex", styles.helperBtns)}>
47-
<LocalePicker />
48-
<ThemeSwitcher />
49-
</div>
5045
<div className="container container-tight py-4">
51-
<div className="text-center mb-4">
46+
<div className="d-flex justify-content-between align-items-center mb-4 ps-4 pe-3">
5247
<img
5348
className={styles.logo}
5449
src="/images/logo-text-horizontal-grey.png"
5550
alt="Nginx Proxy Manager"
5651
/>
52+
<div className="d-flex align-items-center gap-1">
53+
<LocalePicker />
54+
<ThemeSwitcher />
55+
</div>
5756
</div>
5857
<div className="card card-md">
5958
<div className="card-body">

0 commit comments

Comments
 (0)