mirrors/homebox
1
0
Fork 0
mirror of https://github.com/sysadminsmedia/homebox.git synced 2025-12-21 21:33:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix screen large items (#472)

Browse Source 
* Update Container.vue to allow max 7 for xl

* Update items.vue to allow 5 cols to large screen

* Change to use pageSize to 30

Least common multiple is 30 for cols if 2, 3 or 5.

---------

Co-authored-by: Matt Kilgore <tankerkiller125@users.noreply.github.com>
This commit is contained in:
Webysther Sperandio
2025-02-12 14:42:38 +01:00
committed by GitHub
parent 81d3ddc362
commit d62d55a42f
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/Base/Container.vue
View File

@@ -8,7 +8,7 @@
</script> </script>
<template> <template>
<component :is="cmp" class="container mx-auto mt-10 max-w-6xl px-3"> <component :is="cmp" class="container mx-auto mt-10 max-w-7xl px-3">
<slot /> <slot />
</component> </component>
</template> </template>

4
frontend/pages/items.vue
View File

@@ -35,7 +35,7 @@
}, },
}); });
const pageSize = useRouteQuery("pageSize", 21); const pageSize = useRouteQuery("pageSize", 30);
const query = useRouteQuery("q", ""); const query = useRouteQuery("q", "");
const advanced = useRouteQuery("advanced", false); const advanced = useRouteQuery("advanced", false);
const includeArchived = useRouteQuery("archived", false); const includeArchived = useRouteQuery("archived", false);
@@ -507,7 +507,7 @@
<MdiSelectSearch class="size-10" /> <MdiSelectSearch class="size-10" />
<p>{{ $t("items.no_results") }}</p> <p>{{ $t("items.no_results") }}</p>
</div> </div>
<div v-else ref="cardgrid" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3"> <div v-else ref="cardgrid" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
<ItemCard v-for="item in items" :key="item.id" :item="item" :location-flat-tree="locationFlatTree" /> <ItemCard v-for="item in items" :key="item.id" :item="item" :location-flat-tree="locationFlatTree" />
</div> </div>
<div v-if="items.length > 0 && (hasNext || hasPrev)" class="mt-10 flex flex-col items-center gap-2"> <div v-if="items.length > 0 && (hasNext || hasPrev)" class="mt-10 flex flex-col items-center gap-2">