DRAFT: feat: remove calendar buttons and update design

public/css/main.css

@@ -1,12 +1,133 @@
+main {
+    font-family: "Segoe UI", Arial, sans-serif;
+}
+
 .container {
-  padding: 20px;
+    padding: 20px;
 }
 
 .cell {
-  display: grid;
-  height: 100%;
+    display: grid;
+    height: 100%;
+}
+
+.title {
+    font-weight: 650;
+    --bulma-block-spacing: 2rem;
+}
+
+.icon {
+    color: #eb0f0f;
+}
+
+.grid {
+    gap: 2rem;
 }
 
 #calendar {
-  height: 800px;
+    height: 800px;
+}
+
+.community-image {
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.toastui-calendar-detail-item-indent {
+    display: none !important;
+}
+
+.calendar-header {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+    font-size: 20px;
+}
+
+.calendar-popup-text {
+    color: #2e333d;
+}
+
+.lth-card {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    padding: 24px 30px;
+    border-radius: 6px;
+    border: 1px solid #d3d3d3;
+    color: #2e333d;
+    white-space: wrap;
+}
+
+.lth-card-icon {
+    display: flex;
+    font-size: 48px;
+    margin-bottom: 24px;
+    color: #eb0f0f;
+}
+
+.lth-card-title {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 28px;
+}
+
+.lth-card-text {
+    font-size: 18px;
+    line-height: 22px;
+}
+
+.lth-card-reference {
+    max-width: 300px;
+    justify-content: space-between;
+}
+
+.learn-more:after {
+    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11' fill='none' viewBox='0 0 7 11'%3E%3Cpath stroke='%23eb0f0f' stroke-width='1.2' d='M1 1.301 5.199 5.5 1 9.699'/%3E%3C/svg%3E");
+    margin-left: 8px;
+    position: relative;
+    vertical-align: 1px;
+}
+
+.learn-more {
+    width: fit-content;
+    background-image: linear-gradient(#000, #000);
+    background-position-x: 0;
+    background-position-y: 100%;
+    background-repeat: no-repeat;
+    background-size: 0 .1em;
+    color: #000 !important;
+    transition: background-size .2s ease-in-out;
+}
+
+.learn-more:hover {
+    background-size: 100% .1em;
+}
+
+
+.search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.search-input {
+    padding: 6px 10px;
+    border-radius: 4px;
+    border: 1px solid #d3d3d3;
+    width: 300px;
+}
+
+.search-header {
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    @media (max-width: 600px) {
+        flex-direction: column;
+    }
+    margin-bottom: 32px;
 }

public/js/communityEvents.html

@@ -1,8 +1,8 @@
-<div class="card">
+<div class="lth-card">
   <div class="card-content">
-    <p class="title">{{ paneTitle }}</p>
+    <p class="lth-card-title">{{ paneTitle }}</p>
     {{#if noEvent}}
-      <p class="title is-6">
+      <p class="lth-card-title is-6">
         {{ noEventCaption }}
       </p>
     {{/if}}

public/js/main.js

@@ -90,6 +90,11 @@ const loadCommunities = () =>
         .then((response) => response.text())
         .then((body) => JSON.parse(body));
 
+const refreshCurrentMonth = (calendar) =>{
+    let dateRangeStart = calendar.getDate();
+    document.querySelector('#calendarDate').textContent = dateRangeStart.getMonth() + 1 + ' / ' + dateRangeStart.getFullYear();
+}
+
 const loadCalendar = async () => {
     const communities = await loadCommunities();
     const communitiesCalendars =
@@ -129,6 +134,7 @@ const loadCalendar = async () => {
         ],
     });
 
+    refreshCurrentMonth(calendar);
     fetch(calendarICSUrl)
         .then((response) => response.text())
         .then((raw) => listVEventComponents(raw).map(toEvent))
@@ -153,24 +159,38 @@ const loadCalendar = async () => {
                         }
                     }
 
+                    function formatWithLink(text, url) {
+                        return url ? "<a class='calendar-popup-text' href='" + url + "'>" + text + "</a>" : text;
+                    }
+
                     return {
                         calendarId: calendarId,
                         id: item.id,
-                        title: title,
-                        body: item.description,
+                        title: formatWithLink(title, item.url),
+                        body: formatWithLink(item.description + " " + (item.url ?? ""), item.url),
                         start: item.startDate,
                         end: item.endDate,
                         location: item.location,
                         raw: { url: item.url },
+                        isReadOnly: true,
                     }
                 })
             );
         })
     ;
 
-    document.querySelector('#calendarToday').onclick = () => { calendar.today(); };
-    document.querySelector('#calendarNext').onclick = () => { calendar.next(); };
-    document.querySelector('#calendarPrevious').onclick = () => { calendar.prev(); };
+    document.querySelector('#calendarToday').onclick = () => {
+        calendar.today();
+        refreshCurrentMonth(calendar);
+    };
+    document.querySelector('#calendarNext').onclick = () => {
+        calendar.next();
+        refreshCurrentMonth(calendar);
+    };
+    document.querySelector('#calendarPrevious').onclick = () => {
+        calendar.prev();
+        refreshCurrentMonth(calendar);
+    };
 
 };