91 lines
1.9 KiB
Vue
Executable File
91 lines
1.9 KiB
Vue
Executable File
<template>
|
|
<main class="app-content contenthidden">
|
|
<div class="app-content__scroll contentscroll">
|
|
<div class="app-content__inner">
|
|
<AppSectionBar />
|
|
<div
|
|
class="app-content__route-root"
|
|
:class="{
|
|
'app-content__route--fill': Boolean($route.meta?.contentFill),
|
|
'app-content__route--panel': !Boolean($route.meta?.contentFill)
|
|
}"
|
|
>
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import AppSectionBar from './AppSectionBar.vue';
|
|
|
|
export default {
|
|
name: 'AppContent',
|
|
components: {
|
|
AppSectionBar
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-content {
|
|
flex: 1;
|
|
height: auto;
|
|
min-height: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.app-content__scroll {
|
|
background: #ffffff;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.app-content__inner {
|
|
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%;
|
|
margin: 0 auto;
|
|
padding: 20px 18px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.app-content__route-root {
|
|
min-width: 0;
|
|
}
|
|
|
|
.app-content__route--panel {
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(93, 64, 55, 0.08);
|
|
background: #ffffff;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.7),
|
|
0 10px 22px rgba(93, 64, 55, 0.05);
|
|
}
|
|
|
|
/* 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%;
|
|
min-height: 0;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.app-content__inner {
|
|
padding: 14px 12px 10px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.app-content__route--panel {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
|