MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(front): [WIP] improve page layout

This commit is contained in:
upsiflu 2025-03-23 21:35:37 +01:00
parent 167e663661
commit aa7ea5ef93
2 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
front/src/App.vue
View File

@ -101,32 +101,32 @@ store.dispatch('auth/fetchUser')
</KeepAlive> </KeepAlive>
</Transition> </Transition>
</RouterView> </RouterView>
<ServiceMessages />
<transition name="queue">
<Queue v-show="store.state.ui.queueFocused" />
</transition>
<AudioPlayer />
<LanguagesModal />
<ShortcutsModal />
<PlaylistModal v-if="store.state.auth.authenticated" />
<FilterModal v-if="store.state.auth.authenticated" />
<ReportModal />
<UploadModal v-if="store.state.auth.authenticated" />
<SearchModal />
<ServiceMessages />
</div> </div>
<ServiceMessages />
<transition name="queue">
<Queue v-show="store.state.ui.queueFocused" />
</transition>
<AudioPlayer class="funkwhale" v-bind="color({}, ['default', 'solid'])()" />
<LanguagesModal />
<ShortcutsModal />
<PlaylistModal v-if="store.state.auth.authenticated" />
<FilterModal v-if="store.state.auth.authenticated" />
<ReportModal />
<UploadModal v-if="store.state.auth.authenticated" />
<SearchModal />
<ServiceMessages />
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.responsive { .responsive {
display: grid !important; display: grid !important;
grid-template-columns: 100%; grid-template-columns: 100% 0 0;
grid-template-rows: min-content; grid-template-rows: min-content;
min-height: 100vh; min-height: calc(100vh - 64px);
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
grid-template-columns: 300px 5fr; grid-template-columns: 300px 1fr;
grid-template-rows: 100%; grid-template-rows: 100% 0 0;
} }
} }
</style> </style>

6
front/src/composables/alignment.ts
View File

@ -2,7 +2,7 @@ import type { Entries, Entry, KeysOfUnion } from 'type-fest'
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue'
export type AlignmentProps = { export type AlignmentProps = {
alignText?: 'left' | 'center' | 'right' | 'stretch' | 'space-out', alignText?: 'start' | 'center' | 'end' | 'stretch' | 'space-out',
alignSelf?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch', alignSelf?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch',
alignItems?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch' alignItems?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch'
} & { } & {
@ -14,10 +14,10 @@ const styles = {
center: 'place-content: center center; place-self: center center;', center: 'place-content: center center; place-self: center center;',
stretch: 'place-content: stretch stretch; place-self: stretch stretch;', stretch: 'place-content: stretch stretch; place-self: stretch stretch;',
alignText: (a:AlignmentProps['alignText']) => ({ alignText: (a:AlignmentProps['alignText']) => ({
left: 'justify-content: flex-start;', start: 'justify-content: flex-start;',
center: 'place-content: center;', center: 'place-content: center;',
baseline: 'align-items: baseline;', baseline: 'align-items: baseline;',
right: 'justify-content: flex-end;', end: 'justify-content: flex-end;',
stretch: 'place-content: stretch;', stretch: 'place-content: stretch;',
'space-out': 'place-content: space-between;' 'space-out': 'place-content: space-between;'
}[a!]), }[a!]),