From c4613ff209bd804e26ff8ac3e64b59a7ddb804f8 Mon Sep 17 00:00:00 2001
From: cnouguier <ch.nouguier@gmail.com>
Date: Tue, 20 Aug 2024 13:57:21 +0200
Subject: [PATCH] wip: Provide a new TimeLine component #909

---
 core/client/components/collection/KTimeLine.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/core/client/components/collection/KTimeLine.vue b/core/client/components/collection/KTimeLine.vue
index b370313cf..a49c3838a 100644
--- a/core/client/components/collection/KTimeLine.vue
+++ b/core/client/components/collection/KTimeLine.vue
@@ -185,6 +185,10 @@ const props = defineProps({
     type: Function,
     default: undefined
   },
+  sideWidth: {
+    type: Number,
+    default: 20
+  },
   header: {
     type: [Array, Object],
     default: () => null
@@ -221,6 +225,9 @@ const bodyRendererClass = computed(() => {
 const layout = computed(() => {
   return $q.screen.lt.md ? 'dense' : 'comfortable'
 })
+const comfortSize = computed(() => {
+  return `${props.sideWidth}%`
+})
 
 // Watch
 watch(items, onCollectionRefreshed)
@@ -304,10 +311,10 @@ onBeforeUnmount(() => {
   width: 100%;
 }
 .q-timeline--comfortable .q-timeline__subtitle {
-  width: 15%;
+  width: v-bind(comfortSize);
 }
 .q-timeline--comfortable .q-timeline__content {
   padding-bottom: 16px;
-  width: 85%;
+  width: calc(100% - v-bind(comfortSize));
 }
 </style>