Korbs/butterflyvu
Korbs/butterflyvu
1
Fork 0
Code Issues Pull requests Activity

Improve mobile support

Browse source
This commit is contained in:
Korbs 2024-12-21 18:25:02 -05:00
parent 0a38a311d8
commit 92fd796bb0
Signed by: Korbs
SSH key fingerprint: SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
4 changed files with 116 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/Search.astro
View file

@ -10,6 +10,19 @@ const { id, className, query, uiOptions = {} } = Astro.props;
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
id={id}
class:list={[className, "pagefind-init"]}

19
src/components/Sidebar.astro
View file

@ -4,12 +4,23 @@ import { SiteSettings, SidebarItems } from '@config'
---
<div class="sidebar">
{SidebarItems.map((item) => (
item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
))}
<div class="desktop-s">
{SidebarItems.map((item) => (
item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
))}
</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}}>
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>

9
src/components/global/Header.astro
View file

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

104
src/styles/index.scss
View file

@ -87,7 +87,7 @@ header {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
z-index: 10;
.header-content {
max-width: 1200px;
@ -108,6 +108,7 @@ header {
border-radius: 6px;
padding: 8px 12px;
font-size: 14px;
// @media screen and (max-width: 775px) {display: none}
&:focus {
outline: none;
@ -149,20 +150,6 @@ header {
.pagefind-ui__hidden {
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 {
@ -171,15 +158,69 @@ header {
a {
text-decoration: none;
@media screen and (max-width: 775px) {display: none}
&:hover {
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 {
position: relative;
min-height: 100vh;
@ -197,6 +238,29 @@ header {
flex-direction: column;
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 {
margin: 12px 0px 12px 12px;
}
@ -309,16 +373,6 @@ header {
}
@media screen and (max-width: 650px) {
.header-content {
flex-direction: column;
padding-bottom: 24px;
}
.page article {
padding-top: 114px !important;
margin-top: 48px;
}
.footer {
flex-direction: column !important;
align-items: center;