MetatroncubeSoftwareSolutions/odoo-metatroncube
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish appointment calendar alignment

Browse Source
This commit is contained in:
metatroncubeswdev 2026-09-01 00:41:26 -04:00
parent 4ba025f572
commit 0595267a8c
3 changed files with 82 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
addons/mcs_appointment_booking/controllers/main.py
View File

@ -71,12 +71,14 @@ class McsAppointmentController(http.Controller):
if selected_day > max_day: if selected_day > max_day:
selected_day = max_day selected_day = max_day
day_options = [today + timedelta(days=index) for index in range(appointment_type.max_schedule_days)] day_options = [today + timedelta(days=index) for index in range(appointment_type.max_schedule_days)]
calendar_blanks = list(range(day_options[0].weekday())) if day_options else []
return request.render( return request.render(
"mcs_appointment_booking.appointment_type_page", "mcs_appointment_booking.appointment_type_page",
{ {
"appointment_type": appointment_type, "appointment_type": appointment_type,
"selected_day": selected_day, "selected_day": selected_day,
"day_options": day_options, "day_options": day_options,
"calendar_blanks": calendar_blanks,
"slots": self._display_slots(appointment_type, selected_day), "slots": self._display_slots(appointment_type, selected_day),
}, },
) )

84
addons/mcs_appointment_booking/static/src/scss/appointment_booking.scss
View File

@ -22,7 +22,7 @@
.mcs-appt-shell { .mcs-appt-shell {
display: grid; display: grid;
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
gap: 0; gap: 0;
max-width: 1240px; max-width: 1240px;
margin: 0 auto; margin: 0 auto;
@ -89,7 +89,7 @@
.mcs-appt-booking { .mcs-appt-booking {
min-width: 0; min-width: 0;
padding: 24px; padding: 20px;
} }
.mcs-appt-section-head { .mcs-appt-section-head {
@ -122,16 +122,45 @@
.mcs-appt-date-strip { .mcs-appt-date-strip {
display: grid; display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px; gap: 4px;
}
.mcs-appt-calendar-card {
max-width: 330px;
padding: 10px;
border: 1px solid var(--mcs-appt-line);
border-radius: 10px;
background: #ffffff;
}
.mcs-appt-month {
margin-bottom: 8px;
color: var(--mcs-appt-ink);
font-size: 0.9rem;
font-weight: 850;
}
.mcs-appt-weekdays {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
margin-bottom: 5px;
span {
color: var(--mcs-appt-muted);
font-size: 0.68rem;
font-weight: 850;
text-align: center;
}
} }
.mcs-appt-date { .mcs-appt-date {
display: grid; display: grid;
min-height: 54px; min-height: 38px;
place-items: center; place-items: center;
padding: 6px; padding: 3px;
border: 1px solid var(--mcs-appt-line); border: 1px solid var(--mcs-appt-line);
border-radius: 10px; border-radius: 8px;
background: #ffffff; background: #ffffff;
color: var(--mcs-appt-muted); color: var(--mcs-appt-muted);
text-align: center; text-align: center;
@ -139,14 +168,14 @@
transition: border-color 160ms ease-out, background 160ms ease-out, color 160ms ease-out, transform 160ms ease-out; transition: border-color 160ms ease-out, background 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
strong, strong,
span,
small { small {
display: block; display: none;
} }
span { span {
display: block;
color: var(--mcs-appt-ink); color: var(--mcs-appt-ink);
font-size: 1rem; font-size: 0.84rem;
line-height: 1; line-height: 1;
font-weight: 850; font-weight: 850;
} }
@ -167,6 +196,11 @@
} }
} }
.mcs-appt-date--blank {
visibility: hidden;
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
.mcs-appt-date:hover { .mcs-appt-date:hover {
border-color: var(--mcs-appt-blue); border-color: var(--mcs-appt-blue);
@ -184,7 +218,7 @@
.mcs-appt-workspace { .mcs-appt-workspace {
display: grid; display: grid;
grid-template-columns: minmax(300px, 480px) minmax(340px, 1fr); grid-template-columns: 330px minmax(360px, 1fr);
gap: 22px; gap: 22px;
margin-top: 0; margin-top: 0;
align-items: start; align-items: start;
@ -204,9 +238,9 @@
.mcs-appt-slot-grid { .mcs-appt-slot-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px; gap: 8px;
max-height: 284px; max-height: 252px;
overflow-y: auto; overflow-y: auto;
padding-right: 4px; padding-right: 4px;
} }
@ -214,10 +248,10 @@
.mcs-appt-time { .mcs-appt-time {
display: grid; display: grid;
gap: 1px; gap: 1px;
min-height: 54px; min-height: 48px;
border: 1px solid var(--mcs-appt-line); border: 1px solid var(--mcs-appt-line);
border-radius: 10px; border-radius: 10px;
padding: 8px 10px; padding: 7px 10px;
background: #ffffff; background: #ffffff;
color: var(--mcs-appt-ink); color: var(--mcs-appt-ink);
text-align: left; text-align: left;
@ -252,7 +286,7 @@
.mcs-appt-form-grid { .mcs-appt-form-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px; gap: 12px;
label { label {
@ -280,11 +314,11 @@
} }
.mcs-appt-form-wide { .mcs-appt-form-wide {
grid-column: span 2; grid-column: 1 / -1;
} }
.mcs-appt-form button { .mcs-appt-form button {
justify-self: start; justify-self: end;
min-height: 46px; min-height: 46px;
border: 0; border: 0;
border-radius: 10px; border-radius: 10px;
@ -302,20 +336,22 @@
.mcs-appt-details { .mcs-appt-details {
display: grid; display: grid;
grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
gap: 18px; gap: 16px;
margin-top: 22px; margin-top: 16px;
padding: 16px; padding: 16px;
border: 1px solid #cbd8f7; border: 1px solid #cbd8f7;
border-radius: 14px; border-radius: 14px;
background: #f8fbff; background: #f8fbff;
align-items: start;
} }
.mcs-appt-selected-slot { .mcs-appt-selected-slot {
display: grid; display: grid;
gap: 4px; gap: 4px;
margin-bottom: 0; margin-bottom: 0;
padding: 11px; min-height: 84px;
padding: 12px;
border: 1px solid var(--mcs-appt-line); border: 1px solid var(--mcs-appt-line);
border-radius: 10px; border-radius: 10px;
background: #ffffff; background: #ffffff;
@ -347,6 +383,10 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.mcs-appt-calendar-card {
max-width: none;
}
.mcs-appt-details { .mcs-appt-details {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -364,7 +404,7 @@
} }
.mcs-appt-date-strip { .mcs-appt-date-strip {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(7, minmax(0, 1fr));
} }
.mcs-appt-section-head { .mcs-appt-section-head {

9
addons/mcs_appointment_booking/views/appointment_templates.xml
View File

@ -57,7 +57,15 @@
<span>Step 1</span> <span>Step 1</span>
<h2>Select a date</h2> <h2>Select a date</h2>
</header> </header>
<div class="mcs-appt-calendar-card">
<div class="mcs-appt-month" t-esc="selected_day.strftime('%B %Y')"/>
<div class="mcs-appt-weekdays">
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class="mcs-appt-date-strip"> <div class="mcs-appt-date-strip">
<t t-foreach="calendar_blanks" t-as="blank">
<span class="mcs-appt-date mcs-appt-date--blank"/>
</t>
<t t-foreach="day_options" t-as="day"> <t t-foreach="day_options" t-as="day">
<a t-attf-class="mcs-appt-date #{'active' if day == selected_day else ''}" <a t-attf-class="mcs-appt-date #{'active' if day == selected_day else ''}"
t-att-href="'/appointments/%s?date=%s' % (appointment_type.id, day.isoformat())"> t-att-href="'/appointments/%s?date=%s' % (appointment_type.id, day.isoformat())">
@ -68,6 +76,7 @@
</t> </t>
</div> </div>
</div> </div>
</div>
<div class="mcs-appt-times"> <div class="mcs-appt-times">
<header class="mcs-appt-section-head"> <header class="mcs-appt-section-head">