Skip to content
Snippets Groups Projects
Commit b25c8f72 authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

handle max/min width

parent e7215e67
No related branches found
No related tags found
No related merge requests found
Pipeline #118425 passed
<script lang="ts" setup>
import { useDisplay } from 'vuetify'
const { mobile, width } = useDisplay()
export interface Props {
fluid?: boolean
}
......@@ -8,8 +10,14 @@ const props = withDefaults(defineProps<Props>(), {
});
const sessionExpiryDate = useState('sessionExpiryDate', () => "testsetset")
const { csrfToken } = await useCsrfToken()
const maxWidth = ref(1300)
const minWidth = ref(900)
const computedMinWidth = computed(() => {
if (toValue(mobile)) return undefined
if (toValue(width) - 270 > toValue(maxWidth)) return toValue(maxWidth)
if (toValue(width) - 270 > toValue(minWidth)) return toValue(minWidth)
return undefined
})
watchEffect(async () => {
if (csrfToken.value) {
......@@ -43,7 +51,8 @@ function onScroll() {
<v-container v-scroll="onScroll" :fluid="props.fluid">
<v-row justify="center">
<v-col cols="auto">
<v-card flat color="transparent" :max-width="props.fluid ? undefined : 1280">
<v-card flat color="transparent" :min-width="computedMinWidth"
:max-width="props.fluid ? undefined : maxWidth">
<slot />
</v-card>
</v-col>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment