fix: ソムリエ画面UIを統一 — カードスタイル・padding・重複ヘッダー削除
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ponshu Developer
parent
ba5660c1cb
commit
f8ceb0bf02
|
|
@ -135,9 +135,7 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
|
|||
_buildMBTIDiagnosisSection(context, userProfile, sakeList),
|
||||
const SizedBox(height: 32),
|
||||
|
||||
// さけのわ おすすめ
|
||||
_buildSectionHeader(context, 'さけのわ おすすめ', LucideIcons.trendingUp),
|
||||
const SizedBox(height: 8),
|
||||
// さけのわ おすすめ（各ウィジェットが独自ヘッダーを持つため親ヘッダーは不要）
|
||||
const SakenowaNewRecommendationSection(displayCount: 5),
|
||||
const SizedBox(height: 16),
|
||||
const SakenowaRankingSection(displayCount: 10),
|
||||
|
|
@ -230,7 +228,7 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
|
|||
left: 20,
|
||||
top: 20,
|
||||
child: Opacity(
|
||||
opacity: 0.3, // Subtle
|
||||
opacity: 0.3,
|
||||
child: const Text(
|
||||
'🍶',
|
||||
style: TextStyle(fontSize: 40),
|
||||
|
|
@ -239,7 +237,7 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
|
|||
),
|
||||
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 12.0), // Optimized for チラ見せ effect
|
||||
padding: const EdgeInsets.all(24.0),
|
||||
child: Column(
|
||||
children: [
|
||||
// 1. Header (Name & Rank) with unified help icon
|
||||
|
|
@ -353,11 +351,32 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
|
|||
// --- MBTI Diagnosis Logic ---
|
||||
Widget _buildMBTIDiagnosisSection(BuildContext context, UserProfile userProfile, List<SakeItem> sakeList) {
|
||||
final appColors = Theme.of(context).extension<AppColors>()!;
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
|
||||
return Card(
|
||||
elevation: 2,
|
||||
color: appColors.surfaceSubtle,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
border: isDark
|
||||
? null
|
||||
: Border.all(color: appColors.divider.withValues(alpha: 0.5), width: 1),
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: isDark
|
||||
? [const Color(0xFF2C2C2E), const Color(0xFF1C1C1E)]
|
||||
: [appColors.surfaceSubtle, appColors.surfaceElevated],
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: isDark
|
||||
? Colors.black.withValues(alpha: 0.5)
|
||||
: Colors.black.withValues(alpha: 0.08),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 10),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
|
|
|
|||
|
|
@ -57,17 +57,17 @@ a {
|
|||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-lg) var(--space-md);
|
||||
padding: var(--space-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xl);
|
||||
gap: var(--space-md);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ===== Hero ===== */
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding-top: var(--space-xl);
|
||||
padding-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -78,9 +78,9 @@ a {
|
|||
}
|
||||
|
||||
.sake-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: var(--kohaku-gold);
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
|
|
@ -97,55 +97,6 @@ a {
|
|||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* ===== Preview ===== */
|
||||
.preview {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.phone-frame {
|
||||
width: 200px;
|
||||
height: 400px;
|
||||
background: var(--sumi-black);
|
||||
border-radius: 32px;
|
||||
padding: 12px;
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(74, 59, 50, 0.25),
|
||||
inset 0 0 0 2px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.screen-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, var(--gray-100) 0%, var(--washi-white) 100%);
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.grid-preview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
aspect-ratio: 1;
|
||||
background: linear-gradient(145deg, var(--kohaku-gold), var(--kohaku-deep));
|
||||
border-radius: 8px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.grid-item:nth-child(2) { opacity: 0.4; }
|
||||
.grid-item:nth-child(3) { opacity: 0.8; }
|
||||
.grid-item:nth-child(4) { opacity: 0.5; }
|
||||
.grid-item:nth-child(5) { opacity: 0.7; }
|
||||
.grid-item:nth-child(6) { opacity: 0.3; }
|
||||
|
||||
/* ===== Download ===== */
|
||||
.download {
|
||||
display: flex;
|
||||
|
|
@ -258,18 +209,6 @@ a {
|
|||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* ===== Footer ===== */
|
||||
footer {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
padding: var(--space-lg) 0;
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-size: 0.75rem;
|
||||
color: var(--gray-400);
|
||||
}
|
||||
|
||||
/* ===== Dark Mode ===== */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
|
|
@ -281,14 +220,6 @@ footer p {
|
|||
--gray-600: #9E9A94;
|
||||
}
|
||||
|
||||
.phone-frame {
|
||||
background: #2A2A2A;
|
||||
}
|
||||
|
||||
.screen-placeholder {
|
||||
background: linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 100%);
|
||||
}
|
||||
|
||||
.version-card {
|
||||
background: #1E1E1E;
|
||||
border-color: #2A2A2A;
|
||||
|
|
@ -312,11 +243,6 @@ footer p {
|
|||
/* ===== Responsive ===== */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
.phone-frame {
|
||||
width: 240px;
|
||||
height: 480px;
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue