MDL-75671 theme_boost: Refactor text direction classes for BS5

- Add SCSS code for text direction utility classes to the Boostrap 5 bridge SCSS file
- Replace all occurrences in the codebase (text-left > text-start, text-sm-right > text-sm-end, ...)
This commit is contained in:
Mikel Martín 2024-06-17 13:04:11 +02:00
parent 6baf2046d5
commit f179890ad5
66 changed files with 139 additions and 127 deletions

View File

@ -48,7 +48,7 @@
Setting.
}}
<div class="form-item row" id="{{id}}">
<div class="form-label col-sm-3 text-sm-right">
<div class="form-label col-sm-3 text-sm-end">
{{#customcontrol}}
<p {{#labelfor}}id="{{labelfor}}_label"{{/labelfor}}>
{{{title}}}

View File

@ -35,7 +35,7 @@
Setting description.
}}
<div class="form-item row">
<div class="form-label col-sm-3 text-sm-right">
<div class="form-label col-sm-3 text-sm-end">
<label>
{{{title}}}
</label>

View File

@ -285,7 +285,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card text-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@ -798,7 +798,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
<div class="card">
{{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}
</div>
<div class="card p-3 text-right">
<div class="card p-3 text-end">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">

View File

@ -101,7 +101,7 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<button class="btn btn-link btn-block text-start" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
@ -116,7 +116,7 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<button class="btn btn-link btn-block text-start collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
@ -130,7 +130,7 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<button class="btn btn-link btn-block text-start collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>

View File

@ -21,6 +21,6 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
{{< example >}}
<figure class="figure">
{{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
<figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>
{{< /example >}}

View File

@ -207,7 +207,7 @@ Use text utilities as needed to change the alignment of your blockquote.
{{< /example >}}
{{< example >}}
<blockquote class="blockquote text-right">
<blockquote class="blockquote text-end">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

View File

@ -17,14 +17,14 @@ Easily realign text to components with text alignment classes.
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
{{< example >}}
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-start">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-end">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
<p class="text-sm-start">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Left aligned text on viewports sized XL (extra-large) or wider.</p>
{{< /example >}}
## Text wrapping and overflow

View File

@ -1,4 +1,4 @@
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-left">
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
<div class="container">
</div>

View File

@ -23,6 +23,6 @@
{
}
}}
<div class="text-left my-5 w-50 mx-auto">
<div class="text-start my-5 w-50 mx-auto">
{{#str}} installer, tool_componentlibrary {{/str}}
</div>

View File

@ -73,8 +73,8 @@ class table implements \renderable {
];
$table->colclasses = [
'text-center',
'text-left',
'text-left',
'text-start',
'text-start',
'text-center',
'text-center',
'text-center',

View File

@ -64,10 +64,10 @@ class manager {
];
$table->attributes['class'] = 'admintable generaltable table table-bordered';
$table->colclasses = [
'text-right',
'text-end',
'',
'',
'text-right',
'text-end',
'text-center',
];
$factors = factor::get_enabled_factors();

View File

@ -204,9 +204,9 @@ class renderer extends \plugin_renderer_base {
$headers->remove,
];
$table->colclasses = [
'text-left',
'text-left',
'text-left',
'text-start',
'text-start',
'text-start',
'text-center',
'text-center',
];

View File

@ -24,7 +24,7 @@
}
}}
<div class="optionsummary" tabindex="-1" data-region="chooser-option-summary-container">
<div class="content text-left mb-5 px-5 py-4" data-region="chooser-option-summary-content-container">
<div class="content text-start mb-5 px-5 py-4" data-region="chooser-option-summary-content-container">
<div data-region="moodle-net">
<div class="overlay-icon-container z-index-1 d-none" data-region="spinner"></div>
<img class="w-25 mb-4" aria-hidden="true" src="{{{img}}}">
@ -39,7 +39,7 @@
<div id="mnet-instance-form-{{uniqid}}" data-region="mnet-form">
<input type="hidden" name="sesskey" value="{{sesskey}}">
<div class="w-75 mx-auto my-3">
<p class="text-left">{{#str}}inputhelp, tool_moodlenet{{/str}}</p>
<p class="text-start">{{#str}}inputhelp, tool_moodlenet{{/str}}</p>
<div class="input-group">
<input type="text"
class="form-control"
@ -58,8 +58,8 @@
</button>
</div>
</div>
<p class="text-left" aria-live="assertive" data-region="validation-area"></p>
<p class="text-left">{{#str}} forminfo, tool_moodlenet {{/str}}</p>
<p class="text-start" aria-live="assertive" data-region="validation-area"></p>
<p class="text-start">{{#str}} forminfo, tool_moodlenet {{/str}}</p>
</div>
</div>
</div>

View File

@ -54,7 +54,7 @@
}}
{{#returnurl}}
<div class="text-right mb-1">
<div class="text-end mb-1">
<a href="{{returnurl}}">{{# str }} backtoprevious, tool_policy {{/ str }}</a>
</div>
{{/returnurl}}

View File

@ -80,7 +80,7 @@
{{/items}}
{{#channellink}}
<div class="pb-3 text-right">
<div class="pb-3 text-end">
<a href="{{{channellink}}}" rel="noopener noreferrer" target="_blank">{{#str}} clientchannellink, block_rss_client {{/str}}</a>
</div>
{{/channellink}}

View File

@ -51,7 +51,7 @@
data-region="event-list-item">
<div class="d-flex flex-wrap pb-1">
<div class="d-flex me-auto pb-1 mw-100 timeline-name">
<small class="text-right text-nowrap align-self-center ms-1">
<small class="text-end text-nowrap align-self-center ms-1">
{{#userdate}} {{timesort}}, {{#str}} strftimetime24, core_langconfig {{/str}} {{/userdate}}
</small>
<div class="activityiconcontainer small courseicon align-self-top align-self-center mx-3 mb-1 mb-sm-0 text-nowrap">

View File

@ -93,13 +93,13 @@
{{> core_calendar/event_details }}
</div>
{{#action.actionable}}
<div class="card-footer text-right bg-transparent">
<div class="card-footer text-end bg-transparent">
<a href="{{action.url}}" class="card-link">{{{action.name}}}</a>
</div>
{{/action.actionable}}
{{^action.actionable}}
{{#isactionevent}}
<div class="card-footer text-right bg-transparent">
<div class="card-footer text-end bg-transparent">
<a href="{{url}}" class="card-link">{{#str}} gotoactivity, core_calendar {{/str}}</a>
</div>
{{/isactionevent}}

View File

@ -60,7 +60,7 @@
<td class="dayblank">&nbsp;</td>
{{/prepadding}}
{{#days}}
<td class="day text-sm-center text-md-left{{!
<td class="day text-sm-center text-md-start{{!
}}{{#istoday}} today{{/istoday}}{{!
}}{{#isweekend}} weekend{{/isweekend}}{{!
}}{{#durationevents.0}} duration{{/durationevents.0}}{{!

View File

@ -127,7 +127,7 @@ data-region="contentbank">
class="cb-content-wrapper d-flex px-2" data-region="filearea">
<div {{#viewlist}}role="row"{{/viewlist}} class="cb-heading bg-white">
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-file cb-column d-flex">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="contentname" data-action="sortname"
<button class="btn btn-block cb-btnsort dir-none text-start" data-string="contentname" data-action="sortname"
title="{{#str}} sortbyx, core, {{#str}} contentname, contentbank {{/str}} {{/str}}">
<span class="title">{{#str}} contentname, contentbank {{/str}}</span>
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>
@ -136,7 +136,7 @@ data-region="contentbank">
</button>
</div>
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-uses cb-column d-flex">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="uses" data-action="sortuses"
<button class="btn btn-block cb-btnsort dir-none text-start" data-string="uses" data-action="sortuses"
title="{{#str}} sortbyx, core, {{#str}} uses, contentbank {{/str}} {{/str}}">
<span class="title">{{#str}} uses, contentbank {{/str}}</span>
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>
@ -145,7 +145,7 @@ data-region="contentbank">
</button>
</div>
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-date cb-column d-flex">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="lastmodified" data-action="sortdate"
<button class="btn btn-block cb-btnsort dir-none text-start" data-string="lastmodified" data-action="sortdate"
title="{{#str}} sortbyx, core, {{#str}} lastmodified, contentbank {{/str}} {{/str}}">
<span class="title">{{#str}} lastmodified, contentbank {{/str}}</span>
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>
@ -154,7 +154,7 @@ data-region="contentbank">
</button>
</div>
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-size cb-column d-flex">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="size" data-action="sortsize"
<button class="btn btn-block cb-btnsort dir-none text-start" data-string="size" data-action="sortsize"
title="{{#str}} sortbyx, core, {{#str}} size, contentbank {{/str}} {{/str}}">
<span class="title">{{#str}} size, contentbank {{/str}}</span>
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>
@ -163,7 +163,7 @@ data-region="contentbank">
</button>
</div>
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-type cb-column d-flex">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="type" data-action="sorttype"
<button class="btn btn-block cb-btnsort dir-none text-start" data-string="type" data-action="sorttype"
title="{{#str}} sortbyx, core, {{#str}} type, contentbank {{/str}} {{/str}}">
<span class="title">{{#str}} type, contentbank {{/str}}</span>
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>
@ -172,7 +172,7 @@ data-region="contentbank">
</button>
</div>
<div {{#viewlist}}role="columnheader"{{/viewlist}} aria-sort="none" class="cb-author cb-column d-flex last">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="author" data-action="sortauthor"
<button class="btn btn-block cb-btnsort dir-none text-start" data-string="author" data-action="sortauthor"
title="{{#str}} sortbyx, core, {{#str}} author, contentbank {{/str}} {{/str}}">
<span class="title">{{#str}} author, contentbank {{/str}}</span>
<span class="default">{{#pix}} t/sort, core {{/pix}}</span>

View File

@ -39,7 +39,7 @@
aria-labelledby="optionsummary_label-{{uniqid}}"
aria-describedby="optionsumary_desc-{{uniqid}}"
>
<div class="content flex-grow-1 text-left p-2 px-sm-5 py-sm-4" data-region="chooser-option-summary-content-container">
<div class="content flex-grow-1 text-start p-2 px-sm-5 py-sm-4" data-region="chooser-option-summary-content-container">
<div class="heading mb-4">
<h5 id="optionsummary_label-{{uniqid}}" data-region="summary-header" tabindex="0">
{{{icon}}}

View File

@ -86,7 +86,7 @@
</h3>
{{/usescategories}}
</div>
<div class="col-auto text-right">
<div class="col-auto text-end">
{{{addfieldmenu}}}
</div>
</div>
@ -97,7 +97,7 @@
<th scope="col" class="col-5">{{#str}} customfield, core_customfield {{/str}}</th>
<th scope="col" class="col-3">{{#str}} shortname, core_customfield {{/str}}</th>
<th scope="col" class="col-2">{{#str}} type, core_customfield {{/str}}</th>
<th scope="col" class="col-2 text-right">{{#str}} action, core_customfield {{/str}}</th>
<th scope="col" class="col-2 text-end">{{#str}} action, core_customfield {{/str}}</th>
</tr>
</thead>
<tbody>
@ -106,7 +106,7 @@
<td class="col-5"><span class="movefield">{{> core/drag_handle}}</span>{{{name}}}</td>
<td class="col-3">{{{shortname}}}</td>
<td class="col-2">{{{type}}}</td>
<td class="col-2 text-right">
<td class="col-2 text-end">
<a href="#" data-role="editfield" data-name="{{name}}" data-id="{{id}}">{{#pix}}
t/edit, core, {{#str}} edit, moodle {{/str}} {{/pix}}</a>
<a href="#" data-id="{{id}}" data-role="deletefield">{{#pix}}

View File

@ -433,46 +433,46 @@ if ($config->stage == INSTALL_DATABASE) {
echo '<div class="row mb-4">';
$disabled = empty($distro->dbhost) ? '' : 'disabled="disabled';
echo '<div class="col-md-3 text-md-right pt-1"><label for="id_dbhost">'.$strdbhost.'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="id_dbhost">'.$strdbhost.'</label></div>';
echo '<div class="col-md-9" data-fieldtype="text">';
echo '<input id="id_dbhost" name="dbhost" '.$disabled.' type="text" class="form-control text-ltr" value="'.s($config->dbhost).'" size="50" /></div>';
echo '</div>';
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="id_dbname">'.$strdbname.'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="id_dbname">'.$strdbname.'</label></div>';
echo '<div class="col-md-9" data-fieldtype="text">';
echo '<input id="id_dbname" name="dbname" type="text" class="form-control text-ltr" value="'.s($config->dbname).'" size="50" /></div>';
echo '</div>';
$disabled = empty($distro->dbuser) ? '' : 'disabled="disabled';
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="id_dbuser">'.$strdbuser.'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="id_dbuser">'.$strdbuser.'</label></div>';
echo '<div class="col-md-9" data-fieldtype="text">';
echo '<input id="id_dbuser" name="dbuser" '.$disabled.' type="text" class="form-control text-ltr" value="'.s($config->dbuser).'" size="50" /></div>';
echo '</div>';
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="id_dbpass">'.$strdbpass.'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="id_dbpass">'.$strdbpass.'</label></div>';
// no password field here, the password may be visible in config.php if we can not write it to disk
echo '<div class="col-md-9" data-fieldtype="text">';
echo '<input id="id_dbpass" name="dbpass" type="text" class="form-control text-ltr" value="'.s($config->dbpass).'" size="50" /></div>';
echo '</div>';
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="id_prefix">'.$strprefix.'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="id_prefix">'.$strprefix.'</label></div>';
echo '<div class="col-md-9" data-fieldtype="text">';
echo '<input id="id_prefix" name="prefix" type="text" class="form-control text-ltr" value="'.s($config->prefix).'" size="10" /></div>';
echo '</div>';
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="id_prefix">'.$strdbport.'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="id_prefix">'.$strdbport.'</label></div>';
echo '<div class="col-md-9" data-fieldtype="text">';
echo '<input id="id_dbport" name="dbport" type="text" class="form-control text-ltr" value="'.s($config->dbport).'" size="10" /></div>';
echo '</div>';
if (!(stristr(PHP_OS, 'win') && !stristr(PHP_OS, 'darwin'))) {
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="id_dbsocket">'.$strdbsocket.'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="id_dbsocket">'.$strdbsocket.'</label></div>';
echo '<div class="col-md-9" data-fieldtype="text">';
echo '<input id="id_dbsocket" name="dbsocket" type="text" class="form-control text-ltr" value="'.s($config->dbsocket).'" size="50" /></div>';
echo '</div>';
@ -504,7 +504,7 @@ if ($config->stage == INSTALL_DATABASETYPE) {
);
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="dbtype">'.get_string('dbtype', 'install').'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="dbtype">'.get_string('dbtype', 'install').'</label></div>';
echo '<div class="col-md-9" data-fieldtype="select">';
echo '<select class="form-control" id="dbtype" name="dbtype">';
$disabled = array();
@ -583,19 +583,19 @@ if ($config->stage == INSTALL_PATHS) {
$stradmindirname = get_string('admindirname', 'install');
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="id_wwwroot">'.$paths['wwwroot'].'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="id_wwwroot">'.$paths['wwwroot'].'</label></div>';
echo '<div class="col-md-9" data-fieldtype="text">';
echo '<input id="id_wwwroot" name="wwwroot" type="text" class="form-control text-ltr" value="'.s($CFG->wwwroot).'" disabled="disabled" size="70" /></div>';
echo '</div>';
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="id_dirroot">'.$paths['dirroot'].'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="id_dirroot">'.$paths['dirroot'].'</label></div>';
echo '<div class="col-md-9" data-fieldtype="text">';
echo '<input id="id_dirroot" name="dirroot" type="text" class="form-control text-ltr" value="'.s($CFG->dirroot).'" disabled="disabled" size="70" /></div>';
echo '</div>';
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="id_dataroot">'.$paths['dataroot'].'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="id_dataroot">'.$paths['dataroot'].'</label></div>';
echo '<div class="col-md-9" data-fieldtype="text">';
echo '<input id="id_dataroot" name="dataroot" type="text" class="form-control text-ltr" value="'.s($config->dataroot).'" size="70" /></div>';
echo '</div>';
@ -606,7 +606,7 @@ if ($config->stage == INSTALL_PATHS) {
if (!file_exists("$CFG->dirroot/admin/environment.xml")) {
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="id_admin">'.$paths['admindir'].'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="id_admin">'.$paths['admindir'].'</label></div>';
echo '<div class="col-md-9" data-fieldtype="text">';
echo '<input id="id_admin" name="admin" type="text" class="form-control text-ltr" value="'.s($config->admin).'" size="10" /></div>';
echo '</div>';
@ -640,7 +640,7 @@ if ($distro) {
$languages = get_string_manager()->get_list_of_translations();
echo '<div class="row mb-4">';
echo '<div class="col-md-3 text-md-right pt-1"><label for="langselect">'.get_string('language').'</label></div>';
echo '<div class="col-md-3 text-md-end pt-1"><label for="langselect">'.get_string('language').'</label></div>';
echo '<div class="col-md-9" data-fieldtype="select">';
echo '<select id="langselect" class="form-control" name="lang" onchange="this.form.submit()">';
foreach ($languages as $name=>$value) {

View File

@ -32,7 +32,7 @@
<span class="tiny_image_filename text-truncate me-1"></span>
</div>
<!-- Column 2: Saving, canceling, browsing repositories buttons -->
<div class="col-md-6 text-right mt-2 md-0 p-0">
<div class="col-md-6 text-end mt-2 md-0 p-0">
<!-- Row 1: Cancel button -->
<button type="button" class="btn btn-secondary" data-action="cancel">{{#str}} cancel, moodle {{/str}}</button>
<!-- Row 2: Save button -->

View File

@ -44,7 +44,7 @@
<button disabled class="tiny_image_addurl btn btn-secondary me-1" type="button">{{#str}} addurl, tiny_media {{/str}}</button>
</div>
<!-- Column 2: Saving, canceling, browsing repositories buttons -->
<div class="col-md-6 text-right mt-2 md-0 p-0">
<div class="col-md-6 text-end mt-2 md-0 p-0">
<!-- Row 1: Cancel button -->
<button type="button" class="btn btn-secondary" data-action="cancel">{{#str}} cancel, moodle {{/str}}</button>
{{#showfilepicker}}

View File

@ -29,7 +29,7 @@
}}
<div class="add_block_button">
<a href="{{link}}" id="addblock-{{uniqid}}" class="btn btn-link block-add text-left mb-3" data-key="addblock"
<a href="{{link}}" id="addblock-{{uniqid}}" class="btn btn-link block-add text-start mb-3" data-key="addblock"
data-url="{{escapedlink}}" data-blockregion="{{blockregion}}">
<i class="fa fa-plus py-2 me-3" aria-hidden="true"></i>{{#str}}addblock{{/str}}
</a>

View File

@ -58,7 +58,7 @@
role="combobox"
aria-haspopup="dialog"
aria-controls="dialog-{{instance}}-{{uniqid}}"
class="{{#buttonclasses}}{{.}}{{/buttonclasses}} btn dropdown-toggle d-flex text-left align-items-center p-0 font-weight-bold"
class="{{#buttonclasses}}{{.}}{{/buttonclasses}} btn dropdown-toggle d-flex text-start align-items-center p-0 font-weight-bold"
aria-label="{{label}}"
data-input-element="input-{{instance}}-{{uniqid}}">
{{{buttoncontent}}}

View File

@ -33,7 +33,7 @@
<div style="flex: 1 1 0; min-width: 0;">
<div id="{{idnumber}}_status" class="text-truncate">&nbsp;</div>
</div>
<div class="text-right ps-3" style="flex: 0 0 content">
<div class="text-end ps-3" style="flex: 0 0 content">
<span id="{{idnumber}}_estimate" class="">&nbsp;</span>
<span id="{{idnumber}}_percentage" class="d-inline-block" style="width: 3em">{{value}}%</span>
</div>

View File

@ -105,7 +105,7 @@
</div>
</td>
{{#settings}}
<td class="text-left">
<td class="text-start">
<div data-preference="{{{enabledsetting}}}">
<div class="custom-control custom-switch {{#locked}} dimmed_text{{/locked}} pb-1">
<input type="checkbox"

View File

@ -37,7 +37,7 @@
{{$drawercontent}}
<div id="message-drawer-{{uniqid}}" class="message-app" data-region="message-drawer" role="region">
<h2 class="sr-only">{{#str}} messagingcategory,admin {{/str}}</h2>
<div class="closewidget text-right pe-2">
<div class="closewidget text-end pe-2">
<a class="text-dark btn-link" data-action="closedrawer" href="#"
title="{{#cleanstr}} closebuttontitle {{/cleanstr}}" aria-label="{{#cleanstr}} closebuttontitle {{/cleanstr}}"
>

View File

@ -60,7 +60,7 @@
{{/fromloggedinuser}}
<div
class="ms-auto small text-right time {{^formattedtime}}hidden{{/formattedtime}}"
class="ms-auto small text-end time {{^formattedtime}}hidden{{/formattedtime}}"
style="flex-shrink: 0"
data-region="time-created"
>

View File

@ -63,7 +63,7 @@
</div>
{{/caneditownmessageprofile}}
</div>
<div class="text-right mt-sm-3">
<div class="text-end mt-sm-3">
<a href="#" data-route="view-contacts" role="button">
{{#pix}} i/user, core {{/pix}}
{{#str}} contacts, core_message {{/str}}

View File

@ -41,7 +41,7 @@
>
<div id="{{$region}}{{/region}}-toggle" class="card-header rounded-0" data-region="toggle">
<button
class="btn btn-link w-100 text-left p-1 p-sm-2 d-flex rounded-0 align-items-center overview-section-toggle {{^expanded}}collapsed{{/expanded}}"
class="btn btn-link w-100 text-start p-1 p-sm-2 d-flex rounded-0 align-items-center overview-section-toggle {{^expanded}}collapsed{{/expanded}}"
data-toggle="collapse"
data-target="#{{$region}}{{/region}}-target-{{uniqid}}"
aria-expanded="{{#expanded}}true{{/expanded}}{{^expanded}}false{{/expanded}}"

View File

@ -45,7 +45,7 @@
<h3 class="h6 px-2">{{#str}} noncontacts, core_message {{/str}}</h3>
<div class="list-group" data-region="list"></div>
</div>
<div class="text-right">
<div class="text-end">
<button class="btn btn-link text-primary" data-action="load-more-users">
<span data-region="button-text">{{#str}} loadmore, core_message {{/str}}</span>
<span data-region="loading-icon-container" class="hidden">{{> core/loading }}</span>
@ -55,7 +55,7 @@
<div class="bg-white" data-region="messages-container">
<h3 class="h6 px-2 pt-2">{{#str}} messages, core_message {{/str}}</h3>
<div class="list-group" data-region="list"></div>
<div class="text-right">
<div class="text-end">
<button class="btn btn-link text-primary" data-action="load-more-messages">
<span data-region="button-text">{{#str}} loadmore, core_message {{/str}}</span>
<span data-region="loading-icon-container" class="hidden">{{> core/loading }}</span>

View File

@ -64,7 +64,7 @@
<div data-region="configure-filters" id="filter-configuration-{{uniqid}}" class="card card-large p-2">
<form>
<span class="row px-3 py-1">
<label class="text-right w-25 p-2 m-0" for="filter-general-{{uniqid}}">
<label class="text-end w-25 p-2 m-0" for="filter-general-{{uniqid}}">
{{#str}}filter, mod_assign{{/str}}
</label>
<select name="filter" class="custom-select w-50" id="filter-general-{{uniqid}}">
@ -75,7 +75,7 @@
</span>
{{#hasmarkingallocation}}
<span class="row px-3 py-1">
<label class="text-right w-25 p-2 m-0" for="filter-marker-{{uniqid}}">
<label class="text-end w-25 p-2 m-0" for="filter-marker-{{uniqid}}">
{{#str}}markerfilter, mod_assign{{/str}}
</label>
<select name="markerfilter" class="custom-select w-50" id="filter-marker-{{uniqid}}">
@ -87,7 +87,7 @@
{{/hasmarkingallocation}}
{{#hasmarkingworkflow}}
<span class="row px-3 py-1">
<label class="text-right w-25 p-2 m-0" for="filter-workflow-{{uniqid}}">
<label class="text-end w-25 p-2 m-0" for="filter-workflow-{{uniqid}}">
{{#str}}workflowfilter, mod_assign{{/str}}
</label>
<select name="workflowfilter" class="custom-select w-50" id="filter-workflow-{{uniqid}}">

View File

@ -62,7 +62,7 @@
}
}}
<div class="book p-4">
<div class="text-right">{{{ printdialoglink }}}</div>
<div class="text-end">{{{ printdialoglink }}}</div>
<div class="text-center pb-3 book_title">{{{ booktitle }}}</div>
<div class="book_info w-100 pt-6 d-inline-block">
<div class="w-50 float-start">

View File

@ -43,7 +43,7 @@
}
}}
<div class="chapter col-12 p-4">
<div class="text-right">{{{ printdialoglink }}}</div>
<div class="text-end">{{{ printdialoglink }}}</div>
<div class="text-center pb-5">{{{ booktitle }}}</div>
<div class="chapter">
{{#parentchaptertitle}}

View File

@ -6,7 +6,7 @@
<div class="col-3 align-self-center">
##user##<br/><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
<div class="col-4 col-md-6 text-end align-self-center data-timeinfo">
<span class="font-weight-bold ">Last edited:</span> ##timemodified##
</div>
<div class="col-4 col-md-3 ms-auto align-self-center d-flex flex-row-reverse">

View File

@ -6,7 +6,7 @@
<div class="col-3 align-self-center">
##user##<br/><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
<div class="col-4 col-md-6 text-end align-self-center data-timeinfo">
<span class="font-weight-bold ">Last edited:</span> ##timemodified##
</div>
<div class="col-4 col-md-3 ms-auto align-self-center d-flex flex-row-reverse">

View File

@ -18,7 +18,7 @@
<div class="col-4 col-md-3 align-self-center">
##user##<br/><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-8 col-md-6 text-right align-self-center data-timeinfo">
<div class="col-8 col-md-6 text-end align-self-center data-timeinfo">
<span class="font-weight-bold ">Last edited:</span> ##timemodified##
</div>
</div>

View File

@ -6,7 +6,7 @@
<div class="col-3 align-self-center">
##user##<br/><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
<div class="col-4 col-md-6 text-end align-self-center data-timeinfo">
<span class="font-weight-bold ">Last edited:</span> ##timemodified##
</div>
<div class="col-4 col-md-3 ms-auto align-self-center d-flex flex-row-reverse">

View File

@ -6,7 +6,7 @@
<div class="col-3 align-self-center">
##user##<br/><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
<div class="col-4 col-md-6 text-end align-self-center data-timeinfo">
<span class="font-weight-bold ">Last edited:</span> ##timemodified##
</div>
<div class="col-4 col-md-3 ms-auto align-self-center d-flex flex-row-reverse">

View File

@ -6,7 +6,7 @@
<div class="col-3 align-self-center">
##user##<br/><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
<div class="col-4 col-md-6 text-end align-self-center data-timeinfo">
<span class="font-weight-bold ">Last edited:</span> ##timemodified##
</div>
<div class="col-4 col-md-3 ms-auto align-self-center d-flex flex-row-reverse">

View File

@ -6,7 +6,7 @@
<div class="col-3 align-self-center">
##user##<br/><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
<div class="col-4 col-md-6 text-end align-self-center data-timeinfo">
<span class="font-weight-bold ">Last edited:</span> ##timemodified##
</div>
<div class="col-4 col-md-3 ms-auto align-self-center d-flex flex-row-reverse">

View File

@ -6,7 +6,7 @@
<div class="col-3 align-self-center">
##user##<br/><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
<div class="col-4 col-md-6 text-end align-self-center data-timeinfo">
<span class="font-weight-bold ">Last edited:</span> ##timemodified##
</div>
<div class="col-4 col-md-3 ms-auto align-self-center d-flex flex-row-reverse">

View File

@ -6,7 +6,7 @@
<div class="col-3 align-self-center">
##user##<br/><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
<div class="col-4 col-md-6 text-end align-self-center data-timeinfo">
<span class="font-weight-bold ">Last edited:</span> ##timemodified##
</div>
<div class="col-4 col-md-3 ms-auto align-self-center d-flex flex-row-reverse">

View File

@ -41,7 +41,7 @@
<div class="col-3 align-self-center">
##user##<br/><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
<div class="col-4 col-md-6 text-end align-self-center data-timeinfo">
<span class="font-weight-bold ">{{#str}}datemodified, mod_data{{/str}}&nbsp;</span>##timemodified##
</div>
<div class="col-4 col-md-3 ms-auto align-self-center d-flex flex-row-reverse">

View File

@ -42,7 +42,7 @@
<div class="col-3 align-self-center">
##user##<br/><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
<div class="col-4 col-md-6 text-end align-self-center data-timeinfo">
<span class="font-weight-bold ">{{#str}}datemodified, mod_data{{/str}}&nbsp;</span>##timemodified##
</div>
<div class="col-4 col-md-3 ms-auto align-self-center d-flex flex-row-reverse">

View File

@ -118,7 +118,7 @@ if ($courseitemfilter > 0) {
echo '<tr>';
echo '<td>'.$shortname.'</td>';
echo '<td class="text-right">';
echo '<td class="text-end">';
echo format_float(($c->sumvalue / $c->countvalue), 2);
echo '</td>';
echo '</tr>';

View File

@ -61,7 +61,7 @@ class mod_feedback_templates_table extends flexible_table {
$this->define_headers($tableheaders);
$this->define_baseurl($baseurl);
$this->column_class('template', 'template');
$this->column_class('actions', 'text-right');
$this->column_class('actions', 'text-end');
$this->sortable(false);
}

View File

@ -157,7 +157,7 @@ class feedback_item_info extends feedback_item_base {
$analysed_item = $this->get_analysed($item, $groupid, $courseid);
$data = $analysed_item->data;
if (is_array($data)) {
echo '<tr><th class="text-left">';
echo '<tr><th class="text-start">';
echo $itemnr . ' ';
if (strval($item->label) !== '') {
echo '('. format_string($item->label).') ';

View File

@ -209,7 +209,7 @@ class feedback_item_multichoice extends feedback_item_base {
if ($analysed_item) {
$itemname = $analysed_item[1];
echo "<table class=\"analysis itemtype_{$item->typ}\">";
echo '<tr><th class="text-left">';
echo '<tr><th class="text-start">';
echo $itemnr . ' ';
if (strval($item->label) !== '') {
echo '('. format_string($item->label).') ';

View File

@ -185,7 +185,7 @@ class feedback_item_multichoicerated extends feedback_item_base {
$analysed_item = $this->get_analysed($item, $groupid, $courseid);
if ($analysed_item) {
echo "<table class=\"analysis itemtype_{$item->typ}\">";
echo '<tr><th class="text-left">';
echo '<tr><th class="text-start">';
echo $itemnr . ' ';
if (strval($item->label) !== '') {
echo '('. format_string($item->label).') ';
@ -221,7 +221,7 @@ class feedback_item_multichoicerated extends feedback_item_base {
$chart->set_labels($data['labels']);
echo '<tr><td>'. $OUTPUT->render($chart) . '</td></tr>';
$avg = format_float($avg, 2);
echo '<tr><td class="text-left"><b>';
echo '<tr><td class="text-start"><b>';
echo get_string('average', 'feedback').': '.$avg.'</b>';
echo '</td></tr>';
echo '</table>';

View File

@ -144,7 +144,7 @@ class feedback_item_numeric extends feedback_item_base {
if (isset($values->data) AND is_array($values->data)) {
echo "<table class=\"analysis itemtype_{$item->typ}\">";
echo '<tr><th class="text-left">';
echo '<tr><th class="text-start">';
echo $itemnr . ' ';
if (strval($item->label) !== '') {
echo '('. format_string($item->label).') ';

View File

@ -137,7 +137,7 @@ class feedback_item_textarea extends feedback_item_base {
$values = feedback_get_group_values($item, $groupid, $courseid);
if ($values) {
echo "<table class=\"analysis itemtype_{$item->typ}\">";
echo '<tr><th class="text-left">';
echo '<tr><th class="text-start">';
echo $itemnr . ' ';
if (strval($item->label) !== '') {
echo '('. format_string($item->label).') ';

View File

@ -131,7 +131,7 @@ class feedback_item_textfield extends feedback_item_base {
$values = feedback_get_group_values($item, $groupid, $courseid);
if ($values) {
echo "<table class=\"analysis itemtype_{$item->typ}\">";
echo '<tr><th class="text-left">';
echo '<tr><th class="text-start">';
echo $itemnr . ' ';
if (strval($item->label) !== '') {
echo '('. format_string($item->label).') ';

View File

@ -271,7 +271,7 @@
</div>
{{/firstpostauthor}}
</td>
<td class="text-left align-middle fit-content limit-width px-3">
<td class="text-start align-middle fit-content limit-width px-3">
{{! TODO Check q&a, eachuser }}
{{#latestpostauthor}}
<div class="d-flex">

View File

@ -37,7 +37,7 @@
{{#posts}}
{{< mod_forum/forum_discussion_post }}
{{$footer}}
<div class="link text-right">
<div class="link text-end">
<a href="{{urls.discuss}}"
aria-label="{{#str}} discusstopicname, forum, {{subject}} {{/str}}">
{{#str}}discussthistopic, forum{{/str}}

View File

@ -109,7 +109,7 @@
<td class="d-none d-sm-table-cell border-top border-dark">
<strong>{{#str}}score, mod_h5pactivity{{/str}}: {{score}}</strong>
</td>
<td class="d-table-cell d-sm-none text-right border-top border-dark" colspan="3">
<td class="d-table-cell d-sm-none text-end border-top border-dark" colspan="3">
<strong>{{#str}}score, mod_h5pactivity{{/str}}: {{score}}</strong>
</td>
</tr>

View File

@ -721,7 +721,7 @@ class renderer extends plugin_renderer_base {
public function access_messages($messages) {
$output = '';
foreach ($messages as $message) {
$output .= html_writer::tag('p', $message, ['class' => 'text-left']);
$output .= html_writer::tag('p', $message, ['class' => 'text-start']);
}
return $output;
}
@ -951,7 +951,7 @@ class renderer extends plugin_renderer_base {
if (!$viewobj->quizhasquestions) {
$output .= html_writer::div(
$this->notification(get_string('noquestions', 'quiz'), 'warning', false),
'text-left mb-3');
'text-start mb-3');
}
$output .= $this->access_messages($viewobj->preventmessages);

View File

@ -111,7 +111,7 @@
</a>
</span>
</th>
<td class="align-middle text-right py-1">
<td class="align-middle text-end py-1">
{{summarks}}
</td>
<td class="align-middle text-center py-1">
@ -169,7 +169,7 @@
<tr>
<td class="align-middle py-1">{{displaynumber}}</td>
<th scope="row" class="align-middle py-1"><label for="grade-item-choice-{{id}}" class="my-1">{{{displayname}}}</label></th>
<td class="align-middle text-right py-1">{{maxmark}}</td>
<td class="align-middle text-end py-1">{{maxmark}}</td>
<td class="align-middle py-1">
<select id="grade-item-choice-{{id}}" class="form-control" data-slot-id="{{id}}">
{{#choices}}

View File

@ -32,13 +32,13 @@
<div class="history-header mb-3">
<div class="row">
<div class="col-8 text-left font-weight-bold">
<div class="col-8 text-start font-weight-bold">
<h3>
{{{questionicon}}}
{{questionname}}
</h3>
</div>
<div class="col-4 text-right">
<div class="col-4 text-end">
<a class="btn btn-secondary" id="qbank-history-close" href="{{{returnurl}}}">{{#str}} close_history, qbank_history {{/str}}</a>
</div>
</div>

View File

@ -46,7 +46,7 @@
<div class="mb-3 card">
<div class="card-header p-0">
<div class="mb-0 d-flex">
<h3 class="h6 text-left m-0 align-self-center ps-3" data-region="audience-heading">
<h3 class="h6 text-start m-0 align-self-center ps-3" data-region="audience-heading">
{{{headingeditable}}}
</h3>
<span class="ms-auto">

View File

@ -49,3 +49,15 @@
@extend .float#{$infix}-right;
}
}
// Generate all text classes for all breakpoints for directions start and end.
// text-start > text-left, text-sm-end > text-sm-right, ...
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-start {
@extend .text#{$infix}-left;
}
.text#{$infix}-end {
@extend .text#{$infix}-right;
}
}

View File

@ -22676,11 +22676,11 @@ button.bg-dark:focus {
white-space: nowrap;
}
.text-left {
.text-left, .text-start {
text-align: left !important;
}
.text-right {
.text-right, .text-end {
text-align: right !important;
}
@ -22689,10 +22689,10 @@ button.bg-dark:focus {
}
@media (min-width: 576px) {
.text-sm-left {
.text-sm-left, .text-sm-start {
text-align: left !important;
}
.text-sm-right {
.text-sm-right, .text-sm-end {
text-align: right !important;
}
.text-sm-center {
@ -22700,10 +22700,10 @@ button.bg-dark:focus {
}
}
@media (min-width: 768px) {
.text-md-left {
.text-md-left, .text-md-start {
text-align: left !important;
}
.text-md-right {
.text-md-right, .text-md-end {
text-align: right !important;
}
.text-md-center {
@ -22711,10 +22711,10 @@ button.bg-dark:focus {
}
}
@media (min-width: 992px) {
.text-lg-left {
.text-lg-left, .text-lg-start {
text-align: left !important;
}
.text-lg-right {
.text-lg-right, .text-lg-end {
text-align: right !important;
}
.text-lg-center {
@ -22722,10 +22722,10 @@ button.bg-dark:focus {
}
}
@media (min-width: 1200px) {
.text-xl-left {
.text-xl-left, .text-xl-start {
text-align: left !important;
}
.text-xl-right {
.text-xl-right, .text-xl-end {
text-align: right !important;
}
.text-xl-center {

View File

@ -22676,11 +22676,11 @@ button.bg-dark:focus {
white-space: nowrap;
}
.text-left {
.text-left, .text-start {
text-align: left !important;
}
.text-right {
.text-right, .text-end {
text-align: right !important;
}
@ -22689,10 +22689,10 @@ button.bg-dark:focus {
}
@media (min-width: 576px) {
.text-sm-left {
.text-sm-left, .text-sm-start {
text-align: left !important;
}
.text-sm-right {
.text-sm-right, .text-sm-end {
text-align: right !important;
}
.text-sm-center {
@ -22700,10 +22700,10 @@ button.bg-dark:focus {
}
}
@media (min-width: 768px) {
.text-md-left {
.text-md-left, .text-md-start {
text-align: left !important;
}
.text-md-right {
.text-md-right, .text-md-end {
text-align: right !important;
}
.text-md-center {
@ -22711,10 +22711,10 @@ button.bg-dark:focus {
}
}
@media (min-width: 992px) {
.text-lg-left {
.text-lg-left, .text-lg-start {
text-align: left !important;
}
.text-lg-right {
.text-lg-right, .text-lg-end {
text-align: right !important;
}
.text-lg-center {
@ -22722,10 +22722,10 @@ button.bg-dark:focus {
}
}
@media (min-width: 1200px) {
.text-xl-left {
.text-xl-left, .text-xl-start {
text-align: left !important;
}
.text-xl-right {
.text-xl-right, .text-xl-end {
text-align: right !important;
}
.text-xl-center {

View File

@ -81,7 +81,7 @@
{{/islast}}
</h3>
</div>
<div class="col-auto text-right">
<div class="col-auto text-end">
{{#addfieldmenu}}{{> core/action_menu}}{{/addfieldmenu}}
</div>
</div>
@ -91,7 +91,7 @@
<thead>
<tr>
<th scope="col" class="col-8">{{#str}}profilefield, admin{{/str}}</th>
<th scope="col" class="col-3 text-right">{{#str}}edit{{/str}}</th>
<th scope="col" class="col-3 text-end">{{#str}}edit{{/str}}</th>
</tr>
</thead>
<tbody>
@ -100,7 +100,7 @@
<td class="col-8">
{{{name}}}
</td>
<td class="col-3 text-right">
<td class="col-3 text-end">
<a href="#" data-action="editfield" data-id="{{id}}" data-name="{{name}}">
{{#pix}}t/edit, core, {{#str}}edit{{/str}}{{/pix}}</a>
<a href="{{baseurl}}?action=deletefield&id={{id}}&sesskey={{sesskey}}">