Styling details, removed absolute positioning of each weekrow and month label in favor of a wrapper that uses block layout inside it. Gaps/borders removed on the calendar.

2025-09-23 18:15:00 -06:00
parent 0d4094826d
commit eaa55c94fd
5 changed files with 65 additions and 65 deletions
--- a/src/assets/layout.css
+++ b/src/assets/layout.css
@@ -82,17 +82,6 @@ header {
 #calendar-content {
  position: relative;
 }
-/* Week row: label + 7-day grid + jogwheel column */
-.week-row {
-  display: grid;
-  grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
-  position: relative;
-  overflow: visible;
-  height: var(--row-h);
-  scroll-snap-align: start;
-  width: 100%;
-}
-
 /* Label cells */
 .year-label,
 .week-label {
@@ -109,8 +98,8 @@ header {
 }
 /* 7-day grid inside each week row */
 .week-row > .days-grid {
-  grid-column: 2 / span 7;
  display: grid;
+  grid-column: 2 / span 7;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  position: relative;
--- a/src/components/CalendarDay.vue
+++ b/src/components/CalendarDay.vue
@@ -41,8 +41,6 @@ const formattedDate = computed(() => {
 <style scoped>
 .cell {
  position: relative;
-  border-inline-end: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
  user-select: none;
  display: grid;
  /* Updated grid for centered day number */
@@ -98,7 +96,7 @@ const formattedDate = computed(() => {
 .cell {
  background-image: linear-gradient(
    135deg,
-    var(--holiday-grad-start, rgba(255, 255, 255, 0.5)) 0%,
+    var(--holiday-grad-start, rgba(255, 255, 255, 0.3)) 0%,
    var(--holiday-grad-end, rgba(255, 255, 255, 0)) 70%
  );
 }
@@ -106,7 +104,7 @@ const formattedDate = computed(() => {
  .cell {
    background-image: linear-gradient(
      135deg,
-      var(--holiday-grad-start, rgba(255, 255, 255, 0.1)) 0%,
+      var(--holiday-grad-start, rgba(255, 255, 255, 0.05)) 0%,
      var(--holiday-grad-end, rgba(255, 255, 255, 0)) 70%
    );
  }
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -513,39 +513,50 @@ window.addEventListener('resize', () => {
      <div class="calendar-container">
        <div class="calendar-viewport" ref="viewport">
          <div class="calendar-content" :style="{ height: contentHeight + 'px' }">
-            <CalendarWeek
-              v-for="week in visibleWeeks"
-              :key="week.virtualWeek"
-              :week="week"
-              :dragging="isDragging"
-              :style="{ top: week.top + 'px' }"
-              @day-mousedown="handleDayMouseDown"
-              @day-mouseenter="handleDayMouseEnter"
-              @day-mouseup="handleDayMouseUp"
-              @day-touchstart="handleDayTouchStart"
-              @event-click="handleEventClick"
-            />
+            <div
+              class="weeks-wrapper"
+              :style="{
+                transform: `translateY(${visibleWeeks.length ? visibleWeeks[0].top : 0}px)`,
+              }"
+            >
+              <CalendarWeek
+                v-for="week in visibleWeeks"
+                :key="week.virtualWeek"
+                :week="week"
+                :dragging="isDragging"
+                @day-mousedown="handleDayMouseDown"
+                @day-mouseenter="handleDayMouseEnter"
+                @day-mouseup="handleDayMouseUp"
+                @day-touchstart="handleDayTouchStart"
+                @event-click="handleEventClick"
+              />
+            </div>
          </div>
          <div class="month-column-area" :style="{ height: contentHeight + 'px' }">
            <div class="month-labels-container" :style="{ height: '100%' }">
-              <template v-for="monthWeek in visibleWeeks" :key="monthWeek.virtualWeek + '-month'">
-                <div
-                  v-if="monthWeek && monthWeek.monthLabel"
-                  class="month-label"
-                  :class="monthWeek.monthLabel?.monthClass"
-                  :style="{
-                    height: `calc(var(--row-h) * ${monthWeek.monthLabel?.weeksSpan || 1})`,
-                    top: (monthWeek.top || 0) + 'px',
-                  }"
-                  @pointerdown="handleMonthScrollPointerDown"
-                  @touchstart.prevent="handleMonthScrollTouchStart"
-                  @wheel="handleMonthScrollWheel"
-                >
-                  <span :class="{ bottomup: shouldRotateMonth(monthWeek.monthLabel?.text) }">{{
-                    monthWeek.monthLabel?.text || ''
-                  }}</span>
-                </div>
-              </template>
+              <div
+                class="month-labels-wrapper"
+                :style="{
+                  transform: `translateY(${visibleWeeks.length ? visibleWeeks[0].top : 0}px)`,
+                  gridTemplateRows: `repeat(${visibleWeeks.length}, var(--row-h))`,
+                }"
+              >
+                <template v-for="(monthWeek, i) in visibleWeeks" :key="monthWeek.virtualWeek + '-month'">
+                  <div
+                    v-if="monthWeek && monthWeek.monthLabel"
+                    class="month-label"
+                    :class="monthWeek.monthLabel?.monthClass"
+                    :style="{ gridRow: `${i + 1} / span ${monthWeek.monthLabel?.weeksSpan || 1}` }"
+                    @pointerdown="handleMonthScrollPointerDown"
+                    @touchstart.prevent="handleMonthScrollTouchStart"
+                    @wheel="handleMonthScrollWheel"
+                  >
+                    <span :class="{ bottomup: shouldRotateMonth(monthWeek.monthLabel?.text) }">{{
+                      monthWeek.monthLabel?.text || ''
+                    }}</span>
+                  </div>
+                </template>
+              </div>
            </div>
          </div>
        </div>
@@ -604,6 +615,13 @@ header h1 {
  width: 100%;
 }

+.weeks-wrapper {
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: 100%;
+  will-change: transform;
+}
+
 .month-column-area {
  position: relative;
  cursor: ns-resize;
@@ -615,18 +633,24 @@ header h1 {
  height: 100%;
 }

-.month-label {
+.month-labels-wrapper {
  position: absolute;
-  inset-inline-start: 0;
+  inset: 0 auto auto 0;
  width: 100%;
-  background-image: linear-gradient(to bottom, rgba(186, 186, 186, 0.3), rgba(186, 186, 186, 0.2));
+  will-change: transform;
+  display: grid;
+  grid-auto-flow: row;
+}
+
+.month-label {
+  width: 100%;
+  opacity: 0.8;
  font-size: 2em;
  font-weight: 700;
-  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
-  z-index: 15;
+  z-index: 5;
  overflow: hidden;
  cursor: ns-resize;
  user-select: none;
--- a/src/components/CalendarWeek.vue
+++ b/src/components/CalendarWeek.vue
@@ -33,20 +33,10 @@ const handleDayTouchStart = (dateStr) => {
 const handleEventClick = (payload) => {
  emit('event-click', payload)
 }
-
-// Only apply upside-down rotation (bottomup) for Latin script month labels
-function shouldRotateMonth(label) {
-  if (!label) return false
-  try {
-    return /\p{Script=Latin}/u.test(label)
-  } catch (e) {
-    return /[A-Za-z\u00C0-\u024F\u1E00-\u1EFF]/u.test(label)
-  }
-}
 </script>

 <template>
-  <div class="week-row" :style="{ top: `${props.week.top}px` }">
+  <div class="week-row">
    <div class="week-label">W{{ props.week.weekNumber }}</div>
    <div class="days-grid">
      <CalendarDay
@@ -68,7 +58,6 @@ function shouldRotateMonth(label) {
 .week-row {
  display: grid;
  grid-template-columns: var(--week-w) repeat(7, 1fr);
-  position: absolute;
  height: var(--row-h);
  width: 100%;
 }
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -199,8 +199,8 @@ function formatDateCompact(date) {
  return date.toLocaleDateString(undefined, { 
    weekday: 'short', 
    day: 'numeric', 
-    month: 'short' 
-  }).replace(", ", " ")
+    month: 'short'
+  })
 }

 export {