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

Update browse menu styles for Tailwind 4 compatibility

Browse Source 
Replaced Tailwind CSS @apply directives with explicit class definitions in `templates/components/layout/enhanced_header.html` and removed custom CSS rules from `static/css/components.css` to resolve compatibility issues with Tailwind 4.

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/pUkRa4J
This commit is contained in:
pac7
2025-09-22 02:07:43 +00:00
parent 09f20c640d
commit 8c85963817
4 changed files with 129 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.replit
View File

@@ -35,14 +35,14 @@ outputType = "webview"
localPort = 5000
externalPort = 80
[[ports]]
localPort = 41309
externalPort = 3002
[[ports]]
localPort = 41923
externalPort = 3000
[[ports]]
localPort = 43345
externalPort = 3002
[[ports]]
localPort = 45245
externalPort = 3001

92
attached_assets/Pasted-Expected-declaration-but-found-apply-Skipped-to-next-declaration-alerts-css-3-11-Expected-decl-1758506850599_1758506850599.txt Normal file
View File

@@ -0,0 +1,92 @@
Expected declaration but found ‘@apply’. Skipped to next declaration. alerts.css:3:11
Expected declaration but found ‘@apply’. Skipped to next declaration. alerts.css:8:11
Expected declaration but found ‘@apply’. Skipped to next declaration. alerts.css:12:11
Expected declaration but found ‘@apply’. Skipped to next declaration. alerts.css:16:11
Expected declaration but found ‘@apply’. Skipped to next declaration. alerts.css:20:11
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:137:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:141:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:145:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:149:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:153:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:157:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:161:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:165:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:169:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:173:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:178:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:182:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:186:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:190:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:194:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:198:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:203:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:208:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:212:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:216:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:220:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:225:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:229:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:234:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:238:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:244:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:249:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:253:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:257:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:261:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:265:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:269:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:274:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:278:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:282:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:286:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:290:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:295:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:299:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:303:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:307:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:311:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:316:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:320:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:324:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:328:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:332:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:336:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:341:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:346:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:350:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:354:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:359:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:363:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:367:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:372:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:376:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:381:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:385:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:389:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:393:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:398:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:402:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:406:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:411:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:416:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:420:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:425:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:430:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:435:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:439:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:443:9
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:517:11
Expected declaration but found ‘@apply’. Skipped to next declaration. components.css:521:11
Found invalid value for media feature. components.css:546:26
getEmbedInfo content.js:388:11
NO OEMBED content.js:456:11
Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped. tailwind.css:162:31
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. node.js:409:1
Alpine components script is loading... alpine-components.js:10:9
Registering Alpine.js components... alpine-components.js:24:11
Alpine.js components registered successfully alpine-components.js:734:11
GET
https://d6d61dac-164d-45dd-929f-7dcdfd771b64-00-1bpe9dzxxnshv.worf.replit.dev/favicon.ico
[HTTP/1.1 404 Not Found 56ms]
downloadable font: Glyph bbox was incorrect (glyph ids 2 3 5 8 9 10 11 12 14 17 19 21 22 32 34 35 39 40 43 44 45 46 47 49 51 52 54 56 57 58 60 61 62 63 64 65 67 68 69 71 74 75 76 77 79 86 89 91 96 98 99 100 102 103 109 110 111 113 116 117 118 124 127 128 129 130 132 133 134 137 138 140 142 143 145 146 147 155 156 159 160 171 172 173 177 192 201 202 203 204 207 208 209 210 225 231 233 234 235 238 239 243 244 246 252 253 254 256 259 261 262 268 269 278 279 280 281 285 287 288 295 296 302 303 304 305 307 308 309 313 315 322 324 353 355 356 357 360 362 367 370 371 376 390 396 397 398 400 403 404 407 408 415 416 417 418 423 424 425 427 428 432 433 434 435 436 439 451 452 455 461 467 470 471 482 483 485 489 491 496 499 500 505 514 529 532 541 542 543 547 549 551 553 554 555 556 557 559 579 580 581 582 584 591 592 593 594 595 596 597 600 601 608 609 614 615 622 624 649 658 659 662 664 673 679 680 681 682 684 687 688 689 692 693 694 695 696 698 699 700 702 708 710 711 712 714 716 719 723 724 727 728 729 731 732 733 739 750 751 754 755 756 758 759 761 762 763 766 770 776 778 781 792 795 798 800 802 803 807 808 810 813 818 822 823 826 834 837 854 860 861 862 863 866 867 871 872 874 875 881 882 883 886 892 894 895 897 898 900 901 902 907 910 913 915 917 920 927 936 937 943 945 946 947 949 950 951 954 955 956 958 961 962 964 965 966 968 969 970 974 976 978 980 981 982 985 986 991 992 998 1000 1001 1007 1008 1009 1010 1014 1016 1018 1020 1022 1023 1024 1027 1028 1033 1034 1035 1036 1037 1040 1041 1044 1045 1047 1048 1049 1053 1054 1055 1056 1057 1059 1061 1063 1064 1065 1072 1074 1075 1078 1079 1080 1081 1085 1086 1087 1088 1093 1095 1099 1100 1111 1112 1115 1116 1117 1120 1121 1122 1123 1124 1125) (font-family: "Font Awesome 6 Free" style:normal weight:900 stretch:100 src index:0) source: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-solid-900.woff2

71
static/css/components.css
View File

@@ -238,76 +238,7 @@ 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 - Using plain CSS to fix @apply errors */
.browse-dropdown {
position: absolute;
left: 0;
margin-top: 0.5rem;
background-color: hsl(var(--background));
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
z-index: 50;
width: 600px !important;
min-width: 600px !important;
}
.browse-dropdown .browse-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem !important;
}
.browse-dropdown .browse-item {
display: flex;
align-items: flex-start;
border-radius: 0.5rem;
transition: background-color 0.2s;
padding: 1rem !important;
gap: 0.75rem !important;
min-height: 4rem;
text-decoration: none;
}
.browse-dropdown .browse-item:hover {
background-color: hsl(var(--accent));
}
.browse-dropdown .browse-icon {
color: hsl(var(--muted-foreground));
width: 1.25rem !important;
height: 1.25rem !important;
flex-shrink: 0 !important;
margin-top: 0.25rem !important;
}
.browse-dropdown .browse-item:hover .browse-icon {
color: hsl(var(--foreground));
}
.browse-dropdown .browse-text {
flex: 1 1 0% !important;
min-width: 0 !important;
overflow: hidden;
}
.browse-dropdown .browse-title {
font-weight: 600;
font-size: 0.875rem;
margin-bottom: 0.375rem !important;
line-height: 1.25 !important;
white-space: normal !important;
word-wrap: break-word !important;
color: hsl(var(--foreground));
}
.browse-dropdown .browse-description {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
line-height: 1.4 !important;
white-space: normal !important;
word-wrap: break-word !important;
}
/* Browse Menu Specific Styles - Removed to fix Tailwind 4 compatibility */
.dropdown-separator {
@apply -mx-1 my-1 h-px bg-muted;

64
templates/components/layout/enhanced_header.html
View File

@@ -45,44 +45,44 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
x-cloak
class="browse-dropdown p-6"
class="absolute left-0 mt-2 w-[600px] p-6 bg-background border rounded-lg shadow-lg z-50"
>
<div class="browse-grid">
<div class="grid grid-cols-2 gap-8">
<!-- Left Column -->
<div class="space-y-4">
<a
href="{% url 'parks:park_list' %}"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-map-marker-alt browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Parks</h3>
<p class="browse-description">Explore theme parks worldwide</p>
<i class="fas fa-map-marker-alt w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Parks</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Explore theme parks worldwide</p>
</div>
</a>
<a
href="{% url 'rides:manufacturer_list' %}"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-wrench browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Manufacturers</h3>
<p class="browse-description">Ride and attraction manufacturers</p>
<i class="fas fa-wrench w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Manufacturers</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Ride and attraction manufacturers</p>
</div>
</a>
<a
href="{% url 'parks:operator_list' %}"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-users browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Operators</h3>
<p class="browse-description">Theme park operating companies</p>
<i class="fas fa-users w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Operators</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Theme park operating companies</p>
</div>
</a>
</div>
@@ -91,37 +91,37 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
<div class="space-y-4">
<a
href="{% url 'rides:global_ride_list' %}"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-rocket browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Rides</h3>
<p class="browse-description">Discover rides and attractions</p>
<i class="fas fa-rocket w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Rides</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Discover rides and attractions</p>
</div>
</a>
<a
href="{% url 'rides:designer_list' %}"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-drafting-compass browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Designers</h3>
<p class="browse-description">Ride designers and architects</p>
<i class="fas fa-drafting-compass w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Designers</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Ride designers and architects</p>
</div>
</a>
<a
href="#"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-trophy browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Top Lists</h3>
<p class="browse-description">Community rankings and favorites</p>
<i class="fas fa-trophy w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Top Lists</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Community rankings and favorites</p>
</div>
</a>
</div>