MDL-68259 user: add styling to participant filters

Part of MDL-67743

lib/templates/form_autocomplete_input.mustache

@@ -36,13 +36,15 @@
     { "inputID": 1, "suggestionsId": 2, "selectionId": 3, "downArrowId": 4, "placeholder": "Select something" }
 }}
 {{#showSuggestions}}
-<div class="d-inline-block position-relative">
+<div class="d-md-inline-block mr-md-2 position-relative">
     <input type="text" id="{{inputId}}" class="form-control" list="{{suggestionsId}}" placeholder="{{placeholder}}" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="{{suggestionsId}} {{selectionId}}" {{#tags}}data-tags="1"{{/tags}}/>
     <span class="form-autocomplete-downarrow position-absolute p-1" id="{{downArrowId}}">&#x25BC;</span>
 </div>
 {{/showSuggestions}}
 {{^showSuggestions}}
-<input type="text" id="{{inputId}}" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}" {{#tags}}data-tags="1"{{/tags}}/>
+<div class="d-md-inline-block mr-md-2">
+    <input type="text" id="{{inputId}}" class="form-control" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}" {{#tags}}data-tags="1"{{/tags}}/>
+</div>
 {{/showSuggestions}}
 
 {{#js}}

theme/boost/scss/moodle/core.scss

@@ -2402,6 +2402,12 @@ body.h5p-embed {
     height: 1.5rem;
 }
 
+.border-radius {
+    @if $enable-rounded {
+        @include border-radius($card-border-radius);
+    }
+}
+
 // Emoji picker.
 $picker-width: 350px !default;
 $picker-width-xs: 320px !default;

theme/classic/style/moodle.css

@@ -11772,6 +11772,9 @@ body.h5p-embed .h5pmessages {
   color: #343a40;
   height: 1.5rem; }
 
+.border-radius {
+  border-radius: 0.25rem; }
+
 .emoji-picker {
   width: 350px;
   height: 400px; }

user/index.php

@@ -242,7 +242,7 @@ $enrolbuttonsout = '';
 foreach ($enrolbuttons as $enrolbutton) {
     $enrolbuttonsout .= $enrolrenderer->render($enrolbutton);
 }
-echo html_writer::div($enrolbuttonsout, 'float-right', [
+echo html_writer::div($enrolbuttonsout, 'd-flex justify-content-end', [
     'data-region' => 'wrapper',
     'data-table-uniqueid' => $participanttable->uniqueid,
 ]);

user/templates/local/participantsfilter/autocomplete_selection.mustache

@@ -38,7 +38,7 @@
     ], "noSelectionString": "No selection" }
 }}
 <div{{!
-    }} class="d-inline-block px-2{{#multiple}} form-autocomplete-multiple{{/multiple}}"{{!
+    }} class="d-inline-block mb-0{{#multiple}} form-autocomplete-multiple h5{{/multiple}}"{{!
     }} id="{{selectionId}}"{{!
     }} role="list"{{!
     }} aria-atomic="true"{{!

user/templates/local/participantsfilter/autocomplete_selection_items.mustache

@@ -42,7 +42,7 @@
 }}
 {{#items}}
     <span role="listitem" data-value="{{value}}" aria-selected="true"
-            class="d-inline-block bg-dark text-white rounded font-weight-bold px-1 m-1">
+            class="badge badge-secondary clickable text-wrap text-break line-height-4 mr-2 my-1">
         {{label}}<i class="icon fa fa-times pl-2 mr-0"></i>
     </span>
 {{/items}}

user/templates/local/participantsfilter/filterrow.mustache

@@ -33,29 +33,31 @@
     }
 }}
 <div data-filterregion="filter">
-    <div class="rounded mb-3 p-2 bg-white border border-secondary d-flex align-items-center">
-        <label for="core_user-local-participantsfilter-filterrow-jointype-{{uniqid}}" class="pt-2">{{#str}}match, core_user{{/str}}</label>
-        <select class="custom-select" data-filterfield="join" id="core_user-local-participantsfilter-filterrow-jointype-{{uniqid}}">
-            <option value="0">{{#str}}none{{/str}}</option>
-            <option selected=selected value="1">{{#str}}any{{/str}}</option>
-            <option value="2">{{#str}}all{{/str}}</option>
-        </select>
+    <div class="border-radius my-2 p-2 bg-white border d-flex flex-column flex-md-row align-items-md-start">
+        <div class="d-flex flex-column flex-md-row align-items-md-center">
+            <label for="core_user-local-participantsfilter-filterrow-jointype-{{uniqid}}" class="mr-md-2 mb-md-0">{{#str}}match, core_user{{/str}}</label>
+            <select class="custom-select mb-1 mb-md-0 mr-md-2" data-filterfield="join" id="core_user-local-participantsfilter-filterrow-jointype-{{uniqid}}">
+                <option value="0">{{#str}}none{{/str}}</option>
+                <option selected=selected value="1">{{#str}}any{{/str}}</option>
+                <option value="2">{{#str}}all{{/str}}</option>
+            </select>
+        </div>
 
         <label class="sr-only pt-2" for="core_user-local-participantsfilter-filterrow-filtertype-{{uniqid}}">filtertype</label>
-        <select class="custom-select" data-filterfield="type" id="core_user-local-participantsfilter-filterrow-filtertype-{{uniqid}}">
+        <select class="custom-select mb-1 mb-md-0 mr-md-2" data-filterfield="type" id="core_user-local-participantsfilter-filterrow-filtertype-{{uniqid}}">
             <option value="">{{#str}}selectfiltertype, core_user{{/str}}</option>
             {{#filtertypes}}
             <option value="{{name}}">{{title}}</option>
             {{/filtertypes}}
         </select>
 
-        <div data-filterregion="value"></div>
+        <div data-filterregion="value" class="d-md-flex flex-column align-items-start flex-lg-row"></div>
 
-        <button data-filteraction="remove" class="ml-auto btn btn-link text-reset" aria-label="{{#str}}clearfilterrow, core_user{{/str}}">
-            <i class="icon fa fa-times-circle pt-2"></i>
+        <button data-filteraction="remove" class="ml-auto icon-no-margin icon-size-4 btn text-reset" aria-label="{{#str}}clearfilterrow, core_user{{/str}}">
+            <i class="icon fa fa-times-circle"></i>
         </button>
     </div>
-    <div data-filterregion="joinadverb">
+    <div data-filterregion="joinadverb" class="pl-1 text-uppercase font-weight-bold">
         <div data-filterverbfor="0">{{#str}}adverbfor_andnot, core_user{{/str}}</div>
         <div data-filterverbfor="1">{{#str}}adverbfor_or, core_user{{/str}}</div>
         <div data-filterverbfor="2">{{#str}}adverbfor_and, core_user{{/str}}</div>

user/templates/participantsfilter.mustache

@@ -40,9 +40,9 @@
     }
 }}
 
-<div id="core_user-participantsfilter-{{uniqid}}" class="filter-group mt-5 p-3 rounded border border-secondary" data-table-region="{{tableregionid}}" data-table-course-id="{{courseid}}" data-filterverb="1">
+<div id="core_user-participantsfilter-{{uniqid}}" class="filter-group my-2 p-2 bg-light border-radius border" data-table-region="{{tableregionid}}" data-table-course-id="{{courseid}}" data-filterverb="1">
     <div data-filterregion="filtermatch" class="hidden">
-        <label for="core_user-local-participantsfilter-jointype-{{uniqid}}" class="pt-2">{{#str}}match, core_user{{/str}}</label>
+        <label for="core_user-local-participantsfilter-jointype-{{uniqid}}" class="my-0">{{#str}}match, core_user{{/str}}</label>
         <select class="custom-select" data-filterfield="join" id="core_user-local-participantsfilter-jointype-{{uniqid}}">
             <option value="0">{{#str}}none{{/str}}</option>
             <option selected=selected value="1">{{#str}}any{{/str}}</option>
@@ -54,16 +54,13 @@
         {{> core_user/local/participantsfilter/filterrow }}
     </div>
 
-    <div class="display-block" data-filterregion="actions">
+    <div class="d-flex" data-filterregion="actions">
         &nbsp;
-        <button type="button" class="btn btn-link d-inline-block float-left" data-filteraction="add">
+        <button type="button" class="btn btn-link text-reset" data-filteraction="add">
             <i class="fa fa-plus"></i><span class="pl-3">{{#str}}addcondition, core_user{{/str}}</span>
         </button>
-
-        <div class="float-right">
-            <button data-filteraction="reset" type="button" class="btn btn-light d-inline-block">{{#str}}clearfilters, core_user{{/str}}</button>
-            <button data-filteraction="apply" type="button" class="btn btn-primary d-inline-block">{{#str}}applyfilters, core_user{{/str}}</button>
-        </div>
+        <button data-filteraction="reset" type="button" class="btn btn-secondary ml-auto mr-2">{{#str}}clearfilters, core_user{{/str}}</button>
+        <button data-filteraction="apply" type="button" class="btn btn-primary">{{#str}}applyfilters, core_user{{/str}}</button>
     </div>
 
     {{> core_user/local/participantsfilter/filtertypes}}