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

feat(directory): performance and style optimization

Browse Source
This commit is contained in:
Haoyu Xu
2023-02-26 13:45:49 -05:00
parent 81ee2d2170
commit 5c80834c30
9 changed files with 103 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
directory/src/App.css
View File

@@ -4,6 +4,7 @@
:root {
--text-color: rgba(255, 255, 255, 0.87);
--secondary-text-color: #686a72;
--date-color: rgba(255, 255, 255, 0.2);
--border-color: #707070;
--link-highlight-color: #33b5e5;
@@ -16,16 +17,12 @@
font-family: "Geometos", "Noto Sans SC", sans-serif;
font-size: 16px;
line-height: 24px;
line-height: 1.1em;
font-weight: 400;
color: var(--text-color);
background-color: var(--root-background-color);
min-height: 100vh;
font-synthesis: none;
text-rendering: optimizeLegibility;
}
#root {

4
directory/src/component/main_border.jsx
View File

@@ -2,6 +2,8 @@ import './main_border.css';
export default function MainBorder(props) {
return (
<section className="main-border"/>
<section className="main-border">
{props.children}
</section>
)
}

8
directory/src/component/popup.css
View File

@@ -41,18 +41,18 @@
.popup .title {
font-size: 3rem;
font-weight: 700;
border-bottom: 1px solid var(--border-color);
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
padding-bottom: 1rem;
text-transform: uppercase;
font-family: "Geometos", "Noto Sans SC", sans-serif;
}
.popup .content {
line-height: 1.5rem;
padding: 1rem;
line-height: 1.3em;
padding: 1rem 1rem 0 1rem;
}
.popup .overlay {

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

@@ -4,6 +4,7 @@ import {
} from 'react'
import './popup.css'
import ReturnButton from '@/component/return_button';
import MainBorder from '@/component/main_border';
export default function Popup(props) {
const [hidden, setHidden] = useState(true)
@@ -20,6 +21,7 @@ export default function Popup(props) {
<span>{props.title}</span>
<ReturnButton onClick={toggle} className="return-button"/>
</section>
<MainBorder/>
<section className='content'>
{props.children}
</section>

2
directory/src/context/useConfigContext.jsx
View File

@@ -3,7 +3,7 @@ import { createContext, useState, useEffect } from "react"
export const ConfigContext = createContext()
export function ConfigProvider(props) {
const [config, setConfig] = useState(null)
const [config, setConfig] = useState([])
useEffect(() => {
fetch("/_assets/directory.json").then(res => res.json()).then(data => {

25
directory/src/routes/path/home.css
View File

@@ -24,8 +24,16 @@
background-image: repeating-linear-gradient(90deg, var(--home-item-background-linear-gradient-color) 0, var(--home-item-background-linear-gradient-color) 1px, transparent 1px, transparent 5px);
}
.home .item-group .item .item-background-filler {
border-right: 1px solid var(--home-item-background-linear-gradient-color);
position: absolute;
top: 0;
left: 0;
right: -1px;
bottom: 0;
}
.home .item-group .item .item-outline {
content: "";
display: block;
position: absolute;
opacity: 0;
@@ -94,20 +102,23 @@
font-weight: bold;
}
.home .item-group .item .item-info .item-title-container .item-title,
.home .item-group .item .item-info .item-text-wrapper {
.home .item-group .item .item-info .item-title-container .item-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.home .item-group .item .item-info .item-title-container .item-title {
line-height: 1.1em;
height: 1.25rem;
}
.home .item-group .item .item-info .item-title-container .item-type {
width: 1.5rem;
fill: var(--text-color)
}
.home .item-group .item .item-info .item-text {
color: var(--text-color);
font-size: 0.75rem;
font-family: "Geometos";
margin-top: 1rem;
@@ -123,4 +134,10 @@
visibility: hidden;
transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
background-image: linear-gradient(70deg, transparent 40%, currentColor 150%);
}
.home .item-group .item .item-info .item-text-wrapper {
overflow: hidden;
text-overflow: ellipsis;
color: var(--secondary-text-color);
}

116
directory/src/routes/path/home.jsx
View File

@@ -19,7 +19,7 @@ export default function Home() {
const _trackEvt = useUmami('/')
const {
setTitle,
setTabs,
tabs, setTabs,
currentTab, setCurrentTab } = useContext(HeaderContext)
const { config } = useContext(ConfigContext)
const {
@@ -28,6 +28,7 @@ export default function Home() {
alternateLang,
i18n
} = useContext(LanguageContext)
const [content, setContent] = useState([])
useEffect(() => {
setTitle('dynamic_compile')
@@ -46,70 +47,63 @@ export default function Home() {
setCurrentTab('all')
}, [])
const renderContent = () => {
const list = config?.filter((v) => currentTab === 'all' || currentTab === v.type)
const content = []
if (list) {
console.log(list)
let items = {}
list.forEach(element => {
if (items[element.date]) {
items[element.date].push(toItemEl(element))
} else {
items[element.date] = [toItemEl(element)]
}
});
items = Object.keys(items).sort().reverse().reduce((r, k) => {
r[k] = items[k]
return r
}, {})
for (const [date, group] of Object.entries(items)) {
content.push(
<section className="item-group-wrapper" key={date}>
<section className="item-group">
{group.map((v) => v)}
<section className='item-group-date'>{date}</section>
</section>
<MainBorder />
</section>
)
useEffect(() => {
const value = config.reduce((acc, cur) => {
const date = cur.date
if (acc[date]) {
acc[date].push(cur)
} else {
acc[date] = [cur]
}
}
return content
}
const toItemEl = (item) => {
return (
<Link reloadDocument to={`/${item.link}`} className="item" key={item.link}>
<section className="item-outline"/>
<section className="item-img">
<img src={`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`} alt={item.codename[language]} />
</section>
<section className="item-info">
<section className="item-title-container">
<section className="item-title">{item.codename[language]}</section>
<section className="item-type">
<CharIcon
type={item.type}
viewBox={
item.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
} />
</section>
</section>
<section className="item-text-wrapper">
<span className='item-text'>{item.codename[language.startsWith("en") ? alternateLang : textDefaultLang]}</span>
</section>
<section className="item-info-background" style={{
color: item.color
}} />
</section>
</Link>
)
}
const content = useMemo(() => renderContent(), [currentTab, config, language])
return acc
}, {})
setContent(Object.values(value).sort((a, b) => new Date(b[0].date) - new Date(a[0].date)))
}, [config])
const isShown = (type) => currentTab === 'all' || currentTab === type
return (
<section className="home">
{content}
{
content.map((v) => {
const length = v.filter((v) => isShown(v.type)).length
return (
<section className="item-group-wrapper" key={v[0].date} hidden={length === 0}>
<section className="item-group">
{v.map(item => {
return (<Link reloadDocument to={`/${item.link}`} className="item" key={item.link} hidden={!isShown(item.type)}>
<section className="item-background-filler" />
<section className="item-outline" />
<section className="item-img">
<img src={`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`} alt={item.codename[language]} />
</section>
<section className="item-info">
<section className="item-title-container">
<section className="item-title">{item.codename[language]}</section>
<section className="item-type">
<CharIcon
type={item.type}
viewBox={
item.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
} />
</section>
</section>
<section className="item-text-wrapper">
<span className='item-text'>{item.codename[language.startsWith("en") ? alternateLang : textDefaultLang]}</span>
</section>
<section className="item-info-background" style={{
color: item.color
}} />
</section>
</Link>)
})}
<section className='item-group-date'>{v[0].date}</section>
</section>
<MainBorder />
</section>
)
})
}
</section>
)
}

15
directory/src/routes/root.css
View File

@@ -140,6 +140,7 @@
font-size: 3rem;
font-weight: 700;
text-transform: uppercase;
line-height: 1.1em;
}
.main .main-header .main-tab {
@@ -150,7 +151,7 @@
.main .main-header .main-tab .main-tab-item {
font-size: 1em;
line-height: 3rem;
line-height: 3em;
font-weight: 700;
padding: 0 1rem;
text-transform: uppercase;
@@ -164,15 +165,21 @@
border-bottom-color: var(--link-highlight-color);
}
.main .main-header .return-button {
.main .return-button {
position: absolute;
right: -4rem;
bottom: -1.5rem;
bottom: -24px;
color: #666;
transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
}
.main .main-header .return-button:hover {
@media (max-width: 768px) {
.main .main-header .return-button {
right: -3.4rem;
}
}
.main .return-button:hover {
color: var(--text-color);
}

7
directory/src/routes/root.jsx
View File

@@ -141,14 +141,15 @@ export default function Root(props) {
<section className='main-tab'>
{headerTabs}
</section>
<ReturnButton
</section>
<MainBorder>
<ReturnButton
className='return-button'
onClick={() => {
navigate("/")
}}
/>
</section>
<MainBorder />
</MainBorder>
<Outlet />
</main>
<footer className='footer'>