fix(frontend): long page size on admin view and z-index issue on voting page
This commit is contained in:
@@ -33,7 +33,7 @@
|
|||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-dropdown {
|
.search-select .select-dropdown.panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(100% + 0.5rem);
|
top: calc(100% + 0.5rem);
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -44,6 +44,10 @@
|
|||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
background: rgba(8, 14, 20, 0.88) !important;
|
||||||
|
backdrop-filter: blur(24px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(24px) !important;
|
||||||
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-box {
|
.search-box {
|
||||||
|
|||||||
@@ -100,12 +100,6 @@ a {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-title {
|
.category-title {
|
||||||
|
|||||||
@@ -183,6 +183,26 @@
|
|||||||
color: var(--teal);
|
color: var(--teal);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.admin-table-container {
|
||||||
|
height: 350px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom Scrollbar for the table */
|
||||||
|
.admin-table-container::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
.admin-table-container::-webkit-scrollbar-track {
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.admin-table-container::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.admin-table-container::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
.admin-table {
|
.admin-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
@@ -196,9 +216,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.admin-table th {
|
.admin-table th {
|
||||||
background: rgba(255, 255, 255, 0.02);
|
background: rgba(20, 26, 33, 0.95);
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-table tr:hover td {
|
.admin-table tr:hover td {
|
||||||
|
|||||||
@@ -294,6 +294,7 @@ export default function AdminPage() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="admin-table-container">
|
||||||
<table className="admin-table">
|
<table className="admin-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -362,6 +363,7 @@ export default function AdminPage() {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -123,7 +123,7 @@ export default function VotingPage() {
|
|||||||
<p className="page-subtitle">Wähle deinen Favoriten in jeder Kategorie.</p>
|
<p className="page-subtitle">Wähle deinen Favoriten in jeder Kategorie.</p>
|
||||||
|
|
||||||
<div className="categories-grid">
|
<div className="categories-grid">
|
||||||
{categories.map(cat => {
|
{categories.map((cat, index) => {
|
||||||
const catOptions = options
|
const catOptions = options
|
||||||
.filter(o => o.Category === cat)
|
.filter(o => o.Category === cat)
|
||||||
.map(o => ({ value: o.ID, label: o.Name }));
|
.map(o => ({ value: o.ID, label: o.Name }));
|
||||||
@@ -131,7 +131,7 @@ export default function VotingPage() {
|
|||||||
const isSubmitted = submitted[cat];
|
const isSubmitted = submitted[cat];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={cat} className="category-card panel">
|
<div key={cat} className="category-card panel" style={{ position: 'relative', zIndex: categories.length - index }}>
|
||||||
<h3 className="category-title">{cat}</h3>
|
<h3 className="category-title">{cat}</h3>
|
||||||
|
|
||||||
<div className="category-content">
|
<div className="category-content">
|
||||||
|
|||||||
Reference in New Issue
Block a user