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("");
defineEmits(["update:search"]);
</script>
</script>

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

@ -20,29 +20,65 @@
<!-- Judul -->
<p class="font-serif italic text-[25px] text-D">PRODUK</p>
<!-- Filter -->
<div
class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3"
>
<!-- Dropdown Kategori -->
<InputSelect
v-model="selectedCategory"
:options="kategori"
class="w-full md:w-48"
/>
<!-- Wrapper -->
<div class="mt-3">
<!-- Mobile Layout -->
<div class="flex flex-col gap-3 sm:hidden">
<!-- Search -->
<div class="w-full">
<searchbar
v-model:search="searchQuery"
class="searchbar-mobile"
/>
</div>
<!-- Search -->
<searchbar v-model:search="searchQuery" class="flex-1" />
</div>
<!-- Filter + Tombol -->
<div class="flex flex-row justify-between items-center">
<!-- Filter Kategori -->
<div class="w-40 shrink-0">
<InputSelect
v-model="selectedCategory"
:options="kategori"
class="w-full"
/>
</div>
<!-- Tombol Tambah Produk -->
<div class="mt-3 flex justify-end">
<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>
<!-- Tombol Tambah Produk -->
<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>
<!-- 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>
<!-- Grid Produk -->
@ -296,3 +332,15 @@ async function deleteProduk() {
}
}
</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>