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

restyling in light mode

Browse Source
This commit is contained in:
Geriano
2022-07-23 16:06:38 +07:00
parent 7e69b16a08
commit ad2fd8e8b3
9 changed files with 96 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/Pages/Superuser/Menu/Child.vue
View File

@@ -28,17 +28,17 @@ onUpdated(rounded)
</script>
<template>
<div class="flex items-center space-x-2 dark:bg-gray-800 rounded-md px-4 py-2" :draggable="true" :id="`menu:${menu.id}`">
<div class="flex items-center space-x-2 bg-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 rounded-md px-4 py-2 transition-all" :draggable="true" :id="`menu:${menu.id}`">
<div class="flex items-center space-x-2 w-full" :draggable="false">
<Icon :name="menu.icon" :draggable="false" />
<p class="uppercase" :draggable="false">{{ menu.name }}</p>
</div>
<div ref="container" class="flex items-center flex-none rounded-md border dark:border-gray-800" :draggable="false">
<Icon @click.prevent="left(menu)" v-if="menu.parent_id" name="arrow-left" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="right(menu)" v-if="menu.position > 1" name="arrow-right" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="up(menu)" v-if="menu.position > 1" name="arrow-up" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="down(menu)" v-if="menu.position !== menu.parent?.childs_count" name="arrow-down" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="left(menu)" v-if="menu.parent_id" name="arrow-left" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="right(menu)" v-if="menu.position > 1" name="arrow-right" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="up(menu)" v-if="menu.position > 1" name="arrow-up" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="down(menu)" v-if="menu.position !== menu.parent?.childs_count" name="arrow-down" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="edit(menu)" name="edit" class="px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="destroy(menu)" name="trash" class="px-2 py-1 bg-red-600 hover:bg-red-700 text-white transition-all cursor-pointer" :draggable="false" />
</div>

24
resources/js/Pages/Superuser/Menu/Index.vue
View File

@@ -130,9 +130,9 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
<template>
<DashboardLayout title="Menu">
<Card class="dark:bg-gray-700 dark:text-gray-100">
<Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
<template #header>
<div class="flex items-center space-x-2 p-2 dark:bg-gray-800">
<div class="flex items-center space-x-2 p-2 bg-gray-200 dark:bg-gray-800">
<button @click.prevent="show" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm text-white transition-all">
<div class="flex items-center space-x-1">
<Icon name="plus" />
@@ -153,10 +153,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
<transition name="fade">
<div v-if="open" class="fixed top-0 left-0 w-full h-screen flex items-center justify-center bg-black bg-opacity-40">
<form @submit.prevent="submit" class="w-full max-w-5xl rounded-md shadow-xl">
<Card class="dark:bg-gray-700 dark:text-gray-100">
<Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
<template #header>
<div class="flex items-center space-x-2 p-2 justify-end dark:bg-gray-800">
<Icon @click.prevent="close" name="times" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
<div class="flex items-center space-x-2 p-2 justify-end bg-gray-200 dark:bg-gray-800">
<Icon @click.prevent="close" name="times" class="px-2 py-1 bg-gray-300 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
</div>
</template>
@@ -165,7 +165,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
<div class="flex flex-col space-y-1">
<div class="flex items-center space-x-2">
<label for="name" class="lowercase first-letter:capitalize w-1/3">name</label>
<input type="text" name="name" v-model="form.name" ref="name" class="w-full bg-transparent rounded px-3 py-2 border dark:border-gray-800 uppercase placeholder:capitalize" placeholder="name" required>
<input type="text" name="name" v-model="form.name" ref="name" class="w-full bg-white dark:bg-transparent rounded px-3 py-2 border dark:border-gray-800 uppercase placeholder:capitalize" placeholder="name" required>
</div>
<div v-if="form.errors.name" class="text-right text-sm text-red-500">{{ form.errors.name }}</div>
@@ -248,7 +248,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</template>
<template #footer>
<div class="flex items-center justify-end space-x-2 dark:bg-gray-800 py-1 px-2">
<div class="flex items-center justify-end space-x-2 bg-gray-200 dark:bg-gray-800 py-1 px-2">
<button type="submit" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-white text-sm transition-all">
<div class="flex items-center space-x-1">
<Icon name="check" />
@@ -264,17 +264,17 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
<transition name="fade">
<div v-if="icon" class="fixed top-0 left-0 w-full h-screen flex items-center justify-center bg-black bg-opacity-40">
<Card class="dark:bg-gray-700 dark:text-gray-100 w-full max-w-5xl">
<Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100 w-full max-w-5xl">
<template #header>
<div class="flex items-center space-x-2 p-2 justify-end dark:bg-gray-800">
<input type="search" v-model="search" class="w-full bg-transparent rounded-md text-sm uppercase" placeholder="search something">
<Icon @click.prevent="icon = false" name="times" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
<div class="flex items-center space-x-2 p-2 justify-end bg-gray-200 dark:bg-gray-800">
<input type="search" v-model="search" class="py-1 w-full bg-white dark:bg-transparent rounded-md text-sm uppercase" placeholder="search something">
<Icon @click.prevent="icon = false" name="times" class="px-2 py-1 bg-gray-300 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
</div>
</template>
<template #body>
<div class="flex-wrap p-4 max-h-96 overflow-auto">
<Icon v-for="(icx, i) in icons.filter(icx => icx.includes(search.trim().toLocaleLowerCase()))" :key="i" @click.prevent="form.icon = icx; icon = false" :name="icx" class="m-1 text-5xl px-2 py-1 text-gray-800 dark:text-white dark:bg-gray-600 dark:hover:bg-gray-700 rounded-md cursor-pointer transition-all" />
<Icon v-for="(icx, i) in icons.filter(icx => icx.includes(search.trim().toLocaleLowerCase()))" :key="i" @click.prevent="form.icon = icx; icon = false" :name="icx" class="m-1 text-5xl px-2 py-1 text-gray-800 bg-gray-200 hover:bg-gray-100 dark:text-white dark:bg-gray-600 dark:hover:bg-gray-700 rounded-md cursor-pointer transition-all" />
</div>
</template>
</Card>

12
resources/js/Pages/Superuser/Menu/Parent.vue
View File

@@ -36,18 +36,18 @@ Inertia.on('finish', () => {
<template>
<div class="flex flex-col space-y-1" :id="`menu:${menu.id}`">
<div class="flex items-center space-x-2 dark:bg-gray-800 rounded-md px-4 py-2" :draggable="true">
<div class="flex items-center space-x-2 bg-gray-200 hover:bg-gray-100 dark:bg-gray-800 rounded-md px-4 py-2 transition-all" :draggable="true">
<div class="flex items-center space-x-2 w-full" :draggable="false">
<Icon :name="menu.icon" :draggable="false" />
<p class="uppercase" :draggable="false">{{ menu.name }}</p>
</div>
<div ref="container" class="flex items-center flex-none" :draggable="false">
<Icon @click.prevent="left(menu)" v-if="menu.parent_id" name="arrow-left" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="right(menu)" v-if="menu.position > 1" name="arrow-right" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="up(menu)" v-if="menu.position > 1" name="arrow-up" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="down(menu)" v-if="menu.position !== menu.parent?.childs_count" name="arrow-down" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="open = ! open" :name="open ? 'minus' : 'plus'" class="px-2 py-1 dark:bg-gray-100 dark:hover:bg-gray-50 text-gray-800 transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="left(menu)" v-if="menu.parent_id" name="arrow-left" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="right(menu)" v-if="menu.position > 1" name="arrow-right" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="up(menu)" v-if="menu.position > 1" name="arrow-up" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="down(menu)" v-if="menu.position !== menu.parent?.childs_count" name="arrow-down" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="open = ! open" :name="open ? 'minus' : 'plus'" class="px-2 py-1 bg-gray-100 hover:bg-gray-50 dark:bg-gray-100 dark:hover:bg-gray-50 text-gray-800 dark:text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="edit(menu)" name="edit" class="px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white transition-all cursor-pointer" :draggable="false" />
<Icon @click.prevent="destroy(menu)" name="trash" class="px-2 py-1 bg-red-600 hover:bg-red-700 text-white transition-all cursor-pointer" :draggable="false" />
</div>