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);
|
||||
}
|
||||
|
||||
.select-dropdown {
|
||||
.search-select .select-dropdown.panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
left: 0;
|
||||
@@ -44,6 +44,10 @@
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
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 {
|
||||
|
||||
@@ -100,12 +100,6 @@ a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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 {
|
||||
|
||||
@@ -183,6 +183,26 @@
|
||||
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 {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
@@ -196,9 +216,13 @@
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
background: rgba(20, 26, 33, 0.95);
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.admin-table tr:hover td {
|
||||
|
||||
@@ -294,6 +294,7 @@ export default function AdminPage() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-table-container">
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -362,6 +363,7 @@ export default function AdminPage() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
@@ -123,7 +123,7 @@ export default function VotingPage() {
|
||||
<p className="page-subtitle">Wähle deinen Favoriten in jeder Kategorie.</p>
|
||||
|
||||
<div className="categories-grid">
|
||||
{categories.map(cat => {
|
||||
{categories.map((cat, index) => {
|
||||
const catOptions = options
|
||||
.filter(o => o.Category === cat)
|
||||
.map(o => ({ value: o.ID, label: o.Name }));
|
||||
@@ -131,7 +131,7 @@ export default function VotingPage() {
|
||||
const isSubmitted = submitted[cat];
|
||||
|
||||
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>
|
||||
|
||||
<div className="category-content">
|
||||
|
||||
Reference in New Issue
Block a user