github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-20 19:02: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) %} {% macro render(display_toc) %}
<div class="toggle sidebar-toggle"> <div class="toggle sidebar-toggle">
<span class="toggle-line toggle-line-first"></span> <span class="toggle-line"></span>
<span class="toggle-line toggle-line-middle"></span> <span class="toggle-line"></span>
<span class="toggle-line toggle-line-last"></span> <span class="toggle-line"></span>
</div> </div>
<aside class="sidebar"> <aside class="sidebar">

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

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

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

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

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

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

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

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

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

@ -50,7 +50,8 @@
.post-header { .post-header {
border-bottom: 1px dashed $grey-light; 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; padding-left: 15px;
position: relative; position: relative;
transition: border $transition-ease; transition: border $transition-ease;
@ -58,7 +59,7 @@
&::before { &::before {
background: $grey; background: $grey;
border: 1px solid white; border: 1px solid white;
left: -4px; left: -6px;
position: absolute; position: absolute;
top: $font-size-smallest; top: $font-size-smallest;
transition: background $transition-ease; transition: background $transition-ease;

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

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