Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ボイボ寮のキャラ個別ページの下にあるキャラ一覧リンクボタンをファーストビューに表示にする #180

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

ボイボ寮のキャラ個別ページの下にあるキャラ一覧リンクボタンをファーストビューに表示にする #180

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
591e954
ボイボ寮のキャラ個別ページの下にあるキャラ一覧リンクボタンをファーストビューに表示にする
weweweok Dec 8, 2023
b679117
css修正
weweweok Dec 11, 2023
35f38f0
細かい修正
weweweok Dec 11, 2023
bd9a1f7
キャラ一覧リンクボタンの表示位置をモバイルとpcで分けた
weweweok Dec 23, 2023
2935a24
remove useEffect
weweweok Dec 23, 2023
bb7110f
タイポ修正
weweweok Dec 23, 2023
e145d61
画面サイズでボタンの位置を調整できるようにした。
weweweok Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 43 additions & 5 deletions src/pages/dormitory/{Character.characterId}.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { faHome } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { Link, navigate, PageProps } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"
import React, { useMemo, useState } from "react"
import React, { useMemo, useState, useEffect } from "react"
import { Page } from "../../components/page"
import PlayButton from "../../components/playButton"
import Seo from "../../components/seo"
Expand Down Expand Up @@ -124,6 +124,32 @@ export default ({
}
}

function useMediaQuery(query: string) {
const [matches, setMatches] = useState(window.matchMedia(query).matches)

useEffect(() => {
const media = window.matchMedia(query)
const listener = () => setMatches(media.matches)
media.addEventListener("change", listener)
return () => media.removeEventListener("change", listener)
}, [query])

return matches
}

// 1180px以下の場合はボタンをキャラクター紹介欄の下に表示する
// (ウインドウ幅の変動によって、ボタンが隠れ始めるタイミングが1180pxだった)
const isMobile = useMediaQuery("(max-width: 1180px)")
const responsiveButtonGroupStyle = isMobile
? {}
: {
display: "inline-flex",
flexDirection: "column" as const,
position: "absolute" as const,
left: "100%",
bottom: "25%",
}

return (
<Page>
<Seo
Expand All @@ -135,7 +161,12 @@ export default ({
<div className="dormitory-character">
<main className="section py-1">
<div className="container is-max-desktop">
<div className="box" style={{ borderColor: characterInfo.color }}>
<div
className="box"
style={{
borderColor: characterInfo.color,
}}
>
<div className="columns m-0" style={{ height: "100%" }}>
<div
className="column is-4 portrait-column"
Expand Down Expand Up @@ -299,11 +330,16 @@ export default ({
</div>
</div>
</div>
<div className="link-buttons has-text-weight-bold">
<div
className="link-buttons has-text-weight-bold"
style={responsiveButtonGroupStyle}
>
<Link
to={getProductPageUrl(characterInfo)}
className="button is-normal is-rounded character-list-button"
style={{ borderColor: characterInfo.color }}
style={{
borderColor: characterInfo.color,
}}
>
ダウンロードページ
</Link>
Expand All @@ -316,7 +352,9 @@ export default ({
: `/dormitory/`
}
className="button is-normal is-rounded character-list-button"
style={{ borderColor: characterInfo.color }}
style={{
borderColor: characterInfo.color,
}}
>
キャラクター一覧
</Link>
Expand Down