[TikiWiki-commits] [Git][tikiwiki/tiki][29.x] [ENH][UI][UX][REF] Search with facets: Refactor search results template and...

Espoir Baraka pushed to branch 29.x at Tiki Wiki CMS Groupware / Tiki


Commits:
c0a90538 by Espoir Baraka at 2026-04-22T22:42:15+02:00
[ENH][UI][UX][REF] Search with facets: Refactor search results template and...
---
* [ENH][UI][UX][REF] Search with facets: Refactor search results template and...
---
* [ENH][UI][UX][REF] Search with facets: Refactor search results template and styles for improved layout and usability
---
* [ENH] Refactor search results template and styles for improved layout and usability

See merge request tikiwiki/tiki!9931

(cherry picked from commit 99d017ae5652ae9b347f85ed972d533f060d60ef)

See merge request tikiwiki/tiki!10070

(cherry picked from commit a6b82973ce8339dd564e88d8dcd9e7ff011f5af5)

See merge request tikiwiki/tiki!10071

- - - - -


2 changed files:

- templates/searchresults-plain.tpl
- themes/base_files/scss/_tiki-search.scss


Changes:

=====================================
templates/searchresults-plain.tpl
=====================================
@@ -1,8 +1,9 @@
 {if $facets|@count}
-    <div class="facets" style="width: 25%; float: right;">
+<div class="search-with-facets">
+    <aside class="facets search-facets-sidebar" aria-label="{tr}Search filters{/tr}">
         {foreach from=$facets item=facet}
-            <div class="mb-3 row facet-hide-group">
-                <label for="{$facet.name|escape}">{$facet.label|escape}</label>
+            <div class="mb-3 facet-hide-group">
+                <label class="form-label" for="{$facet.name|escape}">{$facet.label|escape}</label>
                 <select id="{$facet.name|escape}" class="form-select" multiple data-for="#search-form input[name$='filter~{$facet.name|escape}']" data-join="{$facet.operator|escape}">
                     {foreach from=$facet.options key=value item=label}
                         <option value="{$value|escape}">{$label|escape}</option>
@@ -10,17 +11,16 @@
                 </select>
             </div>
         {/foreach}
-        <div class="mb-3 row">
-            <button class="btn btn-primary">{tr}Filter{/tr}</button>
+        <div class="search-facets-actions">
+            <button type="button" class="btn btn-primary">{tr}Filter{/tr}</button>
         </div>
-    </div>
+    </aside>
     {jq}
         $('.facets select').registerFacet();
         $('.facets button').on("click", function () {
             $('#search-form').trigger("submit");
         });
 
-        // remove empty inputs to keep the url clean
         $('#search-form').on("submit", function () {
             $(this)
                 .find('input[name]')
@@ -30,8 +30,10 @@
                 .prop('name', '');
         });
     {/jq}
-{/if}
+    <div class="search-results-main">
+{else}
 <div>
+{/if}
 <ul class="searchresults">
     {if $results->didYouMean}
         <i>{tr}Found results for:{/tr} <b>{$results->didYouMean}</b></i>
@@ -78,3 +80,6 @@
 </ul>
 {pagination_links resultset=$results}{/pagination_links}
 </div>
+{if $facets|@count}
+</div>
+{/if}


=====================================
themes/base_files/scss/_tiki-search.scss
=====================================
@@ -8,6 +8,50 @@
     margin: 10px 0 0;
 }
 
+.search-with-facets {
+    &::after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}
+
+.search-with-facets .search-facets-sidebar {
+    width: 25%;
+    float: right;
+    margin-left: 1rem;
+    margin-bottom: 1.25rem;
+    box-sizing: border-box;
+    max-width: 100%;
+}
+
+.search-with-facets .search-facets-sidebar .form-select[multiple] {
+    max-width: 100%;
+}
+
+.search-with-facets .search-facets-sidebar .search-facets-actions {
+    margin-top: 0.75rem;
+    padding-top: 0.5rem;
+}
+
+.search-with-facets .search-results-main {
+    overflow: hidden;
+}
+
+@media (max-width: breakpoint-max(md)) {
+    .search-with-facets .search-facets-sidebar {
+        float: none;
+        width: 100%;
+        margin-left: 0;
+        margin-bottom: 1.25rem;
+    }
+
+    .search-with-facets .search-results-main {
+        overflow: visible;
+        clear: both;
+    }
+}
+
 @media (max-width: breakpoint-max(sm)) {
     .searchresults li {
         margin: 25px 0;



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/c0a90538597e43a6a96714cc0c44f43ec40ea3ec

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/c0a90538597e43a6a96714cc0c44f43ec40ea3ec
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs