chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(directory): mobile layout update

Browse Source
This commit is contained in:
Haoyu Xu
2023-10-23 15:08:42 -04:00
parent 39b32dd3d9
commit f361049de0
14 changed files with 133 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
directory/index.html
View File

@@ -35,7 +35,7 @@
border-bottom: 0.3rem solid; border-bottom: 0.3rem solid;
border-right: 0.3rem solid; border-right: 0.3rem solid;
border-top: 0.3rem solid; border-top: 0.3rem solid;
transform: translateY(-0.3rem) rotate(-45deg); transform: rotate(-45deg);
box-shadow: inset 0 0 16px 2px rgb(200 14 0), 0 0 18px 5px rgb(200 14 0); box-shadow: inset 0 0 16px 2px rgb(200 14 0), 0 0 18px 5px rgb(200 14 0);
border-color: rgba(54, 0, 0, 87%); border-color: rgba(54, 0, 0, 87%);
} }

21
directory/src/App.scss
View File

@@ -73,6 +73,27 @@
min-height: 100vh; min-height: 100vh;
} }
:root::-webkit-scrollbar {
width: 12px;
height: 12px;
}
#root::-webkit-scrollbar-track {
background-color: transparent;
}
:root::-webkit-scrollbar-thumb {
background-color: var(--border-color);
border: 5px solid transparent;
background-clip: padding-box;
transition: all 0.3s ease-in-out;
}
:root::-webkit-scrollbar-thumb:hover {
border: 4px solid transparent;
background-color: var(--text-color);
}
a { a {
color: var(--text-color); color: var(--text-color);
text-decoration: none; text-decoration: none;

3
directory/src/component/dropdown.jsx
View File

@@ -13,7 +13,7 @@ export default function Dropdown(props) {
return ( return (
<> <>
<section className={`${classes.dropdown} ${hidden ? '' : classes.active} ${props.className ? props.className : ''}`}> <section className={`${classes.dropdown} ${hidden ? '' : classes.active} ${props.className ? props.className : ''} ${props.left ? classes.left : ''}`}>
<section <section
className={classes.text} className={classes.text}
onClick={() => toggleDropdown()} onClick={() => toggleDropdown()}
@@ -90,4 +90,5 @@ Dropdown.propTypes = {
activeRule: PropTypes.func, activeRule: PropTypes.func,
altText: PropTypes.string, altText: PropTypes.string,
iconStyle: PropTypes.object, iconStyle: PropTypes.object,
left: PropTypes.bool,
}; };

11
directory/src/component/scss/border.module.scss
View File

@@ -2,6 +2,11 @@
position: relative; position: relative;
bottom: 1px; bottom: 1px;
border-bottom: 1px solid var(--text-color); border-bottom: 1px solid var(--text-color);
@media only screen and (max-width: 430px) {
& {
margin: 0 1rem;
}
}
&:before, &:before,
&:after { &:after {
@@ -18,11 +23,5 @@
} }
&:after { &:after {
left: 100%; left: 100%;
@media only screen and (max-width: 430px) {
& {
width: 0;
height: 0;
}
}
} }
} }

17
directory/src/component/scss/dropdown.module.scss
View File

@@ -6,6 +6,13 @@
padding: 0.5em; padding: 0.5em;
cursor: pointer; cursor: pointer;
&.left {
.popup, .menu {
left: 0;
right: unset;
}
}
.text { .text {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -60,7 +67,7 @@
border-bottom: 0.15em solid var(--text-color); border-bottom: 0.15em solid var(--text-color);
border-right: 0.15em solid var(--text-color); border-right: 0.15em solid var(--text-color);
border-top: 0.15em solid var(--text-color); border-top: 0.15em solid var(--text-color);
transform: translateY(-0.15em) rotate(-45deg); transform: translateY(-0.2em) rotate(-45deg);
} }
.menu { .menu {
@@ -87,8 +94,14 @@
color: var(--link-highlight-color); color: var(--link-highlight-color);
cursor: auto; cursor: auto;
&.left {
left: 0;
right: unset;
}
.date { .date {
font-family: "Bender", 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans', sans-serif; font-family: "Bender", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR",
"Noto Sans", sans-serif;
font-weight: bold; font-weight: bold;
font-size: 1.5rem; font-size: 1.5rem;
display: flex; display: flex;

16
directory/src/component/scss/search_box.module.scss
View File

@@ -11,19 +11,19 @@
height: 0.8rem; height: 0.8rem;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border-left: 0.15em solid var(--text-color-full); border-left: 0.15rem solid var(--text-color-full);
border-bottom: 0.15em solid var(--text-color-full); border-bottom: 0.15rem solid var(--text-color-full);
border-right: 0.15em solid var(--text-color-full); border-right: 0.15rem solid var(--text-color-full);
border-top: 0.15em solid var(--text-color-full); border-top: 0.15rem solid var(--text-color-full);
transform: translate(0rem, 0.2rem) rotate(-45deg); transform: translate(0.2rem, 0.3rem) rotate(-45deg);
} }
.icon_dot { .icon_dot {
position: absolute; position: absolute;
background-color: var(--text-color-full); background-color: var(--text-color-full);
width: 0.1em; width: 0.15rem;
height: 0.4em; height: 0.6rem;
transform: translate(1.2rem, 1.2rem) rotate(-45deg); transform: translate(1.2rem, 1.1rem) rotate(-45deg);
} }
.input { .input {

20
directory/src/component/scss/switch.module.scss
View File

@@ -20,26 +20,26 @@
.icon { .icon {
position: absolute; position: absolute;
bottom: 8px; bottom: 0.65em;
right: 18px; right: 18px;
width: 8px; width: 0.5em;
height: 8px; height: 0.5em;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border-left: 2px solid currentColor; border-left: 0.15em solid currentColor;
border-bottom: 2px solid currentColor; border-bottom: 0.15em solid currentColor;
border-right: 2px solid currentColor; border-right: 0.15em solid currentColor;
border-top: 2px solid currentColor; border-top: 0.15em solid currentColor;
transform: translate(0, -2px) rotate(-45deg); transform: translate(0, -0.15em) rotate(-45deg);
transition: right cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s, transition: right cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s,
background-color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s; background-color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
} }
.line { .line {
position: absolute; position: absolute;
bottom: 15px; bottom: 1.1em;
right: 6px; right: 6px;
width: 18px; width: 18px;
height: 2px; height: 0.15em;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
background-color: currentColor; background-color: currentColor;

2
directory/src/component/totop_button.jsx
View File

@@ -12,7 +12,7 @@ export default function ToTopButton(props) {
useEffect(() => { useEffect(() => {
const handleButton = () => { const handleButton = () => {
const scrollBarPos = window.pageYOffset || 0; const scrollBarPos = window.scrollY || 0;
setHidden(!(scrollBarPos > 100)) setHidden(!(scrollBarPos > 100))
} }
window.addEventListener('scroll', handleButton) window.addEventListener('scroll', handleButton)

4
directory/src/i18n.json
View File

@@ -151,6 +151,10 @@
"zh-CN": "🧭 快速导航", "zh-CN": "🧭 快速导航",
"en-US": "🧭 Fast Navigation" "en-US": "🧭 Fast Navigation"
}, },
"return": {
"zh-CN": "↩️ 返回",
"en-US": "↩️ Return"
},
"search_by_name": { "search_by_name": {
"zh-CN": "名字搜索", "zh-CN": "名字搜索",
"en-US": "Search by Name" "en-US": "Search by Name"

50
directory/src/routes/Root.jsx
View File

@@ -26,7 +26,6 @@ import {
} from '@/state/language' } from '@/state/language'
import Dropdown from '@/component/dropdown'; import Dropdown from '@/component/dropdown';
import Popup from '@/component/popup'; import Popup from '@/component/popup';
import ReturnButton from '@/component/return_button';
import Border from '@/component/border'; import Border from '@/component/border';
import CharIcon from '@/component/char_icon'; import CharIcon from '@/component/char_icon';
import ToTopButton from '@/component/totop_button'; import ToTopButton from '@/component/totop_button';
@@ -81,7 +80,7 @@ export default function Root() {
document.querySelector('.loader').style.display = 'none' document.querySelector('.loader').style.display = 'none'
}, 500) }, 500)
} }
, []) , [])
return ( return (
<> <>
@@ -94,6 +93,7 @@ export default function Root() {
<section className={header.bar} /> <section className={header.bar} />
<section className={header.bar} /> <section className={header.bar} />
</section> </section>
<HeaderButton />
<section className={header.spacer} /> <section className={header.spacer} />
<section className={header['extra-area']}> <section className={header['extra-area']}>
{extraArea} {extraArea}
@@ -104,7 +104,7 @@ export default function Root() {
<section <section
className={drawer.links} className={drawer.links}
> >
<DrawerDestinations <DrawerDestinations
toggleDrawer={toggleDrawer} toggleDrawer={toggleDrawer}
/> />
</section> </section>
@@ -132,7 +132,7 @@ export default function Root() {
{headerTabs} {headerTabs}
</section> </section>
</section> </section>
<HeaderButton /> <Border />
<ToTopButton /> <ToTopButton />
<Outlet /> <Outlet />
<ScrollRestoration /> <ScrollRestoration />
@@ -288,28 +288,30 @@ function HeaderButton() {
if (fastNavigation.length > 0) { if (fastNavigation.length > 0) {
return ( return (
<Border> <Dropdown
<Dropdown menu={fastNavigation}
menu={fastNavigation} altText={i18n("fast_navigation")}
altText={i18n("fast_navigation")} onClick={(item) => {
onClick={(item) => { navigate(item.value)
navigate(item.value) }}
}} className={header['fast-navigate']}
className={classes['fast-navigate']} iconStyle={{
iconStyle={{ borderWidth: '0.15em',
borderWidth: '0.1em', width: '1em',
}} transform: 'translateY(0.1rem) translateX(0.1rem) rotate(-45deg)',
/> height: '1em',
</Border> }}
left={true}
/>
) )
} else { } else {
return ( return (
<Border> <section className={header['back-arrow']}>
<ReturnButton <Link to="/" className={header.link}>
className={classes['return-button']} <section className={header.arrow1} />
onClick={() => navigate("/")} <section className={header.arrow2} />
/> </Link>
</Border> </section>
) )
} }
} }

6
directory/src/scss/_main_share.scss
View File

@@ -13,8 +13,8 @@
@media only screen and (max-width: 430px) { @media only screen and (max-width: 430px) {
& { & {
width: calc(100vw - 2rem); width: 100vw;
margin-left: 2rem; margin-left: 0;
} }
} }
} }

1
directory/src/scss/_page_base.scss
View File

@@ -192,7 +192,6 @@
& { & {
align-items: flex-start; align-items: flex-start;
flex-direction: column-reverse; flex-direction: column-reverse;
padding-right: 0;
padding-bottom: 0; padding-bottom: 0;
} }
} }

39
directory/src/scss/root/Root.module.scss
View File

@@ -1,4 +1,4 @@
@use '@/scss/_main_share.scss'; @use "@/scss/_main_share.scss";
.main { .main {
.header { .header {
@@ -8,7 +8,12 @@
align-items: flex-end; align-items: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
padding-right: 2rem;
@media only screen and (max-width: 430px) {
& {
margin: 0 1rem;
}
}
.title { .title {
font-size: 3rem; font-size: 3rem;
font-weight: 700; font-weight: 700;
@@ -80,32 +85,4 @@
} }
} }
} }
.fast-navigate { }
position: absolute;
right: -2em;
bottom: calc(-1em - 2px);
font-size: 32px;
@media only screen and (max-width: 430px) {
& {
display: none;
}
}
}
.return-button {
position: absolute;
right: -4rem;
bottom: -24px;
color: var(--button-color);
transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
&:hover {
color: var(--text-color);
}
@media (max-width: 768px) {
right: -3.4rem;
}
}
}

31
directory/src/scss/root/header.module.scss
View File

@@ -5,7 +5,7 @@
top: 0; top: 0;
right: 0; right: 0;
padding: 1rem; padding: 1rem;
z-index: 3; z-index: 4;
height: 3rem; height: 3rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -14,6 +14,11 @@
justify-content: flex-start; justify-content: flex-start;
pointer-events: none; pointer-events: none;
.fast-navigate {
pointer-events: auto;
margin-left: 0.6rem;
}
.dropdown { .dropdown {
margin-left: auto; margin-left: auto;
} }
@@ -71,4 +76,26 @@
.spacer { .spacer {
flex-grow: 1; flex-grow: 1;
} }
.back-arrow {
padding-left: 1rem;
height: 2rem;
width: 2rem;
pointer-events: auto;
.arrow1 {
height: 1rem;
width: 1rem;
border-left: 0.15rem solid;
border-bottom: 0.15rem solid;
transform: translateY(0.38rem) rotate(45deg);
}
.arrow2 {
width: 1.2rem;
height: 0.15rem;
background-color: currentColor;
transform: translate(0.5rem, -0.25rem);
}
}