From 4e1109a08ec3450c7d2c4ea97300227d936802a2 Mon Sep 17 00:00:00 2001 From: Max batleforc Date: Thu, 22 Aug 2024 16:43:20 +0200 Subject: [PATCH] feat: changement du style de la timeline [HOOK FAIL OK] --- apps/front/src/helper/mediaQuerry.ts | 20 + apps/front/src/views/HomeView.vue | 13 +- cog.toml | 3 + libs/hook/src/executors/hook:rust/executor.ts | 20 +- libs/hook/src/executors/hook:vue/executor.ts | 5 +- package.json | 30 +- yarn.lock | 1016 ++++++++--------- 7 files changed, 574 insertions(+), 533 deletions(-) create mode 100644 apps/front/src/helper/mediaQuerry.ts diff --git a/apps/front/src/helper/mediaQuerry.ts b/apps/front/src/helper/mediaQuerry.ts new file mode 100644 index 0000000..32aed0e --- /dev/null +++ b/apps/front/src/helper/mediaQuerry.ts @@ -0,0 +1,20 @@ +import { computed, onMounted, onUnmounted, ref } from 'vue'; + +export const useBreakpoints = () => { + const windowWidth = ref(window.innerWidth); + + const onWidthChange = () => (windowWidth.value = window.innerWidth); + onMounted(() => window.addEventListener('resize', onWidthChange)); + onUnmounted(() => window.removeEventListener('resize', onWidthChange)); + + const type = computed(() => { + if (windowWidth.value < 680) return 'xs'; + if (windowWidth.value >= 680 && windowWidth.value < 1200) return 'md'; + if (windowWidth.value >= 1200) return 'lg'; + return null; // This is an unreachable line, simply to keep eslint happy. + }); + + const width = computed(() => windowWidth.value); + + return { width, type }; +}; diff --git a/apps/front/src/views/HomeView.vue b/apps/front/src/views/HomeView.vue index ba0d5c6..1e21b59 100644 --- a/apps/front/src/views/HomeView.vue +++ b/apps/front/src/views/HomeView.vue @@ -2,7 +2,9 @@ import { useIndexStore } from '../stores'; import { getMediaApiUrl } from '../helper/index'; import IcoOrMedia from '../component/helper/IcoOrMedia.vue'; +import { useBreakpoints } from '../helper/mediaQuerry'; const indexStore = useIndexStore(); +const { type } = useBreakpoints();