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

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

@ -51,22 +51,24 @@
</aside> </aside>
<main class="mcs-appt-booking"> <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"> <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"> <div class="mcs-appt-times">
<header class="mcs-appt-section-head"> <header class="mcs-appt-section-head">
<span>Step 2</span> <span>Step 2</span>
@ -91,8 +93,10 @@
</t> </t>
</div> </div>
</div> </div>
</section>
<aside class="mcs-appt-details"> <aside class="mcs-appt-details">
<div>
<header class="mcs-appt-section-head"> <header class="mcs-appt-section-head">
<span>Step 3</span> <span>Step 3</span>
<h2>Your details</h2> <h2>Your details</h2>
@ -101,24 +105,24 @@
<small>Selected time</small> <small>Selected time</small>
<strong class="js-mcs-selected-slot" t-esc="slots[0]['label']"/> <strong class="js-mcs-selected-slot" t-esc="slots[0]['label']"/>
</div> </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"> <div t-if="not slots" class="mcs-appt-selected-slot">
<small>Selected time</small> <small>Selected time</small>
<strong>Choose another date</strong> <strong>Choose another date</strong>
</div> </div>
</aside> </div>
</section> <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> </main>
</section> </section>
</div> </div>