jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add dynamic app grid spacing to always fill full width

Browse Source
This commit is contained in:
Johannes Zellner
2025-10-16 22:42:11 +02:00
parent 82c97f7e1c
commit f37dd03e4b
1 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
dashboard/src/views/AppsView.vue
View File

@@ -234,6 +234,7 @@ function toggleView() {
const view = useTemplateRef('view');
const itemWidth = ref('unset');
const itemSpacing = ref('10px');
function setItemWidth() {
if (!view.value) return;
@@ -241,9 +242,18 @@ function setItemWidth() {
const width = view.value.offsetWidth;
const gap = 25; // grid item margin offset
if (width <= 360) itemWidth.value = '100%';
else if (width <= 550) itemWidth.value = Number((width-gap*2)/2).toFixed() + 'px';
else itemWidth.value = '190px';
if (width <= 360) {
itemWidth.value = '100%';
itemSpacing.value = '10px';
} else if (width <= 550) {
itemWidth.value = Number((width-gap*2)/2).toFixed();
itemSpacing.value = '10px';
} else {
itemWidth.value = '190px';
const itemsPerRow = Math.floor(width/(190+20));
itemSpacing.value = Math.floor(((width - (190*itemsPerRow)) / itemsPerRow-1)/2) + 'px';
}
}
onActivated(async () => {
@@ -300,7 +310,7 @@ onDeactivated(() => {
</div>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
<a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" :style="{ width: itemWidth }">
<a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" :style="{ width: itemWidth, marginLeft: itemSpacing, marginRight: itemSpacing }">
<img :alt="app.label || app.subdomain || app.fqdn" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
<div class="grid-item-label" v-fit-text>{{ app.label || app.subdomain || app.fqdn }}</div>
<div class="grid-item-task-label" v-if="app.type === APP_TYPES.LINK">{{ $t('app.appLink.title') }}</div>