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

Compact appointment calendar and form layout

Browse Source
This commit is contained in:
metatroncubeswdev 2026-08-31 19:19:02 -04:00
parent 630a0f5046
commit 4ba025f572
2 changed files with 80 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
--mcs-appt-teal: #0f766e;
min-height: calc(100vh - 76px);
padding: 42px 18px 72px;
padding: 28px 18px 56px;
background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
color: var(--mcs-appt-ink);
font-family: Inter, Manrope, "Segoe UI", sans-serif;
@ -22,7 +22,7 @@
.mcs-appt-shell {
display: grid;
grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
gap: 0;
max-width: 1240px;
margin: 0 auto;
@ -34,13 +34,13 @@
}
.mcs-appt-info {
padding: 30px;
padding: 26px;
background: var(--mcs-appt-navy);
color: #ffffff;
h1 {
margin: 18px 0 18px;
font-size: clamp(2rem, 4vw, 3rem);
margin: 14px 0 16px;
font-size: clamp(1.9rem, 3vw, 2.55rem);
line-height: 1.04;
font-weight: 820;
}
@ -48,7 +48,7 @@
.mcs-appt-back {
display: inline-flex;
margin-bottom: 28px;
margin-bottom: 22px;
color: rgba(255, 255, 255, 0.82);
font-weight: 800;
text-decoration: none;
@ -79,8 +79,8 @@
}
.mcs-appt-note {
margin-top: 28px;
padding: 16px;
margin-top: 22px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
background: rgba(255, 255, 255, 0.07);
@ -89,7 +89,7 @@
.mcs-appt-booking {
min-width: 0;
padding: 28px;
padding: 24px;
}
.mcs-appt-section-head {
@ -97,7 +97,7 @@
align-items: end;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
margin-bottom: 12px;
span {
color: var(--mcs-appt-blue);
@ -109,7 +109,7 @@
h2 {
margin: 0;
font-size: 1.24rem;
font-size: 1.12rem;
line-height: 1.25;
font-weight: 840;
}
@ -122,15 +122,14 @@
.mcs-appt-date-strip {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
max-width: 560px;
gap: 6px;
}
.mcs-appt-date {
display: grid;
min-height: 66px;
min-height: 54px;
place-items: center;
padding: 8px 6px;
padding: 6px;
border: 1px solid var(--mcs-appt-line);
border-radius: 10px;
background: #ffffff;
@ -147,12 +146,13 @@
span {
color: var(--mcs-appt-ink);
font-size: 1.18rem;
font-size: 1rem;
line-height: 1;
font-weight: 850;
}
small {
font-size: 0.72rem;
font-weight: 800;
}
@ -184,12 +184,13 @@
.mcs-appt-workspace {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
gap: 20px;
margin-top: 28px;
grid-template-columns: minmax(300px, 480px) minmax(340px, 1fr);
gap: 22px;
margin-top: 0;
align-items: start;
}
.mcs-appt-calendar,
.mcs-appt-times,
.mcs-appt-details {
min-width: 0;
@ -203,30 +204,32 @@
.mcs-appt-slot-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
gap: 9px;
max-height: 540px;
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
gap: 8px;
max-height: 284px;
overflow-y: auto;
padding-right: 4px;
}
.mcs-appt-time {
display: grid;
gap: 2px;
min-height: 66px;
gap: 1px;
min-height: 54px;
border: 1px solid var(--mcs-appt-line);
border-radius: 10px;
padding: 10px;
padding: 8px 10px;
background: #ffffff;
color: var(--mcs-appt-ink);
text-align: left;
transition: border-color 160ms ease-out, background 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
span {
font-size: 0.95rem;
font-weight: 850;
}
small {
font-size: 0.78rem;
color: var(--mcs-appt-muted);
font-weight: 800;
}
@ -244,13 +247,13 @@
.mcs-appt-form {
display: grid;
gap: 16px;
gap: 14px;
}
.mcs-appt-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
label {
display: grid;
@ -262,7 +265,7 @@
input,
textarea {
width: 100%;
min-height: 46px;
min-height: 42px;
border: 1px solid var(--mcs-appt-line);
border-radius: 10px;
padding: 11px 12px;
@ -271,13 +274,13 @@
}
textarea {
min-height: 104px;
min-height: 84px;
resize: vertical;
}
}
.mcs-appt-form-wide {
grid-column: 1 / -1;
grid-column: span 2;
}
.mcs-appt-form button {
@ -298,9 +301,11 @@
}
.mcs-appt-details {
position: sticky;
top: 96px;
padding: 18px;
display: grid;
grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
gap: 18px;
margin-top: 22px;
padding: 16px;
border: 1px solid #cbd8f7;
border-radius: 14px;
background: #f8fbff;
@ -309,8 +314,8 @@
.mcs-appt-selected-slot {
display: grid;
gap: 4px;
margin-bottom: 16px;
padding: 12px;
margin-bottom: 0;
padding: 11px;
border: 1px solid var(--mcs-appt-line);
border-radius: 10px;
background: #ffffff;
@ -343,7 +348,7 @@
}
.mcs-appt-details {
position: static;
grid-template-columns: 1fr;
}
}
@ -352,12 +357,14 @@
padding: 18px 12px 42px;
}
.mcs-appt-form-grid {
.mcs-appt-form-grid,
.mcs-appt-workspace,
.mcs-appt-details {
grid-template-columns: 1fr;
}
.mcs-appt-date-strip {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mcs-appt-section-head {

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

@ -51,22 +51,24 @@
</aside>
<main class="mcs-appt-booking">
<header class="mcs-appt-section-head">
<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>
<section class="mcs-appt-workspace">
<div class="mcs-appt-calendar">
<header class="mcs-appt-section-head">
<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>
</div>
<div class="mcs-appt-times">
<header class="mcs-appt-section-head">
<span>Step 2</span>
@ -91,8 +93,10 @@
</t>
</div>
</div>
</section>
<aside class="mcs-appt-details">
<aside class="mcs-appt-details">
<div>
<header class="mcs-appt-section-head">
<span>Step 3</span>
<h2>Your details</h2>
@ -101,24 +105,24 @@
<small>Selected time</small>
<strong class="js-mcs-selected-slot" t-esc="slots[0]['label']"/>
</div>
<form t-if="slots" t-att-action="'/appointments/%s/book' % appointment_type.id" method="post" class="mcs-appt-form">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<input type="hidden" name="start" class="js-mcs-start" t-att-value="slots[0]['start']"/>
<input type="hidden" name="stop" class="js-mcs-stop" t-att-value="slots[0]['stop']"/>
<div class="mcs-appt-form-grid">
<label>Name<input name="customer_name" required="required"/></label>
<label>Email<input name="customer_email" type="email" required="required"/></label>
<label>Phone<input name="customer_phone"/></label>
<label class="mcs-appt-form-wide">Notes<textarea name="notes" rows="3"/></label>
</div>
<button type="submit">Confirm Appointment</button>
</form>
<div t-if="not slots" class="mcs-appt-selected-slot">
<small>Selected time</small>
<strong>Choose another date</strong>
</div>
</aside>
</section>
</div>
<form t-if="slots" t-att-action="'/appointments/%s/book' % appointment_type.id" method="post" class="mcs-appt-form">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<input type="hidden" name="start" class="js-mcs-start" t-att-value="slots[0]['start']"/>
<input type="hidden" name="stop" class="js-mcs-stop" t-att-value="slots[0]['stop']"/>
<div class="mcs-appt-form-grid">
<label>Name<input name="customer_name" required="required"/></label>
<label>Email<input name="customer_email" type="email" required="required"/></label>
<label>Phone<input name="customer_phone"/></label>
<label class="mcs-appt-form-wide">Notes<textarea name="notes" rows="3"/></label>
</div>
<button type="submit">Confirm Appointment</button>
</form>
</aside>
</main>
</section>
</div>