wip: update calendar styling

UCLALibrary · Nov 21, 2024 · 48a9102 · 48a9102
1 parent 6ac661d
commit 48a9102
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 32 deletions.
diff --git a/src/lib-components/BaseCalendar.vue b/src/lib-components/BaseCalendar.vue
@@ -67,32 +67,34 @@ const classes = computed(() => {
 
 <template>
   <div ref="calendar" :class="classes">
-    <v-sheet class="calendar-body">
-      <v-calendar
-        :model-value="newDateRef"
-        :events="parsedEvents"
-        view-mode="month"
-      >
-        <!-- Vuetify calendar header slot -->
-        <!--
+    <div class="calendar-wrapper">
+      <v-sheet class="calendar-body">
+        <v-calendar
+          :model-value="newDateRef"
+          :events="parsedEvents"
+          view-mode="month"
+        >
+          <!-- Vuetify calendar header slot -->
+          <!--
         <template #header="header">
           {{ header.title }}
         </template>
         -->
 
-        <!-- Vuetify calendar event slot -->
-        <template #event="event">
-          <div class="calendar-event-item">
-            <p class="calendar-event-title">
-              {{ event.event.title }}
-            </p>
-            <p class="calendar-event-time">
-              {{ event.event.time }}
-            </p>
-          </div>
-        </template>
-      </v-calendar>
-    </v-sheet>
+          <!-- Vuetify calendar event slot -->
+          <template #event="event">
+            <div class="calendar-event-item">
+              <p class="calendar-event-title">
+                {{ event.event.title }}
+              </p>
+              <p class="calendar-event-time">
+                {{ event.event.time }}
+              </p>
+            </div>
+          </template>
+        </v-calendar>
+      </v-sheet>
+    </div>
   </div>
 </template>
 

diff --git a/src/styles/default/_base-calendar.scss b/src/styles/default/_base-calendar.scss
@@ -1,8 +1,11 @@
 .base-calendar {
-  display: grid;
-  grid-template-columns: 40px 1fr 40px;
   position: relative;
-
+
+  .calendar-wrapper {
+    display: grid;
+    grid-template-columns: 40px 1fr 40px;
+  }
+
   .calendar-body {
     grid-column: 2/3;
   }
@@ -35,7 +38,7 @@
 
   // Vuetify navigation arrows
   i.mdi {
-    font-size: 60px;
+    font-size: 50px;
   }
 
   .v-btn.v-btn--icon.v-theme--light.v-btn--density-comfortable.v-btn--size-default.v-btn--variant-text:focus-visible{
@@ -48,14 +51,12 @@
     display: none;
   }
 
-  .v-calendar-weekly__head.days__7.v-calendar-weekly__head-weeknumbers,
-  .v-calendar-month__days.days-with-weeknumbers__7 {
+  .v-calendar-weekly__head.days__7.v-calendar-weekly__head-weeknumbers {
     grid-template-columns: repeat(7, 1fr);
   }
 
   .v-calendar-weekly__head-weekday-with-weeknumber {
     background-color: #fcfcfc;
-    // border-top: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
   }
 
@@ -71,6 +72,17 @@
     text-transform: none;
   }
 
+  /* Calendar Day Cells */
+
+  .v-calendar-month__day {
+    justify-content: space-between;
+  }
+
+  .v-calendar-month__days.days-with-weeknumbers__7.v-calendar-month__weeknumbers{
+    grid-template-columns: repeat(7, minmax(-webkit-min-content, 150px));
+    grid-template-columns: repeat(7, minmax(min-content, 150px));
+  }
+
   .v-calendar-weekly__day-label {
     text-align: right;
   }
@@ -89,10 +101,6 @@
     width: 26px;
     height: 26px;
   }
-
-  .v-calendar-month__day {
-    justify-content: space-between;
-  }
 
   .calendar-event-item {
     background-color: #eee;