coopgo-apps/parcoursmob-default-theme
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

evol: refonte visuelle trajets/disponibilités conducteur + font Poppins

Browse Source
This commit is contained in:
Arnaud Delcasse
2026-02-25 16:53:59 +01:00
parent 68ac6bb692
commit 10b2599f91
9 changed files with 135 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
emails/layout.html
View File

@@ -3,12 +3,13 @@
<head> <head>
<style> <style>
@font-face { @font-face {
font-family: "Bitter"; font-family: "Poppins";
font-style: normal; font-style: normal;
src: url("https://coopgo.fr/fonts/Bitter-Regular.woff") format("woff"); } font-weight: 400;
src: url("https://coopgo.fr/fonts/Poppins-Regular.woff2") format("woff2"); }
html { html {
font-family: Bitter, serif; font-family: Poppins, sans-serif;
} }
.bg-co-blue { .bg-co-blue {

24
web/assets/css/main.css
View File

@@ -16,14 +16,32 @@
src: url("https://coopgo.fr/fonts/manometer.woff2") format("woff2"), url("/fonts/manometer.woff") format("woff"); } src: url("https://coopgo.fr/fonts/manometer.woff2") format("woff2"), url("/fonts/manometer.woff") format("woff"); }
@font-face { @font-face {
font-family: "Bitter"; font-family: "Poppins";
font-style: normal; font-style: normal;
src: url("https://coopgo.fr/fonts/Bitter-Regular.woff") format("woff"); } font-weight: 400;
src: url("/public/fonts/Poppins-Regular.woff2") format("woff2"); }
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
src: url("/public/fonts/Poppins-Medium.woff2") format("woff2"); }
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
src: url("/public/fonts/Poppins-SemiBold.woff2") format("woff2"); }
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
src: url("/public/fonts/Poppins-Bold.woff2") format("woff2"); }
@layer base { @layer base {
html { html {
font-family: Bitter, serif; font-family: Poppins, sans-serif;
} }
input { input {
padding: 2px; padding: 2px;

65
web/layouts/organized_carpool/_partials/driver_availabilities.html
View File

@@ -8,50 +8,45 @@
<div class="px-4 py-5 sm:px-6"> <div class="px-4 py-5 sm:px-6">
<h2 id="timeline-title" class="text-lg font-medium text-gray-900">Trajets</h2> <h2 id="timeline-title" class="text-lg font-medium text-gray-900">Trajets</h2>
</div> </div>
<div class="border-t border-gray-200 px-4"> <div class="border-t border-gray-200 px-4 py-4 space-y-3">
<div class="">
{{ range .ViewState.trips }} {{ range .ViewState.trips }}
{{$departure := index .Features 0}} {{$departure := index .Features 0}}
{{$destination := index .Features 1}} {{$destination := index .Features 1}}
<div class="my-10"> {{$schedules := .ExtraMembers.properties.schedules}}
<div class="flex flex-row my-2"> {{$firstSchedule := index $schedules 0}}
{{range .ExtraMembers.properties.schedules}} <div class="border border-gray-200 rounded-2xl p-4">
<span class="p-1 text-xs mr-2 bg-co-blue text-white rounded-lg"> <div class="flex items-center justify-between mb-3">
{{ if eq .day "SUN"}}Dimanche <div class="flex gap-2">
{{ else if eq .day "MON"}}Lundi {{range $schedules}}
{{ else if eq .day "TUE"}}Mardi <span class="inline-flex items-center justify-center w-8 h-8 text-[10px] font-bold bg-co-blue text-white rounded-full leading-none">{{ if eq .day "MON"}}Lu{{ else if eq .day "TUE"}}Ma{{ else if eq .day "WED"}}Me{{ else if eq .day "THU"}}Je{{ else if eq .day "FRI"}}Ve{{ else if eq .day "SAT"}}Sa{{ else if eq .day "SUN"}}Di{{ end }}</span>
{{ else if eq .day "WED"}}Mercredi {{end}}
{{ else if eq .day "THU"}}Jeudi </div>
{{ else if eq .day "FRI"}}Vendredi <span class="text-sm font-bold text-gray-900">{{$firstSchedule.time_of_day}}</span>
{{ else if eq .day "SAT"}}Samedi
{{ end }}
{{.time_of_day}}
</span>
{{end}}
</div>
<div class="flex flex-row">
<div class="flex-1 text-sm">
{{$departure.Properties.label}}
</div> </div>
<div> <div class="relative ml-2">
{{$.IconSet.Icon "hero:outline/chevron-right" "h-5 w-5 mr-3"}} <div class="absolute left-[5px] top-[10px] bottom-[10px] w-0.5 bg-co-blue"></div>
<div class="relative flex items-center gap-3 mb-2">
<div class="w-3 h-3 rounded-full bg-co-blue shrink-0 z-10"></div>
<p class="text-sm text-gray-900 truncate" title="{{$departure.Properties.label}}">{{$departure.Properties.label}}</p>
</div>
<div class="relative flex items-center gap-3">
<div class="w-3 h-3 rounded-full border-2 border-co-blue bg-white shrink-0 z-10"></div>
<p class="text-sm text-gray-500 truncate" title="{{$destination.Properties.label}}">{{$destination.Properties.label}}</p>
</div>
</div> </div>
<div class="flex-1 text-sm text-right"> <div class="mt-3 flex justify-end">
{{$destination.Properties.label}} <a class="text-xs text-gray-400 hover:text-co-red transition-colors" href="/app/organized-carpool/drivers/{{$.ViewState.driver.ID}}/trips/{{.ExtraMembers.id}}/delete">Supprimer</a>
</div> </div>
</div> </div>
<div>
<div class="flex-none text-sm text-right"><a class="text-co-blue" href="/app/organized-carpool/drivers/{{$.ViewState.driver.ID}}/trips/{{.ExtraMembers.id}}/delete">Supprimer</a></div>
</div>
</div>
{{ end }} {{ end }}
</div>
<div class="px-4 py-4 text-center">
<button type="button" @click="availabilitiesdialog = !availabilitiesdialog"
class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2">
{{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
Ajouter un trajet
</button>
</div> </div>
<button type="button" @click="availabilitiesdialog = !availabilitiesdialog"
class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue my-4 px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
{{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
Ajouter un trajet
</button>
</div> </div>
<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true" <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true"
x-show="availabilitiesdialog"> x-show="availabilitiesdialog">

31
web/layouts/solidarity_transport/_partials/driver_availabilities.html
View File

@@ -7,28 +7,25 @@
<div class="px-4 py-5 sm:px-6"> <div class="px-4 py-5 sm:px-6">
<h2 id="timeline-title" class="text-lg font-medium text-gray-900">Disponibilités</h2> <h2 id="timeline-title" class="text-lg font-medium text-gray-900">Disponibilités</h2>
</div> </div>
<div class="border-t border-gray-200 px-4"> <div class="border-t border-gray-200 px-4 py-4 space-y-3">
<div class="py-4">
{{ range .ViewState.availabilities }} {{ range .ViewState.availabilities }}
<div class="flex flex-row"> <div class="border border-gray-200 rounded-2xl p-3">
<div class="flex-none"> <div class="flex items-center gap-2.5">
{{ if eq .Day 0}}Dimanche <span class="inline-flex items-center justify-center w-9 h-9 text-[10px] font-bold bg-co-blue text-white rounded-full leading-none shrink-0">{{ if eq .Day 0}}Di{{ else if eq .Day 1}}Lu{{ else if eq .Day 2}}Ma{{ else if eq .Day 3}}Me{{ else if eq .Day 4}}Je{{ else if eq .Day 5}}Ve{{ else if eq .Day 6}}Sa{{ end }}</span>
{{ else if eq .Day 1}}Lundi <div class="min-w-0">
{{ else if eq .Day 2}}Mardi <p class="text-xs font-semibold text-gray-900">{{ if eq .Day 0}}Dimanche{{ else if eq .Day 1}}Lundi{{ else if eq .Day 2}}Mardi{{ else if eq .Day 3}}Mercredi{{ else if eq .Day 4}}Jeudi{{ else if eq .Day 5}}Vendredi{{ else if eq .Day 6}}Samedi{{ end }} <span class="font-normal text-gray-500">{{.StartTime}} — {{.EndTime}}</span></p>
{{ else if eq .Day 3}}Mercredi {{if .Address}}<p class="text-[11px] text-gray-400 leading-tight mt-0.5" title="{{.Address.Properties.label}}">{{.Address.Properties.label}}</p>{{end}}
{{ else if eq .Day 4}}Jeudi </div>
{{ else if eq .Day 5}}Vendredi </div>
{{ else if eq .Day 6}}Samedi <div class="mt-1.5 flex justify-end">
{{ end }} <a class="text-[10px] text-gray-400 hover:text-co-red transition-colors" href="/app/solidarity-transport/drivers/{{$.ViewState.driver.ID}}/availabilities/{{.ID}}/delete">Supprimer</a>
{{.StartTime}} - {{ .EndTime }}
</div> </div>
<div class="flex-auto">&nbsp;</div>
<div class="flex-none text-sm"><a class="text-co-blue" href="/app/solidarity-transport/drivers/{{$.ViewState.driver.ID}}/availabilities/{{.Id}}/delete">Supprimer</a></div>
</div> </div>
{{ end }} {{ end }}
</div> </div>
<div class="px-4 py-4 text-center">
<button type="button" @click="availabilitiesdialog = !availabilitiesdialog" <button type="button" @click="availabilitiesdialog = !availabilitiesdialog"
class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue my-4 px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-ci-blue focus:ring-offset-2 sm:w-auto"> class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2">
{{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}} {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
Ajouter une disponibilité Ajouter une disponibilité
</button> </button>

145
web/public/css/main.css
View File

@@ -13,9 +13,7 @@
--color-orange-50: oklch(0.98 0.016 73.684); --color-orange-50: oklch(0.98 0.016 73.684);
--color-orange-200: oklch(0.901 0.076 70.697); --color-orange-200: oklch(0.901 0.076 70.697);
--color-yellow-50: oklch(0.987 0.026 102.212); --color-yellow-50: oklch(0.987 0.026 102.212);
--color-green-50: oklch(0.982 0.018 155.826);
--color-green-100: oklch(0.962 0.044 156.743); --color-green-100: oklch(0.962 0.044 156.743);
--color-green-200: oklch(0.925 0.084 155.995);
--color-green-600: oklch(0.627 0.194 149.214); --color-green-600: oklch(0.627 0.194 149.214);
--color-green-800: oklch(0.448 0.119 151.328); --color-green-800: oklch(0.448 0.119 151.328);
--color-blue-50: oklch(0.97 0.014 254.604); --color-blue-50: oklch(0.97 0.014 254.604);
@@ -70,6 +68,7 @@
--font-weight-extrabold: 800; --font-weight-extrabold: 800;
--tracking-tight: -0.025em; --tracking-tight: -0.025em;
--tracking-wide: 0.025em; --tracking-wide: 0.025em;
--leading-tight: 1.25;
--radius-md: 0.375rem; --radius-md: 0.375rem;
--radius-lg: 0.5rem; --radius-lg: 0.5rem;
--radius-xl: 0.75rem; --radius-xl: 0.75rem;
@@ -318,18 +317,27 @@
.top-4 { .top-4 {
top: calc(var(--spacing) * 4); top: calc(var(--spacing) * 4);
} }
.top-\[10px\] {
top: 10px;
}
.right-0 { .right-0 {
right: calc(var(--spacing) * 0); right: calc(var(--spacing) * 0);
} }
.right-4 { .right-4 {
right: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4);
} }
.bottom-\[10px\] {
bottom: 10px;
}
.left-0 { .left-0 {
left: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0);
} }
.left-4 { .left-4 {
left: calc(var(--spacing) * 4); left: calc(var(--spacing) * 4);
} }
.left-\[5px\] {
left: 5px;
}
.isolate { .isolate {
isolation: isolate; isolation: isolate;
} }
@@ -498,18 +506,12 @@
.-my-2 { .-my-2 {
margin-block: calc(var(--spacing) * -2); margin-block: calc(var(--spacing) * -2);
} }
.my-2 {
margin-block: calc(var(--spacing) * 2);
}
.my-4 { .my-4 {
margin-block: calc(var(--spacing) * 4); margin-block: calc(var(--spacing) * 4);
} }
.my-8 { .my-8 {
margin-block: calc(var(--spacing) * 8); margin-block: calc(var(--spacing) * 8);
} }
.my-10 {
margin-block: calc(var(--spacing) * 10);
}
.-mt-2 { .-mt-2 {
margin-top: calc(var(--spacing) * -2); margin-top: calc(var(--spacing) * -2);
} }
@@ -525,6 +527,9 @@
.mt-1 { .mt-1 {
margin-top: calc(var(--spacing) * 1); margin-top: calc(var(--spacing) * 1);
} }
.mt-1\.5 {
margin-top: calc(var(--spacing) * 1.5);
}
.mt-2 { .mt-2 {
margin-top: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2);
} }
@@ -736,6 +741,9 @@
.h-8 { .h-8 {
height: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8);
} }
.h-9 {
height: calc(var(--spacing) * 9);
}
.h-10 { .h-10 {
height: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10);
} }
@@ -814,6 +822,9 @@
.w-8 { .w-8 {
width: calc(var(--spacing) * 8); width: calc(var(--spacing) * 8);
} }
.w-9 {
width: calc(var(--spacing) * 9);
}
.w-10 { .w-10 {
width: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10);
} }
@@ -919,6 +930,9 @@
.shrink { .shrink {
flex-shrink: 1; flex-shrink: 1;
} }
.shrink-0 {
flex-shrink: 0;
}
.flex-grow { .flex-grow {
flex-grow: 1; flex-grow: 1;
} }
@@ -1332,6 +1346,9 @@
.gap-2 { .gap-2 {
gap: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 2);
} }
.gap-2\.5 {
gap: calc(var(--spacing) * 2.5);
}
.gap-3 { .gap-3 {
gap: calc(var(--spacing) * 3); gap: calc(var(--spacing) * 3);
} }
@@ -1794,9 +1811,6 @@
.border-gray-300 { .border-gray-300 {
border-color: var(--color-gray-300); border-color: var(--color-gray-300);
} }
.border-green-200 {
border-color: var(--color-green-200);
}
.border-indigo-500 { .border-indigo-500 {
border-color: var(--color-indigo-500); border-color: var(--color-indigo-500);
} }
@@ -1884,9 +1898,6 @@
.bg-gray-900 { .bg-gray-900 {
background-color: var(--color-gray-900); background-color: var(--color-gray-900);
} }
.bg-green-50 {
background-color: var(--color-green-50);
}
.bg-green-100 { .bg-green-100 {
background-color: var(--color-green-100); background-color: var(--color-green-100);
} }
@@ -1931,10 +1942,6 @@
--tw-gradient-position: in oklab; --tw-gradient-position: in oklab;
background-image: conic-gradient(var(--tw-gradient-stops)); 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 { .bg-radial {
--tw-gradient-position: in oklab; --tw-gradient-position: in oklab;
background-image: radial-gradient(var(--tw-gradient-stops)); background-image: radial-gradient(var(--tw-gradient-stops));
@@ -1945,14 +1952,6 @@
.via-none { .via-none {
--tw-gradient-via-stops: initial; --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-blue-600 {
--tw-gradient-to: var(--color-blue-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));
}
.box-decoration-clone { .box-decoration-clone {
-webkit-box-decoration-break: clone; -webkit-box-decoration-break: clone;
box-decoration-break: clone; box-decoration-break: clone;
@@ -2343,6 +2342,12 @@
font-size: var(--text-sm); font-size: var(--text-sm);
line-height: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6);
} }
.text-\[10px\] {
font-size: 10px;
}
.text-\[11px\] {
font-size: 11px;
}
.leading-4 { .leading-4 {
--tw-leading: calc(var(--spacing) * 4); --tw-leading: calc(var(--spacing) * 4);
line-height: calc(var(--spacing) * 4); line-height: calc(var(--spacing) * 4);
@@ -2359,6 +2364,10 @@
--tw-leading: 1; --tw-leading: 1;
line-height: 1; line-height: 1;
} }
.leading-tight {
--tw-leading: var(--leading-tight);
line-height: var(--leading-tight);
}
.font-bold { .font-bold {
--tw-font-weight: var(--font-weight-bold); --tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
@@ -2460,9 +2469,6 @@
.\[color\:red\]\/50\! { .\[color\:red\]\/50\! {
color: color-mix(in oklab, red 50%, transparent) !important; color: color-mix(in oklab, red 50%, transparent) !important;
} }
.text-blue-100 {
color: var(--color-blue-100);
}
.text-blue-800 { .text-blue-800 {
color: var(--color-blue-800); color: var(--color-blue-800);
} }
@@ -3205,6 +3211,13 @@
} }
} }
} }
.hover\:text-co-red {
&:hover {
@media (hover: hover) {
color: var(--color-co-red);
}
}
}
.hover\:text-co-red\/80 { .hover\:text-co-red\/80 {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
@@ -3240,13 +3253,6 @@
} }
} }
} }
.hover\:text-green-800 {
&:hover {
@media (hover: hover) {
color: var(--color-green-800);
}
}
}
.hover\:text-inherit { .hover\:text-inherit {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
@@ -4071,13 +4077,32 @@
src: url("https://coopgo.fr/fonts/manometer.woff2") format("woff2"), url("/fonts/manometer.woff") format("woff"); src: url("https://coopgo.fr/fonts/manometer.woff2") format("woff2"), url("/fonts/manometer.woff") format("woff");
} }
@font-face { @font-face {
font-family: "Bitter"; font-family: "Poppins";
font-style: normal; font-style: normal;
src: url("https://coopgo.fr/fonts/Bitter-Regular.woff") format("woff"); font-weight: 400;
src: url("/public/fonts/Poppins-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
src: url("/public/fonts/Poppins-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
src: url("/public/fonts/Poppins-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
src: url("/public/fonts/Poppins-Bold.woff2") format("woff2");
} }
@layer base { @layer base {
html { html {
font-family: Bitter, serif; font-family: Poppins, sans-serif;
} }
input { input {
padding: 2px; padding: 2px;
@@ -4180,48 +4205,6 @@
inherits: false; inherits: false;
initial-value: 0; initial-value: 0;
} }
@property --tw-gradient-position {
syntax: "*";
inherits: false;
}
@property --tw-gradient-from {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-via {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-to {
syntax: "<color>";
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: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
@property --tw-gradient-via-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 50%;
}
@property --tw-gradient-to-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-leading { @property --tw-leading {
syntax: "*"; syntax: "*";
inherits: false; inherits: false;

BIN
web/public/fonts/Poppins-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
web/public/fonts/Poppins-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
web/public/fonts/Poppins-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
web/public/fonts/Poppins-SemiBold.woff2 Normal file
View File

Binary file not shown.