commit e4265124870a6d55b66c2ff7164dfc872defcfae
parent 73d619d8473eaf1e585cfc36bf90239df5b0b014
Author: Sunny <122193933+Sunny-JP@users.noreply.github.com>
Date: Sun, 7 Jun 2026 11:57:25 +0900
Merge pull request #64 from Sunny-JP/v5
feat: update padding in dashboard container, adjust input field layou…
Diffstat:
3 files changed, 83 insertions(+), 60 deletions(-)
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -135,7 +135,7 @@ input[type="range"]::-moz-range-thumb {
/* Layout Containers */
.dashboard-container {
- padding: 4cqw 5cqw 2cqw 5cqw;
+ padding: 5cqw 5cqw 2cqw 5cqw;
}
.cal-container {
padding: 2cqw 3cqw 2cqw 3cqw;
@@ -572,38 +572,61 @@ input[type="range"]::-moz-range-thumb {
border-bottom: 1px solid rgba(var(--muted), 0.2);
padding-bottom: 2cqw;
}
+.date-input-display::-webkit-calendar-picker-indicator,
+.date-input-display::-webkit-inner-spin-button,
+.date-input-display::-webkit-clear-button {
+ display: none;
+ -webkit-appearance: none;
+}
.input-group-container {
display: flex;
- align-items: baseline;
- gap: 4cqw;
- flex: 1;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 12px;
+ width: 100%;
}
-.input-field-wrapper {
- display: flex;
- flex-direction: column;
+.input-field-wrapper.rank-field {
+ flex: 0 0 auto;
+}
+.input-field-wrapper.date-field {
+ flex: 1 1 0%;
+ min-width: 0;
}
.input-content {
display: flex;
- width: 15.5cqw;
+ align-items: center;
+ width: 100%;
}
-.rank-prefix {
- font-size: 3.5cqw;
- font-weight: 900;
+.date-input-display {
+ width: 100%;
+ min-width: 0;
+ font-size: 6cqw;
+ font-weight: 700;
line-height: 1;
- margin-top: 2.2cqw;
+ letter-spacing: 0.03em;
+ background: transparent;
+ border: none;
+ outline: none;
+ padding: 0;
+ cursor: pointer;
+ -webkit-appearance: none;
+ appearance: none;
+}
+.input-field-wrapper {
+ display: flex;
+ flex-direction: column;
}
.rank-value {
display: inline-block;
- width: 9cqw;
+ width: 10cqw;
margin-left: 0.5cqw;
font-size: 6cqw;
font-weight: 900;
line-height: 1;
}
-.spin-buttons-box {
+.spin-buttons {
display: inline-block;
vertical-align: baseline;
- margin-left: 1.5cqw;
}
.spin-btn {
display: flex;
@@ -624,28 +647,17 @@ input[type="range"]::-moz-range-thumb {
.spin-btn.down {
border-radius: 0 0 0.8cqw 0.8cqw;
}
-.date-input-display {
- width: 42cqw;
- margin-top: -0.5cqw;
- font-size: 6cqw;
- font-weight: 700;
- line-height: 1;
- letter-spacing: 0.03em;
- background: transparent;
- border: none;
- outline: none;
- padding: 0;
- color-scheme: var(--system-color-scheme);
-}
.btn-bond-record {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
+ margin-left: 0;
width: 18cqw;
height: 9cqw;
flex-shrink: 0;
font-weight: 700;
+ line-height: 1.3;
background-color: var(--primary);
color: var(--primary-foreground);
border: none;
@@ -668,11 +680,10 @@ input[type="range"]::-moz-range-thumb {
font-weight: 900;
letter-spacing: 0.15em;
transform: skewX(10deg);
- margin-bottom: -0.5cqw;
+ margin-top: 0.4cqw;
}
.btn-bond-record div {
- font-size: 3cqw;
- line-height: 1;
+ font-size: 2.5cqw;
transform: skewX(10deg);
}
.btn-bond-record-dialog {
@@ -806,7 +817,7 @@ input[type="range"]::-moz-range-thumb {
========================================== */
.history-grid-container {
display: grid;
- grid-template-rows: repeat(5, minmax(0, 1fr));
+ grid-template-rows: repeat(3, minmax(0, 1fr));
grid-auto-flow: column;
gap: 0.125rem 1.5rem;
margin-bottom: 2cqw;
@@ -911,6 +922,7 @@ input[type="range"]::-moz-range-thumb {
flex: 1.8;
display: flex;
flex-direction: column;
+ height: calc(100svh - 220px);
border-left: 1px solid rgba(var(--muted), 0.15);
}
.char-selector {
@@ -944,7 +956,6 @@ input[type="range"]::-moz-range-thumb {
}
.input-content {
display: flex;
- width: 6cqw;
}
.rank-prefix {
font-size: 1.3cqw;
@@ -952,17 +963,15 @@ input[type="range"]::-moz-range-thumb {
}
.rank-value {
display: inline-block;
- width: 5cqw;
- margin-left: 0.5cqw;
+ width: 4.5cqw;
font-size: 2.5cqw;
font-weight: 900;
line-height: 1;
}
- .spin-buttons-box {
+ .spin-buttons {
display: inline-block;
vertical-align: baseline;
margin-left: 0.5cqw;
- margin-top: 0.2cqw;
scale: 1.3;
}
.spin-btn {
@@ -970,16 +979,16 @@ input[type="range"]::-moz-range-thumb {
height: 1cqw;
font-size: 0.8cqw;
}
+ .input-group-container {
+ gap: 20px;
+ }
.date-input-display {
font-size: 2.5cqw;
- width: 17.5cqw;
- margin-top: -0.25cqw;
}
.btn-bond-record {
- width: 7cqw;
- height: 4cqw;
+ width: 9cqw;
+ height: 4.5cqw;
border-radius: 0.75rem;
- margin-left: 11cqw;
}
.btn-bond-record span {
font-size: 1cqw;
@@ -1014,6 +1023,7 @@ input[type="range"]::-moz-range-thumb {
font-size: 0.7cqw;
}
.history-grid-container {
+ grid-template-rows: repeat(3, minmax(0, 1fr));
gap: 0.1cqw 2cqw;
}
.history-item {
diff --git a/src/components/BondDashboard.tsx b/src/components/BondDashboard.tsx
@@ -95,6 +95,20 @@ export default function BondDashboard({
const dropdownRef = useRef<HTMLDivElement>(null);
+ useEffect(() => {
+ if (isSelectOpen && dropdownRef.current) {
+ setTimeout(() => {
+ const activeItem = dropdownRef.current?.querySelector('.char-dropdown-item.active');
+ if (activeItem) {
+ activeItem.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ });
+ }
+ }, 20);
+ }
+ }, [isSelectOpen]);
+
const selectedChar = useMemo(() =>
CHARACTER_LIST.find(c => c.id === selectedCharId) || CHARACTER_LIST[0],
[selectedCharId]);
@@ -123,7 +137,7 @@ export default function BondDashboard({
const displayHistoryRows = useMemo(() => {
const rows = [];
- for (let i = 0; i < 10; i++) {
+ for (let i = 0; i < 6; i++) {
rows.push(filteredHistory[i] || null);
}
return rows;
@@ -453,20 +467,21 @@ export default function BondDashboard({
<div className="record-input-area">
<div className="input-group-container">
- <div className="input-field-wrapper">
+ {/* Rank フィールド */}
+ <div className="input-field-wrapper rank-field">
<label className="input-label">Rank</label>
<div className="input-content">
<span className="rank-value">{inputLevel}</span>
- <div className="spin-buttons-box">
+ <div className="spin-buttons">
<button
- onClick={() => setInputLevel(prev => Math.min(100, prev + 1))}
- className="spin-btn up"
+ onClick={() => setInputLevel(prev => Math.min(100, prev + 1))}
+ className="spin-btn"
>
▲
</button>
<button
- onClick={() => setInputLevel(prev => Math.max(1, prev - 1))}
- className="spin-btn down"
+ onClick={() => setInputLevel(prev => Math.max(1, prev - 1))}
+ className="spin-btn"
>
▼
</button>
@@ -474,7 +489,8 @@ export default function BondDashboard({
</div>
</div>
- <div className="input-field-wrapper">
+ {/* Date フィールド */}
+ <div className="input-field-wrapper date-field">
<label className="input-label">Date</label>
<div className="input-content">
<input
@@ -485,16 +501,13 @@ export default function BondDashboard({
/>
</div>
</div>
- </div>
- <button
- onClick={handleSave}
- disabled={isSyncing}
- className="btn-bond-record"
- >
- <span>Record</span>
- <div>+</div>
- </button>
+ {/* Record ボタンを同じコンテナ内に並列で配置 */}
+ <button onClick={handleSave} disabled={isSyncing} className="btn-bond-record">
+ <span>Record</span>
+ <div>＋</div>
+ </button>
+ </div>
</div>
<div className="section-wrapper">
diff --git a/src/components/pages.tsx b/src/components/pages.tsx
@@ -104,7 +104,7 @@ export const OVERLAY_CONTENTS: Record<string, { title: string; body: React.React
<h3 className="font-bold text-foreground">
Q: 記録を間違えてタップしてしまいました。削除できますか？</h3>
<p className="font-normal text-sm">
- A: カフェタッチのTap履歴は個別に編集・削除することはできません。絆ランク記録は直近10件のデータまで削除可能です。</p>
+ A: カフェタッチのTap履歴は個別に編集・削除することはできません。絆ランク記録は直近6件のデータまで削除可能です。</p>
</div>
<div className="flex flex-col gap-1">
