From 0f172981e56ecd4cd7c4ecb64f3a597dcf7ae3e7 Mon Sep 17 00:00:00 2001
From: Don Kendall <dkendall@ledoweb.com>
Date: Mon, 1 Jun 2026 08:24:45 -0400
Subject: [PATCH] [IMP] dms: themed portal document grid

Restyle the customer portal document list from a plain table into a
responsive card grid with file-type thumbnails and a directory/file
meta line. Pure template + SCSS restyle; same controller render
context (dms_directories / dms_files), no backend change.
---
 dms/static/src/scss/portal.scss |  93 +++++++++++++++++++++++++++
 dms/template/portal.xml         | 108 ++++++++++++++++----------------
 2 files changed, 146 insertions(+), 55 deletions(-)

diff --git a/dms/static/src/scss/portal.scss b/dms/static/src/scss/portal.scss
index 870da4be3..7fe4d8693 100644
--- a/dms/static/src/scss/portal.scss
+++ b/dms/static/src/scss/portal.scss
@@ -1,12 +1,105 @@
 /**********************************************************************************
 *
 *   Copyright 2024 Subteno - Timothée Vannier (https://www.subteno.com).
+*   Copyright 2026 ledoent — Don Kendall
 *   License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
 *
 **********************************************************************************/
 
+// Legacy contact-list image style — kept for backwards compatibility with
+// any third-party portal extensions that still reference it.
 .o_portal_contact_img {
     width: 2.3em;
     height: 2.3em;
     object-fit: cover;
 }
+
+// ---- Portal card grid ----
+//
+// Customer-facing mirror of the backend card design. Same per-extension
+// accent vocabulary so the visual identity carries from backend to portal.
+// Per-extension `--dms-accent` rules are duplicated here rather than
+// extracted to a shared Sass partial — Odoo's bundler treats backend and
+// frontend bundles separately, and a small duplication keeps the change
+// self-contained. Extract to `_dms_tokens.scss` later if a third surface
+// needs the same palette.
+
+.o_dms_portal_grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 12px;
+    margin-top: 1rem;
+}
+
+.o_dms_portal_card {
+    --dms-accent: var(--bs-secondary-color, #6c757d);
+
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 10px;
+    background-color: var(--bs-body-bg, #fff);
+    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
+    border-left: 3px solid var(--dms-accent);
+    border-radius: 4px;
+    text-decoration: none;
+    color: inherit;
+    transition:
+        transform 120ms ease,
+        box-shadow 120ms ease,
+        border-color 120ms ease;
+
+    &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &__thumb {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--bs-tertiary-bg, #f4f5f7);
+        border-radius: 3px;
+        padding: 12px 0;
+        min-height: 56px;
+
+        img {
+            width: 40px;
+            height: 40px;
+            object-fit: contain;
+        }
+    }
+
+    &__body {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+    }
+
+    &__name {
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__meta {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 0.75rem;
+        color: var(--bs-secondary-color, #6c757d);
+    }
+
+    &__dot {
+        opacity: 0.5;
+    }
+
+    // Directories use the primary accent — they navigate, not download.
+    &--directory {
+        --dms-accent: var(--bs-primary, #714b67);
+    }
+}
diff --git a/dms/template/portal.xml b/dms/template/portal.xml
index 348a7d6d0..00be8b6b3 100644
--- a/dms/template/portal.xml
+++ b/dms/template/portal.xml
@@ -69,70 +69,68 @@
             <t t-if="not dms_directories and not dms_files">
                 <div class="alert alert-warning mt8" role="alert">Not results</div>
             </t>
-            <t t-if="dms_directories or dms_files" t-call="portal.portal_table">
-                <thead>
-                    <tr class="active">
-                        <th>Name</th>
-                        <th>Size</th>
-                        <th>Last update</th>
-                    </tr>
-                </thead>
-                <tbody>
+            <t t-if="dms_directories or dms_files">
+                <div class="o_dms_portal_grid">
                     <t t-foreach="dms_directories" t-as="dms_directory">
-                        <tr class="tr_dms_directory">
-                            <td>
-                                <a
-                                    t-attf-href="/my/dms/directory/#{dms_directory.id}?{{ keep_query() }}"
-                                    t-attf-class="tr_dms_directory_link"
-                                    t-att-title="dms_directory.name"
-                                >
-                                    <img
-                                        class="o_portal_contact_img"
-                                        t-att-src="dms_directory.icon_url"
-                                    />
-                                    <span t-esc="dms_directory.name" />
-                                </a>
-                            </td>
-                            <td>
-                                <span t-esc="dms_directory.count_elements" /> element(s)
-                            </td>
-                            <td>
-                                <span
-                                    t-esc="dms_directory.write_date"
-                                    t-options="{'widget': 'date'}"
+                        <a
+                            t-attf-href="/my/dms/directory/#{dms_directory.id}?{{ keep_query() }}"
+                            class="o_dms_portal_card o_dms_portal_card--directory tr_dms_directory_link"
+                            t-att-title="dms_directory.name"
+                        >
+                            <div class="o_dms_portal_card__thumb">
+                                <img
+                                    t-att-src="dms_directory.icon_url"
+                                    t-att-alt="dms_directory.name"
+                                />
+                            </div>
+                            <div class="o_dms_portal_card__body">
+                                <div
+                                    class="o_dms_portal_card__name"
+                                    t-esc="dms_directory.name"
                                 />
-                            </td>
-                        </tr>
+                                <div class="o_dms_portal_card__meta">
+                                    <span>
+                                        <t t-esc="dms_directory.count_elements" /> items
+                                    </span>
+                                    <span class="o_dms_portal_card__dot">·</span>
+                                    <span
+                                        t-esc="dms_directory.write_date"
+                                        t-options="{'widget': 'date'}"
+                                    />
+                                </div>
+                            </div>
+                        </a>
                     </t>
-                    <t t-if="dms_files">
-                        <t t-foreach="dms_files" t-as="dms_file">
-                            <tr class="tr_dms_file">
-                                <td>
-                                    <a
-                                        t-attf-href="/my/dms/file/#{dms_file.id}/download?{{ keep_query() }}"
-                                        t-attf-class="tr_dms_file_link"
-                                        t-att-title="dms_file.name"
-                                    >
-                                        <img
-                                            class="o_portal_contact_img"
-                                            t-att-src="dms_file.icon_url + (('&amp;access_token=' + access_token) if access_token else '')"
-                                        />
-                                        <span t-esc="dms_file.name" />
-                                    </a>
-                                </td>
-                                <td>
+                    <t t-foreach="dms_files" t-as="dms_file">
+                        <a
+                            t-attf-href="/my/dms/file/#{dms_file.id}/download?{{ keep_query() }}"
+                            class="o_dms_portal_card o_dms_portal_card--file tr_dms_file_link"
+                            t-att-data-ext="dms_file.extension and dms_file.extension.lower()"
+                            t-att-title="dms_file.name"
+                        >
+                            <div class="o_dms_portal_card__thumb">
+                                <img
+                                    t-att-src="dms_file.icon_url + (('&amp;access_token=' + access_token) if access_token else '')"
+                                    t-att-alt="dms_file.name"
+                                />
+                            </div>
+                            <div class="o_dms_portal_card__body">
+                                <div
+                                    class="o_dms_portal_card__name"
+                                    t-esc="dms_file.name"
+                                />
+                                <div class="o_dms_portal_card__meta">
                                     <span t-esc="dms_file.get_human_size()" />
-                                </td>
-                                <td>
+                                    <span class="o_dms_portal_card__dot">·</span>
                                     <span
                                         t-esc="dms_file.write_date"
                                         t-options="{'widget': 'date'}"
                                     />
-                                </td>
-                            </tr>
-                        </t>
+                                </div>
+                            </div>
+                        </a>
                     </t>
-                </tbody>
+                </div>
             </t>
         </t>
     </template>