Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-24 05:03:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: modal UI

Browse source
This commit is contained in:
Phan An 2024-04-19 20:10:55 +02:00
parent 7f1429377e
commit f624f1f51c
9 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
resources/assets/js/components/layout/ModalWrapper.vue
View file

@ -1,8 +1,7 @@
<template>
<dialog
ref="dialog"
class="text-k-text-primary border-0 p-0 rounded-md min-w-[calc(100vm_-_24px)] md:min-w-[460px]
max-w-[calc(100vw_-_24px)] bg-k-bg-primary overflow-visible backdrop:bg-black/70"
class="text-k-text-primary min-w-full md:min-w-[480px] border-0 p-0 rounded-md bg-k-bg-primary overflow-visible backdrop:bg-black/70"
@cancel.prevent
>
<Component :is="modalNameToComponentMap[activeModalName]" v-if="activeModalName" @close="close" />

2
resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="extra-controls flex justify-end relative md:w-[320px] px-8 py-0">
<div class="extra-controls flex justify-end relative md:w-[320px] px-6 md:px-8 py-0">
<div class="flex justify-end items-center gap-6">
<FooterBtn
class="visualizer-btn hidden md:!block"

4
resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="playback-controls flex flex-1 flex-col place-content-center place-items-center">
<div class="flex items-center justify-center gap-5 md:gap-12">
<div class="playback-controls flex flex-1 flex-col justify-center">
<div class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0">
<LikeButton v-if="song" :song="song" class="text-base" />
<button v-else type="button" /> <!-- a placeholder to maintain the asymmetric layout -->

1
resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
View file

@ -116,6 +116,7 @@ nav {
@media screen and (max-width: 768px) {
@mixin themed-background;
z-index: 999;
transform: translateX(-100vw);
transition: transform .2s ease-in-out;

2
resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue
View file

@ -1,5 +1,5 @@
<template>
<form @submit.prevent="submit" @keydown.esc="maybeClose">
<form class="md:w-[420px] min-w-full" @submit.prevent="submit" @keydown.esc="maybeClose">
<header>
<h1>New Playlist Folder</h1>
</header>

2
resources/assets/js/components/playlist/CreatePlaylistForm.vue
View file

@ -1,5 +1,5 @@
<template>
<form class="min-w-full" @submit.prevent="submit" @keydown.esc="maybeClose">
<form class="md:w-[480px] w-full" @submit.prevent="submit" @keydown.esc="maybeClose">
<header>
<h1>
New Playlist

2
resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="smart-playlist-form w-[560px]">
<div class="smart-playlist-form md:w-[560px]">
<slot />
</div>
</template>

8
resources/assets/js/components/ui/form/FormRow.vue
View file

@ -25,13 +25,13 @@ const props = withDefaults(defineProps<{ cols?: number }>(), { cols: 1 })
const columnClass = computed(() => {
switch (props.cols) {
case 1:
return ''
return 'grid-cols-1'
case 2:
return 'grid-cols-2'
return 'md:grid-cols-2'
case 3:
return 'grid-cols-3'
return 'md:grid-cols-3'
case 4:
return 'grid-cols-4'
return 'md:grid-cols-4'
default:
throw new Error('Only 1-4 columns are supported')
}

2
resources/assets/js/components/ui/form/TextInput.vue
View file

@ -2,7 +2,7 @@
<input
ref="el"
v-model="value"
class="text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input
class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input
read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900"
type="text"
>