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

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

@ -57,15 +57,24 @@
<span>Step 1</span>
<h2>Select a date</h2>
</header>
<div class="mcs-appt-date-strip">
<t t-foreach="day_options" t-as="day">
<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())">
<strong t-esc="day.strftime('%a')"/>
<span t-esc="day.strftime('%d')"/>
<small t-esc="day.strftime('%b')"/>
</a>
</t>
<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">
<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">
<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())">
<strong t-esc="day.strftime('%a')"/>
<span t-esc="day.strftime('%d')"/>
<small t-esc="day.strftime('%b')"/>
</a>
</t>
</div>
</div>
</div>