1
0
Fork 0
mirror of https://ark.sudovanilla.org/Korbs/butterflyvu.git synced 2024-12-22 15:23:54 +00:00

Improve mobile support

This commit is contained in:
Korbs 2024-12-21 18:25:02 -05:00
parent 0a38a311d8
commit 92fd796bb0
No known key found for this signature in database
4 changed files with 116 additions and 29 deletions

View file

@ -10,6 +10,19 @@ const { id, className, query, uiOptions = {} } = Astro.props;
const bundlePath = `${import.meta.env.BASE_URL}pagefind/`; const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
--- ---
<button class="mobile-s" onclick="MobileCloseSearch()" id="search-close">Close</button>
<script is:inline>
function MobileOpenSearch() {
document.querySelector('.pagefind-ui__form').style.display = 'inherit'
document.querySelector('#search-close').style.display = 'inherit'
}
function MobileCloseSearch() {
document.querySelector('.pagefind-ui__form').style.display = 'none'
document.querySelector('#search-close').style.display = 'none'
}
</script>
<div <div
id={id} id={id}
class:list={[className, "pagefind-init"]} class:list={[className, "pagefind-init"]}

View file

@ -4,12 +4,23 @@ import { SiteSettings, SidebarItems } from '@config'
--- ---
<div class="sidebar"> <div class="sidebar">
<div class="desktop-s">
{SidebarItems.map((item) => ( {SidebarItems.map((item) => (
item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a> item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
))} ))}
</div> </div>
<details class="mobile-s">
<summary>Menu</summary>
{SidebarItems.map((item) => (
item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
))}
</details>
</div>
<script is:inline define:vars={{SiteSettings}}> <script is:inline define:vars={{SiteSettings}}>
var CurrentURLPath = window.location.pathname var CurrentURLPath = window.location.pathname
document.querySelector('.sidebar > a[href="' + SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + CurrentURLPath + '"]').style.background = '#323232' document.querySelector('.sidebar a[href="' + SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + CurrentURLPath + '"]').style.background = '#323232'
document.querySelector('.sidebar .mobile-s a[href="' + SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + CurrentURLPath + '"]').style.background = '#323232'
</script> </script>

View file

@ -2,6 +2,12 @@
// Settings // Settings
import { SiteSettings, HeaderItems } from '@config' import { SiteSettings, HeaderItems } from '@config'
import Search from '@components/Search.astro' import Search from '@components/Search.astro'
// Icons
import {
Menu,
InputSearch
} from "@iconoir/vue"
--- ---
<header> <header>
@ -14,6 +20,9 @@ import Search from '@components/Search.astro'
{HeaderItems.map((item) => ( {HeaderItems.map((item) => (
<a href={item.link}>{item.text}</a> <a href={item.link}>{item.text}</a>
))} ))}
<div class="mobile-s">
<button onclick="MobileOpenSearch()"><InputSearch/></button>
</div>
</div> </div>
</div> </div>
</header> </header>

View file

@ -87,7 +87,7 @@ header {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
z-index: 1; z-index: 10;
.header-content { .header-content {
max-width: 1200px; max-width: 1200px;
@ -108,6 +108,7 @@ header {
border-radius: 6px; border-radius: 6px;
padding: 8px 12px; padding: 8px 12px;
font-size: 14px; font-size: 14px;
// @media screen and (max-width: 775px) {display: none}
&:focus { &:focus {
outline: none; outline: none;
@ -149,20 +150,6 @@ header {
.pagefind-ui__hidden { .pagefind-ui__hidden {
display: none !important; display: none !important;
} }
@media screen and (max-width: 916px) {
.pagefind-ui__drawer {
left: 12px;
width: 100%;
max-width: calc(100% - 74px);
}
}
@media screen and (max-width: 650px) {
.pagefind-ui__drawer {
top: 122px !important;
}
}
} }
.header-end { .header-end {
@ -171,14 +158,68 @@ header {
a { a {
text-decoration: none; text-decoration: none;
@media screen and (max-width: 775px) {display: none}
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.mobile-s {
display: none;
@media screen and (max-width: 775px) {
display: flex;
gap: 6px;
}
button {
background: transparent;
color: white;
border: 1px white solid;
border-radius: 6px;
padding: 4px 6px 2px 6px;
cursor: pointer;
} }
} }
} }
}
}
@media screen and (max-width: 775px) {
.pagefind-ui__form {
display: none;
position: fixed;
top: 0px;
left: 0px;
padding: 24px;
width: calc(100% - 48px);
background: transparent;
height: 100%;
backdrop-filter: blur(10px) contrast(0.8) brightness(0.6);
}
.pagefind-ui__search-input {
width: calc(100% - 32px);
}
.pagefind-ui__drawer {
left: 24px !important;
max-width: calc(100% - 114px) !important;
}
.pagefind-ui__drawer {
top: 70px !important;
}
}
#search-close {
display: none;
z-index: 10;
position: fixed;
top: 28px;
right: 46px;
background: #0a0a0a;
border-radius: 4px;
padding: 4px 12px;
border: 1px gray solid;
color: #bbb;
}
.page { .page {
position: relative; position: relative;
@ -197,6 +238,29 @@ header {
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
.desktop-s {
min-width: 250px;
display: flex;
flex-direction: column;
gap: 6px;
@media screen and (max-width: 775px) {
display: none;
}
}
.mobile-s {
display: none;
@media screen and (max-width: 775px) {
display: flex;
gap: 6px;
summary {
border-radius: 6px;
border: 1px #2d2d2d solid;
padding: 12px 24px;
}
}
}
h2 { h2 {
margin: 12px 0px 12px 12px; margin: 12px 0px 12px 12px;
} }
@ -309,16 +373,6 @@ header {
} }
@media screen and (max-width: 650px) { @media screen and (max-width: 650px) {
.header-content {
flex-direction: column;
padding-bottom: 24px;
}
.page article {
padding-top: 114px !important;
margin-top: 48px;
}
.footer { .footer {
flex-direction: column !important; flex-direction: column !important;
align-items: center; align-items: center;