From 4d678fbf4f70f0d7bdf9ff37ceb71f0e80e5a73e Mon Sep 17 00:00:00 2001
From: rrebollo <rolandoperezrebollo@gmail.com>
Date: Tue, 6 Feb 2024 05:40:27 -0500
Subject: [PATCH] [FIX] resource_booking: portal responsive booking calendar
 table going wider and no x scroll

---
 resource_booking/templates/portal.xml | 203 +++++++++++++-------------
 1 file changed, 105 insertions(+), 98 deletions(-)

diff --git a/resource_booking/templates/portal.xml b/resource_booking/templates/portal.xml
index 8931d7ee..1b8e2fe1 100644
--- a/resource_booking/templates/portal.xml
+++ b/resource_booking/templates/portal.xml
@@ -32,110 +32,117 @@
                 </a>
             </div>
             <!-- Monthly calendar -->
-            <table class="table table-responsive-md text-center">
-                <thead t-if="booking.requester_advice">
-                    <tr>
-                        <td colspan="7">
-                            <div t-field="booking.requester_advice" />
-                        </td>
-                    </tr>
-                </thead>
-                <thead class="thead-dark">
-                    <tr>
-                        <th class="text-left">
-                            <a
-                                t-if="start > now"
-                                t-att-href="booking.get_portal_url(suffix='/schedule/%d/%d' % (start_previous.year, start_previous.month))"
-                                class="btn btn-secondary"
-                                title="Previous month"
-                            >
-                                <i class="fa fa-chevron-left" />
-                            </a>
-                        </th>
-                        <th
-                            class="align-middle"
-                            colspan="5"
-                            t-out="start.strftime('%B %Y')"
-                        />
-                        <th class="text-right">
-                            <a
-                                t-att-href="booking.get_portal_url(suffix='/schedule/%d/%d' % (start_next.year, start_next.month))"
-                                class="btn btn-secondary"
-                                title="Next month"
-                            >
-                                <i class="fa fa-chevron-right" />
-                            </a>
-                        </th>
-                    </tr>
-                </thead>
-                <thead>
-                    <tr>
-                        <t t-foreach="calendar.iterweekdays()" t-as="weekday">
+            <div class="table-responsive-md">
+                <table class="table text-center">
+                    <thead t-if="booking.requester_advice">
+                        <tr>
+                            <td colspan="7">
+                                <div t-field="booking.requester_advice" />
+                            </td>
+                        </tr>
+                    </thead>
+                    <thead class="thead-dark">
+                        <tr>
+                            <th class="text-left">
+                                <a
+                                    t-if="start > now"
+                                    t-att-href="booking.get_portal_url(suffix='/schedule/%d/%d' % (start_previous.year, start_previous.month))"
+                                    class="btn btn-secondary"
+                                    title="Previous month"
+                                >
+                                    <i class="fa fa-chevron-left" />
+                                </a>
+                            </th>
                             <th
-                                t-att-title="weekday_names[str(weekday + 1)]"
-                                t-out="weekday_names[str(weekday + 1)][:3]"
+                                class="align-middle"
+                                colspan="5"
+                                t-out="start.strftime('%B %Y')"
                             />
-                        </t>
-                    </tr>
-                </thead>
-                <tbody>
-                    <t
-                        t-foreach="calendar.monthdatescalendar(start.year, start.month)"
-                        t-as="week"
-                    >
-                        <tr>
-                            <t t-foreach="week" t-as="day">
-                                <td
-                                    t-att-class="day.month != start.month and 'text-muted'"
+                            <th class="text-right">
+                                <a
+                                    t-att-href="booking.get_portal_url(suffix='/schedule/%d/%d' % (start_next.year, start_next.month))"
+                                    class="btn btn-secondary"
+                                    title="Next month"
                                 >
-                                    <t
-                                        t-if="day.month == start.month and slots.get(day)"
+                                    <i class="fa fa-chevron-right" />
+                                </a>
+                            </th>
+                        </tr>
+                    </thead>
+                    <thead>
+                        <tr>
+                            <t t-foreach="calendar.iterweekdays()" t-as="weekday">
+                                <th
+                                    t-att-title="weekday_names[str(weekday + 1)]"
+                                    t-out="weekday_names[str(weekday + 1)][:3]"
+                                />
+                            </t>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <t
+                            t-foreach="calendar.monthdatescalendar(start.year, start.month)"
+                            t-as="week"
+                        >
+                            <tr>
+                                <t t-foreach="week" t-as="day">
+                                    <td
+                                        t-att-class="day.month != start.month and 'text-muted'"
                                     >
-                                        <!-- Day dropdown -->
-                                        <div class="dropdown">
-                                            <button
-                                                class="btn btn-primary dropdown-toggle"
-                                                type="button"
-                                                data-bs-toggle="dropdown"
-                                                aria-haspopup="true"
-                                                aria-expanded="false"
-                                                t-out="day.day"
-                                                t-attf-id="dropdown-trigger-#{day.isoformat()}"
-                                            />
-                                            <div
-                                                class="dropdown-menu slots-dropdown"
-                                                t-attf-aria-labelledby="dropdown-trigger-#{day.isoformat()}"
-                                            >
-                                                <t t-foreach="slots[day]" t-as="slot">
-                                                    <!-- Hour item to open confirmation -->
-                                                    <button
-                                                        class="dropdown-item"
-                                                        type="button"
-                                                        data-bs-toggle="modal"
-                                                        t-attf-data-bs-target="#modal-confirm-#{int(slot.timestamp())}"
-                                                        t-out="slot.strftime(time_format)"
-                                                    />
-                                                </t>
+                                        <t
+                                            t-if="day.month == start.month and slots.get(day)"
+                                        >
+                                            <!-- Day dropdown -->
+                                            <div class="dropdown">
+                                                <button
+                                                    class="btn btn-primary dropdown-toggle"
+                                                    type="button"
+                                                    data-bs-toggle="dropdown"
+                                                    aria-haspopup="true"
+                                                    aria-expanded="false"
+                                                    t-out="day.day"
+                                                    t-attf-id="dropdown-trigger-#{day.isoformat()}"
+                                                />
+                                                <div
+                                                    class="dropdown-menu slots-dropdown"
+                                                    t-attf-aria-labelledby="dropdown-trigger-#{day.isoformat()}"
+                                                >
+                                                    <t
+                                                        t-foreach="slots[day]"
+                                                        t-as="slot"
+                                                    >
+                                                        <!-- Hour item to open confirmation -->
+                                                        <button
+                                                            class="dropdown-item"
+                                                            type="button"
+                                                            data-bs-toggle="modal"
+                                                            t-attf-data-bs-target="#modal-confirm-#{int(slot.timestamp())}"
+                                                            t-out="slot.strftime(time_format)"
+                                                        />
+                                                    </t>
+                                                </div>
                                             </div>
-                                        </div>
-                                    </t>
-                                    <t t-else="">
-                                        <t t-out="day.day" />
-                                    </t>
-                                </td>
-                            </t>
+                                        </t>
+                                        <t t-else="">
+                                            <t t-out="day.day" />
+                                        </t>
+                                    </td>
+                                </t>
+                            </tr>
+                        </t>
+                    </tbody>
+                    <tfoot>
+                        <tr>
+                            <td
+                                colspan="7"
+                            > All times are displayed using this timezone: <strong
+                                    t-field="booking.type_id.resource_calendar_id.tz"
+                                />
+                            </td>
                         </tr>
-                    </t>
-                </tbody>
-                <tfoot>
-                    <tr>
-                        <td colspan="7">
-                            All times are displayed using this timezone:
-                            <strong t-field="booking.type_id.resource_calendar_id.tz" />
-                        </td>
-                    </tr>
-                </tfoot>
-            </table>
+                    </tfoot>
+                </table>
+            </div>
             <!-- Hour confirmation modals -->
             <t
                 t-foreach="calendar.monthdatescalendar(start.year, start.month)"