[UPD] CSS, sticky, portal document nav-tabs

templates/operation_templates_page.xml

@@ -4,25 +4,24 @@
 <odoo>
     <template id='sticky_nav_filters'>
         <div
-            class="sticky-top pb-2 bg-white"
+            class="sticky-top2 pb-2 bg-light"
             style="border-bottom: 1px solid rgb(244, 230, 236);"
         >
             <div class="d-block d-md-none">
                 <t t-call="oacc_portal.nav_menu_sm" />
             </div>
-            <div class="container-fluid">
-                <div class="row">
+            <div>
                 <!-- Title + search -->
-                    <div class="col-12">
+                <div>
                     <h3 class="text-center mt-2 text-uppercase">Mes documents</h3>
                 </div>
-                    <div class="col-12">
+                <div class="text-center">
+                <div class="text-center d-inline-block">
                     <form
-                            class=" pt-3"
                             t-att-action="'/operation/%s/document' % (slug(operation))"
                             method="get"
                         >
-                            <div class="input-group input-group-sm mb-3">
+                        <div class="input-group input-group-sm mb-1">
                             <input
                                     type="search"
                                     name="search-doc"
@@ -49,17 +48,53 @@
     <!-- Operation Document template -->
     <template id='operation_document' name="Operation Document">
         <t t-call="oacc_portal.layout_op">
-            <div class="row bg-white">
+            <div class="row">
                 <t t-call="oacc_portal_document.sticky_nav_filters" />
                 <!-- Documents -->
-                <div class="col-12 p-4" t-if="contracts">
+                <div class="col-12" t-if="contracts">
+                    <ul class="my-2 nav nav-tabs" id="myTab" role="tablist">
+                        <t t-foreach="contracts_type" t-as="type" t-key="type_index">
+                            <t
+                                t-set="selected_contacts"
+                                t-value="contracts.filtered(lambda c: c.type == type[0])"
+                            />
+                            <t t-if="selected_contacts">
+
+                                <li class="nav-item" role="presentation">
+                                <button
+                                        t-attf-class="nav-link #{'active' if type_index == 0 else ''}"
+                                        t-att-id="'%s-tab' % type[0]"
+                                        data-bs-toggle="tab"
+                                        t-att-data-bs-target="'#%s' % type[0]"
+                                        type="button"
+                                        role="tab"
+                                        t-att-aria-controls="type[0]"
+                                        t-attf-aria-selected="#{'true' if type_index == 0 else 'false'}"
+                                    >
+                                    <t t-out="type[1]" />
+                                </button>
+                                </li>
+
+                            </t>
+                        </t>
+                    </ul>
+                    <div class="tab-content" id="myTabContent">
                         <t t-foreach="contracts_type" t-as="type">
                             <t
                                 t-set="selected_contacts"
                                 t-value="contracts.filtered(lambda c: c.type == type[0])"
                             />
                             <t t-if="selected_contacts">
-                            <h5 class="mt-4"><t t-out="type[1]" /></h5>
+
+
+                                <div
+                                    t-attf-class="tab-pane fade #{'show active' if type_index == 0 else ''}"
+                                    t-att-id="type[0]"
+                                    role="tabpanel"
+                                    t-att-aria-labelledby="'%s-tab' % type[0]"
+                                >
+
+
                                     <div class="table-responsive">
                                     <div class="container">
                                     <div
@@ -102,11 +137,18 @@
                                     </div>
                                     </div>
                                     </div>
+
+
+
+
+                                </div>
+
                             </t>
                         </t>
                     </div>
-                <div t-else="" class="row">
-                    <p style="padding-top: 10px;">Aucun document trouvé.</p>
+                </div>
+                <div t-else="" class="col-12 text-center text-muted">
+                    Aucun document trouvé
                 </div>
             </div>
         </t>