mirror of
https://github.com/next-theme/hexo-theme-next.git
synced 2026-01-20 19:02:33 +00:00
Support event.description in schedule page
This commit is contained in:
parent
e953cbf4b0
commit
e1beb71f6e
@ -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
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user