From ccff76264a44d98190478ca3c238c92bd94eb3d0 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Tue, 7 Oct 2025 17:45:59 +0800
Subject: [PATCH] MDL-86840 forum: Do not use layout table for the search form

---
 mod/forum/templates/big_search_form.mustache | 236 +++++++++----------
 1 file changed, 107 insertions(+), 129 deletions(-)

diff --git a/mod/forum/templates/big_search_form.mustache b/mod/forum/templates/big_search_form.mustache
index 7dc96f71712..656172b91fa 100644
--- a/mod/forum/templates/big_search_form.mustache
+++ b/mod/forum/templates/big_search_form.mustache
@@ -47,139 +47,117 @@
         "user": "Helpy McUser"
     }
 }}
-<div id="intro" class="box searchbox boxaligncenter">
+<div id="intro" class="mb-3 box searchbox boxaligncenter">
     {{#str}}searchforumintro, forum{{/str}}
 </div>
 <div class="box generalbox boxaligncenter">
     <form id="searchform" class="mform" action="{{actionurl}}" method="get">
-        <table class="searchbox table table-striped" id="form">
-            <tr>
-                <td class="c0 text-xs-right align-bottom">
-                    <label for="words">{{#str}}searchwords, forum{{/str}}</label>
-                    <input type="hidden" value="{{courseid}}" name="id">
-                </td>
-                <td class="c1">
-                    <input type="text" class="form-control" name="words" id="words" value="{{words}}">
-                </td>
-            </tr>
-            <tr>
-                <td class="c0 text-xs-right align-bottom">
-                    <label for="phrase">{{#str}}searchphrase, forum{{/str}}</label>
-                </td>
-                <td class="c1">
-                    <input type="text" class="form-control" name="phrase" id="phrase" value="{{phrase}}">
-                </td>
-            </tr>
-            <tr>
-                <td class="c0 text-xs-right align-bottom">
-                    <label for="notwords">{{#str}}searchnotwords, forum{{/str}}</label>
-                </td>
-                <td class="c1">
-                    <input type="text" class="form-control" name="notwords" id="notwords" value="{{notwords}}">
-                </td>
-            </tr>
-            {{#showfullwords}}
-                <tr>
-                    <td class="c0 text-xs-right align-bottom">
-                        <label for="fullwords">{{#str}}searchfullwords, forum{{/str}}</label>
-                    </td>
-                    <td class="c1">
-                        <input type="text" class="form-control" name="fullwords" id="fullwords" value="{{fullwords}}">
-                    </td>
-                </tr>
-            {{/showfullwords}}
-            <tr>
-                <td class="c0 text-xs-right align-bottom">
-                    <label for="timefromrestrict">{{#str}}searchdatefrom, forum{{/str}}</label>
-                </td>
-                <td class="c1 text-nowrap d-flex flex-wrap align-items-center">
-                    <div class="fdate_time_selector d-flex flex-wrap align-items-center">
-                        <input type="checkbox" id="timefromrestrict" name="timefromrestrict" value="1" {{#datefromchecked}}checked{{/datefromchecked}}>
-                        {{{datefromfields}}}
-                    </div>
-                    <input type="hidden" name="hfromday" value="0">
-                    <input type="hidden" name="hfrommonth" value="0">
-                    <input type="hidden" name="hfromyear" value="0">
-                    <input type="hidden" name="hfromhour" value="0">
-                    <input type="hidden" name="hfromminute" value="0">
-                </td>
-            </tr>
-            <tr>
-                <td class="c0 text-xs-right align-bottom">
-                    <label for="timetorestrict">{{#str}}searchdateto, forum{{/str}}</label>
-                </td>
-                <td class="c1 text-nowrap d-flex flex-wrap align-items-center">
-                    <div class="fdate_time_selector d-flex flex-wrap align-items-center">
-                        <input type="checkbox" id="timetorestrict" name="timetorestrict" value="1" {{#datetochecked}}checked{{/datetochecked}}>
-                        {{{datetofields}}}
-                    </div>
-                    <input type="hidden" name="htoday" value="0">
-                    <input type="hidden" name="htomonth" value="0">
-                    <input type="hidden" name="htoyear" value="0">
-                    <input type="hidden" name="htohour" value="0">
-                    <input type="hidden" name="htominute" value="0">
-                </td>
-            </tr>
-            <tr>
-                <td class="c0 text-xs-right align-bottom">
-                    <label for="menuforumid">{{#str}}searchwhichforums, forum{{/str}}</label>
-                </td>
-                <td class="c1">
-                    <select name="forumid" id="menuforumid" class="form-control form-select">
-                        {{#forumoptions}}
-                            <option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>
-                        {{/forumoptions}}
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td class="c0 text-xs-right align-bottom">
-                    <label for="subject">{{#str}}searchsubject, forum{{/str}}</label>
-                </td>
-                <td class="c1">
-                    <input type="text" class="form-control" name="subject" id="subject" value="{{subject}}">
-                </td>
-            </tr>
-            <tr>
-                <td class="c0 text-xs-right align-bottom">
-                    <label for="user">{{#str}}searchuser, forum{{/str}}</label>
-                </td>
-                <td class="c1">
-                    <input type="text" class="form-control" name="user" id="user" value="{{user}}">
-                </td>
-            </tr>
-            {{^guestuser}}
-            <tr>
-                <td class="c0 text-xs-right align-bottom">
-                    <label for="starredonly">{{#str}}starredonly, forum{{/str}}</label>
-                </td>
-                <td class="c1 align-middle d-flex flex-wrap align-items-center">
-                    <input type="checkbox" class="form-control" name="starredonly" id="starredonly" value="1" {{#starredonly}}checked{{/starredonly}} />
-                </td>
-            </tr>
-            {{/guestuser}}
-            {{#tagsenabled}}
-                <tr>
-                    <td class="c0">
-                        <label for="tags" class="mt-1">{{#str}}searchtags, forum{{/str}}</label>
-                    </td>
-                    <td class="c1">
-                        <select class="form-select" name="tags[]"
-                                id="tags" multiple>
-                            {{#tagoptions}}
-                                <option value="{{value}}" {{#selected}}selected{{/selected}}>{{{text}}}</option>
-                            {{/tagoptions}}
-                        </select>
-                    </td>
-                </tr>
-            {{/tagsenabled}}
-            <tr>
-                <td> </td>
-                <td class="submit">
-                    <button type="submit" class="btn btn-primary">{{#str}}searchforums, forum{{/str}}</button>
-                </td>
-            </tr>
-        </table>
+        <div class="mb-3 row">
+            <label for="words" class="col-sm-4 col-form-label">{{#str}}searchwords, forum{{/str}}</label>
+            <div class="col-sm-8">
+                <input type="hidden" value="{{courseid}}" name="id">
+                <input type="text" class="form-control" name="words" id="words" value="{{words}}">
+            </div>
+        </div>
+        <div class="mb-3 row">
+            <label for="phrase" class="col-sm-4 col-form-label">{{#str}}searchphrase, forum{{/str}}</label>
+            <div class="col-sm-8">
+                <input type="text" class="form-control" name="phrase" id="phrase" value="{{phrase}}">
+            </div>
+        </div>
+        <div class="mb-3 row">
+            <label for="notwords" class="col-sm-4 col-form-label">{{#str}}searchnotwords, forum{{/str}}</label>
+            <div class="col-sm-8">
+                <input type="text" class="form-control" name="notwords" id="notwords" value="{{notwords}}">
+            </div>
+        </div>
+        {{#showfullwords}}
+        <div class="mb-3 row">
+            <label for="fullwords" class="col-sm-4 col-form-label">{{#str}}searchfullwords, forum{{/str}}</label>
+            <div class="col-sm-8">
+                <input type="text" class="form-control" name="fullwords" id="fullwords" value="{{fullwords}}">
+            </div>
+        </div>
+        {{/showfullwords}}
+        <fieldset class="mb-3 row border-0">
+            <legend class="col-sm-4 col-form-label">{{#str}}searchdatefrom, forum{{/str}}</legend>
+            <div class="col-sm-8 fdate_time_selector d-flex flex-wrap align-items-center">
+                <label class="form-check-label me-1">
+                    <input type="checkbox" name="timefromrestrict" value="1" {{#datefromchecked}}checked{{/datefromchecked}} class="form-check-input"> {{#str}}enable{{/str}}
+                </label>
+                {{{datefromfields}}}
+                <input type="hidden" name="hfromday" value="0">
+                <input type="hidden" name="hfrommonth" value="0">
+                <input type="hidden" name="hfromyear" value="0">
+                <input type="hidden" name="hfromhour" value="0">
+                <input type="hidden" name="hfromminute" value="0">
+            </div>
+        </fieldset>
+        <fieldset class="mb-3 row border-0">
+            <legend class="col-sm-4 col-form-label">{{#str}}searchdateto, forum{{/str}}</legend>
+            <div class="col-sm-8 fdate_time_selector d-flex flex-wrap align-items-center">
+                <label class="form-check-label me-1">
+                    <input type="checkbox" name="timetorestrict" value="1" {{#datetochecked}}checked{{/datetochecked}} class="form-check-input"> {{#str}}enable{{/str}}
+                </label>
+                {{{datetofields}}}
+                <input type="hidden" name="htoday" value="0">
+                <input type="hidden" name="htomonth" value="0">
+                <input type="hidden" name="htoyear" value="0">
+                <input type="hidden" name="htohour" value="0">
+                <input type="hidden" name="htominute" value="0">
+            </div>
+        </fieldset>
+        <div class="mb-3 row">
+            <label for="menuforumid" class="col-sm-4 col-form-label">{{#str}}searchwhichforums, forum{{/str}}</label>
+            <div class="col-sm-8">
+                <select name="forumid" id="menuforumid" class="form-select">
+                    {{#forumoptions}}
+                        <option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>
+                    {{/forumoptions}}
+                </select>
+            </div>
+        </div>
+        <div class="mb-3 row">
+            <label for="subject" class="col-sm-4 col-form-label">{{#str}}searchsubject, forum{{/str}}</label>
+            <div class="col-sm-8">
+                <input type="text" class="form-control" name="subject" id="subject" value="{{subject}}">
+            </div>
+        </div>
+        <div class="mb-3 row">
+            <label for="user" class="col-sm-4 col-form-label">{{#str}}searchuser, forum{{/str}}</label>
+            <div class="col-sm-8">
+                <input type="text" class="form-control" name="user" id="user" value="{{user}}">
+            </div>
+        </div>
+        {{^guestuser}}
+        <div class="mb-3 row">
+            <div class="col-sm-4"></div>
+            <div class="col-sm-8">
+                <div class="form-check">
+                    <input type="checkbox" class="form-check-input" name="starredonly" id="starredonly" value="1" {{#starredonly}}checked{{/starredonly}} />
+                    <label for="starredonly" class="form-check-label">{{#str}}starredonly, forum{{/str}}</label>
+                </div>
+            </div>
+        </div>
+        {{/guestuser}}
+        {{#tagsenabled}}
+        <div class="mb-3 row">
+            <label for="tags" class="col-sm-4 col-form-label">{{#str}}searchtags, forum{{/str}}</label>
+            <div class="col-sm-8">
+                <select class="form-select" name="tags[]" id="tags" multiple>
+                    {{#tagoptions}}
+                        <option value="{{value}}" {{#selected}}selected{{/selected}}>{{{text}}}</option>
+                    {{/tagoptions}}
+                </select>
+            </div>
+        </div>
+        {{/tagsenabled}}
+        <div class="mb-3 row">
+            <div class="col-sm-4"></div>
+            <div class="col-sm-8">
+                <button type="submit" class="btn btn-primary">{{#str}}searchforums, forum{{/str}}</button>
+            </div>
+        </div>
     </form>
 </div>
 {{#js}}