Refactor attribute filter bar styling and layout for improved usability
This commit is contained in:
parent
aa80458078
commit
695a078301
@ -146,45 +146,72 @@
|
||||
|
||||
.attrbar {
|
||||
width: 100%;
|
||||
background-color: var(--bg-card, #1f2937);
|
||||
border-bottom: 1px solid var(--border-subtle, #2f3c52);
|
||||
padding: 12px 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
background-color: rgb(45, 59, 80); /* Same as catbar background */
|
||||
padding: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.attrbar__inner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-top: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.attr-filter-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
align-items: flex-end; /* Align inputs and labels beautifully */
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.attr-filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9rem;
|
||||
flex-direction: column; /* Stack label and select */
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary, #cbd5e1);
|
||||
font-family: var(--font-family);
|
||||
flex: 1 1 180px; /* Grid-like flexibility */
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.attr-filter-item label {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.05em;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.attr-filter-item select {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--border-default, #5e6075);
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: var(--radius-md, 5px);
|
||||
background-color: var(--bg-input, #1e2537);
|
||||
background-color: rgba(25, 30, 40, 0.5); /* Semi transparent dark */
|
||||
color: var(--text-primary, #ffffff);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--font-family);
|
||||
transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
|
||||
transition: all var(--transition-fast, 150ms ease);
|
||||
appearance: none; /* modern look */
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.6)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
.attr-filter-item select:hover {
|
||||
background-color: rgba(25, 30, 40, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.attr-filter-item select:focus {
|
||||
@ -198,21 +225,48 @@
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.attr-filter-action {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding-bottom: 2px; /* optical alignment with inputs */
|
||||
}
|
||||
|
||||
.attr-filter-reset {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-danger, #d92d20);
|
||||
font-weight: 600;
|
||||
color: var(--text-invert, #ffffff);
|
||||
text-decoration: none;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-danger, #d92d20);
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: var(--radius-md, 5px);
|
||||
background-color: transparent;
|
||||
background-color: var(--color-danger, #d92d20);
|
||||
transition: all var(--transition-fast, 150ms ease);
|
||||
font-family: var(--font-family);
|
||||
margin-left: 10px;
|
||||
height: 40px; /* match select height */
|
||||
}
|
||||
|
||||
.attr-filter-reset:hover {
|
||||
background-color: var(--color-danger, #d92d20);
|
||||
color: var(--text-invert, #ffffff);
|
||||
background-color: #b91c1c; /* slightly darker danger */
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px var(--color-danger-soft, rgba(217, 45, 32, 0.2));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.attr-filter-item {
|
||||
flex: 1 1 45%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.attr-filter-action {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.attr-filter-reset {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
16
attrbar.php
16
attrbar.php
@ -35,18 +35,6 @@ if ($catId) {
|
||||
$attributes[] = $row;
|
||||
}
|
||||
$stmtAttr->close();
|
||||
} else {
|
||||
// If no category selected, just fall back
|
||||
$resAttr = $conn->query("
|
||||
SELECT a.attributeID, a.name, a.unit, a.dataType
|
||||
FROM attributes a
|
||||
ORDER BY a.name LIMIT 5
|
||||
");
|
||||
if ($resAttr) {
|
||||
while ($row = $resAttr->fetch_assoc()) {
|
||||
$attributes[] = $row;
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
@ -138,12 +126,12 @@ if ($catId) {
|
||||
}
|
||||
}
|
||||
if ($hasActiveFilter): ?>
|
||||
<div class="attr-filter-action">
|
||||
<a href="index.php<?= isset($_GET['category']) ? '?category='.urlencode($_GET['category']) : '' ?>" class="attr-filter-reset">Filter zurücksetzen</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user