diff --git a/config.yaml b/config.yaml index 112dc0e..0523a49 100644 --- a/config.yaml +++ b/config.yaml @@ -216,6 +216,10 @@ views: - web/layouts/journeys/_partials/journeys-organized-carpools.html - web/layouts/journeys/_partials/saved-searches.html - web/layouts/journeys/search.html + search_compact: + files: + - web/layouts/_partials/orb_address_autocomplete.html + - web/layouts/journeys/search-compact.html list: files: - web/layouts/journeys/group_management.html diff --git a/web/layouts/journeys/search-compact.html b/web/layouts/journeys/search-compact.html new file mode 100644 index 0000000..aab42f7 --- /dev/null +++ b/web/layouts/journeys/search-compact.html @@ -0,0 +1,1765 @@ +{{define "content"}} +
+
+ +
+
+
+ + + +
    + +
+
+ +
+ + + +
    + +
+
+ +
+ + +
+ +
+ + +
+ + +
+ + {{if .ViewState.searched}} +
+ +
+ Filtres: + + + + + +
+ + + {{$.IconSet.Icon "hero:outline/bookmark" "h-4 w-4 mr-2"}} + Enregistrer pour plus tard + +
+ {{end}} +
+ + +
+ +
+ {{if .ViewState.searched}} +
+ + {{range $index, $journey := .ViewState.journeys}} +
+
+
+ {{ timeFormat $journey.StartTime "15:04" }} + → + {{ timeFormat $journey.EndTime "15:04" }} +
+ {{ shortDuration $journey.Duration }} +
+
+ + {{$.IconSet.Icon "tabler-icons:bus" "h-3 w-3"}} + Transport + + {{range $leg := $journey.Legs}} + {{if or (eq $leg.Mode "BUS") (eq $leg.Mode "COACH")}} + + {{$leg.RouteShortName}} + + {{else if or (eq $leg.Mode "REGIONAL_FAST_RAIL") (eq $leg.Mode "REGIONAL_RAIL")}} + + {{$leg.RouteShortName}} + + {{end}} + {{end}} +
+
+ {{end}} + + + {{if .ViewState.driver_journeys}} +
+
+ Transport solidaire + + {{len .ViewState.driver_journeys}} conducteur{{if gt (len .ViewState.driver_journeys) 1}}s{{end}} + +
+
+ + {{$.IconSet.Icon "tabler-icons:car" "h-3 w-3"}} + Conducteurs disponibles + +
+
+ {{end}} + + + {{if .ViewState.organized_carpools}} +
+
+ Covoiturage solidaire + + {{len .ViewState.organized_carpools}} trajet{{if gt (len .ViewState.organized_carpools) 1}}s{{end}} + +
+
+ + {{$.IconSet.Icon "tabler-icons:users" "h-3 w-3"}} + Trajets disponibles + +
+
+ {{end}} + + + {{range $carpoolIndex, $carpoolFC := .ViewState.carpools}} + {{$carpoolData := index $carpoolFC.ExtraMembers "ocss"}} +
+
+
+ {{$carpoolData.Driver.Alias}} +
+ +
+ {{if or $carpoolData.PassengerPickupAddress $carpoolData.PassengerDropAddress}} +
+ {{if $carpoolData.PassengerPickupAddress}} +
+ {{$.IconSet.Icon "hero:outline/map-pin" "h-3 w-3 mt-0.5 flex-shrink-0"}} + {{$carpoolData.PassengerPickupAddress}} +
+ {{end}} + {{if $carpoolData.PassengerDropAddress}} +
+ {{$.IconSet.Icon "hero:outline/flag" "h-3 w-3 mt-0.5 flex-shrink-0"}} + {{$carpoolData.PassengerDropAddress}} +
+ {{end}} +
+ {{end}} +
+ + {{$.IconSet.Icon "tabler-icons:car" "h-3 w-3"}} + Covoiturage + + + {{$carpoolData.Operator}} + + {{if $carpoolData.AvailableSteats}} + + {{$carpoolData.AvailableSteats}} place(s) + + {{end}} +
+
+ {{end}} + + + {{range $index, $solution := .ViewState.kb_data}} +
+
+ {{if $solution.title}}{{$solution.title}}{{else if $solution.name}}{{$solution.name}}{{else}}Solution locale{{end}} +
+
+ + {{$.IconSet.Icon "hero:outline/map" "h-3 w-3"}} + Solution locale + +
+
+ {{end}} +
+ {{else}} +
+

Effectuez une recherche pour voir les résultats

+
+ {{end}} +
+ + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+
+
+
+
+ + +{{end}} diff --git a/web/layouts/solidarity_transport/_partials/journey_map.html b/web/layouts/solidarity_transport/_partials/journey_map.html index 1476977..7ea4cd3 100644 --- a/web/layouts/solidarity_transport/_partials/journey_map.html +++ b/web/layouts/solidarity_transport/_partials/journey_map.html @@ -17,21 +17,6 @@ {{ json .driver_journey.DriverArrival }} ] } - const driverGeojsonPoints = { - "type": "FeatureCollection", - "features": [ - {{ json .driver_journey.DriverDeparture }}, - {{ json .driver_journey.DriverArrival }} - ] - } - const passengerGeojsonPoints = { - "type": "FeatureCollection", - "features": [ - {{ json .driver_journey.PassengerPickup }}, - {{ json .driver_journey.PassengerDrop }}, - ] - } - map.on('load', async () => { {{if .driver_journey.JourneyPolyline}} @@ -49,41 +34,66 @@ 'line-cap': 'round', }, 'paint': { - 'line-color': '#243887', - 'line-width': 3 + 'line-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-blue').trim(), + 'line-width': 4 }, }); {{end}} - map.addSource('driver_points', { - type: "geojson", - data: driverGeojsonPoints - }) - map.addLayer({ - 'id': 'driver_points', - 'type': 'circle', - 'source': 'driver_points', - 'paint': { - 'circle-color': '#000' - }, - }); - map.addSource('passenger_points', { - type: "geojson", - data: passengerGeojsonPoints - }) - map.addLayer({ - 'id': 'passenger_points', - 'type': 'circle', - 'source': 'passenger_points', - 'paint': { - 'circle-color': '#243887', - 'circle-radius': 8 - }, - }); + // Driver departure marker + const driverDepartureEl = document.createElement('div'); + driverDepartureEl.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center'; + driverDepartureEl.innerHTML = ` + + + + + `; + new maplibregl.Marker({element: driverDepartureEl}) + .setLngLat({{ json .driver_journey.DriverDeparture }}.geometry.coordinates) + .addTo(map); + + // Driver arrival marker + const driverArrivalEl = document.createElement('div'); + driverArrivalEl.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center'; + driverArrivalEl.innerHTML = ` + + + + + `; + new maplibregl.Marker({element: driverArrivalEl}) + .setLngLat({{ json .driver_journey.DriverArrival }}.geometry.coordinates) + .addTo(map); + + // Passenger pickup marker + const passengerPickupEl = document.createElement('div'); + passengerPickupEl.className = 'w-8 h-8 rounded-co bg-co-green border border-white shadow-md flex items-center justify-center'; + passengerPickupEl.innerHTML = ` + + + + `; + new maplibregl.Marker({element: passengerPickupEl}) + .setLngLat({{ json .driver_journey.PassengerPickup }}.geometry.coordinates) + .addTo(map); + + // Passenger drop marker + const passengerDropEl = document.createElement('div'); + passengerDropEl.className = 'w-8 h-8 rounded-co bg-co-red border border-white shadow-md flex items-center justify-center'; + passengerDropEl.innerHTML = ` + + + + `; + new maplibregl.Marker({element: passengerDropEl}) + .setLngLat({{ json .driver_journey.PassengerDrop }}.geometry.coordinates) + .addTo(map); + var bbox=turf.bbox(geojsonPoints) map.fitBounds(bbox, { padding: 50 }) }) - + {{ end }} diff --git a/web/public/css/main.css b/web/public/css/main.css index ea23ac8..3060229 100644 --- a/web/public/css/main.css +++ b/web/public/css/main.css @@ -11,16 +11,28 @@ --color-red-600: oklch(0.577 0.245 27.325); --color-red-800: oklch(0.444 0.177 26.899); --color-red-900: oklch(0.396 0.141 25.723); + --color-yellow-50: oklch(0.987 0.026 102.212); --color-yellow-100: oklch(0.973 0.071 103.193); --color-yellow-800: oklch(0.476 0.114 61.907); --color-green-100: oklch(0.962 0.044 156.743); --color-green-600: oklch(0.627 0.194 149.214); --color-green-800: oklch(0.448 0.119 151.328); + --color-blue-50: oklch(0.97 0.014 254.604); + --color-blue-100: oklch(0.932 0.032 255.585); + --color-blue-200: oklch(0.882 0.059 254.128); --color-blue-500: oklch(0.623 0.214 259.815); + --color-blue-600: oklch(0.546 0.245 262.881); --color-blue-700: oklch(0.488 0.243 264.376); + --color-blue-800: oklch(0.424 0.199 265.638); --color-indigo-50: oklch(0.962 0.018 272.314); --color-indigo-500: oklch(0.585 0.233 277.117); --color-indigo-600: oklch(0.511 0.262 276.966); + --color-purple-50: oklch(0.977 0.014 308.299); + --color-purple-100: oklch(0.946 0.033 307.174); + --color-purple-200: oklch(0.902 0.063 306.703); + --color-purple-600: oklch(0.558 0.288 302.321); + --color-purple-700: oklch(0.496 0.265 301.924); + --color-purple-800: oklch(0.438 0.218 303.724); --color-gray-50: oklch(0.985 0.002 247.839); --color-gray-100: oklch(0.967 0.003 264.542); --color-gray-200: oklch(0.928 0.006 264.531); @@ -85,9 +97,11 @@ --font-mono--font-variation-settings ); --color-co-blue: #243887; + --color-co-lightblue: #907eff; --color-co-red: #ff1300; --color-co-green: #6cc11f; --color-co-yellow: #ffdd00; + --color-co-orange: #ff5300; --radius-co: 40%; } } @@ -311,6 +325,9 @@ .right-0 { right: calc(var(--spacing) * 0); } + .right-4 { + right: calc(var(--spacing) * 4); + } .left-0 { left: calc(var(--spacing) * 0); } @@ -350,6 +367,9 @@ .col-span-1 { grid-column: span 1 / span 1; } + .col-span-2 { + grid-column: span 2 / span 2; + } .col-span-3 { grid-column: span 3 / span 3; } @@ -485,6 +505,9 @@ .-my-2 { margin-block: calc(var(--spacing) * -2); } + .my-1 { + margin-block: calc(var(--spacing) * 1); + } .my-2 { margin-block: calc(var(--spacing) * 2); } @@ -503,6 +526,12 @@ .-mt-4 { margin-top: calc(var(--spacing) * -4); } + .mt-0 { + margin-top: calc(var(--spacing) * 0); + } + .mt-0\.5 { + margin-top: calc(var(--spacing) * 0.5); + } .mt-1 { margin-top: calc(var(--spacing) * 1); } @@ -557,6 +586,15 @@ .-mb-px { margin-bottom: -1px; } + .mb-1 { + margin-bottom: calc(var(--spacing) * 1); + } + .mb-2 { + margin-bottom: calc(var(--spacing) * 2); + } + .mb-3 { + margin-bottom: calc(var(--spacing) * 3); + } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } @@ -690,6 +728,9 @@ .h-0 { height: calc(var(--spacing) * 0); } + .h-2 { + height: calc(var(--spacing) * 2); + } .h-3 { height: calc(var(--spacing) * 3); } @@ -714,9 +755,15 @@ .h-16 { height: calc(var(--spacing) * 16); } + .h-48 { + height: calc(var(--spacing) * 48); + } .h-50 { height: calc(var(--spacing) * 50); } + .h-\[600px\] { + height: 600px; + } .h-full { height: 100%; } @@ -726,6 +773,9 @@ .max-h-60 { max-height: calc(var(--spacing) * 60); } + .max-h-\[600px\] { + max-height: 600px; + } .max-h-none { max-height: none; } @@ -759,6 +809,9 @@ .w-1\/6 { width: calc(1/6 * 100%); } + .w-2 { + width: calc(var(--spacing) * 2); + } .w-3 { width: calc(var(--spacing) * 3); } @@ -789,9 +842,21 @@ .w-16 { width: calc(var(--spacing) * 16); } + .w-32 { + width: calc(var(--spacing) * 32); + } + .w-40 { + width: calc(var(--spacing) * 40); + } .w-48 { width: calc(var(--spacing) * 48); } + .w-80 { + width: calc(var(--spacing) * 80); + } + .w-96 { + width: calc(var(--spacing) * 96); + } .w-auto { width: auto; } @@ -816,6 +881,9 @@ .max-w-lg { max-width: var(--container-lg); } + .max-w-md { + max-width: var(--container-md); + } .max-w-none { max-width: none; } @@ -1109,6 +1177,9 @@ .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } .grid-cols-none { grid-template-columns: none; } @@ -1265,9 +1336,15 @@ .justify-items-stretch { justify-items: stretch; } + .gap-1 { + gap: calc(var(--spacing) * 1); + } .gap-2 { gap: calc(var(--spacing) * 2); } + .gap-3 { + gap: calc(var(--spacing) * 3); + } .gap-4 { gap: calc(var(--spacing) * 4); } @@ -1518,6 +1595,9 @@ .rounded-md { border-radius: var(--radius-md); } + .rounded-none { + border-radius: 0; + } .rounded-xl { border-radius: var(--radius-xl); } @@ -1557,6 +1637,10 @@ border-top-left-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); } + .rounded-l-lg { + border-top-left-radius: var(--radius-lg); + border-bottom-left-radius: var(--radius-lg); + } .rounded-l-md { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); @@ -1576,6 +1660,10 @@ border-top-right-radius: var(--radius-3xl); border-bottom-right-radius: var(--radius-3xl); } + .rounded-r-lg { + border-top-right-radius: var(--radius-lg); + border-bottom-right-radius: var(--radius-lg); + } .rounded-r-md { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); @@ -1661,6 +1749,10 @@ border-left-style: var(--tw-border-style); border-left-width: 0px; } + .border-l-4 { + border-left-style: var(--tw-border-style); + border-left-width: 4px; + } .border-dashed { --tw-border-style: dashed; border-style: dashed; @@ -1685,12 +1777,24 @@ --tw-border-style: solid; border-style: solid; } + .border-blue-200 { + border-color: var(--color-blue-200); + } .border-co-blue { border-color: var(--color-co-blue); } + .border-co-lightblue { + border-color: var(--color-co-lightblue); + } + .border-co-orange { + border-color: var(--color-co-orange); + } .border-co-red { border-color: var(--color-co-red); } + .border-co-yellow { + border-color: var(--color-co-yellow); + } .border-gray-200 { border-color: var(--color-gray-200); } @@ -1700,9 +1804,18 @@ .border-indigo-500 { border-color: var(--color-indigo-500); } + .border-purple-200 { + border-color: var(--color-purple-200); + } + .border-purple-600 { + border-color: var(--color-purple-600); + } .border-transparent { border-color: transparent; } + .border-white { + border-color: var(--color-white); + } .bg-\(--my_variable\) { background-color: var(--my_variable); } @@ -1721,12 +1834,24 @@ .bg-black { background-color: var(--color-black); } + .bg-blue-50 { + background-color: var(--color-blue-50); + } + .bg-blue-100 { + background-color: var(--color-blue-100); + } + .bg-blue-600 { + background-color: var(--color-blue-600); + } .bg-co-blue { background-color: var(--color-co-blue); } .bg-co-green { background-color: var(--color-co-green); } + .bg-co-lightblue { + background-color: var(--color-co-lightblue); + } .bg-co-red { background-color: var(--color-co-red); } @@ -1757,12 +1882,24 @@ .bg-green-100 { background-color: var(--color-green-100); } + .bg-green-600 { + background-color: var(--color-green-600); + } .bg-indigo-50 { background-color: var(--color-indigo-50); } .bg-indigo-600 { background-color: var(--color-indigo-600); } + .bg-purple-50 { + background-color: var(--color-purple-50); + } + .bg-purple-100 { + background-color: var(--color-purple-100); + } + .bg-purple-600 { + background-color: var(--color-purple-600); + } .bg-red-100 { background-color: var(--color-red-100); } @@ -1775,9 +1912,15 @@ .bg-red-500\/\[50\%\] { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } + .bg-red-600 { + background-color: var(--color-red-600); + } .bg-white { background-color: var(--color-white); } + .bg-yellow-50 { + background-color: var(--color-yellow-50); + } .bg-yellow-100 { background-color: var(--color-yellow-100); } @@ -1789,6 +1932,10 @@ --tw-gradient-position: in oklab; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-gradient-to-r { + --tw-gradient-position: to right in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + } .bg-radial { --tw-gradient-position: in oklab; background-image: radial-gradient(var(--tw-gradient-stops)); @@ -1799,6 +1946,14 @@ .via-none { --tw-gradient-via-stops: initial; } + .from-co-blue { + --tw-gradient-from: var(--color-co-blue); + --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-co-lightblue { + --tw-gradient-to: var(--color-co-lightblue); + --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)); + } .box-decoration-clone { -webkit-box-decoration-break: clone; box-decoration-break: clone; @@ -1902,6 +2057,12 @@ .fill-none { fill: none; } + .stroke-gray-600 { + stroke: var(--color-gray-600); + } + .stroke-gray-700 { + stroke: var(--color-gray-700); + } .stroke-gray-800 { stroke: var(--color-gray-800); } @@ -1965,9 +2126,15 @@ .p-2 { padding: calc(var(--spacing) * 2); } + .p-3 { + padding: calc(var(--spacing) * 3); + } .p-4 { padding: calc(var(--spacing) * 4); } + .p-8 { + padding: calc(var(--spacing) * 8); + } .p-10 { padding: calc(var(--spacing) * 10); } @@ -2031,6 +2198,12 @@ .py-12 { padding-block: calc(var(--spacing) * 12); } + .pt-0 { + padding-top: calc(var(--spacing) * 0); + } + .pt-0\.5 { + padding-top: calc(var(--spacing) * 0.5); + } .pt-1 { padding-top: calc(var(--spacing) * 1); } @@ -2294,15 +2467,27 @@ .text-black { color: var(--color-black); } + .text-blue-800 { + color: var(--color-blue-800); + } .text-co-blue { color: var(--color-co-blue); } .text-co-green { color: var(--color-co-green); } + .text-co-lightblue { + color: var(--color-co-lightblue); + } + .text-co-orange { + color: var(--color-co-orange); + } .text-co-red { color: var(--color-co-red); } + .text-co-yellow { + color: var(--color-co-yellow); + } .text-gray-400 { color: var(--color-gray-400); } @@ -2330,6 +2515,12 @@ .text-indigo-600 { color: var(--color-indigo-600); } + .text-purple-600 { + color: var(--color-purple-600); + } + .text-purple-800 { + color: var(--color-purple-800); + } .text-red-600 { color: var(--color-red-600); } @@ -2503,6 +2694,9 @@ .opacity-30 { opacity: 30%; } + .opacity-90 { + opacity: 90%; + } .opacity-100 { opacity: 100%; } @@ -2524,6 +2718,10 @@ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-md { + --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -2964,6 +3162,13 @@ } } } + .hover\:bg-purple-700 { + &:hover { + @media (hover: hover) { + background-color: var(--color-purple-700); + } + } + } .hover\:bg-white { &:hover { @media (hover: hover) { @@ -3027,6 +3232,21 @@ } } } + .hover\:underline { + &:hover { + @media (hover: hover) { + text-decoration-line: underline; + } + } + } + .hover\:shadow-md { + &:hover { + @media (hover: hover) { + --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + } .focus\:z-20 { &:focus { z-index: 20; @@ -3568,6 +3788,16 @@ display: none; } } + .md\:h-auto { + @media (width >= 48rem) { + height: auto; + } + } + .md\:w-1\/3 { + @media (width >= 48rem) { + width: calc(1/3 * 100%); + } + } .md\:w-64 { @media (width >= 48rem) { width: calc(var(--spacing) * 64); @@ -3706,6 +3936,16 @@ display: table-cell; } } + .lg\:w-1\/3 { + @media (width >= 64rem) { + width: calc(1/3 * 100%); + } + } + .lg\:w-2\/3 { + @media (width >= 64rem) { + width: calc(2/3 * 100%); + } + } .lg\:max-w-7xl { @media (width >= 64rem) { max-width: var(--container-7xl); @@ -3736,6 +3976,11 @@ grid-template-columns: repeat(4, minmax(0, 1fr)); } } + .lg\:flex-row { + @media (width >= 64rem) { + flex-direction: row; + } + } .lg\:px-8 { @media (width >= 64rem) { padding-inline: calc(var(--spacing) * 8); @@ -3919,6 +4164,48 @@ inherits: false; initial-value: 0; } +@property --tw-gradient-position { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-from { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-via { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-to { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-stops { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-via-stops { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-from-position { + syntax: ""; + inherits: false; + initial-value: 0%; +} +@property --tw-gradient-via-position { + syntax: ""; + inherits: false; + initial-value: 50%; +} +@property --tw-gradient-to-position { + syntax: ""; + inherits: false; + initial-value: 100%; +} @property --tw-leading { syntax: "*"; inherits: false;