Support event.description in schedule page

next-theme · Jul 23, 2020 · e1beb71 · e1beb71
1 parent e953cbf
commit e1beb71
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 42 deletions.
diff --git a/_config.yml b/_config.yml
@@ -318,7 +318,8 @@ calendar:
   calendar_id: <required> # Your Google account E-Mail
   api_key: <required>
   orderBy: startTime
-  offsetMax: 24 # Time Range
+  showLocation: false
+  offsetMax: 72 # Time Range
   offsetMin: 4 # Time Range
   showDeleted: false
   singleEvents: true

diff --git a/layout/_scripts/pages/schedule.njk b/layout/_scripts/pages/schedule.njk
@@ -81,21 +81,26 @@
       hour   : '2-digit',
       minute : '2-digit'
     };
-    const relativeTimeStr = tense === 0 ? 'NOW' : getRelativeTime(now, start);
-    const durationStr = start.toLocaleTimeString([], durationFormat) + ' - ' + end.toLocaleTimeString([], durationFormat);
+    const relativeTime = tense === 0 ? 'NOW' : getRelativeTime(now, start);
+    const duration = start.toLocaleTimeString([], durationFormat) + ' - ' + end.toLocaleTimeString([], durationFormat);
 
-    let locationDOM = '';
+    let location = '';
     if (calendar.showLocation && event.location) {
-      locationDOM = '<span class="event-location event-details">' + event.location + '</span>';
+      location = `<span class="event-location event-details">${event.location}</span>`;
+    }
+    let description = '';
+    if (event.description) {
+      description = `<span class="event-description event-details">${event.description}</span>`;
     }
 
     const eventContent = `<div class="event ${tenseClass}">
         <h2 class="event-summary">
           ${event.summary}
-          <span class="event-relative-time">${relativeTimeStr}</span>
+          <span class="event-relative-time">${relativeTime}</span>
         </h2>
-        ${locationDOM}
-        <span class="event-duration event-details">${durationStr}</span>
+        ${location}
+        <span class="event-duration event-details">${duration}</span>
+        ${description}
       </div>`;
     return eventContent;
   }

diff --git a/source/css/_common/components/pages/schedule.styl b/source/css/_common/components/pages/schedule.styl
@@ -24,55 +24,60 @@
       display: inline-block;
       font-weight: bold;
       padding: 0 5px;
-      text-align: right;
     }
   }
 
   .event {
-    background: $black-deep;
-    margin: 20px 0;
-    min-height: 40px;
-    padding: 15px 0 15px 10px;
+    --event-background: $black-deep;
+    --event-foreground: $grey;
+    --event-title: white;
+    background: var(--event-background);
+    padding: 15px;
 
     .event-summary {
-      color: white;
+      border-bottom: 0;
+      color: var(--event-title);
       margin: 0;
-      padding-bottom: 3px;
+      padding: 0 0 0 35px;
+      position: relative;
 
       &::before {
         animation: dot-flash 1s alternate infinite ease-in-out;
-        color: white;
-        display: inline-block;
-        font-size: 10px;
-        margin-right: 25px;
-        vertical-align: middle;
-        font-family-icons('\f111');
+        background: var(--event-title);
+        left: 0;
+        margin-top: -6px;
+        position: absolute;
+        top: 50%;
+        round-icon(12px);
       }
     }
 
+    &:nth-of-type(odd) .event-summary::before {
+      animation-delay: .5s;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+
     .event-relative-time {
-      color: $grey;
+      color: var(--event-foreground);
       display: inline-block;
       font-size: 12px;
       font-weight: normal;
       padding-left: 12px;
     }
 
     .event-details {
-      color: white;
+      color: var(--event-foreground);
       display: block;
       line-height: 18px;
-      margin-left: 56px;
-      padding-bottom: 6px;
-      padding-top: 3px;
-      text-indent: -24px;
+      padding: 6px 0 6px 35px;
 
       &::before {
-        color: white;
+        color: var(--event-foreground);
         display: inline-block;
         margin-right: 9px;
-        text-align: center;
-        text-indent: 0;
         width: 14px;
         font-family-icons();
       }
@@ -84,20 +89,16 @@
       &.event-duration::before {
         content: '\f017';
       }
+
+      &.event-description::before {
+        content: '\f024';
+      }
     }
   }
 
   .event-past {
-    background: $whitesmoke;
-
-    .event-summary, .event-details {
-      color: $grey;
-      opacity: .9;
-
-      &::before {
-        animation: none;
-        color: $grey;
-      }
-    }
+    --event-background: $whitesmoke;
+    --event-foreground: $grey-dark;
+    --event-title: $black-deep;
   }
 }
diff --git a/source/css/_schemes/Gemini/index.styl b/source/css/_schemes/Gemini/index.styl
@@ -173,7 +173,6 @@
     border-radius: $border-radius;
     // Rewrite shadows & borders because all blocks have offsets.
     box-shadow: $box-shadow;
-    min-height: auto;
     // Inside posts blocks content padding (default 40px).
     padding: $sidebar-offset;
   }