nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

topbar: move sidebar- and toc-overlay into topbar #639

Browse source 
for better modularization by keeping their whole functionality DOMwise in one place
This commit is contained in:
Sören Weber 2023-09-13 23:25:47 +02:00
parent 564f95145c
commit 82ba045702
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
4 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
layouts/404.html
View file

@ -63,7 +63,6 @@
</head> </head>
<body class="mobile-support html notfound" data-url="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}"> <body class="mobile-support html notfound" data-url="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
<div id="body" class="default-animation"> <div id="body" class="default-animation">
<div id="sidebar-overlay"></div>
<main id="body-inner" class="chapter" tabindex="-1"> <main id="body-inner" class="chapter" tabindex="-1">
<div class="flex-block-wrapper"> <div class="flex-block-wrapper">
<article> <article>

4
layouts/partials/header.html
View file

@ -67,8 +67,6 @@
</head> </head>
<body class="mobile-support {{ $outputFormat }}{{- if .Site.Params.disableInlineCopyToClipBoard }} disableInlineCopyToClipboard{{ end }}{{- if .Site.Params.disableHoverBlockCopyToClipBoard }} disableHoverBlockCopyToClipBoard{{ end }}" data-url="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}"> <body class="mobile-support {{ $outputFormat }}{{- if .Site.Params.disableInlineCopyToClipBoard }} disableInlineCopyToClipboard{{ end }}{{- if .Site.Params.disableHoverBlockCopyToClipBoard }} disableHoverBlockCopyToClipBoard{{ end }}" data-url="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
<div id="body" class="default-animation"> <div id="body" class="default-animation">
<div id="sidebar-overlay"></div>
<div id="toc-overlay"></div>
<nav id="topbar"> <nav id="topbar">
<div> <div>
<div class="topbar-sidebar-divider"></div> <div class="topbar-sidebar-divider"></div>
@ -80,6 +78,7 @@
"icon" "bars" "icon" "bars"
"title" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle")) "title" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle"))
)}} )}}
<div id="sidebar-overlay"></div>
{{- $defaultDisableToc := .Site.Params.disableToc | default false }} {{- $defaultDisableToc := .Site.Params.disableToc | default false }}
{{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }} {{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }}
{{- $toc_content := partial "toc.html" . }} {{- $toc_content := partial "toc.html" . }}
@ -94,6 +93,7 @@
"title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle")) "title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
)}} )}}
{{ $toc_content }} {{ $toc_content }}
<div id="toc-overlay"></div>
{{- end }} {{- end }}
</div> </div>
{{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }} {{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}

4
static/css/theme.css
View file

@ -1139,6 +1139,7 @@ html[dir="rtl"] .topbar-next i {
background-color: rgba( 134, 134, 134, .5 ); background-color: rgba( 134, 134, 134, .5 );
bottom: 0; bottom: 0;
cursor: pointer; cursor: pointer;
height: 100vh;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
@ -1362,10 +1363,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
.toc-flyout #toc-overlay{ .toc-flyout #toc-overlay{
bottom: 0; bottom: 0;
cursor: pointer; cursor: pointer;
height: calc(100vh - 3rem);
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 3rem;
z-index: 160; z-index: 160;
} }

17
static/js/theme.js
View file

@ -940,11 +940,15 @@ function initToc(){
document.addEventListener( 'keydown', searchShortcutHandler ); document.addEventListener( 'keydown', searchShortcutHandler );
document.addEventListener( 'keydown', tocShortcutHandler ); document.addEventListener( 'keydown', tocShortcutHandler );
document.querySelector( '#sidebar-overlay' ).addEventListener( 'click', showNav ); var s = document.querySelector( '#sidebar-overlay' );
document.querySelector( '#toc-overlay' ).addEventListener( 'click', showToc ); if( s ){
s.addEventListener( 'click', showNav );
}
var o = document.querySelector( '#toc-overlay' );
var p = document.querySelector( '.progress' ); var p = document.querySelector( '.progress' );
if( p ){ if( o && p ){
// we may not have a toc // we may not have a toc
o.addEventListener( 'click', showToc );
p.addEventListener( 'click', showToc ); p.addEventListener( 'click', showToc );
} }
@ -990,13 +994,14 @@ function initSwipeHandler(){
return false; return false;
}; };
document.querySelector( '#sidebar-overlay' ).addEventListener("touchstart", handleStartX, false); var s = document.querySelector( '#sidebar-overlay' );
s && s.addEventListener("touchstart", handleStartX, false);
document.querySelector( '#sidebar' ).addEventListener("touchstart", handleStartX, false); document.querySelector( '#sidebar' ).addEventListener("touchstart", handleStartX, false);
document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchstart", handleStartX); }, false); document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchstart", handleStartX); }, false);
document.querySelector( '#sidebar-overlay' ).addEventListener("touchmove", handleMoveX, false); s && s.addEventListener("touchmove", handleMoveX, false);
document.querySelector( '#sidebar' ).addEventListener("touchmove", handleMoveX, false); document.querySelector( '#sidebar' ).addEventListener("touchmove", handleMoveX, false);
document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchmove", handleMoveX); }, false); document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchmove", handleMoveX); }, false);
document.querySelector( '#sidebar-overlay' ).addEventListener("touchend", handleEndX, false); s && s.addEventListener("touchend", handleEndX, false);
document.querySelector( '#sidebar' ).addEventListener("touchend", handleEndX, false); document.querySelector( '#sidebar' ).addEventListener("touchend", handleEndX, false);
document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchend", handleEndX); }, false); document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchend", handleEndX); }, false);
} }