style: FileListing.vue
This commit is contained in:
parent
416d54db5c
commit
d667d97f62
@ -298,7 +298,15 @@ import HeaderBar from "@/components/header/HeaderBar.vue";
|
|||||||
import Action from "@/components/header/Action.vue";
|
import Action from "@/components/header/Action.vue";
|
||||||
import Search from "@/components/Search.vue";
|
import Search from "@/components/Search.vue";
|
||||||
import Item from "@/components/files/ListingItem.vue";
|
import Item from "@/components/files/ListingItem.vue";
|
||||||
import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
import {
|
||||||
|
computed,
|
||||||
|
inject,
|
||||||
|
nextTick,
|
||||||
|
onBeforeUnmount,
|
||||||
|
onMounted,
|
||||||
|
ref,
|
||||||
|
watch,
|
||||||
|
} from "vue";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
@ -325,19 +333,19 @@ const { t } = useI18n();
|
|||||||
const listing = ref<HTMLElement | null>(null);
|
const listing = ref<HTMLElement | null>(null);
|
||||||
|
|
||||||
const nameSorted = computed(() =>
|
const nameSorted = computed(() =>
|
||||||
fileStore.req ? fileStore.req.sorting.by === "name" : false,
|
fileStore.req ? fileStore.req.sorting.by === "name" : false
|
||||||
);
|
);
|
||||||
|
|
||||||
const sizeSorted = computed(() =>
|
const sizeSorted = computed(() =>
|
||||||
fileStore.req ? fileStore.req.sorting.by === "size" : false,
|
fileStore.req ? fileStore.req.sorting.by === "size" : false
|
||||||
);
|
);
|
||||||
|
|
||||||
const modifiedSorted = computed(() =>
|
const modifiedSorted = computed(() =>
|
||||||
fileStore.req ? fileStore.req.sorting.by === "modified" : false,
|
fileStore.req ? fileStore.req.sorting.by === "modified" : false
|
||||||
);
|
);
|
||||||
|
|
||||||
const ascOrdered = computed(() =>
|
const ascOrdered = computed(() =>
|
||||||
fileStore.req ? fileStore.req.sorting.asc : false,
|
fileStore.req ? fileStore.req.sorting.asc : false
|
||||||
);
|
);
|
||||||
|
|
||||||
const dirs = computed(() => items.value.dirs.slice(0, showLimit.value));
|
const dirs = computed(() => items.value.dirs.slice(0, showLimit.value));
|
||||||
@ -643,7 +651,7 @@ const colunmsResize = () => {
|
|||||||
if (items_ === null) return;
|
if (items_ === null) return;
|
||||||
|
|
||||||
let columns = Math.floor(
|
let columns = Math.floor(
|
||||||
(document.querySelector("main")?.offsetWidth ?? 0) / columnWidth.value,
|
(document.querySelector("main")?.offsetWidth ?? 0) / columnWidth.value
|
||||||
);
|
);
|
||||||
if (columns === 0) columns = 1;
|
if (columns === 0) columns = 1;
|
||||||
items_.style.width = `calc(${100 / columns}% - 1em)`;
|
items_.style.width = `calc(${100 / columns}% - 1em)`;
|
||||||
@ -858,7 +866,6 @@ const fetch = () => {
|
|||||||
prompt: "fetch",
|
prompt: "fetch",
|
||||||
confirm: (format: any) => {
|
confirm: (format: any) => {
|
||||||
layoutStore.closeHovers();
|
layoutStore.closeHovers();
|
||||||
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -951,7 +958,7 @@ const fillWindow = (fit = false) => {
|
|||||||
|
|
||||||
// Quantity of items needed to fill 2x of the window height
|
// Quantity of items needed to fill 2x of the window height
|
||||||
const showQuantity = Math.ceil(
|
const showQuantity = Math.ceil(
|
||||||
(windowHeight + windowHeight * 2) / itemWeight.value,
|
(windowHeight + windowHeight * 2) / itemWeight.value
|
||||||
);
|
);
|
||||||
|
|
||||||
// Less items to display than current
|
// Less items to display than current
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user