Improve responsiveness of grid layouts

This commit is contained in:
Matthias 2022-01-01 17:22:32 +01:00
parent 99c340db38
commit 73ecb0c332
3 changed files with 6 additions and 4 deletions

View File

@ -1,5 +1,5 @@
<template>
<footer class="d-sm-none">
<footer class="d-md-none">
<!-- Only visible on xs (phone) viewport! -->
<hr class="my-0" />
<div class="d-flex flex-align-center justify-content-center">

View File

@ -10,6 +10,7 @@
:is-draggable="!isLayoutLocked"
:responsive="true"
:prevent-collision="true"
:cols="{ lg: 12, md: 12, sm: 12, xs: 4, xxs: 2 }"
@layout-updated="layoutUpdated"
@breakpoint-changed="breakpointChanged"
>
@ -171,7 +172,7 @@ export default class Dashboard extends Vue {
}
get isResizableLayout() {
return ['', 'md', 'lg', 'xl'].includes(this.currentBreakpoint);
return ['', 'sm', 'md', 'lg', 'xl'].includes(this.currentBreakpoint);
}
get gridLayout() {

View File

@ -9,6 +9,7 @@
:is-resizable="!isLayoutLocked"
:is-draggable="!isLayoutLocked"
:responsive="true"
:cols="{ lg: 12, md: 12, sm: 12, xs: 4, xxs: 2 }"
@layout-updated="layoutUpdatedEvent"
@breakpoint-changed="breakpointChanged"
>
@ -206,7 +207,7 @@ export default class Trading extends Vue {
}
get isResizableLayout() {
return ['', 'md', 'lg', 'xl'].includes(this.currentBreakpoint);
return ['', 'sm', 'md', 'lg', 'xl'].includes(this.currentBreakpoint);
}
get gridLayout(): GridItemData[] {
@ -257,7 +258,7 @@ export default class Trading extends Vue {
}
breakpointChanged(newBreakpoint) {
// console.log('breakpoint:', newBreakpoint);
console.log('breakpoint:', newBreakpoint);
this.currentBreakpoint = newBreakpoint;
}
}