github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-17 18:22:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimize toggle-line

Browse Source
This commit is contained in:
Mimi 2020-07-24 13:04:11 +08:00
parent e1beb71f6e
commit c954bc29c9
7 changed files with 36 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
layout/_macro/sidebar.njk
View File

@ -1,8 +1,8 @@
{% macro render(display_toc) %}
<div class="toggle sidebar-toggle">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</div>
<aside class="sidebar">

6
layout/_partials/header/brand.njk
View File

@ -2,9 +2,9 @@
<div class="site-nav-toggle">
<div class="toggle" aria-label="{{ __('accessibility.nav_toggle') }}">
{%- if theme.menu %}
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
{%- endif %}
</div>
</div>

28
layout/_scripts/pages/schedule.njk
View File

@ -60,28 +60,14 @@
}
function buildEventDOM(tense, event) {
let tenseClass = '';
const start = event.start.dateTime;
const end = event.end.dateTime;
switch (tense) {
case 0: // now
tenseClass = 'event-now';
break;
case 1: // future
tenseClass = 'event-future';
break;
case -1: // past
tenseClass = 'event-past';
break;
default:
throw new Error('Time data error');
}
const durationFormat = {
weekday: 'short',
hour : '2-digit',
minute : '2-digit'
};
const relativeTime = tense === 0 ? 'NOW' : getRelativeTime(now, start);
const relativeTime = tense === 'now' ? 'NOW' : getRelativeTime(now, start);
const duration = start.toLocaleTimeString([], durationFormat) + ' - ' + end.toLocaleTimeString([], durationFormat);
let location = '';
@ -93,7 +79,7 @@
description = `<span class="event-description event-details">${event.description}</span>`;
}
const eventContent = `<div class="event ${tenseClass}">
const eventContent = `<section class="event event-${tense}">
<h2 class="event-summary">
${event.summary}
<span class="event-relative-time">${relativeTime}</span>
@ -101,7 +87,7 @@
${location}
<span class="event-duration event-details">${duration}</span>
${description}
</div>`;
</section>`;
return eventContent;
}
@ -126,14 +112,14 @@
const start = event.start.dateTime = new Date(event.start.dateTime || (new Date(event.start.date).getTime() + utc));
const end = event.end.dateTime = new Date(event.end.dateTime || (new Date(event.end.date).getTime() + utc));
let tense = 0; // 0:now 1:future -1:past
let tense = 'now';
if (end < now) {
tense = -1;
tense = 'past';
} else if (start > now) {
tense = 1;
tense = 'future';
}
if (tense === 1 && prevEnd < now) {
if (tense === 'future' && prevEnd < now) {
eventList.innerHTML += '<hr>';
}

4
layout/_third-party/statistics/firestore.njk vendored
View File

@ -1,6 +1,6 @@
{%- if theme.firestore.enable %}
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-firestore.js"></script>
<script src="//cdn.jsdelivr.net/npm/firebase@7/firebase-app.js"></script>
<script src="//cdn.jsdelivr.net/npm/firebase@7/firebase-firestore.js"></script>
<script>
firebase.initializeApp({
apiKey : '{{ theme.firestore.apiKey }}',

2
source/css/_common/components/pages/schedule.styl
View File

@ -11,8 +11,6 @@
}
.event-list {
padding: 0;
hr {
background: $black-deep;
margin: 20px 0 45px 0;

5
source/css/_common/components/post/post-collapse.styl
View File

@ -50,7 +50,8 @@
.post-header {
border-bottom: 1px dashed $grey-light;
margin: 30px 0;
// 2px is equal to half the width of .posts-collapse::before
margin: 30px 2px 0;
padding-left: 15px;
position: relative;
transition: border $transition-ease;
@ -58,7 +59,7 @@
&::before {
background: $grey;
border: 1px solid white;
left: -4px;
left: -6px;
position: absolute;
top: $font-size-smallest;
transition: background $transition-ease;

24
source/css/_common/scaffolding/toggles.styl
View File

@ -19,17 +19,17 @@
if (hexo-config('sidebar.position') == 'right') {
.toggle.toggle-arrow {
.toggle-line-first {
.toggle-line:first-child {
top: 2px;
transform: rotate(-45deg);
width: 50%;
}
.toggle-line-middle {
.toggle-line:nth-child(2) {
width: 90%;
}
.toggle-line-last {
.toggle-line:last-child {
top: -2px;
transform: rotate(45deg);
width: 50%;
@ -37,35 +37,35 @@ if (hexo-config('sidebar.position') == 'right') {
}
.toggle.toggle-close {
.toggle-line-first {
.toggle-line:first-child {
top: 5px;
transform: rotate(-45deg);
}
.toggle-line-middle {
.toggle-line:nth-child(2) {
opacity: 0;
}
.toggle-line-last {
.toggle-line:last-child {
top: -5px;
transform: rotate(45deg);
}
}
} else {
.toggle.toggle-arrow {
.toggle-line-first {
.toggle-line:first-child {
left: 50%;
top: 2px;
transform: rotate(45deg);
width: 50%;
}
.toggle-line-middle {
.toggle-line:nth-child(2) {
left: 2px;
width: 90%;
}
.toggle-line-last {
.toggle-line:last-child {
left: 50%;
top: -2px;
transform: rotate(-45deg);
@ -74,16 +74,16 @@ if (hexo-config('sidebar.position') == 'right') {
}
.toggle.toggle-close {
.toggle-line-first {
.toggle-line:first-child {
transform: rotate(-45deg);
top: 5px;
}
.toggle-line-middle {
.toggle-line:nth-child(2) {
opacity: 0;
}
.toggle-line-last {
.toggle-line:last-child {
transform: rotate(45deg);
top: -5px;
}