Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix] ui mobile produk

Browse Source
This commit is contained in:
dhilanradya 2025-09-08 17:16:05 +07:00
parent 86f3e101c8
commit 7f4b41b904
2 changed files with 70 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/searchbar.vue
View File

@ -14,4 +14,4 @@ import { ref } from "vue";
const searchText = ref(""); const searchText = ref("");
defineEmits(["update:search"]); defineEmits(["update:search"]);
</script> </script>

90
resources/js/pages/Produk.vue
View File

@ -20,29 +20,65 @@
<!-- Judul --> <!-- Judul -->
<p class="font-serif italic text-[25px] text-D">PRODUK</p> <p class="font-serif italic text-[25px] text-D">PRODUK</p>
<!-- Filter --> <!-- Wrapper -->
<div <div class="mt-3">
class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3" <!-- Mobile Layout -->
> <div class="flex flex-col gap-3 sm:hidden">
<!-- Dropdown Kategori --> <!-- Search -->
<InputSelect <div class="w-full">
v-model="selectedCategory" <searchbar
:options="kategori" v-model:search="searchQuery"
class="w-full md:w-48" class="searchbar-mobile"
/> />
</div>
<!-- Search --> <!-- Filter + Tombol -->
<searchbar v-model:search="searchQuery" class="flex-1" /> <div class="flex flex-row justify-between items-center">
</div> <!-- Filter Kategori -->
<div class="w-40 shrink-0">
<InputSelect
v-model="selectedCategory"
:options="kategori"
class="w-full"
/>
</div>
<!-- Tombol Tambah Produk --> <!-- Tombol Tambah Produk -->
<div class="mt-3 flex justify-end"> <router-link
<router-link to="/produk/baru"
to="/produk/baru" class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition" >
> Tambah Produk
Tambah Produk </router-link>
</router-link> </div>
</div>
<!-- Desktop Layout -->
<div class="hidden sm:flex flex-row gap-3 items-start">
<!-- Filter -->
<div class="w-40 sm:w-48 shrink-0">
<InputSelect
v-model="selectedCategory"
:options="kategori"
class="w-full"
/>
</div>
<!-- Search -->
<div class="flex-1 mt-[2px]">
<searchbar v-model:search="searchQuery" class="w-full" />
</div>
</div>
<!-- Tombol Tambah Produk (desktop) -->
<div class="hidden sm:flex justify-end mt-3">
<router-link
to="/produk/baru"
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
>
Tambah Produk
</router-link>
</div>
</div> </div>
<!-- Grid Produk --> <!-- Grid Produk -->
@ -296,3 +332,15 @@ async function deleteProduk() {
} }
} }
</script> </script>
<style scoped>
/* 🔥 Tambahan agar searchbar mobile full */
.searchbar-mobile:deep(div) {
width: 100% !important;
justify-content: flex-start !important;
}
.searchbar-mobile:deep(input) {
width: 100% !important;
}
</style>