{ "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}}">▼</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}}
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;
color: #343a40;
height: 1.5rem; }
+.border-radius {
+ border-radius: 0.25rem; }
+
.emoji-picker {
width: 350px;
height: 400px; }
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,
]);
], "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"{{!
}}
{{#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}}
}
}}
<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>
}
}}
-<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>
{{> core_user/local/participantsfilter/filterrow }}
</div>
- <div class="display-block" data-filterregion="actions">
+ <div class="d-flex" data-filterregion="actions">
- <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}}