Skip to content

Commit

Permalink
キャラクター呼称表ページ周りのデザイン等の調整 (#166)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hiroshiba
Hiroshiba authored Sep 24, 2023
1 parent 121869d commit 3f585e4
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 75 deletions.
45 changes: 24 additions & 21 deletions src/components/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -849,28 +849,28 @@ $call-names-cell-width-column: 190px;

.call-names-wrapper {
// sticky にするために明示的に高さを指定
// → ほかに overflow の指定などでも sticky にできるが, 親レイアウトの
// → ほかに overflow の指定などでも sticky にできるが、親レイアウトの
// Page コンポーネントのフッターやスタイルを変更すると他ページに影響が
// 出る可能性があるので, 画面が埋まるように高さを指定した.
height: calc(100vh - 52px /* navbar の高さ */);
// 出る可能性があるので、画面が埋まるように高さを指定した。
// FIXME: 二重スクロールをなくす
height: calc(100vh - $navbar-height);
overflow: auto;

section {
z-index: -1; // スクロール時にタイトルと説明が隠れるように
.top-explain {
position: sticky;
top: 0;
left: 0;
height: max-content;
padding: 20px;
left: 0; // 横スクロール時についてこないように
}

// キャラの呼称表
.call-names {
width: auto;
img {
width: 3rem;
aspect-ratio: 1 / 1;
}

table {
width: 100%;
padding: 0;
@extend .p-0;
margin: 0 auto;
border-collapse: separate;
table-layout: fixed;
Expand All @@ -887,7 +887,7 @@ $call-names-cell-width-column: 190px;
td {
height: $call-names-cell-height;
width: $call-names-cell-width;
padding: 5px;
@extend .p-1;

// FIXME:
// `table td:not([align]), table th:not([align])`セレクター によって
Expand Down Expand Up @@ -924,17 +924,19 @@ $call-names-cell-width-column: 190px;
&:hover {
// NOTE: ちらつくので border ではなく outline
outline: 2px solid;
border-radius: 5px;
border-radius: $radius;
}
}
}
}

thead > tr {
// 一番上の行
th {
background: white;
border-bottom: $call-names-border;

// 左上のセル
&.origin {
width: $call-names-cell-width-column;
z-index: 1;
Expand All @@ -944,7 +946,7 @@ $call-names-cell-width-column: 190px;
a {
display: flex;
flex-direction: column;
gap: 5px;
gap: 0.25rem; // = padding size
text-align: center;
justify-content: center;
align-items: center;
Expand All @@ -958,21 +960,22 @@ $call-names-cell-width-column: 190px;

@include mobile {
&.origin {
width: 100px;
width: 6rem;
}
}
}
}

tbody > tr {
// 左端のキャラクター
th {
border-right: $call-names-border;
width: $call-names-cell-width-column;
padding: 0 10px;
@extend .px-2;

a {
display: flex;
gap: 10px;
gap: 0.75rem;
text-align: center;
justify-content: flex-start;
align-items: center;
Expand All @@ -992,7 +995,7 @@ $call-names-cell-width-column: 190px;
}

@include mobile {
width: 100px;
width: 6rem;
a {
justify-content: center;
p {
Expand Down Expand Up @@ -1028,7 +1031,7 @@ $call-names-cell-width-column: 190px;
}

.origin {
padding: 0;
@extend .p-0;

p {
font-weight: normal;
Expand All @@ -1037,13 +1040,13 @@ $call-names-cell-width-column: 190px;
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
@extend .p-2;
}
&:nth-child(2) {
position: absolute;
top: 0;
right: 0;
padding: 10px;
@extend .p-2;
}
}

Expand Down
100 changes: 64 additions & 36 deletions src/pages/dormitory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const Dormitory: React.FC<DormitoryProps> = ({ setShowingHeader }) => {
</div>
</section>

<main className="section py-0">
<main className="section pt-0 pb-5">
<div className="container character-container is-max-desktop pt-1 pb-6">
<div className="columns is-multiline">
<div
Expand Down Expand Up @@ -252,46 +252,24 @@ const Dormitory: React.FC<DormitoryProps> = ({ setShowingHeader }) => {
</div>
</div>
</div>
</div>
</main>

<section className="section py-5">
<div className="container has-text-centered py-5 is-flex is-flex-direction-column">
<h2 className="title is-4">ボイボ寮とは</h2>
<p className="is-size-6">
VOICEVOX
のキャラたちの設定があると動画制作の参考になるかと思って用意した世界観です。
</p>
<p className="is-size-6">
必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。
</p>
<div style={{ padding: "20px" }}>
<Link to="/dormitory/call-names">
<button className="button is-normal is-rounded" type="button">
<span>キャラクターの呼称表</span>
</button>
<hr />

<div className="has-text-centered pt-2 pb-0">
<h2 className="title is-4">関連コンテンツ</h2>
<Link
to="/dormitory/call-names/"
className="button is-normal is-rounded"
type="button"
role={"button"}
>
<span>キャラクターの呼称表</span>
</Link>
</div>
</div>
</main>

<div className="container has-text-centered py-5 is-flex is-flex-direction-column">
<h2 className="title is-4">VOICEVOX とは</h2>
<p className="is-size-6">
無料で使える中品質なテキスト読み上げソフトウェアです。
</p>
<p className="is-size-6">
商用・非商用問わず無料で、イントネーションの詳細な調整ができることが特徴です。
</p>
<Link
to={"/"}
className="button is-align-self-center mt-5 is-primary is-rounded"
type="button"
role={"button"}
>
<span className="has-text-weight-semibold">ダウンロード</span>
</Link>
</div>
</section>
<DormitoryExplainComponent />

<section className="section py-5">
<DormitoryEventContainer id="events" />
Expand All @@ -305,6 +283,56 @@ const Dormitory: React.FC<DormitoryProps> = ({ setShowingHeader }) => {
)
}

/**
* ボイボ寮とVOICEVOXをちょっとだけ紹介するコンポーネント
*/
export const DormitoryExplainComponent: React.FC<{
showingDormitoryPageButton?: boolean
}> = ({ showingDormitoryPageButton = false }) => {
return (
<section className="section py-5">
<div className="container has-text-centered py-5 is-flex is-flex-direction-column">
<h2 className="title is-4">ボイボ寮とは</h2>
<p className="is-size-6">
VOICEVOX
のキャラたちの設定があると動画制作の参考になるかと思って用意した世界観です。
</p>
<p className="is-size-6">
必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。
</p>
{showingDormitoryPageButton && (
<Link
to="/dormitory/"
className="button is-align-self-center mt-5 is-normal is-rounded"
type="button"
role={"button"}
>
<span>ボイボ寮ページへ</span>
</Link>
)}
</div>

<div className="container has-text-centered py-5 is-flex is-flex-direction-column">
<h2 className="title is-4">VOICEVOX とは</h2>
<p className="is-size-6">
無料で使える中品質なテキスト読み上げソフトウェアです。
</p>
<p className="is-size-6">
商用・非商用問わず無料で、イントネーションの詳細な調整ができることが特徴です。
</p>
<Link
to={"/"}
className="button is-align-self-center mt-5 is-primary is-rounded"
type="button"
role={"button"}
>
<span className="has-text-weight-semibold">ダウンロード</span>
</Link>
</div>
</section>
)
}

export default () => {
const [showingHeader, setShowingHeader] = useState(false)
return (
Expand Down
45 changes: 27 additions & 18 deletions src/pages/dormitory/call-names/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { Link } from "gatsby"
import { getSrc, getSrcSet } from "gatsby-plugin-image"
import React, { CSSProperties, ReactElement, useContext } from "react"
import { Page } from "../../../components/page"
import React, { ReactElement, useContext, CSSProperties, useRef } from "react"
import { useDetailedCharacterInfo } from "../../../hooks/useDetailedCharacterInfo"
import Seo from "../../../components/seo"
import { CharacterContext } from "../../../contexts/context"
import { useDetailedCharacterInfo } from "../../../hooks/useDetailedCharacterInfo"
import { CharacterKey } from "../../../types/dormitoryCharacter"
import { getSrc, getSrcSet } from "gatsby-plugin-image"
import { Link } from "gatsby"
import Seo from "../../../components/seo"

import { DormitoryExplainComponent } from "../../dormitory"

function hex2rgba(hex: string, alpha = 1): [number, number, number, number] {
const match = hex.match(/\w\w/g)
Expand Down Expand Up @@ -37,10 +39,6 @@ export default function CallNamesPage() {
src={getSrc(characterInfo.bustupImage)}
srcSet={getSrcSet(characterInfo.bustupImage)}
alt={characterInfo.name}
style={{
width: "50px",
aspectRatio: "1 / 1",
}}
/>
)
}
Expand Down Expand Up @@ -104,20 +102,28 @@ export default function CallNamesPage() {
return (
<Page showingHeaderOnTop={true}>
<Seo
title={`キャラクターの呼称表 | ボイボ寮 | VOICEVOX`}
title={`ボイボ寮キャラクターの呼称表 | ボイボ寮 | VOICEVOX`}
description={
"ボイボ寮のキャラクターの呼び方一覧表です。必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。"
"ボイボ寮キャラクターの呼び方一覧表です。必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。"
}
/>

<div className="call-names-wrapper">
<section>
<h1 className="title">キャラクターの呼称表</h1>
<p>
ボイボ寮のキャラクターの呼び方一覧表です。必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。
</p>
<section className="section top-explain">
<div className="container has-text-centered">
<h1 className="title">ボイボ寮キャラクターの呼称表</h1>
<p>
<Link
to="/dormitory/"
className="has-text-weight-bold is-underlined"
>
ボイボ寮
</Link>
キャラクターの呼び方一覧表です。必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。
</p>
</div>
</section>
<div className="call-names">
<main className="call-names">
<table border={1}>
<thead>
<tr>
Expand Down Expand Up @@ -162,6 +168,7 @@ export default function CallNamesPage() {
const backgroundColor = `rgb(${red}, ${green}, ${blue})`

return (
// FIXME: #id でキャラクターに直接アクセスするとスクロールがずれるのを直す
<tr
key={characterKey}
id={characterInfo.id}
Expand Down Expand Up @@ -189,8 +196,10 @@ export default function CallNamesPage() {
})}
</tbody>
</table>
</div>
</main>
</div>

<DormitoryExplainComponent showingDormitoryPageButton />
</Page>
)
}

0 comments on commit 3f585e4

Please sign in to comment.