telefonos nezet
This commit is contained in:
@@ -144,7 +144,7 @@ const ChooseDeck = () => {
|
||||
<Navbar />
|
||||
</div>
|
||||
|
||||
<main className="flex-grow text-white px-6 pt-24 pb-20">
|
||||
<main className="flex-grow text-white px-4 sm:px-6 pt-20 sm:pt-24 pb-16 sm:pb-20">
|
||||
<motion.section
|
||||
className="max-w-6xl mx-auto"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -153,7 +153,7 @@ const ChooseDeck = () => {
|
||||
>
|
||||
{/* Title */}
|
||||
<motion.h1
|
||||
className="text-5xl font-extrabold text-green-300 mb-6 text-center tracking-wide drop-shadow-lg"
|
||||
className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-green-300 mb-4 sm:mb-6 text-center tracking-wide drop-shadow-lg"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1 }}
|
||||
@@ -162,7 +162,7 @@ const ChooseDeck = () => {
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="text-lg leading-relaxed text-zinc-200 mb-10 text-center max-w-3xl mx-auto"
|
||||
className="text-sm sm:text-base lg:text-lg leading-relaxed text-zinc-200 mb-6 sm:mb-10 text-center max-w-3xl mx-auto"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
@@ -172,8 +172,8 @@ const ChooseDeck = () => {
|
||||
</motion.p>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
|
||||
<div className="flex gap-2 items-center w-full md:w-auto flex-wrap">
|
||||
<div className="flex flex-col gap-3 mb-6 sm:mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-xl sm:rounded-2xl px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
|
||||
<div className="flex gap-2 items-center w-full flex-wrap">
|
||||
<SearchBox
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
@@ -181,10 +181,10 @@ const ChooseDeck = () => {
|
||||
placeholder="Keresés..."
|
||||
className="mr-4"
|
||||
/>
|
||||
<FaFilter style={{ color: "var(--color-success)" }} className="mr-2" />
|
||||
<span className="text-[color:var(--color-text)] font-semibold mr-2">Típus:</span>
|
||||
<FaFilter style={{ color: "var(--color-success)" }} className="mr-1 sm:mr-2 text-sm sm:text-base" />
|
||||
<span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 text-xs sm:text-sm">Típus:</span>
|
||||
<button
|
||||
className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ${
|
||||
className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 text-xs sm:text-sm ${
|
||||
selectedType === "All"
|
||||
? "bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] border border-[color:var(--color-surface)]"
|
||||
: "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
|
||||
@@ -196,7 +196,7 @@ const ChooseDeck = () => {
|
||||
{deckTypes.map((type) => (
|
||||
<button
|
||||
key={type.label}
|
||||
className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 ${
|
||||
className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 text-xs sm:text-sm ${
|
||||
selectedType === type.label
|
||||
? "text-[color:var(--color-text-inverse)] border border-[color:var(--color-surface)]"
|
||||
: "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
|
||||
@@ -207,9 +207,9 @@ const ChooseDeck = () => {
|
||||
{type.label === "Luck" ? "Szerencse" : type.label === "Question" ? "Kérdés" : "Joker"}
|
||||
</button>
|
||||
))}
|
||||
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2">Eredet:</span>
|
||||
<span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 text-xs sm:text-sm">Eredet:</span>
|
||||
<select
|
||||
className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
|
||||
className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm"
|
||||
value={selectedOrigin}
|
||||
onChange={(e) => setSelectedOrigin(e.target.value)}
|
||||
>
|
||||
@@ -223,7 +223,7 @@ const ChooseDeck = () => {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2 flex items-center gap-1">
|
||||
<span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 flex items-center gap-1 text-xs sm:text-sm">
|
||||
Rendezés:
|
||||
<button
|
||||
type="button"
|
||||
@@ -236,7 +236,7 @@ const ChooseDeck = () => {
|
||||
</button>
|
||||
</span>
|
||||
<select
|
||||
className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
|
||||
className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm"
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value)}
|
||||
>
|
||||
@@ -280,14 +280,14 @@ const ChooseDeck = () => {
|
||||
)}
|
||||
|
||||
{/* Selection Info */}
|
||||
<div className="mb-6 text-center">
|
||||
<span className="text-[color:var(--color-text)] text-lg font-semibold">
|
||||
<div className="mb-4 sm:mb-6 text-center">
|
||||
<span className="text-[color:var(--color-text)] text-base sm:text-lg font-semibold">
|
||||
Kiválasztva: {selectedDeckIds.length} pakli
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Decks Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6 lg:gap-8 mt-6 sm:mt-8">
|
||||
{loading && (
|
||||
<div className="col-span-full text-center text-[color:var(--color-text-muted]">Betöltés...</div>
|
||||
)}
|
||||
@@ -305,24 +305,24 @@ const ChooseDeck = () => {
|
||||
return (
|
||||
<div
|
||||
key={deck.id}
|
||||
className={`relative flex flex-col justify-between h-48 bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer ${
|
||||
isSelected ? "ring-4 ring-[color:var(--color-success)]" : ""
|
||||
className={`relative flex flex-col justify-between h-40 sm:h-48 bg-[color:var(--color-card)] rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer ${
|
||||
isSelected ? "ring-2 sm:ring-4 ring-[color:var(--color-success)]" : ""
|
||||
}`}
|
||||
style={{ borderTopColor: borderColor }}
|
||||
onClick={() => toggleDeckSelection(deck.id)}
|
||||
>
|
||||
{/* Selection Indicator */}
|
||||
<div className="absolute top-3 right-3">
|
||||
<div className="absolute top-2 sm:top-3 right-2 sm:right-3">
|
||||
{isSelected ? (
|
||||
<FaCheckCircle className="text-3xl text-[color:var(--color-success)]" />
|
||||
<FaCheckCircle className="text-2xl sm:text-3xl text-[color:var(--color-success)]" />
|
||||
) : (
|
||||
<FaCircle className="text-3xl text-[color:var(--color-text-muted)] opacity-30" />
|
||||
<FaCircle className="text-2xl sm:text-3xl text-[color:var(--color-text-muted)] opacity-30" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span
|
||||
className="inline-block px-3 py-1 rounded-full text-xs font-bold mb-2"
|
||||
className="inline-block px-2 sm:px-3 py-1 rounded-full text-[10px] sm:text-xs font-bold mb-2"
|
||||
style={{
|
||||
background: deckType?.color,
|
||||
color: "var(--color-text-inverse)",
|
||||
@@ -330,11 +330,11 @@ const ChooseDeck = () => {
|
||||
>
|
||||
{deck.type === "Luck" ? "Szerencse" : deck.type === "Question" ? "Kérdés" : "Joker"}
|
||||
</span>
|
||||
<h2 className="text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">
|
||||
<h2 className="text-base sm:text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">
|
||||
{deck.name}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-sm mt-2">
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs sm:text-sm mt-2">
|
||||
Létrehozva: {deck.created}
|
||||
</div>
|
||||
</div>
|
||||
@@ -343,7 +343,7 @@ const ChooseDeck = () => {
|
||||
</div>
|
||||
|
||||
{/* Continue Button */}
|
||||
<div className="flex justify-center mt-12">
|
||||
<div className="flex justify-center mt-8 sm:mt-12">
|
||||
<ButtonGreen
|
||||
text={`Tovább (${selectedDeckIds.length} pakli kiválasztva)`}
|
||||
onClick={handleContinue}
|
||||
|
||||
Reference in New Issue
Block a user