jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix bug styling

Browse Source
This commit is contained in:
Geriano
2022-07-29 16:57:31 +07:00
parent c7ff791eb6
commit de94391dab
3 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
resources/js/Layouts/DashboardLayout.vue
View File

@@ -12,7 +12,7 @@ const { title } = defineProps({
const self = getCurrentInstance() const self = getCurrentInstance()
const open = ref(window.innerWidth > 669) const open = ref(window.innerWidth > 669)
onMounted(() => window.addEventListener('resize', () => open.value = window.innerWidth > 669)) onMounted(() => window.addEventListener('resize', () => open.value = window.innerWidth > 640))
const { user } = usePage().props.value const { user } = usePage().props.value
Echo.private(`App.Models.User.${user.id}`) Echo.private(`App.Models.User.${user.id}`)
@@ -33,11 +33,11 @@ Echo.private(`App.Models.User.${user.id}`)
</style> </style>
<template> <template>
<div class="flex bg-gray-300 dark:bg-gray-900 w-full h-screen max-h-screen font-sans overflow-hidden"> <div class="flex bg-gray-300 dark:bg-gray-900 font-sans">
<Head :title="title" /> <Head :title="title" />
<div ref="sidebar" class="fixed sm:static flex-none flex flex-col h-full transition-all ease-in-out duration-300 z-10 sm:z-0 overflow-auto sm:overflow-hidden" :class="`${themes().get('sidebar', 'bg-gray-700 text-gray-200 hover:bg-gray-800 hover:text-gray-100 transition-all ease-in-out duration-100').replace(/hover:(bg|text)-(.*?)-(\d+)/)} ${open ? 'w-full sm:w-60' : 'w-0'}`"> <div ref="sidebar" class="fixed sm:static top-0 left-0 flex-none flex flex-col h-screen transition-all ease-in-out duration-300 z-10" :class="`${themes().get('sidebar', 'bg-gray-700 text-gray-200 hover:bg-gray-800 hover:text-gray-100 transition-all ease-in-out duration-100').replace(/hover:(bg|text)-(.*?)-(\d+)/)} ${open ? 'w-full sm:w-60' : 'w-0'}`">
<div v-if="open" class="flex-none flex items-center justify-between w-full h-14 px-2" :class="themes().get('topbar', 'bg-cyan-500 text-gray-700 hover:bg-cyan-600 hover:text-gray-800 transition-all ease-in-out duration-150').replace(/hover:(bg|text)-(.*?)-(\d+)/, '')"> <div v-if="open" class="sticky top-0 left-0 flex-none flex items-center justify-between w-full h-14 px-2" :class="themes().get('topbar', 'bg-cyan-500 text-gray-700 hover:bg-cyan-600 hover:text-gray-800 transition-all ease-in-out duration-150').replace(/hover:(bg|text)-(.*?)-(\d+)/, '')">
<Toggler @toggle="open = ! open" class="sm:hidden" /> <Toggler @toggle="open = ! open" class="sm:hidden" />
<h1 class="text-2xl text-center font-bold w-full">Template</h1> <h1 class="text-2xl text-center font-bold w-full">Template</h1>
@@ -50,18 +50,16 @@ Echo.private(`App.Models.User.${user.id}`)
<Sidebar v-if="open" /> <Sidebar v-if="open" />
</div> </div>
<div class="flex flex-col w-full h-screen max-h-screen overflow-hidden"> <div class="relative w-full h-screen overflow-auto">
<div class="flex-none flex justify-between w-full h-14 px-2 sticky top-0 left-0" :class="themes().get('topbar', 'bg-cyan-500 text-gray-700 hover:bg-cyan-600 hover:text-gray-800 transition-all ease-in-out duration-150').replace(/hover:(bg|text)-(.*?)-(\d+)/, '')"> <div class="sticky top-0 left-0 z-10 flex-none flex justify-between w-full h-14 px-2" :class="themes().get('topbar', 'bg-cyan-500 text-gray-700 hover:bg-cyan-600 hover:text-gray-800 transition-all ease-in-out duration-150').replace(/hover:(bg|text)-(.*?)-(\d+)/, '')">
<Toggler @toggle="open = ! open" /> <Toggler @toggle="open = ! open" />
<TopbarDropdown /> <TopbarDropdown />
</div> </div>
<div class="min-h-full overflow-auto"> <main class="min-h-full p-6 h-full">
<main class="flex flex-col space-y-4 py-4 px-6"> <slot />
<slot /> </main>
</main>
</div>
</div> </div>
</div> </div>
</template> </template>

6
resources/js/Pages/Superuser/Role/Index.vue
View File

@@ -164,6 +164,12 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</div> </div>
</td> </td>
</tr> </tr>
<tr v-if="!data?.length">
<td class="text-5xl text-center p-4" colspan="1000">
<p class="lowercase first-letter:capitalize font-semibold">there are no data available</p>
</td>
</tr>
</template> </template>
</Builder> </Builder>
</div> </div>

6
resources/js/Pages/Superuser/User/Index.vue
View File

@@ -219,6 +219,12 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</div> </div>
</td> </td>
</tr> </tr>
<tr v-if="!data?.length">
<td class="text-5xl text-center p-4" colspan="1000">
<p class="lowercase first-letter:capitalize font-semibold">there are no data available</p>
</td>
</tr>
</template> </template>
</Builder> </Builder>
</div> </div>