Support event.description in schedule page

This commit is contained in:
Mimi 2020-07-23 22:23:31 +08:00
parent e953cbf4b0
commit e1beb71f6e
4 changed files with 48 additions and 42 deletions

View File

@ -318,7 +318,8 @@ calendar:
calendar_id: <required> # Your Google account E-Mail calendar_id: <required> # Your Google account E-Mail
api_key: <required> api_key: <required>
orderBy: startTime orderBy: startTime
offsetMax: 24 # Time Range showLocation: false
offsetMax: 72 # Time Range
offsetMin: 4 # Time Range offsetMin: 4 # Time Range
showDeleted: false showDeleted: false
singleEvents: true singleEvents: true

View File

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

View File

@ -24,34 +24,44 @@
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
padding: 0 5px; padding: 0 5px;
text-align: right;
} }
} }
.event { .event {
background: $black-deep; --event-background: $black-deep;
margin: 20px 0; --event-foreground: $grey;
min-height: 40px; --event-title: white;
padding: 15px 0 15px 10px; background: var(--event-background);
padding: 15px;
.event-summary { .event-summary {
color: white; border-bottom: 0;
color: var(--event-title);
margin: 0; margin: 0;
padding-bottom: 3px; padding: 0 0 0 35px;
position: relative;
&::before { &::before {
animation: dot-flash 1s alternate infinite ease-in-out; animation: dot-flash 1s alternate infinite ease-in-out;
color: white; background: var(--event-title);
display: inline-block; left: 0;
font-size: 10px; margin-top: -6px;
margin-right: 25px; position: absolute;
vertical-align: middle; top: 50%;
font-family-icons('\f111'); round-icon(12px);
} }
} }
&:nth-of-type(odd) .event-summary::before {
animation-delay: .5s;
}
&:not(:last-child) {
margin-bottom: 20px;
}
.event-relative-time { .event-relative-time {
color: $grey; color: var(--event-foreground);
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
@ -59,20 +69,15 @@
} }
.event-details { .event-details {
color: white; color: var(--event-foreground);
display: block; display: block;
line-height: 18px; line-height: 18px;
margin-left: 56px; padding: 6px 0 6px 35px;
padding-bottom: 6px;
padding-top: 3px;
text-indent: -24px;
&::before { &::before {
color: white; color: var(--event-foreground);
display: inline-block; display: inline-block;
margin-right: 9px; margin-right: 9px;
text-align: center;
text-indent: 0;
width: 14px; width: 14px;
font-family-icons(); font-family-icons();
} }
@ -84,20 +89,16 @@
&.event-duration::before { &.event-duration::before {
content: '\f017'; content: '\f017';
} }
&.event-description::before {
content: '\f024';
}
} }
} }
.event-past { .event-past {
background: $whitesmoke; --event-background: $whitesmoke;
--event-foreground: $grey-dark;
.event-summary, .event-details { --event-title: $black-deep;
color: $grey;
opacity: .9;
&::before {
animation: none;
color: $grey;
}
}
} }
} }

View File

@ -173,7 +173,6 @@
border-radius: $border-radius; border-radius: $border-radius;
// Rewrite shadows & borders because all blocks have offsets. // Rewrite shadows & borders because all blocks have offsets.
box-shadow: $box-shadow; box-shadow: $box-shadow;
min-height: auto;
// Inside posts blocks content padding (default 40px). // Inside posts blocks content padding (default 40px).
padding: $sidebar-offset; padding: $sidebar-offset;
} }