mirror of
https://github.com/LBRYFoundation/lbry-tech.git
synced 2025-03-04 06:57:53 +00:00
make layout mobile friendly
This commit is contained in:
parent
4e98e1a8ca
commit
ab055d9f49
6 changed files with 217 additions and 62 deletions
|
|
@ -17,6 +17,10 @@ const isActive = (href: string)=>{
|
|||
return href === pathname || href === pathname.split('/').slice(0,2).join('/');
|
||||
}
|
||||
|
||||
function handleMenu(e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
<header>
|
||||
|
|
@ -36,7 +40,24 @@ const isActive = (href: string)=>{
|
|||
</div>
|
||||
<div class="right">
|
||||
<div class="search"><p>Search TODO</p></div>
|
||||
<btn class="menu"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></btn>
|
||||
<btn id="menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</btn>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<script>
|
||||
const btn = document.querySelector('#menu');
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
btn.classList.toggle('open');
|
||||
document.querySelectorAll('.sidebar').forEach(sidebar=>{
|
||||
sidebar.classList.toggle('active');
|
||||
})
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -3,12 +3,10 @@
|
|||
import TableOfContentsHeading from "./TableOfContentsHeading.astro";
|
||||
import TocItem from '../utils/generateToc.ts';
|
||||
const { headings, edit } = Astro.props;
|
||||
import { REPOSITORY, edit_page } from "../config";
|
||||
import { REPOSITORY } from "../config";
|
||||
|
||||
const toc = headings && headings.length ? TocItem(headings) : [];
|
||||
|
||||
console.log(edit);
|
||||
|
||||
---
|
||||
|
||||
<section class="toc">
|
||||
|
|
@ -23,19 +21,12 @@ console.log(edit);
|
|||
</section>
|
||||
<style is:inline>
|
||||
.toc {
|
||||
position: fixed;
|
||||
width: calc(var(--sidebar-width) - 2rem);
|
||||
height: fit-content;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - var(--nav-height) - 2rem * 2);
|
||||
inset-block: 0;
|
||||
inset-inline-end: 2rem;
|
||||
margin-top: calc(2rem + var(--nav-height));
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 1em;
|
||||
background-color: var(--secondary-background);
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
/* max-height: 80%; */
|
||||
/* inset-block: 0; */
|
||||
transition: 0.3s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.toc .container {
|
||||
|
|
@ -67,12 +58,12 @@ console.log(edit);
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
.toc {
|
||||
/* .toc {
|
||||
margin-top: var(--nav-height);
|
||||
margin-bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: unset;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
} */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -35,6 +35,11 @@ const isActive = (href: string)=>{
|
|||
<Layout title={frontmatter.title}>
|
||||
<div class="wrapper">
|
||||
<section class="sidebar">
|
||||
{(headings && headings.length) ? (
|
||||
<aside id="toc">
|
||||
<TableOfContents headings={headings} />
|
||||
</aside>
|
||||
) : ''}
|
||||
<div class="container">
|
||||
{items.length ? (
|
||||
<summary>
|
||||
|
|
@ -50,15 +55,17 @@ const isActive = (href: string)=>{
|
|||
</section>
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<!-- {headings && (
|
||||
<aside id="toc">
|
||||
<TableOfContents headings={headings} edit={'src/content' + pathname + '.md'} />
|
||||
<TableOfContents headings={headings} />
|
||||
</aside>
|
||||
)} -->
|
||||
<div class="markdown-body">
|
||||
<h1>{frontmatter.title}</h1>
|
||||
<h3><Fragment set:html={description}/></h3>
|
||||
<slot/>
|
||||
{!noedit && (
|
||||
<hr>
|
||||
<hr/>
|
||||
<a class="edit" href={`https://github.com/${REPOSITORY}/tree/master/src/content${pathname}.mdx`} target="_blank">{EDIT_PAGE}</a>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -68,24 +75,29 @@ const isActive = (href: string)=>{
|
|||
<style>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
/* max-width: 1000px; */
|
||||
}
|
||||
|
||||
.wrapper .sidebar {
|
||||
position: fixed;
|
||||
width: var(--sidebar-width);
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
max-height: calc(100% - var(--nav-height));
|
||||
overflow-y: auto;
|
||||
inset-block: 0;
|
||||
inset-inline-start: 0;
|
||||
margin-top: var(--nav-height);
|
||||
padding-bottom: var(--nav-height);
|
||||
/* padding: 20px; */
|
||||
padding-top: var(--nav-height);
|
||||
// padding: var(--nav-height) 0;
|
||||
background-color: var(--secondary-background);
|
||||
transition: 0.3s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.wrapper .sidebar .container {
|
||||
position: relative;
|
||||
padding: 1rem 1rem 0;
|
||||
// height: calc(100vh - var(--nav-height)*2);
|
||||
}
|
||||
|
||||
.wrapper .sidebar summary .title {
|
||||
|
|
@ -148,23 +160,42 @@ const isActive = (href: string)=>{
|
|||
margin: 1rem;
|
||||
}
|
||||
|
||||
.wrapper .main aside {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
order: 2;
|
||||
width: fit-content;
|
||||
max-width: 25%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wrapper .markdown-body {
|
||||
// padding: 10px 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrapper #toc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
width: calc(var(--sidebar-width) - 2rem);
|
||||
height: fit-content;
|
||||
max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
|
||||
inset-block: 0;
|
||||
inset-inline-end: 2rem;
|
||||
margin: calc(2rem + var(--nav-height)) 0;
|
||||
// background-color: var(--secondary-background);
|
||||
transition: 0.3s;
|
||||
z-index: 10;
|
||||
overflow-y: auto;
|
||||
border-radius: 1em;
|
||||
background-color: var(--secondary-background);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.wrapper #toc {
|
||||
position: relative;
|
||||
width: var(--sidebar-width);
|
||||
max-height: unset;
|
||||
inset-block: unset;
|
||||
inset-inline-end: unset;
|
||||
margin-top: 0;
|
||||
z-index: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.wrapper .main {
|
||||
padding-inline-end: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
|
|
@ -172,9 +203,13 @@ const isActive = (href: string)=>{
|
|||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.wrapper .sidebar.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
|
||||
.wrapper .main {
|
||||
padding-inline-start: unset;
|
||||
padding-inline-end: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,13 +17,15 @@ const description = await markdown.parse(frontmatter.description);
|
|||
|
||||
<Layout title={frontmatter.title}>
|
||||
<div class="wrapper">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<section class="sidebar">
|
||||
{headings && (
|
||||
<aside class="toc">
|
||||
<aside id="toc">
|
||||
<TableOfContents headings={headings} />
|
||||
</aside>
|
||||
)}
|
||||
</section>
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<div class="markdown-body">
|
||||
<h1>{frontmatter.title}</h1>
|
||||
<h3><Fragment set:html={description}/></h3>
|
||||
|
|
@ -50,32 +52,75 @@ const description = await markdown.parse(frontmatter.description);
|
|||
margin: 1rem;
|
||||
}
|
||||
|
||||
.wrapper .main aside {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
order: 2;
|
||||
/* max-width: 25%; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wrapper .markdown-body {
|
||||
/* margin: 10px 20px; */
|
||||
/* max-width: 75%; */
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wrapper .toc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.wrapper #toc {
|
||||
position: fixed;
|
||||
width: calc(var(--sidebar-width) - 2rem);
|
||||
height: fit-content;
|
||||
max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
|
||||
inset-block: 0;
|
||||
inset-inline-end: 2rem;
|
||||
margin: calc(2rem + var(--nav-height)) 0;
|
||||
background-color: var(--secondary-background);
|
||||
transition: 0.3s;
|
||||
z-index: 10;
|
||||
overflow-y: auto;
|
||||
border-radius: 1em;
|
||||
background-color: var(--secondary-background);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.wrapper .sidebar {
|
||||
position: fixed;
|
||||
width: var(--sidebar-width);
|
||||
height: 100%;
|
||||
max-height: calc(100% - var(--nav-height));
|
||||
overflow-y: auto;
|
||||
inset-block: 0;
|
||||
inset-inline-start: 0;
|
||||
margin-top: var(--nav-height);
|
||||
padding-bottom: var(--nav-height);
|
||||
/* padding: 20px; */
|
||||
// padding: var(--nav-height) 0;
|
||||
background-color: var(--secondary-background);
|
||||
transition: 0.3s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.wrapper #toc {
|
||||
position: relative;
|
||||
width: var(--sidebar-width);
|
||||
max-height: unset;
|
||||
inset-block: unset;
|
||||
inset-inline-end: unset;
|
||||
margin-top: 0;
|
||||
z-index: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.wrapper .main {
|
||||
width: 100%;
|
||||
padding-inline-start: var(--sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
.wrapper .sidebar {
|
||||
transform: translateX(-80%);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.wrapper .sidebar.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.wrapper .main {
|
||||
padding-inline-start: calc(400px * 0.2);
|
||||
width: 100%;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,17 +41,74 @@ header ul li:hover a {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
header .right .menu {
|
||||
header .right #menu {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
#menu {
|
||||
flex-direction: column;
|
||||
/* justify-content: space-between; */
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 1.5rem;
|
||||
position: relative;
|
||||
/* margin: 50px auto; */
|
||||
-webkit-transition: .5s ease-in-out;
|
||||
-moz-transition: .5s ease-in-out;
|
||||
-o-transition: .5s ease-in-out;
|
||||
transition: .5s ease-in-out;
|
||||
cursor: pointer;
|
||||
/* border:1px solid red; */
|
||||
}
|
||||
|
||||
#menu span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background: var(--header-text);
|
||||
border-radius: 9px;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
transition: .2s ease-in-out;
|
||||
/* border:4px solid black; */
|
||||
}
|
||||
|
||||
#menu span:nth-child(1) {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#menu span:nth-child(3) {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#menu.open span:nth-child(1) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#menu.open span:nth-child(2) {
|
||||
width: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#menu.open span:nth-child(3) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
header .left ul, header .right .search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .right .menu {
|
||||
display: block;
|
||||
width: 25px;
|
||||
header .right #menu {
|
||||
display: flex;
|
||||
/* width: 25px; */
|
||||
}
|
||||
}
|
||||
|
|
@ -30,6 +30,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
:root {
|
||||
--sidebar-width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
Loading…
Reference in a new issue