Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

telefonos nezet

Browse Source
This commit is contained in:
mategery
2025-11-18 15:37:29 +01:00
parent 22ea5c43f2
commit 4bcb93d357
14 changed files with 388 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/pages/Decks/Card_display.jsx
+30 -26
View File
@@ -183,19 +183,20 @@ const Card_display = () => {
<div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col">
<Navbar />
<main className="flex-1 w-full max-w-[1200px] mx-auto px-4 py-10">
<main className="flex-1 w-full max-w-[1200px] mx-auto px-4 sm:px-6 py-6 sm:py-10">
{/* Header with back button */}
<div className="flex items-center gap-4 mb-6">
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 mb-6">
<button
onClick={() => goDecks()}
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)] transition-all duration-200 shadow"
className="flex items-center gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)] transition-all duration-200 shadow text-sm"
>
<FaArrowLeft />
Vissza a paklikhoz
<span className="hidden sm:inline">Vissza a paklikhoz</span>
<span className="sm:hidden">Vissza</span>
</button>
{deck && (
<div className="flex items-center gap-3">
<h1 className="text-2xl font-bold text-[color:var(--color-text)]">{deck.name}</h1>
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
<h1 className="text-xl sm:text-2xl font-bold text-[color:var(--color-text)]">{deck.name}</h1>
{currentDeckType && (
<span
className="inline-block px-3 py-1 rounded-full text-sm font-bold"
@@ -226,16 +227,17 @@ const Card_display = () => {
{/* Filters and controls */}
{!loading && !error && (
<>
<div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-6 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">
<div className="flex flex-col gap-3 mb-6 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 flex-col sm:flex-row gap-3 items-stretch sm:items-center w-full">
<SearchBox
value={search}
onChange={(e) => setSearch(e.target.value)}
width={300}
placeholder="Keresés kérdésben vagy válaszokban..."
className="mr-4"
placeholder="Keresés..."
className="w-full sm:w-auto"
/>
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2 flex items-center gap-1">
<div className="flex items-center gap-2 flex-wrap">
<span className="text-[color:var(--color-text)] font-semibold text-sm sm:text-base flex items-center gap-1">
Rendezés:
<button
type="button"
@@ -248,7 +250,7 @@ const Card_display = () => {
</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-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 flex-1 sm:flex-none"
style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
@@ -285,6 +287,7 @@ const Card_display = () => {
Válaszok száma ↓
</option>
</select>
</div>
</div>
</div>
@@ -318,15 +321,15 @@ const Card_display = () => {
)}
{/* Items per page selector and pagination info */}
<div className="flex flex-col md:flex-row gap-4 justify-between items-center mb-6 bg-[color:var(--color-surface)]/60 backdrop-blur-lg rounded-xl px-6 py-3 shadow">
<div className="flex items-center gap-3">
<span className="text-[color:var(--color-text-muted)] text-sm font-medium">
Elemek oldalanként:
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-between items-center mb-6 bg-[color:var(--color-surface)]/60 backdrop-blur-lg rounded-xl px-4 sm:px-6 py-3 shadow">
<div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto justify-between sm:justify-start">
<span className="text-[color:var(--color-text-muted)] text-xs sm:text-sm font-medium">
Oldalanként:
</span>
<select
value={itemsPerPage}
onChange={(e) => setItemsPerPage(Number(e.target.value))}
className="px-3 py-1.5 rounded-lg bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] focus:ring-2 focus:ring-[color:var(--color-success)] outline-none transition-all duration-200"
className="px-2 sm:px-3 py-1.5 rounded-lg bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] focus:ring-2 focus:ring-[color:var(--color-success)] outline-none transition-all duration-200 text-sm"
>
<option value={10}>10</option>
<option value={20}>20</option>
@@ -335,10 +338,11 @@ const Card_display = () => {
</select>
</div>
<div className="text-[color:var(--color-text-muted)] text-sm">
<div className="text-[color:var(--color-text-muted)] text-xs sm:text-sm text-center sm:text-left">
{totalCards > 0 ? (
<>
{startIndex + 1}-{Math.min(endIndex, totalCards)} / {totalCards} kártya
<span className="hidden sm:inline">{startIndex + 1}-{Math.min(endIndex, totalCards)} / {totalCards} kártya</span>
<span className="sm:hidden">{startIndex + 1}-{Math.min(endIndex, totalCards)} / {totalCards}</span>
</>
) : (
<>0 kártya</>
@@ -347,7 +351,7 @@ const Card_display = () => {
</div>
{/* Cards Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 pb-20">
{totalCards === 0 && (
<div className="col-span-full text-center text-[color:var(--color-text-muted)] py-10">
Nincsenek kártyák ebben a pakliban.
@@ -739,21 +743,21 @@ const Card_display = () => {
{/* Pagination Controls */}
{totalPages > 1 && (
<div className="flex justify-center items-center gap-2 mt-8">
<div className="flex flex-wrap justify-center items-center gap-2 mt-8">
<button
onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
disabled={currentPage === 1}
className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2 ${
className={`px-3 sm:px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-1 sm:gap-2 text-sm ${
currentPage === 1
? 'bg-[color:var(--color-surface)] text-[color:var(--color-text-muted)] cursor-not-allowed'
: 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] hover:bg-[color:var(--color-success)]/80 hover:scale-105'
}`}
>
<FaChevronLeft />
Előző
<span className="hidden sm:inline">Előző</span>
</button>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 sm:gap-2">
{[...Array(totalPages)].map((_, index) => {
const pageNum = index + 1
if (
@@ -765,7 +769,7 @@ const Card_display = () => {
<button
key={pageNum}
onClick={() => setCurrentPage(pageNum)}
className={`w-10 h-10 rounded-lg font-medium transition-all duration-200 ${
className={`w-8 h-8 sm:w-10 sm:h-10 rounded-lg font-medium transition-all duration-200 text-sm ${
currentPage === pageNum
? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] scale-110 shadow-lg'
: 'bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
@@ -797,7 +801,7 @@ const Card_display = () => {
: 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] hover:bg-[color:var(--color-success)]/80 hover:scale-105'
}`}
>
Következő
<span className="hidden sm:inline">Következő</span>
<FaChevronRight />
</button>
</div>