refactor(ui): enhance AppContent layout for improved routing and styling
All checks were successful
Deploy to production / deploy (push) Successful in 3m0s
All checks were successful
Deploy to production / deploy (push) Successful in 3m0s
- Wrapped the router-view in a new div to manage layout and styling more effectively. - Updated CSS to ensure proper height management and scrolling behavior, allowing for better content display. - Added comments to clarify the purpose of layout adjustments and ensure maintainability.
This commit is contained in:
@@ -3,7 +3,12 @@
|
|||||||
<div class="app-content__scroll contentscroll">
|
<div class="app-content__scroll contentscroll">
|
||||||
<div class="app-content__inner">
|
<div class="app-content__inner">
|
||||||
<AppSectionBar />
|
<AppSectionBar />
|
||||||
<router-view></router-view>
|
<div
|
||||||
|
class="app-content__route-root"
|
||||||
|
:class="{ 'app-content__route--fill': Boolean($route.meta?.contentFill) }"
|
||||||
|
>
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
@@ -37,16 +42,22 @@
|
|||||||
|
|
||||||
.app-content__inner {
|
.app-content__inner {
|
||||||
max-width: var(--shell-max-width);
|
max-width: var(--shell-max-width);
|
||||||
|
/* Nur min-height: sonst wächst die Spalte mit dem Inhalt und .app-content__scroll kann scrollen.
|
||||||
|
height:100% + flex:1 auf dem letzten Kind hätte die Seite auf die Viewport-Höhe geklemmt (kein äußerer Scroll). */
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
height: 100%;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 14px 18px 12px;
|
padding: 14px 18px 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* flex-basis 0: Höhe richtet sich nach verbleibendem Platz, nicht nach Inhalt (sonst kein Scroll) */
|
.app-content__route-root {
|
||||||
.app-content__inner > :last-child {
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Volle Resthöhe nur wenn eine View meta.contentFill setzt (z. B. feste Split-Layouts) */
|
||||||
|
.app-content__inner > .app-content__route-root.app-content__route--fill {
|
||||||
flex: 1 1 0%;
|
flex: 1 1 0%;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user