L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-75671 theme_boost: Refactor border direction classes for BS5

Browse Source 
- Add SCSS code for border direction utility classes to the Boostrap 5 bridge SCSS file
- Replace all occurrences in the codebase (border-left > border-start, border-right-0 > border-end-0, ...)
This commit is contained in:
Mikel Martín
2024-08-09 07:40:18 +02:00
parent f179890ad5
commit 6a5cb2e2a2
23 changed files with 59 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/tool/componentlibrary/content/bootstrap/utilities/borders.md
+6 -6
View File
@@ -16,9 +16,9 @@ Use border utilities to add or remove an element's borders. Choose from all bord
{{< example class="bd-example-border-utils">}}
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
<span class="border-start"></span>
{{< /example >}}
### Subtractive
@@ -26,9 +26,9 @@ Use border utilities to add or remove an element's borders. Choose from all bord
{{< example class="bd-example-border-utils bd-example-border-utils-0" >}}
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-end-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
<span class="border-start-0"></span>
{{< /example >}}
## Border color
@@ -51,9 +51,9 @@ Add classes to an element to easily round its corners.
{{< example>}}
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-right" title="Example right rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
admin/tool/componentlibrary/hugo/site/layouts/shortcodes/mustache.html
+1 -1
View File
@@ -36,7 +36,7 @@
</a>
</div>
</nav>
<div class="tab-content border-left border-bottom border-right p-3 bg-white" id="nav-tabContent">
<div class="tab-content border-start border-bottom border-end p-3 bg-white" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-rendered{{- .Position.LineNumber -}}" role="tabpanel" aria-labelledby="nav-rendered{{- .Position.LineNumber -}}-tab">
<div data-region="mustacherendered" class="{{ with .Get "class" }}{{ . }}{{ end }}">
<div class="d-flex justify-content-center my-5">
admin/tool/moodlenet/templates/select_page.mustache
+2 -2
View File
@@ -37,12 +37,12 @@
<input type="text"
data-region="search-input"
id="searchinput"
class="form-control form-control-lg searchinput border-right-0 px-3 py-2"
class="form-control form-control-lg searchinput border-end-0 px-3 py-2"
placeholder="{{#str}} search, core {{/str}}"
name="search"
autocomplete="off"
>
<div class="searchbar-append d-flex border border-secondary border-left-0 px-3 py-2">
<div class="searchbar-append d-flex border border-secondary border-start-0 px-3 py-2">
<div data-region="search-icon">
{{#pix}} a/search, core {{/pix}}
</div>
blocks/myoverview/templates/placeholder-course-list-item.mustache
+1 -1
View File
@@ -22,7 +22,7 @@
Example context (json):
{}
}}
<li class="list-group-item course-listitem border-left-0 border-right-0 border-top-0 px-2 rounded-0">
<li class="list-group-item course-listitem border-start-0 border-end-0 border-top-0 px-2 rounded-0">
<div class="row">
<div class="col-md-2 d-flex align-items-center">
<div class="bg-pulse-grey card-img w-100" style="height: 1rem; width: 1rem;"></div>
blocks/myoverview/templates/view-list.mustache
+1 -1
View File
@@ -38,7 +38,7 @@
<ul class="list-group">
{{#courses}}
<li class="list-group-item course-listitem border-left-0 border-right-0 border-top-0 px-2 rounded-0"
<li class="list-group-item course-listitem border-start-0 border-end-0 border-top-0 px-2 rounded-0"
data-region="course-content"
data-course-id="{{{id}}}">
<div class="row">
blocks/myoverview/templates/view-summary.mustache
+1 -1
View File
@@ -38,7 +38,7 @@
}}
<div role="list">
{{#courses}}
<div class="course-summaryitem list-group-item course-listitem border-left-0 border-right-0 border-top-0 px-2 rounded-0" role="listitem"
<div class="course-summaryitem list-group-item course-listitem border-start-0 border-end-0 border-top-0 px-2 rounded-0" role="listitem"
data-region="course-content"
data-course-id="{{{id}}}">
<div class="row">
course/templates/activity_list.mustache
+2 -2
View File
@@ -27,11 +27,11 @@
<label for="search">
<span class="sr-only">{{#str}} searchactivitiesbyname, course {{/str}}</span>
</label>
<input type="text" name="search" id="search" class="form-control rounded-left" autocomplete="off"
<input type="text" name="search" id="search" class="form-control rounded-start" autocomplete="off"
placeholder="{{#str}}search, core {{/str}}" {{#query}} value="{{query}}" autofocus {{/query}}
>
<div class="input-group-append">
<button type="submit" class="btn btn-outline-secondary rounded-right">
<button type="submit" class="btn btn-outline-secondary rounded-end">
<i class="icon fa fa-search fa-fw m-0" aria-hidden="true"></i>
<span class="sr-only">{{#str}}submitsearch, course {{/str}}</span>
</button>
course/templates/activitychooser.mustache
+1 -1
View File
@@ -135,7 +135,7 @@
</a>
{{/recommendedBeginning}}
</div>
<div class="tab-content flex-fill border-left border-right border-bottom bg-light" id="tabbed-activities-{{uniqid}}">
<div class="tab-content flex-fill border-start border-end border-bottom bg-light" id="tabbed-activities-{{uniqid}}">
<div class="tab-pane {{#favouritesFirst}}active{{/favouritesFirst}}" id="starred-{{uniqid}}" data-region="favourites" role="tabpanel" aria-labelledby="starred-tab-{{uniqid}}">
<div class="optionscontainer d-flex flex-wrap p-1 mw-100 position-relative" role="menubar" data-region="chooser-options-container" data-render="favourites-area">
{{>core_course/local/activitychooser/favourites}}
lib/templates/editswitch.mustache
+1 -1
View File
@@ -31,7 +31,7 @@
"legacyseturl": "/editmode.php"
}
}}
<div class="divider border-left h-75 align-self-center ms-1 me-3"></div>
<div class="divider border-start h-75 align-self-center ms-1 me-3"></div>
<form action="{{{legacyseturl}}}" method="post" class="d-flex align-items-center editmode-switch-form">
<div class="input-group">
<label class="me-2 mb-0 {{#checked}}text-primary{{/checked}}" for="{{uniqid}}-editingswitch">
lib/templates/emoji/picker.mustache
+1 -1
View File
@@ -128,7 +128,7 @@
</div>
<input
type="text"
class="form-control border-left-0"
class="form-control border-start-0"
placeholder="{{#str}} search, core {{/str}}"
aria-label="{{#str}} search, core {{/str}}"
data-region="search-input"
lib/templates/loginform.mustache
+1 -1
View File
@@ -208,7 +208,7 @@
<div class="login-languagemenu">
{{>core/action_menu}}
</div>
<div class="divider border-left align-self-center mx-3"></div>
<div class="divider border-start align-self-center mx-3"></div>
{{/languagemenu}}
<button type="button" class="btn btn-secondary" {{!
}} data-modal="alert"{{!
lib/templates/user_menu.mustache
+1 -1
View File
@@ -57,7 +57,7 @@
<span class="login ps-2">
{{#guest}}
{{#str}} loggedinasguest, core {{/str}}
<div class="divider border-left h-75 align-self-center mx-2"></div>
<div class="divider border-start h-75 align-self-center mx-2"></div>
{{/guest}}
{{#url}}
<a href="{{url}}">{{#str}} login, core {{/str}}</a>
message/templates/message_index.mustache
+1 -1
View File
@@ -44,7 +44,7 @@
<div class="container-fluid">
<div class="row h-100 g-0">
<div class="col-4 d-flex flex-column conversationcontainer">
<div class="border-right h-100">
<div class="border-end h-100">
<div class="panel-header-container" data-region="panel-header-container">
{{> core_message/message_drawer_view_overview_header }}
{{> core_message/message_drawer_view_search_header }}
mod/data/templates/action_bar.mustache
+1 -1
View File
@@ -84,7 +84,7 @@
<div class="row">
<div class="d-flex">
{{#hasback}}
<div class="navitem mb-0 backbutton border-right">
<div class="navitem mb-0 backbutton border-end">
<a href="{{backurl}}" role="button" title="{{backtitle}}" class="d-flex align-items-center">{{!
}}{{#pix}} i/previous, moodle {{/pix}}{{!
}}</a>
mod/data/templates/fields_action_bar.mustache
+1 -1
View File
@@ -53,7 +53,7 @@
<div class="row">
<div class="d-flex">
{{#hasback}}
<div class="navitem mb-0 backbutton border-right">
<div class="navitem mb-0 backbutton border-end">
<a href="{{backurl}}" role="button" title="{{backtitle}}" class="d-flex align-items-center">{{!
}}{{#pix}} i/previous, moodle {{/pix}}{{!
}}</a>
mod/data/templates/presets.mustache
+1 -1
View File
@@ -77,7 +77,7 @@
<tbody>
{{#presets}}
<tr>
<td class="p-4 border-right">
<td class="p-4 border-end">
<input type="radio" name="fullname" value="{{userid}}/{{shortname}}" data-cmid="{{cmid}}" aria-labelledby="preset-name-{{presetindex}}" >
</td>
<td class="p-4">
reportbuilder/classes/table/custom_report_table.php
+1 -1
View File
@@ -263,7 +263,7 @@ class custom_report_table extends base_report_table {
]);
echo html_writer::tag('th', $headercell, [
'class' => 'border-right border-left',
'class' => 'border-end border-start',
'scope' => 'col',
'data-region' => 'column-header',
'data-column-id' => $column->get_persistent()->get('id'),
reportbuilder/templates/local/sidebar-menu/area.mustache
+1 -1
View File
@@ -39,7 +39,7 @@
</label>
<input id="reportbuilder-sidebar-search"
type="text"
class="form-control rounded-left border-right-0"
class="form-control rounded-start border-end-0"
placeholder="{{#str}} search, core_search {{/str}}"
aria-label="{{#str}} search, core_search {{/str}}"
data-action="sidebar-search">
theme/boost/scss/moodle/bs5-bridge.scss
+19
View File
@@ -61,3 +61,22 @@
@extend .text#{$infix}-right;
}
}
.border-start {
@extend .border-left;
}
.border-end {
@extend .border-right;
}
.border-start-0 {
@extend .border-left-0;
}
.border-end-0 {
@extend .border-right-0;
}
.rounded-start {
@extend .rounded-left;
}
.rounded-end {
@extend .rounded-right;
}
theme/boost/style/moodle.css
+6 -6
View File
@@ -19421,7 +19421,7 @@ button.bg-dark:focus {
border-top: 1px solid #dee2e6 !important;
}
.border-right {
.border-right, .border-end {
border-right: 1px solid #dee2e6 !important;
}
@@ -19429,7 +19429,7 @@ button.bg-dark:focus {
border-bottom: 1px solid #dee2e6 !important;
}
.border-left {
.border-left, .border-start {
border-left: 1px solid #dee2e6 !important;
}
@@ -19441,7 +19441,7 @@ button.bg-dark:focus {
border-top: 0 !important;
}
.border-right-0 {
.border-right-0, .border-end-0 {
border-right: 0 !important;
}
@@ -19449,7 +19449,7 @@ button.bg-dark:focus {
border-bottom: 0 !important;
}
.border-left-0 {
.border-left-0, .border-start-0 {
border-left: 0 !important;
}
@@ -19502,7 +19502,7 @@ button.bg-dark:focus {
border-top-right-radius: 0.5rem !important;
}
.rounded-right {
.rounded-right, .rounded-end {
border-top-right-radius: 0.5rem !important;
border-bottom-right-radius: 0.5rem !important;
}
@@ -19512,7 +19512,7 @@ button.bg-dark:focus {
border-bottom-left-radius: 0.5rem !important;
}
.rounded-left {
.rounded-left, .rounded-start {
border-top-left-radius: 0.5rem !important;
border-bottom-left-radius: 0.5rem !important;
}
theme/boost/templates/navbar.mustache
+2 -2
View File
@@ -85,11 +85,11 @@
<div id="usernavigation" class="navbar-nav ms-auto">
{{# output.search_box }}
{{{ output.search_box }}}
<div class="divider border-left h-75 align-self-center mx-1"></div>
<div class="divider border-start h-75 align-self-center mx-1"></div>
{{/output.search_box}}
{{#langmenu}}
{{> theme_boost/language_menu }}
<div class="divider border-left h-75 align-self-center mx-1"></div>
<div class="divider border-start h-75 align-self-center mx-1"></div>
{{/langmenu}}
{{{ output.navbar_plugin_output }}}
<div class="d-flex align-items-stretch usermenu-container" data-region="usermenu">
theme/classic/style/moodle.css
+6 -6
View File
@@ -19421,7 +19421,7 @@ button.bg-dark:focus {
border-top: 1px solid #dee2e6 !important;
}
.border-right {
.border-right, .border-end {
border-right: 1px solid #dee2e6 !important;
}
@@ -19429,7 +19429,7 @@ button.bg-dark:focus {
border-bottom: 1px solid #dee2e6 !important;
}
.border-left {
.border-left, .border-start {
border-left: 1px solid #dee2e6 !important;
}
@@ -19441,7 +19441,7 @@ button.bg-dark:focus {
border-top: 0 !important;
}
.border-right-0 {
.border-right-0, .border-end-0 {
border-right: 0 !important;
}
@@ -19449,7 +19449,7 @@ button.bg-dark:focus {
border-bottom: 0 !important;
}
.border-left-0 {
.border-left-0, .border-start-0 {
border-left: 0 !important;
}
@@ -19502,7 +19502,7 @@ button.bg-dark:focus {
border-top-right-radius: 0.25rem !important;
}
.rounded-right {
.rounded-right, .rounded-end {
border-top-right-radius: 0.25rem !important;
border-bottom-right-radius: 0.25rem !important;
}
@@ -19512,7 +19512,7 @@ button.bg-dark:focus {
border-bottom-left-radius: 0.25rem !important;
}
.rounded-left {
.rounded-left, .rounded-start {
border-top-left-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important;
}
theme/classic/templates/navbar.mustache
+1 -1
View File
@@ -55,7 +55,7 @@
{{{ output.page_heading_menu }}}
</ul>
<div id="usernavigation" class="navbar-nav my-1 ms-auto">
<div class="divider border-left h-50 align-self-center mx-1"></div>
<div class="divider border-start h-50 align-self-center mx-1"></div>
{{{ output.search_box }}}
{{{ output.navbar_plugin_output }}}
<div class="d-flex align-items-stretch usermenu-container" data-region="usermenu">