fix: flags overflow properly

javalent · May 31, 2023 · 82052da · 82052da
1 parent e95baba
commit 82052da
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 35 deletions.
diff --git a/src/calendar/ui/Events/Flags.svelte b/src/calendar/ui/Events/Flags.svelte
@@ -28,7 +28,7 @@
             previousHeight = height;
             target.empty();
             overflow = 0;
-            let added = 0;
+            let remaining = height;
 
             for (const event of events) {
                 const flag = new Flag({
@@ -41,32 +41,31 @@
                     },
                 });
                 console.log(flag);
-                /* if (!dayView) {
-                    remaining += flag.$$..height;
+                if (!dayView) {
+                    remaining =
+                        height -
+                        Array.from(target.children).reduce(
+                            (a, b) => b.getBoundingClientRect().height + a,
+                            0
+                        );
                     if (remaining < 0) {
-                        entry.target.lastElementChild.detach();
+                        target.lastElementChild.detach();
                         overflow = events.length - events.indexOf(event);
                         break;
                     } else if (remaining == 0) {
                         overflow = events.length - events.indexOf(event) - 1;
                         break;
                     }
-                } */
+                }
             }
         }
     };
 
     let container: HTMLElement;
-    const observer = new ResizeObserver(
-        debounce(
-            (entries) =>
-                addEvents(entries[0].contentRect?.height, entries[0]?.target),
-            25
-        )
+    const observer = new ResizeObserver((entries) =>
+        addEvents(entries[0].contentRect?.height, entries[0]?.target)
     );
     onMount(() => {
-        /* 
-        addEvents(container.getBoundingClientRect()?.height, container); */
         observer.observe(container);
     });
 </script>

diff --git a/src/calendar/ui/Month/Month.svelte b/src/calendar/ui/Month/Month.svelte
@@ -83,20 +83,22 @@
         ? `${(1 / $weeks) * 100}%`
         : '1fr'}; --calendar-row-count: {$weeks}"
 >
-    {#if $displayWeeks}
-        <div class="week-numbers-container calendarium">
-            <div class="weekday calendarium">
-                <span>W</span>
-            </div>
-            <div class="week-numbers calendarium">
-                {#each [...Array($weeks).keys()] as week}
-                    <span class="week-number"
-                        >{$firstWeekNumber + 1 + week}</span
-                    >
-                {/each}
+    <div class="week-numbers-outer calendarium">
+        {#if $displayWeeks}
+            <div class="week-numbers-container calendarium">
+                <div class="weekday week-number-header calendarium">
+                    <span>W</span>
+                </div>
+                <div class="week-numbers calendarium">
+                    {#each [...Array($weeks).keys()] as week}
+                        <span class="week-number"
+                            >{$firstWeekNumber + 1 + week}</span
+                        >
+                    {/each}
+                </div>
             </div>
-        </div>
-    {/if}
+        {/if}
+    </div>
     <div class="calendarium month">
         <div class="weekday-container calendarium">
             {#each $weekdays as day}
@@ -111,16 +113,16 @@
 </div>
 
 <style scoped>
-    .weekday-container {
-        display: grid;
-        grid-template-columns: repeat(var(--calendar-columns), 1fr);
-        text-align: center;
-    }
     .month-container {
         height: min-content;
         display: grid;
         grid-template-columns: auto 1fr;
     }
+    .weekday-container {
+        display: grid;
+        grid-template-columns: repeat(var(--calendar-columns), 1fr);
+        text-align: center;
+    }
     .day-container {
         display: grid;
         grid-template-columns: repeat(var(--calendar-columns), 1fr);
@@ -132,9 +134,6 @@
     .full {
         height: 100%;
     }
-    table {
-        height: 100%;
-    }
     .month-header {
         margin: 0;
     }
@@ -151,7 +150,11 @@
         padding: 4px;
         text-transform: uppercase;
     }
+    .week-numbers-outer {
+        height: 100%;
+    }
     .week-numbers-container {
+        height: 100%;
         border-right: 1px solid var(--blockquote-border-color);
         padding-right: 0.5rem;
         margin-right: 0.5rem;
@@ -165,7 +168,7 @@
     }
     .week-number {
         background-color: transparent;
-        margin-bottom: 6px;
+        margin-bottom: 12px;
         color: var(--text-muted);
         cursor: pointer;
         font-size: 0.65em;