Sidebar position:fixed (never scrolls) + main bottom padding + mobile responsive
User reported sidebar scrolling with content + missing bottom padding + unresponsive site details/header. Sidebar: - Changed from position:sticky (which moved with grid context) to position:fixed top:14 left:14 width:236 height:calc(100vh-28px). Sidebar now genuinely never moves with scroll. - Grid template adjusted to 264px first column to reserve the space the fixed sidebar occupies (236 + 14 margin + 14 gap). Main: - layouts/app.blade.php + placeholder.blade.php padding bumped from '14px 14px 0' to '14px' all-around — content now has equal bottom breathing room. Mobile (≤920px): - Sidebar already had drawer behaviour, kept. - Topbar: flex-wrap, smaller padding (10/12), shrunk title/sub typography, search takes full row at order:99. - Site-hero (site details): flex:1 1 100% forces title onto its own row, smaller favicon (34px) + smaller h1 (15px) + flex-wrap sub-line. - Status chip in topbar hidden on mobile (was clipping behind site title). - clu-dtabs (6-tab bar): wrap with smaller pad/font so all 6 fit on 420px. - File manager: tree+editor stack vertically; tree max-height 280px, editor 460px. - Inline two-col grids (Installation/Schnellaktionen, Sites+Activity, WP+Salts, OPcache+Extensions) force to single column.master
parent
29622eff77
commit
ae2b7c1169
|
|
@ -635,13 +635,18 @@
|
||||||
.clu-top-link a { color: var(--color-accent); font-weight: 600; }
|
.clu-top-link a { color: var(--color-accent); font-weight: 600; }
|
||||||
|
|
||||||
/* ───── App layout (sidebar + main) ───── */
|
/* ───── App layout (sidebar + main) ───── */
|
||||||
.clu-app-grid { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
|
.clu-app-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 264px 1fr; /* 236 sidebar + 14 left margin + 14 gap */
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
/* Sidebar — fixed brand+ws-switch header, scrollable nav, fixed plan-box footer */
|
/* Sidebar — TRUE fixed; never scrolls with main content. */
|
||||||
.clu-sidebar {
|
.clu-sidebar {
|
||||||
position: sticky; top: 0;
|
position: fixed;
|
||||||
height: 100vh;
|
top: 14px; left: 14px;
|
||||||
margin: 14px 0 14px 14px;
|
width: 236px;
|
||||||
|
height: calc(100vh - 28px);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
display: flex; flex-direction: column;
|
display: flex; flex-direction: column;
|
||||||
padding: 18px 14px;
|
padding: 18px 14px;
|
||||||
|
|
@ -686,6 +691,41 @@
|
||||||
.clu-sidebar.open { transform: translateX(0); }
|
.clu-sidebar.open { transform: translateX(0); }
|
||||||
.clu-sidebar-backdrop.open { display: block; }
|
.clu-sidebar-backdrop.open { display: block; }
|
||||||
.clu-burger.clu-icon-btn { display: grid; }
|
.clu-burger.clu-icon-btn { display: grid; }
|
||||||
|
|
||||||
|
/* Topbar mobile: wrap + slim padding */
|
||||||
|
.clu-topbar {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 10px 12px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.clu-topbar h1, .clu-page-title { font-size: 15px; }
|
||||||
|
.clu-topbar .crumb, .clu-page-sub { font-size: 11px; }
|
||||||
|
.clu-search { min-width: 0; flex: 1 0 100%; order: 99; }
|
||||||
|
.clu-topbar .spacer { flex: 1; }
|
||||||
|
|
||||||
|
/* Site Details site-hero mobile: smaller favicon + truncate domain + hide on small */
|
||||||
|
.clu-site-hero { gap: 10px; flex: 1 1 100%; min-width: 0; order: 5; }
|
||||||
|
.clu-site-hero .clu-favicon { width: 34px; height: 34px; font-size: 14px; }
|
||||||
|
.clu-site-hero h1 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.clu-site-hero .sub { gap: 6px; font-size: 10.5px; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
/* Status chip + secondary buttons hide on tightest screens */
|
||||||
|
.clu-topbar .clu-status-chip { display: none; }
|
||||||
|
|
||||||
|
/* Dtabs (site-details tab row) wrap properly */
|
||||||
|
.clu-dtabs { flex-wrap: wrap; gap: 2px; }
|
||||||
|
.clu-dtab { padding: 7px 10px; font-size: 12px; }
|
||||||
|
|
||||||
|
/* Filemanager stacks below editor on small screens */
|
||||||
|
.clu-fm { grid-template-columns: 1fr; }
|
||||||
|
.clu-tree { max-height: 280px; }
|
||||||
|
.clu-editor { height: 460px; }
|
||||||
|
|
||||||
|
/* Two-col cards (Overview Installation/Schnellaktionen etc.) stack */
|
||||||
|
.grid[style*="grid-template-columns:1fr 1fr"],
|
||||||
|
.grid[style*="grid-template-columns:minmax(0,2fr) minmax(280px,1fr)"] {
|
||||||
|
grid-template-columns: 1fr !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.clu-brand-row { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
|
.clu-brand-row { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
|
||||||
.clu-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
|
.clu-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
<div class="clu-app-grid">
|
<div class="clu-app-grid">
|
||||||
<x-clu.sidebar :active="$active ?? request()->route()?->getName()" />
|
<x-clu.sidebar :active="$active ?? request()->route()?->getName()" />
|
||||||
|
|
||||||
<main class="flex flex-col min-w-0" style="padding:14px 14px 0;">
|
<main class="flex flex-col min-w-0" style="padding:14px;">
|
||||||
{{ $slot }}
|
{{ $slot }}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
<body class="clu-bg-aurora">
|
<body class="clu-bg-aurora">
|
||||||
<div class="clu-app-grid">
|
<div class="clu-app-grid">
|
||||||
<x-clu.sidebar :active="request()->route()?->getName()" />
|
<x-clu.sidebar :active="request()->route()?->getName()" />
|
||||||
<main class="flex flex-col min-w-0" style="padding:14px 14px 0;">
|
<main class="flex flex-col min-w-0" style="padding:14px;">
|
||||||
<div class="clu-topbar">
|
<div class="clu-topbar">
|
||||||
<div>
|
<div>
|
||||||
<h1>{{ $title ?? 'Coming soon' }}</h1>
|
<h1>{{ $title ?? 'Coming soon' }}</h1>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue