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>
</Transition>
</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>
<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>
<style scoped lang="scss">
.responsive {
display: grid !important;
grid-template-columns: 100%;
grid-template-columns: 100% 0 0;
grid-template-rows: min-content;
min-height: 100vh;
min-height: calc(100vh - 64px);
@media screen and (min-width: 1024px) {
grid-template-columns: 300px 5fr;
grid-template-rows: 100%;
grid-template-columns: 300px 1fr;
grid-template-rows: 100% 0 0;
}
}
</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'
export type AlignmentProps = {
alignText?: 'left' | 'center' | 'right' | 'stretch' | 'space-out',
alignText?: 'start' | 'center' | 'end' | 'stretch' | 'space-out',
alignSelf?: '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;',
stretch: 'place-content: stretch stretch; place-self: stretch stretch;',
alignText: (a:AlignmentProps['alignText']) => ({
left: 'justify-content: flex-start;',
start: 'justify-content: flex-start;',
center: 'place-content: center;',
baseline: 'align-items: baseline;',
right: 'justify-content: flex-end;',
end: 'justify-content: flex-end;',
stretch: 'place-content: stretch;',
'space-out': 'place-content: space-between;'
}[a!]),