From d978217577a1b22458441911e4d992736e128728 Mon Sep 17 00:00:00 2001 From: pac7 <47831526-pac7@users.noreply.replit.com> Date: Tue, 23 Sep 2025 22:11:05 +0000 Subject: [PATCH] Enhance website's visual appeal and mobile responsiveness with style updates Update CSS styles across various components to improve visual presentation and ensure better responsiveness on mobile devices, including adjustments to spacing, aspect ratios, and element sizing. Replit-Commit-Author: Agent Replit-Commit-Session-Id: c446bc9e-66df-438c-a86c-f53e6da13649 Replit-Commit-Checkpoint-Type: intermediate_checkpoint --- .replit | 2 +- static/css/tailwind.css | 499 ++++++++++++++++++++++++-- templates/cotton/enhanced_search.html | 2 +- templates/cotton/filter_chips.html | 8 +- templates/cotton/park_card.html | 326 ++++++++++++----- templates/cotton/sort_controls.html | 2 +- templates/cotton/view_toggle.html | 4 +- templates/parks/park_list.html | 285 ++++++++++----- 8 files changed, 897 insertions(+), 231 deletions(-) diff --git a/.replit b/.replit index c547b9d1..a0a35a63 100644 --- a/.replit +++ b/.replit @@ -55,7 +55,7 @@ localPort = 5000 externalPort = 80 [[ports]] -localPort = 40077 +localPort = 33323 externalPort = 3002 [[ports]] diff --git a/static/css/tailwind.css b/static/css/tailwind.css index 3199a522..0847611e 100644 --- a/static/css/tailwind.css +++ b/static/css/tailwind.css @@ -410,9 +410,15 @@ .top-0 { top: calc(var(--spacing) * 0); } + .top-1\.5 { + top: calc(var(--spacing) * 1.5); + } .top-1\/2 { top: calc(1/2 * 100%); } + .top-2 { + top: calc(var(--spacing) * 2); + } .top-3 { top: calc(var(--spacing) * 3); } @@ -425,6 +431,12 @@ .right-0 { right: calc(var(--spacing) * 0); } + .right-1\.5 { + right: calc(var(--spacing) * 1.5); + } + .right-2 { + right: calc(var(--spacing) * 2); + } .right-3 { right: calc(var(--spacing) * 3); } @@ -524,6 +536,12 @@ max-width: 96rem; } } + .-m-1 { + margin: calc(var(--spacing) * -1); + } + .-m-2 { + margin: calc(var(--spacing) * -2); + } .-mx-1\.5 { margin-inline: calc(var(--spacing) * -1.5); } @@ -692,6 +710,12 @@ .table { display: table; } + .aspect-\[4\/3\] { + aspect-ratio: 4/3; + } + .aspect-\[16\/9\] { + aspect-ratio: 16/9; + } .aspect-square { aspect-ratio: 1 / 1; } @@ -785,12 +809,21 @@ .min-h-20 { min-height: calc(var(--spacing) * 20); } + .min-h-\[24px\] { + min-height: 24px; + } + .min-h-\[44px\] { + min-height: 44px; + } .min-h-\[100px\] { min-height: 100px; } .min-h-\[120px\] { min-height: 120px; } + .min-h-\[300px\] { + min-height: 300px; + } .min-h-\[400px\] { min-height: 400px; } @@ -914,6 +947,12 @@ .min-w-16 { min-width: calc(var(--spacing) * 16); } + .min-w-\[24px\] { + min-width: 24px; + } + .min-w-\[44px\] { + min-width: 44px; + } .min-w-\[200px\] { min-width: 200px; } @@ -1037,6 +1076,9 @@ .list-disc { list-style-type: disc; } + .appearance-none { + appearance: none; + } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -1150,6 +1192,13 @@ margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); } } + .space-x-1\.5 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-x-reverse))); + } + } .space-x-2 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -1171,13 +1220,6 @@ margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } - .space-x-6 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse))); - } - } .space-x-8 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -1228,6 +1270,9 @@ .rounded-md { border-radius: var(--radius-md); } + .rounded-sm { + border-radius: var(--radius-sm); + } .rounded-xl { border-radius: var(--radius-xl); } @@ -1583,6 +1628,12 @@ background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } + .bg-white\/50 { + background-color: color-mix(in srgb, #fff 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 50%, transparent); + } + } .bg-white\/80 { background-color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -1595,6 +1646,12 @@ background-color: color-mix(in oklab, var(--color-white) 90%, transparent); } } + .bg-white\/95 { + background-color: color-mix(in srgb, #fff 95%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 95%, transparent); + } + } .bg-yellow-50 { background-color: var(--color-yellow-50); } @@ -1625,6 +1682,13 @@ --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } + .from-black\/20 { + --tw-gradient-from: color-mix(in srgb, #000 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-from: color-mix(in oklab, var(--color-black) 20%, transparent); + } + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .from-black\/70 { --tw-gradient-from: color-mix(in srgb, #000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -1648,6 +1712,14 @@ --tw-gradient-from: var(--color-gray-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .from-gray-200 { + --tw-gradient-from: var(--color-gray-200); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .from-gray-400 { + --tw-gradient-from: var(--color-gray-400); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .from-gray-900 { --tw-gradient-from: var(--color-gray-900); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -1684,11 +1756,26 @@ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-gray-100 { + --tw-gradient-via: var(--color-gray-100); + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + .via-gray-500 { + --tw-gradient-via: var(--color-gray-500); + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } .via-purple-500 { --tw-gradient-via: var(--color-purple-500); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-transparent { + --tw-gradient-via: transparent; + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } .via-white { --tw-gradient-via: var(--color-white); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -1706,6 +1793,14 @@ --tw-gradient-to: var(--color-gray-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .to-gray-200 { + --tw-gradient-to: var(--color-gray-200); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .to-gray-600 { + --tw-gradient-to: var(--color-gray-600); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .to-gray-700 { --tw-gradient-to: var(--color-gray-700); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -1761,9 +1856,6 @@ .object-cover { object-fit: cover; } - .p-0\.5 { - padding: calc(var(--spacing) * 0.5); - } .p-1 { padding: calc(var(--spacing) * 1); } @@ -1794,6 +1886,9 @@ .px-1 { padding-inline: calc(var(--spacing) * 1); } + .px-1\.5 { + padding-inline: calc(var(--spacing) * 1.5); + } .px-2 { padding-inline: calc(var(--spacing) * 2); } @@ -1851,6 +1946,9 @@ .pt-2 { padding-top: calc(var(--spacing) * 2); } + .pt-3 { + padding-top: calc(var(--spacing) * 3); + } .pt-4 { padding-top: calc(var(--spacing) * 4); } @@ -2127,6 +2225,12 @@ .text-white { color: var(--color-white); } + .text-white\/70 { + color: color-mix(in srgb, #fff 70%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-white) 70%, transparent); + } + } .text-yellow-400 { color: var(--color-yellow-400); } @@ -2174,9 +2278,15 @@ .opacity-50 { opacity: 50%; } + .opacity-60 { + opacity: 60%; + } .opacity-75 { opacity: 75%; } + .opacity-80 { + opacity: 80%; + } .opacity-100 { opacity: 100%; } @@ -2330,6 +2440,10 @@ --tw-duration: 300ms; transition-duration: 300ms; } + .duration-500 { + --tw-duration: 500ms; + transition-duration: 500ms; + } .ease-in { --tw-ease: var(--ease-in); transition-timing-function: var(--ease-in); @@ -2354,6 +2468,10 @@ --tw-outline-style: none; outline-style: none; } + .select-none { + -webkit-user-select: none; + user-select: none; + } .\[coverage\:report\] { coverage: report; } @@ -2381,6 +2499,16 @@ } } } + .group-hover\:scale-110 { + &:is(:where(.group):hover *) { + @media (hover: hover) { + --tw-scale-x: 110%; + --tw-scale-y: 110%; + --tw-scale-z: 110%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + } .group-hover\:text-blue-600 { &:is(:where(.group):hover *) { @media (hover: hover) { @@ -2983,6 +3111,11 @@ border-color: transparent; } } + .focus\:bg-gray-50 { + &:focus { + background-color: var(--color-gray-50); + } + } .focus\:bg-gray-100 { &:focus { background-color: var(--color-gray-100); @@ -3128,6 +3261,26 @@ opacity: 50%; } } + .sm\:top-2 { + @media (width >= 40rem) { + top: calc(var(--spacing) * 2); + } + } + .sm\:top-3 { + @media (width >= 40rem) { + top: calc(var(--spacing) * 3); + } + } + .sm\:right-2 { + @media (width >= 40rem) { + right: calc(var(--spacing) * 2); + } + } + .sm\:right-3 { + @media (width >= 40rem) { + right: calc(var(--spacing) * 3); + } + } .sm\:col-span-3 { @media (width >= 40rem) { grid-column: span 3 / span 3; @@ -3143,16 +3296,41 @@ grid-column: span 9 / span 9; } } + .sm\:mt-2 { + @media (width >= 40rem) { + margin-top: calc(var(--spacing) * 2); + } + } .sm\:mb-0 { @media (width >= 40rem) { margin-bottom: calc(var(--spacing) * 0); } } + .sm\:mb-3 { + @media (width >= 40rem) { + margin-bottom: calc(var(--spacing) * 3); + } + } + .sm\:mb-4 { + @media (width >= 40rem) { + margin-bottom: calc(var(--spacing) * 4); + } + } + .sm\:mb-8 { + @media (width >= 40rem) { + margin-bottom: calc(var(--spacing) * 8); + } + } .sm\:mb-16 { @media (width >= 40rem) { margin-bottom: calc(var(--spacing) * 16); } } + .sm\:ml-2 { + @media (width >= 40rem) { + margin-left: calc(var(--spacing) * 2); + } + } .sm\:block { @media (width >= 40rem) { display: block; @@ -3173,16 +3351,76 @@ display: inline; } } + .sm\:aspect-\[4\/3\] { + @media (width >= 40rem) { + aspect-ratio: 4/3; + } + } + .sm\:h-5 { + @media (width >= 40rem) { + height: calc(var(--spacing) * 5); + } + } + .sm\:h-10 { + @media (width >= 40rem) { + height: calc(var(--spacing) * 10); + } + } + .sm\:min-h-0 { + @media (width >= 40rem) { + min-height: calc(var(--spacing) * 0); + } + } + .sm\:min-h-\[400px\] { + @media (width >= 40rem) { + min-height: 400px; + } + } + .sm\:min-h-auto { + @media (width >= 40rem) { + min-height: auto; + } + } + .sm\:w-5 { + @media (width >= 40rem) { + width: calc(var(--spacing) * 5); + } + } + .sm\:w-10 { + @media (width >= 40rem) { + width: calc(var(--spacing) * 10); + } + } + .sm\:w-32 { + @media (width >= 40rem) { + width: calc(var(--spacing) * 32); + } + } .sm\:w-96 { @media (width >= 40rem) { width: calc(var(--spacing) * 96); } } + .sm\:w-auto { + @media (width >= 40rem) { + width: auto; + } + } + .sm\:min-w-0 { + @media (width >= 40rem) { + min-width: calc(var(--spacing) * 0); + } + } .sm\:flex-1 { @media (width >= 40rem) { flex: 1; } } + .sm\:flex-none { + @media (width >= 40rem) { + flex: none; + } + } .sm\:grid-cols-1 { @media (width >= 40rem) { grid-template-columns: repeat(1, minmax(0, 1fr)); @@ -3198,6 +3436,11 @@ grid-template-columns: repeat(12, minmax(0, 1fr)); } } + .sm\:flex-col { + @media (width >= 40rem) { + flex-direction: column; + } + } .sm\:flex-row { @media (width >= 40rem) { flex-direction: row; @@ -3218,6 +3461,62 @@ justify-content: flex-end; } } + .sm\:justify-start { + @media (width >= 40rem) { + justify-content: flex-start; + } + } + .sm\:gap-3 { + @media (width >= 40rem) { + gap: calc(var(--spacing) * 3); + } + } + .sm\:gap-4 { + @media (width >= 40rem) { + gap: calc(var(--spacing) * 4); + } + } + .sm\:gap-6 { + @media (width >= 40rem) { + gap: calc(var(--spacing) * 6); + } + } + .sm\:space-y-0 { + @media (width >= 40rem) { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))); + } + } + } + .sm\:space-y-3 { + @media (width >= 40rem) { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); + } + } + } + .sm\:space-y-6 { + @media (width >= 40rem) { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); + } + } + } + .sm\:space-x-2 { + @media (width >= 40rem) { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); + } + } + } .sm\:space-x-4 { @media (width >= 40rem) { :where(& > :not(:last-child)) { @@ -3236,11 +3535,106 @@ } } } + .sm\:p-0\.5 { + @media (width >= 40rem) { + padding: calc(var(--spacing) * 0.5); + } + } + .sm\:p-4 { + @media (width >= 40rem) { + padding: calc(var(--spacing) * 4); + } + } + .sm\:p-6 { + @media (width >= 40rem) { + padding: calc(var(--spacing) * 6); + } + } + .sm\:px-0 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 0); + } + } + .sm\:px-2 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 2); + } + } + .sm\:px-2\.5 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 2.5); + } + } + .sm\:px-4 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 4); + } + } .sm\:px-6 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 6); } } + .sm\:py-0 { + @media (width >= 40rem) { + padding-block: calc(var(--spacing) * 0); + } + } + .sm\:py-1 { + @media (width >= 40rem) { + padding-block: calc(var(--spacing) * 1); + } + } + .sm\:py-2 { + @media (width >= 40rem) { + padding-block: calc(var(--spacing) * 2); + } + } + .sm\:py-6 { + @media (width >= 40rem) { + padding-block: calc(var(--spacing) * 6); + } + } + .sm\:pt-4 { + @media (width >= 40rem) { + padding-top: calc(var(--spacing) * 4); + } + } + .sm\:text-left { + @media (width >= 40rem) { + text-align: left; + } + } + .sm\:text-3xl { + @media (width >= 40rem) { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + } + } + .sm\:text-base { + @media (width >= 40rem) { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + } + } + .sm\:text-lg { + @media (width >= 40rem) { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + } + .sm\:text-sm { + @media (width >= 40rem) { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + } + .sm\:text-xl { + @media (width >= 40rem) { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + } .md\:col-span-1 { @media (width >= 48rem) { grid-column: span 1 / span 1; @@ -3296,6 +3690,11 @@ width: calc(var(--spacing) * 7); } } + .md\:w-40 { + @media (width >= 48rem) { + width: calc(var(--spacing) * 40); + } + } .md\:w-48 { @media (width >= 48rem) { width: calc(var(--spacing) * 48); @@ -3409,6 +3808,11 @@ width: calc(3/4 * 100%); } } + .lg\:w-48 { + @media (width >= 64rem) { + width: calc(var(--spacing) * 48); + } + } .lg\:max-w-2xl { @media (width >= 64rem) { max-width: var(--container-2xl); @@ -3459,6 +3863,11 @@ justify-content: space-between; } } + .lg\:gap-6 { + @media (width >= 64rem) { + gap: calc(var(--spacing) * 6); + } + } .lg\:gap-8 { @media (width >= 64rem) { gap: calc(var(--spacing) * 8); @@ -3469,6 +3878,11 @@ padding: calc(var(--spacing) * 6); } } + .lg\:px-6 { + @media (width >= 64rem) { + padding-inline: calc(var(--spacing) * 6); + } + } .lg\:px-8 { @media (width >= 64rem) { padding-inline: calc(var(--spacing) * 8); @@ -3680,11 +4094,6 @@ border-color: var(--color-green-800); } } - .dark\:border-purple-800 { - @media (prefers-color-scheme: dark) { - border-color: var(--color-purple-800); - } - } .dark\:border-purple-800\/50 { @media (prefers-color-scheme: dark) { border-color: color-mix(in srgb, oklch(43.8% 0.218 303.724) 50%, transparent); @@ -3871,14 +4280,6 @@ background-color: var(--color-purple-900); } } - .dark\:bg-purple-900\/20 { - @media (prefers-color-scheme: dark) { - background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-purple-900) 20%, transparent); - } - } - } .dark\:bg-purple-900\/30 { @media (prefers-color-scheme: dark) { background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 30%, transparent); @@ -3995,6 +4396,18 @@ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } + .dark\:from-gray-600 { + @media (prefers-color-scheme: dark) { + --tw-gradient-from: var(--color-gray-600); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + } + .dark\:from-gray-700 { + @media (prefers-color-scheme: dark) { + --tw-gradient-from: var(--color-gray-700); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + } .dark\:from-gray-900 { @media (prefers-color-scheme: dark) { --tw-gradient-from: var(--color-gray-900); @@ -4037,6 +4450,20 @@ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } + .dark\:via-gray-600 { + @media (prefers-color-scheme: dark) { + --tw-gradient-via: var(--color-gray-600); + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + } + .dark\:via-gray-700 { + @media (prefers-color-scheme: dark) { + --tw-gradient-via: var(--color-gray-700); + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + } .dark\:via-gray-800 { @media (prefers-color-scheme: dark) { --tw-gradient-via: var(--color-gray-800); @@ -4057,6 +4484,18 @@ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } + .dark\:to-gray-700 { + @media (prefers-color-scheme: dark) { + --tw-gradient-to: var(--color-gray-700); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + } + .dark\:to-gray-800 { + @media (prefers-color-scheme: dark) { + --tw-gradient-to: var(--color-gray-800); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + } .dark\:to-gray-900 { @media (prefers-color-scheme: dark) { --tw-gradient-to: var(--color-gray-900); @@ -4644,13 +5083,6 @@ } } } - .dark\:focus\:border-blue-500 { - @media (prefers-color-scheme: dark) { - &:focus { - border-color: var(--color-blue-500); - } - } - } .dark\:focus\:bg-gray-700 { @media (prefers-color-scheme: dark) { &:focus { @@ -4679,6 +5111,13 @@ } } } + .dark\:focus\:ring-offset-gray-800 { + @media (prefers-color-scheme: dark) { + &:focus { + --tw-ring-offset-color: var(--color-gray-800); + } + } + } } .site-logo { font-size: 1.5rem; diff --git a/templates/cotton/enhanced_search.html b/templates/cotton/enhanced_search.html index 1d018c2e..90440d13 100644 --- a/templates/cotton/enhanced_search.html +++ b/templates/cotton/enhanced_search.html @@ -104,7 +104,7 @@ Features: name="search" x-model="search" placeholder="{{ placeholder }}" - class="block w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg leading-5 bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 transition-colors" + class="block w-full pl-10 pr-12 py-3 border border-gray-300 dark:border-gray-600 rounded-lg leading-5 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 text-base sm:text-sm min-h-[44px] sm:min-h-0" hx-get="{% url 'parks:park_list' %}" hx-trigger="keyup changed delay:{{ debounce_delay }}ms" hx-target="#park-results" diff --git a/templates/cotton/filter_chips.html b/templates/cotton/filter_chips.html index d5750dca..2cea939d 100644 --- a/templates/cotton/filter_chips.html +++ b/templates/cotton/filter_chips.html @@ -31,9 +31,9 @@ Features:
{% for filter_name, filter_value in filters.items %} {% if filter_value and filter_name != 'page' and filter_name != 'view_mode' %} -
- {{ filter_name|title }}: - +
+ {{ filter_name|title }}: + {% if filter_value == 'True' %} Yes {% elif filter_value == 'False' %} @@ -44,7 +44,7 @@ Features:
- -
+ x-transition:enter="transition ease-out duration-300" + x-transition:enter-start="opacity-0 transform scale-95 -translate-y-2" + x-transition:enter-end="opacity-100 transform scale-100 translate-y-0" + x-transition:leave="transition ease-in duration-200" + x-transition:leave-start="opacity-100 transform scale-100 translate-y-0" + x-transition:leave-end="opacity-0 transform scale-95 -translate-y-2"> - + {# Enhanced Mobile-First Status Filter #}
-
- + {# Enhanced Mobile-First Operator Filter #}
-
- + {# Enhanced Mobile-First Quick Filters with Better Touch Targets #}
-
- + {# Enhanced Mobile-First Active Filter Chips #} {% if active_filters %} -
+
+
+

+ Active Filters +

+ +
{% endif %}
- -
- + {# Enhanced Mobile-First Results Section #} +
+ {# Enhanced Mobile-First Results Statistics #} - + {# Enhanced Mobile-First Loading Overlay #}
-
-
-
- +
+
+
+ - Loading parks... +
+
Loading parks...
+
Please wait a moment
+
- + {# Enhanced Mobile-First Park Results Container #}
+ class="min-h-[300px] sm:min-h-[400px]"> {% include "parks/partials/park_list.html" %}
@@ -249,51 +279,110 @@