Skip to content

Commit bc4ac0f

Browse files
jamesmontemagnojamesmontemagno
committed
Fix CardDeck layout: use proper flexbox instead of broken absolute positioning
1 parent 165b0f7 commit bc4ac0f

4 files changed

Lines changed: 40 additions & 46 deletions

File tree

‎.solutions/finished/SocOps/Components/CardDeck.razor‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,27 @@
1818

1919
<!-- Card Area -->
2020
<div class="flex-1 flex items-center justify-center p-6">
21-
<div class="relative w-full max-w-sm">
21+
<div class="w-full max-w-xs">
2222
<!-- Clickable Card -->
23-
<button @onclick="HandleCardTap" class="w-full aspect-[3/4] perspective-1000" disabled="@IsAllDone">
23+
<button
24+
@onclick="HandleCardTap"
25+
class="w-full bg-card rounded-2xl p-8 min-h-[320px] flex flex-col items-center justify-center text-center @(IsFlipped ? "neon-border-pink" : "neon-border")"
26+
disabled="@IsAllDone">
2427
@if (!IsFlipped)
2528
{
2629
<!-- Card Back - Tap to Reveal -->
27-
<div class="absolute inset-0 bg-card rounded-2xl neon-border flex flex-col items-center justify-center p-6">
28-
<div class="text-6xl mb-4">🎴</div>
29-
<p class="text-cyan font-display uppercase tracking-wider">TAP TO REVEAL</p>
30-
</div>
30+
<div class="text-6xl mb-4">🎴</div>
31+
<p class="text-cyan font-display uppercase tracking-wider text-lg">TAP TO REVEAL</p>
3132
}
3233
else
3334
{
3435
<!-- Card Front - Question -->
35-
<div class="absolute inset-0 bg-card rounded-2xl neon-border-pink flex flex-col items-center justify-center p-6 text-center">
36-
<p class="text-2xl font-semibold text-white mb-8 leading-relaxed">
37-
@CurrentQuestion
38-
</p>
39-
<p class="text-sm text-gray-500 font-display uppercase">
40-
Find someone who...
41-
</p>
42-
</div>
36+
<p class="text-xl font-semibold text-white mb-6 leading-relaxed">
37+
@CurrentQuestion
38+
</p>
39+
<p class="text-sm text-gray-500 font-display uppercase">
40+
Find someone who...
41+
</p>
4342
}
4443
</button>
4544
</div>
@@ -105,7 +104,7 @@
105104
var random = new Random();
106105
Deck = Questions.QuestionsList.OrderBy(_ => random.Next()).ToList();
107106
CurrentIndex = 0;
108-
IsFlipped = false; // Start with card face down
107+
IsFlipped = false;
109108
}
110109

111110
private void ResetDeck()
@@ -119,7 +118,7 @@
119118
{
120119
if (!IsFlipped && !IsAllDone)
121120
{
122-
IsFlipped = true; // Reveal the card
121+
IsFlipped = true;
123122
}
124123
}
125124

@@ -131,12 +130,6 @@
131130
SkipCount++;
132131

133132
CurrentIndex++;
134-
IsFlipped = false; // Show next card face down
133+
IsFlipped = false;
135134
}
136135
}
137-
138-
<style>
139-
.perspective-1000 {
140-
perspective: 1000px;
141-
}
142-
</style>

‎.solutions/finished/SocOps/wwwroot/css/app.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -401,6 +401,10 @@ button:disabled {
401401
min-height: 60px;
402402
}
403403

404+
.min-h-\[320px\] {
405+
min-height: 320px;
406+
}
407+
404408
@keyframes bounce {
405409
0%, 100% {
406410
transform: translateY(-25%);

‎.solutions/step-07-card-deck/SocOps/Components/CardDeck.razor‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,27 @@
1818

1919
<!-- Card Area -->
2020
<div class="flex-1 flex items-center justify-center p-6">
21-
<div class="relative w-full max-w-sm">
21+
<div class="w-full max-w-xs">
2222
<!-- Clickable Card -->
23-
<button @onclick="HandleCardTap" class="w-full aspect-[3/4] perspective-1000" disabled="@IsAllDone">
23+
<button
24+
@onclick="HandleCardTap"
25+
class="w-full bg-card rounded-2xl p-8 min-h-[320px] flex flex-col items-center justify-center text-center @(IsFlipped ? "neon-border-pink" : "neon-border")"
26+
disabled="@IsAllDone">
2427
@if (!IsFlipped)
2528
{
2629
<!-- Card Back - Tap to Reveal -->
27-
<div class="absolute inset-0 bg-card rounded-2xl neon-border flex flex-col items-center justify-center p-6">
28-
<div class="text-6xl mb-4">🎴</div>
29-
<p class="text-cyan font-display uppercase tracking-wider">TAP TO REVEAL</p>
30-
</div>
30+
<div class="text-6xl mb-4">🎴</div>
31+
<p class="text-cyan font-display uppercase tracking-wider text-lg">TAP TO REVEAL</p>
3132
}
3233
else
3334
{
3435
<!-- Card Front - Question -->
35-
<div class="absolute inset-0 bg-card rounded-2xl neon-border-pink flex flex-col items-center justify-center p-6 text-center">
36-
<p class="text-2xl font-semibold text-white mb-8 leading-relaxed">
37-
@CurrentQuestion
38-
</p>
39-
<p class="text-sm text-gray-500 font-display uppercase">
40-
Find someone who...
41-
</p>
42-
</div>
36+
<p class="text-xl font-semibold text-white mb-6 leading-relaxed">
37+
@CurrentQuestion
38+
</p>
39+
<p class="text-sm text-gray-500 font-display uppercase">
40+
Find someone who...
41+
</p>
4342
}
4443
</button>
4544
</div>
@@ -105,7 +104,7 @@
105104
var random = new Random();
106105
Deck = Questions.QuestionsList.OrderBy(_ => random.Next()).ToList();
107106
CurrentIndex = 0;
108-
IsFlipped = false; // Start with card face down
107+
IsFlipped = false;
109108
}
110109

111110
private void ResetDeck()
@@ -119,7 +118,7 @@
119118
{
120119
if (!IsFlipped && !IsAllDone)
121120
{
122-
IsFlipped = true; // Reveal the card
121+
IsFlipped = true;
123122
}
124123
}
125124

@@ -131,12 +130,6 @@
131130
SkipCount++;
132131

133132
CurrentIndex++;
134-
IsFlipped = false; // Show next card face down
133+
IsFlipped = false;
135134
}
136135
}
137-
138-
<style>
139-
.perspective-1000 {
140-
perspective: 1000px;
141-
}
142-
</style>

‎.solutions/step-07-card-deck/SocOps/wwwroot/css/app.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -401,6 +401,10 @@ button:disabled {
401401
min-height: 60px;
402402
}
403403

404+
.min-h-\[320px\] {
405+
min-height: 320px;
406+
}
407+
404408
@keyframes bounce {
405409
0%, 100% {
406410
transform: translateY(-25%);

0 commit comments

Comments
 (0)