nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor admin panel with icon-based actions, improved mobile layout, and enhanced text truncation

Browse Source 
Replaced text action buttons with icon-based buttons (edit ✎, disable ⏻) with tooltips and aria-labels for accessibility. Adjusted admin user grid columns for better space distribution and added text truncation to name/email fields to prevent overflow. Enhanced mobile responsiveness with larger touch targets (36px), reduced editor card padding, and increased input/button heights (40px). Added box
This commit is contained in:
nessi
2026-08-02 10:16:56 +02:00
parent a532cae9bd
commit ca4648b25a
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AdminPanel.jsx
+4 -6
View File
@@ -104,7 +104,7 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
return createPortal(
<div style={styles.modalOverlay} onMouseDown={onClose}>
<div style={{ ...styles.modalCard, width: "min(780px, 100%)", padding: 0 }} onMouseDown={(e) => e.stopPropagation()}>
<div className="hp-admin-dashboard-card" style={{ ...styles.modalCard, width: "min(780px, 100%)", padding: 0 }} onMouseDown={(e) => e.stopPropagation()}>
<div style={{ padding: "18px 18px 16px" }}>
<div style={styles.modalHeader}>
<div>
@@ -127,10 +127,8 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
<div className="hp-admin-role" style={{ textAlign: "center", fontWeight: 900, color: stylesTokens.textGold }}>{user.role}</div>
<div className={`hp-admin-status ${user.disabled ? "hp-admin-status--disabled" : ""}`} style={{ textAlign: "center", opacity: 0.85 }}>{user.disabled ? "disabled" : "active"}</div>
<div className="hp-admin-actions">
<button className="hp-admin-action" onClick={() => openEdit(user)} style={{ ...styles.secondaryBtn, padding: "8px 11px" }}>Bearbeiten</button>
<button className="hp-admin-action" onClick={() => disableUser(user)} disabled={user.id === currentUserId || user.disabled} style={{ ...styles.secondaryBtn, padding: "8px 11px", color: "#ffb3b3" }}>
{user.disabled ? "Deaktiviert" : "Deaktivieren"}
</button>
<button className="hp-admin-action hp-admin-icon-action" onClick={() => openEdit(user)} style={styles.secondaryBtn} title="User bearbeiten" aria-label={`${user.display_name || user.email} bearbeiten`}>✎</button>
<button className="hp-admin-action hp-admin-icon-action" onClick={() => disableUser(user)} disabled={user.id === currentUserId || user.disabled} style={{ ...styles.secondaryBtn, color: "#ffb3b3" }} title={user.disabled ? "User ist deaktiviert" : "User deaktivieren"} aria-label={`${user.display_name || user.email} deaktivieren`}>⏻</button>
</div>
</div>
))}
@@ -140,7 +138,7 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
{editorOpen && createPortal(
<div style={styles.modalOverlay} onMouseDown={closeEditor}>
<div style={{ ...styles.modalCard, width: "min(470px, 100%)" }} onMouseDown={(e) => e.stopPropagation()}>
<div className="hp-admin-editor-card" style={{ ...styles.modalCard, width: "min(470px, 100%)" }} onMouseDown={(e) => e.stopPropagation()}>
<div style={styles.modalHeader}>
<div>
<div style={{ fontWeight: 1000, color: stylesTokens.textGold, fontSize: 18 }}>{editingUser ? "User bearbeiten" : "Neuen User anlegen"}</div>
frontend/src/styles/hooks/useHpGlobalStyles.js
+9 -3
View File
@@ -80,7 +80,7 @@ export function useHpGlobalStyles() {
-webkit-overflow-scrolling: touch;
}
#root { background: transparent; }
* { -webkit-tap-highlight-color: transparent; }
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, input, select { font-family: inherit; }
button { transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease, background 140ms ease; }
button:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-1px); }
@@ -105,11 +105,14 @@ export function useHpGlobalStyles() {
@keyframes hpStartLine { 0%, 100% { opacity: .3; transform: scaleX(.7); } 50% { opacity: 1; transform: scaleX(1); } }
.hp-topbar-actions { margin-left: auto; }
.hp-user-menu-wrap { min-width: 0; }
.hp-admin-user-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 70px 76px 150px; }
.hp-admin-user-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.45fr) 62px 62px 78px; white-space: nowrap; }
.hp-admin-action { min-width: 0; }
.hp-admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.hp-admin-icon-action { width: 34px; height: 34px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.hp-admin-name, .hp-admin-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-admin-check { display: flex; align-items: center; gap: 8px; color: var(--hp-textDim); font-size: 13px; }
.hp-admin-check input { width: 18px; height: 18px; accent-color: var(--hp-textGold); }
.hp-admin-editor-card { overflow: hidden; }
.hp-admin-role { padding: 4px 8px; border-radius: 999px; background: rgba(233,216,166,0.10); border: 1px solid rgba(233,216,166,0.16); font-size: 12px; }
.hp-admin-status { color: #baf3c9 !important; font-size: 13px; }
.hp-admin-status--disabled { color: #ffb3b3 !important; }
@@ -130,7 +133,10 @@ export function useHpGlobalStyles() {
.hp-admin-role { grid-column: 2; grid-row: 1; }
.hp-admin-status { grid-column: 2; grid-row: 2; }
.hp-admin-actions { grid-column: 1 / -1; grid-row: 3; width: 100%; justify-content: flex-end; }
.hp-admin-actions .hp-admin-action { width: auto; min-width: 0; min-height: 38px; padding: 7px 10px !important; }
.hp-admin-actions .hp-admin-action { width: 36px; min-width: 36px; min-height: 36px; padding: 0 !important; }
.hp-admin-editor-card { padding: 14px !important; max-height: calc(100dvh - 20px) !important; }
.hp-admin-editor-card input, .hp-admin-editor-card select { min-height: 40px; padding: 8px 10px !important; }
.hp-admin-editor-card button { min-height: 40px; }
.hp-row { grid-template-columns: minmax(0, 1fr) 42px 62px !important; gap: 7px !important; padding: 12px 11px !important; }
.hp-row button { min-height: 40px; }
button { min-height: 42px; }