tyler.durden/cockpit-navigator
1
0
Fork 0
mirror of https://github.com/45Drives/cockpit-navigator.git synced 2025-07-29 16:45:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

use element.clientWidth for calcing cols

Browse Source
This commit is contained in:
joshuaboud 2022-06-13 17:52:52 -03:00
parent d08427cfde
commit f29af205c1
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
navigator/src/components/DirectoryView.vue
View File

@ -83,7 +83,7 @@
</template>
<script>
import { ref, inject, watch, onMounted, computed, onBeforeUnmount } from 'vue';
import { ref, inject, watch, onMounted, computed, onBeforeUnmount, onUpdated } from 'vue';
import Table from './Table.vue';
import { clipboardInjectionKey, notificationsInjectionKey, settingsInjectionKey } from '../keys';
import LoadingSpinner from './LoadingSpinner.vue';
@ -247,13 +247,13 @@ export default {
}
const getCols = () => {
const gridRect = gridRef.value?.getBoundingClientRect();
if (!gridRect)
const gridWidth = gridRef.value?.clientWidth;
if (!gridWidth)
return cols.value = 1;
const entryWidth = settings.directoryView?.gridEntrySize;
if (!entryWidth)
return cols.value = 1;
return cols.value = Math.floor(gridRect.width / entryWidth);
return cols.value = Math.floor(gridWidth / entryWidth);
}
onMounted(() => {
@ -262,6 +262,8 @@ export default {
window.addEventListener('resize', getCols);
});
onUpdated(getCols);
onBeforeUnmount(() => {
window.removeEventListener('resize', getCols);
});