pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 09:31:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve the appearance and layout of the browse dropdown menu

Browse Source 
Refactor static/css/components.css and templates/components/layout/enhanced_header.html to introduce specific styles for the browse dropdown menu, including width, grid layout, and item styling using Tailwind CSS classes.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c537be14-ffc2-48de-88ef-2bdd9e6ae15a
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/c537be14-ffc2-48de-88ef-2bdd9e6ae15a/76uBCoz
This commit is contained in:
pac7
2025-09-22 02:02:27 +00:00
parent 7e9bd41316
commit 932deb876a
4 changed files with 158 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
static/css/components.css
View File

@@ -238,6 +238,54 @@ body {
@apply relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
}
/* Browse Menu Specific Styles */
.browse-dropdown {
@apply absolute left-0 mt-2 bg-background border rounded-lg shadow-lg z-50;
width: 600px !important;
min-width: 600px !important;
}
.browse-dropdown .browse-grid {
@apply grid grid-cols-2;
gap: 2rem !important;
}
.browse-dropdown .browse-item {
@apply flex items-start rounded-lg hover:bg-accent transition-colors group;
padding: 1rem !important;
gap: 0.75rem !important;
min-height: 4rem;
}
.browse-dropdown .browse-icon {
@apply text-muted-foreground group-hover:text-foreground;
width: 1.25rem !important;
height: 1.25rem !important;
flex-shrink: 0 !important;
margin-top: 0.25rem !important;
}
.browse-dropdown .browse-text {
flex: 1 1 0% !important;
min-width: 0 !important;
overflow: hidden;
}
.browse-dropdown .browse-title {
@apply font-semibold text-sm;
margin-bottom: 0.375rem !important;
line-height: 1.25 !important;
white-space: normal !important;
word-wrap: break-word !important;
}
.browse-dropdown .browse-description {
@apply text-xs text-muted-foreground;
line-height: 1.4 !important;
white-space: normal !important;
word-wrap: break-word !important;
}
.dropdown-separator {
@apply -mx-1 my-1 h-px bg-muted;
}