mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-05-18 14:34:23 +02:00
Remove container div
This commit is contained in:
saberzero1
parent
316a993fed
commit
979d653b1a
@ -84,69 +84,67 @@ export default ((userOpts?: Partial<Options>) => {
|
|||||||
constructFileTree(allFiles, (fileData.filePath ?? "").replaceAll(" ", "-"))
|
constructFileTree(allFiles, (fileData.filePath ?? "").replaceAll(" ", "-"))
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div class="explorer-container">
|
<div class={classNames(displayClass, "explorer")}>
|
||||||
<div class={classNames(displayClass, "explorer")}>
|
<button
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
id="mobile-explorer"
|
||||||
id="mobile-explorer"
|
class="collapsed"
|
||||||
class="collapsed"
|
data-behavior={opts.folderClickBehavior}
|
||||||
data-behavior={opts.folderClickBehavior}
|
data-collapsed={opts.folderDefaultState}
|
||||||
data-collapsed={opts.folderDefaultState}
|
data-savestate={opts.useSavedState}
|
||||||
data-savestate={opts.useSavedState}
|
data-tree={jsonTree}
|
||||||
data-tree={jsonTree}
|
data-mobile={true}
|
||||||
data-mobile={true}
|
aria-controls="explorer-content"
|
||||||
aria-controls="explorer-content"
|
aria-expanded={false}
|
||||||
aria-expanded={false}
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-menu"
|
||||||
>
|
>
|
||||||
<svg
|
<line x1="4" x2="20" y1="12" y2="12" />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<line x1="4" x2="20" y1="6" y2="6" />
|
||||||
width="24"
|
<line x1="4" x2="20" y1="18" y2="18" />
|
||||||
height="24"
|
</svg>
|
||||||
viewBox="0 0 24 24"
|
</button>
|
||||||
stroke-width="2"
|
<button
|
||||||
stroke-linecap="round"
|
type="button"
|
||||||
stroke-linejoin="round"
|
id="desktop-explorer"
|
||||||
class="lucide lucide-menu"
|
class="title-button"
|
||||||
>
|
data-behavior={opts.folderClickBehavior}
|
||||||
<line x1="4" x2="20" y1="12" y2="12" />
|
data-collapsed={opts.folderDefaultState}
|
||||||
<line x1="4" x2="20" y1="6" y2="6" />
|
data-savestate={opts.useSavedState}
|
||||||
<line x1="4" x2="20" y1="18" y2="18" />
|
data-tree={jsonTree}
|
||||||
</svg>
|
data-mobile={false}
|
||||||
</button>
|
aria-controls="explorer-content"
|
||||||
<button
|
aria-expanded={true}
|
||||||
type="button"
|
>
|
||||||
id="desktop-explorer"
|
<h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
|
||||||
class="title-button"
|
<svg
|
||||||
data-behavior={opts.folderClickBehavior}
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
data-collapsed={opts.folderDefaultState}
|
width="14"
|
||||||
data-savestate={opts.useSavedState}
|
height="14"
|
||||||
data-tree={jsonTree}
|
viewBox="5 8 14 8"
|
||||||
data-mobile={false}
|
fill="none"
|
||||||
aria-controls="explorer-content"
|
stroke="currentColor"
|
||||||
aria-expanded={true}
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="fold"
|
||||||
>
|
>
|
||||||
<h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
|
<polyline points="6 9 12 15 18 9"></polyline>
|
||||||
<svg
|
</svg>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
</button>
|
||||||
width="14"
|
<div id="explorer-content">
|
||||||
height="14"
|
<ul class="overflow" id="explorer-ul">
|
||||||
viewBox="5 8 14 8"
|
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
|
||||||
fill="none"
|
<li id="explorer-end" />
|
||||||
stroke="currentColor"
|
</ul>
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
class="fold"
|
|
||||||
>
|
|
||||||
<polyline points="6 9 12 15 18 9"></polyline>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div id="explorer-content">
|
|
||||||
<ul class="overflow" id="explorer-ul">
|
|
||||||
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
|
|
||||||
<li id="explorer-end" />
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,277 +1,287 @@
|
|||||||
@use "../../styles/variables.scss" as *;
|
@use "../../styles/variables.scss" as *;
|
||||||
|
|
||||||
.explorer-container {
|
.explorer {
|
||||||
overflow-y: hidden;
|
|
||||||
@media all and ($mobile) {
|
@media all and ($mobile) {
|
||||||
order: -1;
|
order: -1;
|
||||||
|
height: initial;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.explorer {
|
display: flex;
|
||||||
|
|
||||||
|
button#mobile-explorer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button#desktop-explorer {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and ($mobile) {
|
||||||
button#mobile-explorer {
|
button#mobile-explorer {
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
button#desktop-explorer {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@media all and ($mobile) {
|
|
||||||
button#mobile-explorer {
|
button#desktop-explorer {
|
||||||
display: flex;
|
display: none;
|
||||||
}
|
|
||||||
button#desktop-explorer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
height: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow-y: hidden;
|
|
||||||
&.desktop-only {
|
|
||||||
@media all and not ($mobile) {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/*&:after {
|
|
||||||
pointer-events: none;
|
|
||||||
content: "";
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
background: linear-gradient(transparent 0px, var(--light));
|
|
||||||
}*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button#mobile-explorer,
|
height: 100%;
|
||||||
button#desktop-explorer {
|
flex-direction: column;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
|
&.desktop-only {
|
||||||
|
@media all and not ($mobile) {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*&:after {
|
||||||
|
pointer-events: none;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
background: linear-gradient(transparent 0px, var(--light));
|
||||||
|
}*/
|
||||||
|
}
|
||||||
|
|
||||||
|
button#mobile-explorer,
|
||||||
|
button#desktop-explorer {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
color: var(--dark);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
& h2 {
|
||||||
|
font-size: 1rem;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .fold {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapsed .fold {
|
||||||
|
transform: rotateZ(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-outer {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 0fr;
|
||||||
|
transition: grid-template-rows 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-outer.open {
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-outer > ul {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#explorer-content {
|
||||||
|
list-style: none;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 0px;
|
||||||
|
transition:
|
||||||
|
max-height 0.35s ease,
|
||||||
|
visibility 0s linear 0.35s;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
visibility: hidden;
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
max-height: 100%;
|
||||||
|
transition:
|
||||||
|
max-height 0.35s ease,
|
||||||
|
visibility 0s linear 0s;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0.08rem 0;
|
||||||
|
padding: 0;
|
||||||
|
transition:
|
||||||
|
max-height 0.35s ease,
|
||||||
|
transform 0.35s ease,
|
||||||
|
opacity 0.2s ease;
|
||||||
|
|
||||||
|
& li > a {
|
||||||
|
color: var(--dark);
|
||||||
|
opacity: 0.75;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> #explorer-ul {
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
pointer-events: all;
|
||||||
|
|
||||||
|
& > polyline {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-container {
|
||||||
|
flex-direction: row;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
& div > a {
|
||||||
|
color: var(--secondary);
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: $semiBoldWeight;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
& div > a:hover {
|
||||||
|
color: var(--tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
& div > button {
|
||||||
|
color: var(--dark);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0;
|
padding-left: 0;
|
||||||
color: var(--dark);
|
padding-right: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
|
||||||
& h2 {
|
& span {
|
||||||
font-size: 1rem;
|
font-size: 0.95rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
color: var(--secondary);
|
||||||
|
font-weight: $semiBoldWeight;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
line-height: 1.5rem;
|
||||||
|
|
||||||
& .fold {
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.collapsed .fold {
|
|
||||||
transform: rotateZ(-90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder-outer {
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 0fr;
|
|
||||||
transition: grid-template-rows 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder-outer.open {
|
|
||||||
grid-template-rows: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder-outer > ul {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#explorer-content {
|
|
||||||
list-style: none;
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
max-height: 0px;
|
|
||||||
transition:
|
|
||||||
max-height 0.35s ease,
|
|
||||||
visibility 0s linear 0.35s;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
visibility: hidden;
|
|
||||||
|
|
||||||
&.collapsed {
|
|
||||||
max-height: 100%;
|
|
||||||
transition:
|
|
||||||
max-height 0.35s ease,
|
|
||||||
visibility 0s linear 0s;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
& ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0.08rem 0;
|
|
||||||
padding: 0;
|
|
||||||
transition:
|
|
||||||
max-height 0.35s ease,
|
|
||||||
transform 0.35s ease,
|
|
||||||
opacity 0.2s ease;
|
|
||||||
& li > a {
|
|
||||||
color: var(--dark);
|
|
||||||
opacity: 0.75;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> #explorer-ul {
|
|
||||||
max-height: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
pointer-events: all;
|
|
||||||
|
|
||||||
& > polyline {
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.folder-container {
|
.folder-icon {
|
||||||
flex-direction: row;
|
margin-right: 5px;
|
||||||
display: flex;
|
color: var(--secondary);
|
||||||
align-items: center;
|
cursor: pointer;
|
||||||
user-select: none;
|
transition: transform 0.3s ease;
|
||||||
|
backface-visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
& div > a {
|
li:has(> .folder-outer:not(.open)) > .folder-container > svg {
|
||||||
color: var(--secondary);
|
transform: rotate(-90deg);
|
||||||
font-family: var(--headerFont);
|
}
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: $semiBoldWeight;
|
|
||||||
line-height: 1.5rem;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
& div > a:hover {
|
.folder-icon:hover {
|
||||||
color: var(--tertiary);
|
color: var(--tertiary);
|
||||||
}
|
}
|
||||||
|
|
||||||
& div > button {
|
.no-background::after {
|
||||||
color: var(--dark);
|
background: none !important;
|
||||||
background-color: transparent;
|
}
|
||||||
border: none;
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-family: var(--headerFont);
|
|
||||||
|
|
||||||
& span {
|
#explorer-end {
|
||||||
font-size: 0.95rem;
|
// needs height so IntersectionObserver gets triggered
|
||||||
display: inline-block;
|
height: 4px;
|
||||||
color: var(--secondary);
|
// remove default margin from li
|
||||||
font-weight: $semiBoldWeight;
|
margin: 0;
|
||||||
margin: 0;
|
}
|
||||||
line-height: 1.5rem;
|
|
||||||
pointer-events: none;
|
.explorer {
|
||||||
|
@media all and ($mobile) {
|
||||||
|
#explorer-content {
|
||||||
|
box-sizing: border-box;
|
||||||
|
overscroll-behavior: none;
|
||||||
|
z-index: 100;
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--light);
|
||||||
|
max-width: 100dvw;
|
||||||
|
left: -100dvw;
|
||||||
|
width: 100%;
|
||||||
|
transition: all 300ms ease-in-out;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 2rem 2rem 4rem;
|
||||||
|
height: calc(100dvh - 4rem);
|
||||||
|
max-height: calc(100dvh - 4rem);
|
||||||
|
margin-top: 2rem;
|
||||||
|
visibility: visible;
|
||||||
|
|
||||||
|
&:not(.collapsed) {
|
||||||
|
left: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder-icon {
|
ul.overflow {
|
||||||
margin-right: 5px;
|
max-height: 100%;
|
||||||
color: var(--secondary);
|
width: 100%;
|
||||||
cursor: pointer;
|
}
|
||||||
transition: transform 0.3s ease;
|
|
||||||
backface-visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
li:has(> .folder-outer:not(.open)) > .folder-container > svg {
|
&.collapsed {
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder-icon:hover {
|
|
||||||
color: var(--tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-background::after {
|
|
||||||
background: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#explorer-end {
|
|
||||||
// needs height so IntersectionObserver gets triggered
|
|
||||||
height: 4px;
|
|
||||||
// remove default margin from li
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.explorer {
|
|
||||||
@media all and ($mobile) {
|
|
||||||
#explorer-content {
|
|
||||||
box-sizing: border-box;
|
|
||||||
overscroll-behavior: none;
|
|
||||||
z-index: 100;
|
|
||||||
position: absolute;
|
|
||||||
background-color: var(--light);
|
|
||||||
max-width: 100dvw;
|
|
||||||
left: -100dvw;
|
left: -100dvw;
|
||||||
width: 100dvw;
|
|
||||||
transition: all 300ms ease-in-out;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 2rem 2rem 4rem;
|
|
||||||
height: calc(100dvh - 4rem);
|
|
||||||
max-height: calc(100dvh - 4rem);
|
|
||||||
margin-top: 2rem;
|
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:not(.collapsed) {
|
#mobile-explorer {
|
||||||
//height: 100dvh;
|
margin: 5px;
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.overflow {
|
&:not(.collapsed) .lucide-menu {
|
||||||
max-height: 100%;
|
transform: rotate(-90deg);
|
||||||
width: 100%;
|
transition: transform 200ms ease-in-out;
|
||||||
}
|
|
||||||
|
|
||||||
&.collapsed {
|
|
||||||
//height: 0;
|
|
||||||
left: -100dvw;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#mobile-explorer {
|
.lucide-menu {
|
||||||
margin: 5px;
|
stroke: var(--darkgray);
|
||||||
&:not(.collapsed) .lucide-menu {
|
transition: transform 200ms ease;
|
||||||
transform: rotate(90deg);
|
|
||||||
transition: transform 200ms ease-in-out;
|
&:hover {
|
||||||
}
|
stroke: var(--dark);
|
||||||
.lucide-menu {
|
|
||||||
stroke: var(--darkgray);
|
|
||||||
transition: transform 200ms ease;
|
|
||||||
&:hover {
|
|
||||||
stroke: var(--dark);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-scroll {
|
||||||
|
opacity: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
html:has(.no-scroll) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and not ($mobile) {
|
||||||
.no-scroll {
|
.no-scroll {
|
||||||
opacity: 0;
|
opacity: 1 !important;
|
||||||
overflow: hidden;
|
overflow: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:has(.no-scroll) {
|
html:has(.no-scroll) {
|
||||||
overflow: hidden;
|
overflow: auto !important;
|
||||||
}
|
|
||||||
|
|
||||||
@media all and not ($mobile) {
|
|
||||||
.no-scroll {
|
|
||||||
opacity: 1 !important;
|
|
||||||
overflow: auto !important;
|
|
||||||
}
|
|
||||||
html:has(.no-scroll) {
|
|
||||||
overflow: auto !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -279,6 +289,7 @@
|
|||||||
.lock-scroll {
|
.lock-scroll {
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and ($mobile) {
|
@media all and ($mobile) {
|
||||||
.lock-scroll {
|
.lock-scroll {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user