Merge branch 'MDL-75671-main' of https://github.com/roland04/moodle
This commit is contained in:
@@ -159,11 +159,11 @@ class users extends system_report {
|
||||
->add_callback(static function(string $fullname, \stdClass $row): string {
|
||||
if ($row->suspended) {
|
||||
$fullname .= ' ' . \html_writer::tag('span', get_string('suspended', 'moodle'),
|
||||
['class' => 'badge badge-secondary ml-1']);
|
||||
['class' => 'badge badge-secondary ms-1']);
|
||||
}
|
||||
if (!$row->confirmed) {
|
||||
$fullname .= ' ' . \html_writer::tag('span', get_string('confirmationpending', 'admin'),
|
||||
['class' => 'badge badge-danger ml-1']);
|
||||
['class' => 'badge badge-danger ms-1']);
|
||||
}
|
||||
return $fullname;
|
||||
});
|
||||
|
||||
+12
-12
@@ -1241,7 +1241,7 @@ class core_admin_renderer extends plugin_renderer_base {
|
||||
new moodle_url($this->page->url, array('installupdatex' => 1)),
|
||||
get_string('updateavailableinstallall', 'core_admin', count($installableupdates)),
|
||||
'post',
|
||||
array('class' => 'singlebutton updateavailableinstallall mr-1')
|
||||
array('class' => 'singlebutton updateavailableinstallall me-1')
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1250,7 +1250,7 @@ class core_admin_renderer extends plugin_renderer_base {
|
||||
new moodle_url($this->page->url, array('abortinstallx' => 1, 'confirmplugincheck' => 0)),
|
||||
get_string('cancelinstallall', 'core_plugin', count($installabortable)),
|
||||
'post',
|
||||
array('class' => 'singlebutton cancelinstallall mr-1')
|
||||
array('class' => 'singlebutton cancelinstallall me-1')
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1259,17 +1259,17 @@ class core_admin_renderer extends plugin_renderer_base {
|
||||
new moodle_url($this->page->url, array('abortupgradex' => 1)),
|
||||
get_string('cancelupgradeall', 'core_plugin', count($upgradeabortable)),
|
||||
'post',
|
||||
array('class' => 'singlebutton cancelupgradeall mr-1')
|
||||
array('class' => 'singlebutton cancelupgradeall me-1')
|
||||
);
|
||||
}
|
||||
|
||||
$out .= html_writer::div(html_writer::link(new moodle_url($this->page->url, array('showallplugins' => 0)),
|
||||
get_string('plugincheckattention', 'core_plugin')).' '.html_writer::span($sumattention, 'badge bg-light text-dark'),
|
||||
'btn btn-link mr-1');
|
||||
'btn btn-link me-1');
|
||||
|
||||
$out .= html_writer::div(html_writer::link(new moodle_url($this->page->url, array('showallplugins' => 1)),
|
||||
get_string('plugincheckall', 'core_plugin')).' '.html_writer::span($sumtotal, 'badge bg-light text-dark'),
|
||||
'btn btn-link mr-1');
|
||||
'btn btn-link me-1');
|
||||
|
||||
$out .= $this->output->container_end(); // End of .actions container.
|
||||
$out .= $this->output->container_end(); // End of #plugins-check-info container.
|
||||
@@ -1376,13 +1376,13 @@ class core_admin_renderer extends plugin_renderer_base {
|
||||
new moodle_url($this->page->url, array('installdepx' => 1)),
|
||||
get_string('dependencyinstallmissing', 'core_plugin', count($installable)),
|
||||
'post',
|
||||
array('class' => 'singlebutton dependencyinstallmissing d-inline-block mr-1')
|
||||
array('class' => 'singlebutton dependencyinstallmissing d-inline-block me-1')
|
||||
);
|
||||
}
|
||||
|
||||
$out .= html_writer::div(html_writer::link(new moodle_url('/admin/tool/installaddon/'),
|
||||
get_string('dependencyuploadmissing', 'core_plugin'), array('class' => 'btn btn-link')),
|
||||
'dependencyuploadmissing d-inline-block mr-1');
|
||||
'dependencyuploadmissing d-inline-block me-1');
|
||||
|
||||
$out .= $this->output->container_end(); // End of .plugins-check-dependencies-actions container.
|
||||
|
||||
@@ -1448,29 +1448,29 @@ class core_admin_renderer extends plugin_renderer_base {
|
||||
$info .= html_writer::div(
|
||||
html_writer::link('https://moodle.org/plugins/view.php?plugin='.$plugin->component,
|
||||
get_string('misdepinfoplugin', 'core_plugin')),
|
||||
'misdepinfoplugin d-inline-block mr-3 mb-1'
|
||||
'misdepinfoplugin d-inline-block me-3 mb-1'
|
||||
);
|
||||
|
||||
$info .= html_writer::div(
|
||||
html_writer::link('https://moodle.org/plugins/pluginversion.php?id='.$plugin->version->id,
|
||||
get_string('misdepinfoversion', 'core_plugin')),
|
||||
'misdepinfoversion d-inline-block mr-3 mb-1'
|
||||
'misdepinfoversion d-inline-block me-3 mb-1'
|
||||
);
|
||||
|
||||
$info .= html_writer::div(html_writer::link($plugin->version->downloadurl, get_string('download')),
|
||||
'misdepdownload d-inline-block mr-3 mb-1');
|
||||
'misdepdownload d-inline-block me-3 mb-1');
|
||||
|
||||
if ($pluginman->is_remote_plugin_installable($plugin->component, $plugin->version->version, $reason)) {
|
||||
$info .= $this->output->single_button(
|
||||
new moodle_url($this->page->url, array('installdep' => $plugin->component)),
|
||||
get_string('dependencyinstall', 'core_plugin'),
|
||||
'post',
|
||||
array('class' => 'singlebutton dependencyinstall mr-3 mb-1')
|
||||
array('class' => 'singlebutton dependencyinstall me-3 mb-1')
|
||||
);
|
||||
} else {
|
||||
$reasonhelp = $this->info_remote_plugin_not_installable($reason);
|
||||
if ($reasonhelp) {
|
||||
$info .= html_writer::div($reasonhelp, 'reasonhelp dependencyinstall d-inline-block mr-3 mb-1');
|
||||
$info .= html_writer::div($reasonhelp, 'reasonhelp dependencyinstall d-inline-block me-3 mb-1');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -655,7 +655,7 @@ class core_role_define_role_table_advanced extends core_role_capability_table_wi
|
||||
echo "</label>\n";
|
||||
}
|
||||
if ($helpicon) {
|
||||
echo '<span class="float-sm-right text-nowrap">'.$helpicon.'</span>';
|
||||
echo '<span class="float-sm-end text-nowrap">'.$helpicon.'</span>';
|
||||
}
|
||||
echo '</div>';
|
||||
if (isset($this->errors[$name])) {
|
||||
|
||||
@@ -165,7 +165,7 @@ if (!empty($capabilities)) {
|
||||
$attrs = array('type'=>'submit', 'name'=>'savechanges', 'value'=>get_string('savechanges'), 'class'=>'btn btn-primary');
|
||||
echo html_writer::empty_tag('input', $attrs);
|
||||
$attrs = array('type' => 'submit', 'name' => 'cancel', 'value' => get_string('cancel'),
|
||||
'class' => 'btn btn-secondary ml-1');
|
||||
'class' => 'btn btn-secondary ms-1');
|
||||
echo html_writer::empty_tag('input', $attrs);
|
||||
echo html_writer::end_tag('div');
|
||||
echo html_writer::end_tag('div');
|
||||
|
||||
@@ -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}}}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
<a
|
||||
href="{{reporturl}}"
|
||||
id="theme-usage-report-{{choose}}"
|
||||
class="btn btn-link p-0 ml-2"
|
||||
class="btn btn-link p-0 ms-2"
|
||||
title="{{#str}}themeusagereportname, admin, {{name}}{{/str}}">
|
||||
<i class="icon fa fa-area-chart m-0" aria-hidden="true"></i>
|
||||
<span class="sr-only">{{#str}}themeusagereportname, admin, {{name}}{{/str}}</span>
|
||||
@@ -68,7 +68,7 @@
|
||||
<a
|
||||
href="{{settingsurl}}"
|
||||
id="theme-settings-{{choose}}"
|
||||
class="btn btn-link p-0 ml-2"
|
||||
class="btn btn-link p-0 ms-2"
|
||||
title="{{#str}}themeeditsettingsname, admin, {{name}}{{/str}}">
|
||||
<i class="icon fa fa-cog m-0" aria-hidden="true"></i>
|
||||
<span class="sr-only">{{#str}}themeeditsettingsname, admin, {{name}}{{/str}}</span>
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<div class="lead">{{tokenname}}</div>
|
||||
<div class="d-flex justify-content-start align-middle">
|
||||
<div class="lead text-break pt-1" id="copytoclipboardtoken">{{token}}</div>
|
||||
<button class="btn btn-primary ml-2" data-action="copytoclipboard" data-clipboard-target="#copytoclipboardtoken" data-clipboard-success-message="{{#str}}tokencopied, webservice{{/str}}">
|
||||
<button class="btn btn-primary ms-2" data-action="copytoclipboard" data-clipboard-target="#copytoclipboardtoken" data-clipboard-success-message="{{#str}}tokencopied, webservice{{/str}}">
|
||||
{{#pix}}t/copy, core {{/pix}}{{#str}}copytoclipboard{{/str}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
}
|
||||
}}
|
||||
|
||||
<div class="mt-2 mb-1 float-right">
|
||||
<div class="mt-2 mb-1 float-end">
|
||||
{{#export}}{{> core/single_button}}{{/export}}
|
||||
{{#import}}{{> core/single_button}}{{/import}}
|
||||
</div>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
<input class="custom-control-input" type="radio" name="exportoption" id="id-mode-exportmodel" value="exportmodel" checked>
|
||||
<label class="custom-control-label" for="id-mode-exportmodel">{{#str}} exportmodel, tool_analytics {{/str}}</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox ml-5" id="id-includeweights-container">
|
||||
<div class="custom-control custom-checkbox ms-5" id="id-includeweights-container">
|
||||
<input class="custom-control-input" type="checkbox" id="id-includeweights" value="1" checked>
|
||||
<label class="custom-control-label" for="id-includeweights">{{#str}} exportincludeweights, tool_analytics {{/str}}</label>
|
||||
</div>
|
||||
|
||||
@@ -32,13 +32,13 @@ Combine sets of button groups into button toolbars for more complex components.
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="btn-group mr-2" role="group" aria-label="Second group">
|
||||
<div class="btn-group me-2" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-secondary">5</button>
|
||||
<button type="button" class="btn btn-secondary">6</button>
|
||||
<button type="button" class="btn btn-secondary">7</button>
|
||||
@@ -53,7 +53,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -744,7 +744,7 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex">
|
||||
<div class="dropdown mr-1">
|
||||
<div class="dropdown me-1">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
|
||||
Offset
|
||||
</button>
|
||||
|
||||
@@ -383,7 +383,7 @@ At times, you maybe need to use margin or padding utilities to create that perfe
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="form-group row">
|
||||
<legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
|
||||
<legend class="col-form-label col-sm-2 float-sm-start pt-0">Radios</legend>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
|
||||
@@ -544,8 +544,8 @@ And of course [custom form controls](#custom-forms) are supported.
|
||||
<form>
|
||||
<div class="form-row align-items-center">
|
||||
<div class="col-auto my-1">
|
||||
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
|
||||
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
|
||||
<label class="me-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
|
||||
<select class="custom-select me-sm-2" id="inlineFormCustomSelect">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
@@ -553,7 +553,7 @@ And of course [custom form controls](#custom-forms) are supported.
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<div class="custom-control custom-checkbox mr-sm-2">
|
||||
<div class="custom-control custom-checkbox me-sm-2">
|
||||
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
|
||||
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
|
||||
</div>
|
||||
@@ -578,17 +578,17 @@ You may need to manually address the width and alignment of individual form cont
|
||||
{{< example >}}
|
||||
<form class="form-inline">
|
||||
<label class="sr-only" for="inlineFormInputName2">Name</label>
|
||||
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
|
||||
<input type="text" class="form-control mb-2 me-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
|
||||
|
||||
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
|
||||
<div class="input-group mb-2 mr-sm-2">
|
||||
<div class="input-group mb-2 me-sm-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-2 mr-sm-2">
|
||||
<div class="form-check mb-2 me-sm-2">
|
||||
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
|
||||
<label class="form-check-label" for="inlineFormCheck">
|
||||
Remember me
|
||||
@@ -603,15 +603,15 @@ Custom form controls and selects are also supported.
|
||||
|
||||
{{< example >}}
|
||||
<form class="form-inline">
|
||||
<label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
|
||||
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
|
||||
<label class="my-1 me-2" for="inlineFormCustomSelectPref">Preference</label>
|
||||
<select class="custom-select my-1 me-sm-2" id="inlineFormCustomSelectPref">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
|
||||
<div class="custom-control custom-checkbox my-1 mr-sm-2">
|
||||
<div class="custom-control custom-checkbox my-1 me-sm-2">
|
||||
<input type="checkbox" class="custom-control-input" id="customControlInline">
|
||||
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@ Below is an example of a single media object. Only two classes are required—th
|
||||
|
||||
{{< example >}}
|
||||
<div class="media">
|
||||
{{< placeholder width="64" height="64" class="mr-3" >}}
|
||||
{{< placeholder width="64" height="64" class="me-3" >}}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
<p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
|
||||
@@ -36,13 +36,13 @@ Media objects can be infinitely nested, though we suggest you stop at some point
|
||||
|
||||
{{< example >}}
|
||||
<div class="media">
|
||||
{{< placeholder width="64" height="64" class="mr-3" >}}
|
||||
{{< placeholder width="64" height="64" class="me-3" >}}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
<p>Standing on the frontline when the bombs start to fall. Heaven is jealous of our love, angels are crying from up above. Can't replace you with a million rings. Boy, when you're with me I'll give you a taste. There’s no going back. Before you met me I was alright but things were kinda heavy. Heavy is the head that wears the crown.</p>
|
||||
|
||||
<div class="media mt-3">
|
||||
<a class="mr-3" href="#">
|
||||
<a class="me-3" href="#">
|
||||
{{< placeholder width="64" height="64" >}}
|
||||
</a>
|
||||
<div class="media-body">
|
||||
@@ -60,7 +60,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
|
||||
|
||||
{{< example >}}
|
||||
<div class="media">
|
||||
{{< placeholder width="64" height="64" class="align-self-start mr-3" >}}
|
||||
{{< placeholder width="64" height="64" class="align-self-start me-3" >}}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Top-aligned media</h5>
|
||||
<p>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So I sat quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching tattoos. So très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
|
||||
@@ -71,7 +71,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
|
||||
|
||||
{{< example >}}
|
||||
<div class="media">
|
||||
{{< placeholder width="64" height="64" class="align-self-center mr-3" >}}
|
||||
{{< placeholder width="64" height="64" class="align-self-center me-3" >}}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Center-aligned media</h5>
|
||||
<p>She'll turn cold as a freezer. At the eh-end of it all. Stinging like a bee I earned my stripes. Bikinis, zucchinis, Martinis, no weenies. I hope you got a healthy appetite. We can dance, until we die, you and I, will be young forever. We're living the life. We're doing it right. Word on the street, you got somethin' to show me, me.</p>
|
||||
@@ -82,7 +82,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
|
||||
|
||||
{{< example >}}
|
||||
<div class="media">
|
||||
{{< placeholder width="64" height="64" class="align-self-end mr-3" >}}
|
||||
{{< placeholder width="64" height="64" class="align-self-end me-3" >}}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Bottom-aligned media</h5>
|
||||
<p>Come on, let your colours burst. I can feel this light that's inside of me. All night they're playing, your song. From Tokyo to Mexico, to Rio. There’s no going back. But down to earth. Magical, colorful, Mr. Mystery, ee. Different DNA, they don't understand you.</p>
|
||||
@@ -101,7 +101,7 @@ Change the order of content in media objects by modifying the HTML itself, or by
|
||||
<h5 class="mt-0 mb-1">Media object</h5>
|
||||
<p>I know there will be sacrifice but that's the price. Are you brave enough to let me see your peacock? Be your teenage dream tonight. Uh-huh, I see you. There’s no going back. Yeah, we maxed our credit cards and got kicked out of the bar. So let me get you in your birthday suit. You may fall in love when you meet her. Had the world in the palm of your hands. Don't let the greatness get you down, oh, oh yeah. Now we talking astrology, getting our nails did, all Japanese-y. Make me your Aphrodite.</p>
|
||||
</div>
|
||||
{{< placeholder width="64" height="64" class="ml-3" >}}
|
||||
{{< placeholder width="64" height="64" class="ms-3" >}}
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -112,21 +112,21 @@ Because the media object has so few structural requirements, you can also use th
|
||||
{{< example >}}
|
||||
<ul class="list-unstyled">
|
||||
<li class="media">
|
||||
{{< placeholder width="64" height="64" class="mr-3" >}}
|
||||
{{< placeholder width="64" height="64" class="me-3" >}}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
<p>All my girls vintage Chanel baby. So you can have your cake. Tonight, tonight, tonight, I'm walking on air. Slowly swallowing down my fear, yeah yeah. Growing fast into a bolt of lightning. So hot and heavy, 'Til dawn. That fairy tale ending with a knight in shining armor. Heavy is the head that wears the crown.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media my-4">
|
||||
{{< placeholder width="64" height="64" class="mr-3" >}}
|
||||
{{< placeholder width="64" height="64" class="me-3" >}}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
<p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your teenage dream tonight. Heavy is the head that wears the crown. It's not even a holiday, nothing to celebrate. A perfect storm, perfect storm.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
{{< placeholder width="64" height="64" class="mr-3" >}}
|
||||
{{< placeholder width="64" height="64" class="me-3" >}}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
<p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you say, after the last line you break. At the eh-end of it all.</p>
|
||||
|
||||
@@ -401,14 +401,14 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
|
||||
<div class="container-fluid bd-example-row">
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
|
||||
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
|
||||
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
|
||||
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
|
||||
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
|
||||
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
@@ -444,14 +444,14 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
|
||||
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
|
||||
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
|
||||
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
|
||||
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
|
||||
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
|
||||
@@ -42,7 +42,7 @@ Here's an example of all the sub-components included in a responsive light-theme
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@@ -65,14 +65,14 @@ Here's an example of all the sub-components included in a responsive light-theme
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
|
||||
This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `me-sm-0`, `my-sm-0`) utility classes.
|
||||
|
||||
### Brand
|
||||
|
||||
@@ -202,7 +202,7 @@ Place various form controls and components within a navbar with `.form-inline`.
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<form class="form-inline">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
@@ -214,7 +214,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand">Navbar</a>
|
||||
<form class="form-inline">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
@@ -267,7 +267,7 @@ Mix and match with other components and utilities as needed.
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarText">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@@ -296,7 +296,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarColor01">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@@ -311,7 +311,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -323,7 +323,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarColor02">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@@ -338,7 +338,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -350,7 +350,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarColor03">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@@ -365,7 +365,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -453,7 +453,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="max-height: 100
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarScroll">
|
||||
<ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
|
||||
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@@ -476,7 +476,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="max-height: 100
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -502,7 +502,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
|
||||
<a class="navbar-brand" href="#">Hidden brand</a>
|
||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@@ -514,7 +514,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -531,7 +531,7 @@ With a brand name shown on the left and toggler on the right:
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@@ -543,7 +543,7 @@ With a brand name shown on the left and toggler on the right:
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -560,7 +560,7 @@ With a toggler on the left and brand name on the right:
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
|
||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@@ -572,7 +572,7 @@ With a toggler on the left and brand name on the right:
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -105,14 +105,14 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1">Item 1</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
</nav>
|
||||
<a class="nav-link" href="#item-2">Item 2</a>
|
||||
<a class="nav-link" href="#item-3">Item 3</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
@@ -144,14 +144,14 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1">Item 1</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
</nav>
|
||||
<a class="nav-link" href="#item-2">Item 2</a>
|
||||
<a class="nav-link" href="#item-3">Item 3</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
@@ -97,7 +97,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
|
||||
{{< example >}}
|
||||
<div class="d-flex align-items-center">
|
||||
<strong>Loading...</strong>
|
||||
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
|
||||
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -105,7 +105,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
|
||||
|
||||
{{< example >}}
|
||||
<div class="clearfix">
|
||||
<div class="spinner-border float-right" role="status">
|
||||
<div class="spinner-border float-end" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,10 +32,10 @@ Toasts are as flexible as you need and have very little required markup. At a mi
|
||||
{{< example class="bg-light" >}}
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text=" " title=" " >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -52,10 +52,10 @@ Click the button below to show a toast (positioned with our utilities in the low
|
||||
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
|
||||
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -75,10 +75,10 @@ Click the button below to show a toast (positioned with our utilities in the low
|
||||
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
|
||||
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
|
||||
<div class="toast-header">
|
||||
<img src="..." class="rounded mr-2" alt="...">
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
<img src="..." class="rounded me-2" alt="...">
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -96,10 +96,10 @@ Toasts are slightly translucent to blend in with what's below them.
|
||||
{{< example class="bg-dark" >}}
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text=" " title=" " >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">11 mins ago</small>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -116,10 +116,10 @@ When you have multiple toasts, we default to vertically stacking them in a reada
|
||||
{{< example class="bg-light" >}}
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text=" " title=" " >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">just now</small>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -130,10 +130,10 @@ When you have multiple toasts, we default to vertically stacking them in a reada
|
||||
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text=" " title=" " >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">2 seconds ago</small>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -151,10 +151,10 @@ Place toasts with custom CSS as you need them. The top right is often used for n
|
||||
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
|
||||
<div class="toast" style="position: absolute; top: 0; right: 0;">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text=" " title=" " >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -175,10 +175,10 @@ For systems that generate more notifications, consider using a wrapping element
|
||||
<!-- Then put toasts within -->
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text=" " title=" " >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">just now</small>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -189,10 +189,10 @@ For systems that generate more notifications, consider using a wrapping element
|
||||
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text=" " title=" " >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">2 seconds ago</small>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -213,10 +213,10 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
|
||||
<!-- Then put toasts within -->
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text=" " title=" " >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -248,10 +248,10 @@ When using `autohide: false`, you must add a close button to allow users to dism
|
||||
{{< example class="bg-light" >}}
|
||||
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text=" " title=" " >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -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 >}}
|
||||
|
||||
@@ -33,8 +33,8 @@ In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}
|
||||
Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
|
||||
|
||||
{{< example >}}
|
||||
{{< placeholder width="200" height="200" class="rounded float-left" >}}
|
||||
{{< placeholder width="200" height="200" class="rounded float-right" >}}
|
||||
{{< placeholder width="200" height="200" class="rounded float-start" >}}
|
||||
{{< placeholder width="200" height="200" class="rounded float-end" >}}
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -651,20 +651,20 @@ In addition to column clearing at responsive breakpoints, you may need to reset
|
||||
|
||||
#### Margin utilities
|
||||
|
||||
With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another.
|
||||
With the move to flexbox in v4, you can use margin utilities like `.me-auto` to force sibling columns away from one another.
|
||||
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
|
||||
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
|
||||
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
|
||||
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
|
||||
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
|
||||
<div class="col-auto me-auto">.col-auto .me-auto</div>
|
||||
<div class="col-auto">.col-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@ Should you need to add `display: flex` to an element, do so with `.d-flex` or on
|
||||
|
||||
## Margin and padding
|
||||
|
||||
Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.mr-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports (e.g., `.mr-md-3` for `margin-right: 1rem` starting at the `md` breakpoint).
|
||||
Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.me-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports (e.g., `.me-md-3` for `margin-right: 1rem` starting at the `md` breakpoint).
|
||||
|
||||
## Toggle `visibility`
|
||||
|
||||
|
||||
@@ -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)" >}}
|
||||
|
||||
@@ -31,7 +31,7 @@ The following example shows how the clearfix can be used. Without the clearfix t
|
||||
|
||||
{{< example >}}
|
||||
<div class="bg-info clearfix">
|
||||
<button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
|
||||
<button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
|
||||
<button type="button" class="btn btn-secondary float-start">Example Button floated left</button>
|
||||
<button type="button" class="btn btn-secondary float-end">Example Button floated right</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -294,7 +294,7 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
|
||||
|
||||
## Auto margins
|
||||
|
||||
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.mr-auto`), and pushing two items to the left (`.ml-auto`).
|
||||
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
|
||||
|
||||
**Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default `justify-content` value.** [See this StackOverflow answer](https://stackoverflow.com/a/37535548) for more details.
|
||||
|
||||
@@ -306,7 +306,7 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
|
||||
</div>
|
||||
|
||||
<div class="d-flex bd-highlight mb-3">
|
||||
<div class="mr-auto p-2 bd-highlight">Flex item</div>
|
||||
<div class="me-auto p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
@@ -314,7 +314,7 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
|
||||
<div class="d-flex bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="ml-auto p-2 bd-highlight">Flex item</div>
|
||||
<div class="ms-auto p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
@@ -15,8 +15,8 @@ These utility classes float an element to the left or right, or disable floating
|
||||
Toggle a float with a class:
|
||||
|
||||
{{< example >}}
|
||||
<div class="float-left">Float left on all viewport sizes</div><br>
|
||||
<div class="float-right">Float right on all viewport sizes</div><br>
|
||||
<div class="float-start">Float left on all viewport sizes</div><br>
|
||||
<div class="float-end">Float right on all viewport sizes</div><br>
|
||||
<div class="float-none">Don't float on all viewport sizes</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -41,10 +41,10 @@ Or by Sass mixin:
|
||||
Responsive variations also exist for each `float` value.
|
||||
|
||||
{{< example >}}
|
||||
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
|
||||
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
|
||||
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
|
||||
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
|
||||
<div class="float-sm-start">Float left on viewports sized SM (small) or wider</div><br>
|
||||
<div class="float-md-start">Float left on viewports sized MD (medium) or wider</div><br>
|
||||
<div class="float-lg-start">Float left on viewports sized LG (large) or wider</div><br>
|
||||
<div class="float-xl-start">Float left on viewports sized XL (extra-large) or wider</div><br>
|
||||
{{< /example >}}
|
||||
|
||||
Here are all the support classes;
|
||||
|
||||
@@ -8,7 +8,7 @@ group: utilities
|
||||
Barebones `overflow` functionality is provided for two values by default, and they are not responsive.
|
||||
|
||||
<div class="bd-example d-md-flex">
|
||||
<div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
|
||||
</div>
|
||||
<div class="overflow-hidden p-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
|
||||
@@ -52,7 +52,7 @@ Here are some representative examples of these classes:
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
.ms-1 {
|
||||
margin-left: ($spacer * .25) !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ Media objects do not have `position: relative` by default, so we need to add the
|
||||
|
||||
{{< example >}}
|
||||
<div class="media position-relative">
|
||||
{{< placeholder width="144" height="144" class="mr-3" text=" " title="Generic placeholder image" >}}
|
||||
{{< placeholder width="144" height="144" class="me-3" text=" " title="Generic placeholder image" >}}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media with stretched link</h5>
|
||||
<p>This is some placeholder content for the media object. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
|
||||
@@ -42,7 +42,7 @@ Columns are `position: relative` by default, so clickable columns only require t
|
||||
<div class="col-md-6 mb-md-0 p-md-4">
|
||||
{{< placeholder width="100%" height="200" class="w-100" text=" " title="Generic placeholder image" >}}
|
||||
</div>
|
||||
<div class="col-md-6 position-static p-4 pl-md-0">
|
||||
<div class="col-md-6 position-static p-4 ps-md-0">
|
||||
<h5 class="mt-0">Columns with stretched link</h5>
|
||||
<p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
|
||||
<a href="#" class="stretched-link">Go somewhere</a>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -12,7 +12,7 @@ weight: 1
|
||||
}
|
||||
</style>
|
||||
<div class="d-flex">
|
||||
<div class="w-50 ml-auto mr-auto">
|
||||
<div class="w-50 ms-auto me-auto">
|
||||
{{< image "logo.png" "The Moodle logo" "img-fluid">}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,10 +16,10 @@ In order for this to work you need to use the JavaScript syntax used in core Mus
|
||||
{{< example >}}
|
||||
<div id="toasttest" role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
|
||||
<div class="toast-header">
|
||||
<img src="http://placekitten.com/50/50" class="rounded mr-2" alt="PlaceKitten">
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
<img src="http://placekitten.com/50/50" class="rounded me-2" alt="PlaceKitten">
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ml-2 mb-1 btn-close" data-dismiss="toast" aria-label="Close">
|
||||
<button type="button" class="ms-2 mb-1 btn-close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -28,18 +28,18 @@ The focus outlines colours in Moodle have been made more accessible in [MDL-6787
|
||||
<div id="focusexamples">
|
||||
<p> Normal buttons</p>
|
||||
<div>
|
||||
<span class="mr-2"><button class="btn btn-primary">Primary</button></span>
|
||||
<span class="mr-2"><button class="btn btn-secondary">Secondary</button></span>
|
||||
<span class="mr-2"><button class="btn btn-danger">Danger</button></span>
|
||||
<span class="mr-2"><button class="btn btn-outline-secondary">Outline</button></span>
|
||||
<span class="me-2"><button class="btn btn-primary">Primary</button></span>
|
||||
<span class="me-2"><button class="btn btn-secondary">Secondary</button></span>
|
||||
<span class="me-2"><button class="btn btn-danger">Danger</button></span>
|
||||
<span class="me-2"><button class="btn btn-outline-secondary">Outline</button></span>
|
||||
<span class=""><a href="#" class="aalink">clickable link</a></span>
|
||||
</div>
|
||||
<p class="mt-4"> keyboard focus</p>
|
||||
<div>
|
||||
<span class="mr-2"><button class="focusloop btn btn-primary">Primary</button></span>
|
||||
<span class="mr-2"><button class="focusloop btn btn-secondary">Secondary</button></span>
|
||||
<span class="mr-2"><button class="focusloop btn btn-danger">Danger</button></span>
|
||||
<span class="mr-2"><button class="focusloop btn btn-outline-secondary">Outline</button></span>
|
||||
<span class="me-2"><button class="focusloop btn btn-primary">Primary</button></span>
|
||||
<span class="me-2"><button class="focusloop btn btn-secondary">Secondary</button></span>
|
||||
<span class="me-2"><button class="focusloop btn btn-danger">Danger</button></span>
|
||||
<span class="me-2"><button class="focusloop btn btn-outline-secondary">Outline</button></span>
|
||||
<span class=""><a href="#" class="focusloop aalink">clickable link</a></span>
|
||||
</div>
|
||||
<button id="showfocus" class="btn btn-success btn-large mt-5" type="button">Show focus</button>
|
||||
|
||||
@@ -37,7 +37,7 @@ In places like the course page and the activity chooser icons have a more promin
|
||||
The CSS classes for these icons are ```activityiconcontainer``` wrapper class with the added activity name. And the ```activityicon``` class for the image. See the template ```course/format/templates/local/content/cm/title.mustache``` for more info.
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer assessment mr-3">
|
||||
<div class="activityiconcontainer assessment me-3">
|
||||
{{< image "quiz/monologo.svg" "Quiz icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">quiz</div>
|
||||
@@ -114,7 +114,7 @@ $iconurl = get_fast_modinfo($courseid)->get_cm($cmid)->get_icon_url()->out(false
|
||||
{{< /php >}}
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer lti mr-3">
|
||||
<div class="activityiconcontainer lti me-3">
|
||||
<img alt="lti icon" title="lti icon" src="https://moodle.org/theme/moodleorg/pix/moodle_logo_small.svg" class="activityicon "> </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">external</div>
|
||||
@@ -139,7 +139,7 @@ function h5pactivity_is_branded(): bool {
|
||||
{{< /php >}}
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer mr-3">
|
||||
<div class="activityiconcontainer me-3">
|
||||
{{< image "h5pactivity/monologo.svg" "H5P activity icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">h5pactivity</div>
|
||||
@@ -150,7 +150,7 @@ function h5pactivity_is_branded(): bool {
|
||||
## Examples
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer administration mr-3">
|
||||
<div class="activityiconcontainer administration me-3">
|
||||
{{< image "quiz/monologo.svg" "Admin icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">Administration</div>
|
||||
@@ -159,7 +159,7 @@ function h5pactivity_is_branded(): bool {
|
||||
</div>
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer assessment mr-3">
|
||||
<div class="activityiconcontainer assessment me-3">
|
||||
{{< image "quiz/monologo.svg" "Assessment icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">Assessment</div>
|
||||
@@ -168,7 +168,7 @@ function h5pactivity_is_branded(): bool {
|
||||
</div>
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer collaboration mr-3">
|
||||
<div class="activityiconcontainer collaboration me-3">
|
||||
{{< image "wiki/monologo.svg" "Collaboration icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">Collaboration</div>
|
||||
@@ -177,7 +177,7 @@ function h5pactivity_is_branded(): bool {
|
||||
</div>
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer communication mr-3">
|
||||
<div class="activityiconcontainer communication me-3">
|
||||
{{< image "choice/monologo.svg" "Communication icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">Communication</div>
|
||||
@@ -186,7 +186,7 @@ function h5pactivity_is_branded(): bool {
|
||||
</div>
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer interactivecontent mr-3">
|
||||
<div class="activityiconcontainer interactivecontent me-3">
|
||||
{{< image "lesson/monologo.svg" "Interactive content icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">Interactive content</div>
|
||||
@@ -195,7 +195,7 @@ function h5pactivity_is_branded(): bool {
|
||||
</div>
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer content mr-3">
|
||||
<div class="activityiconcontainer content me-3">
|
||||
{{< image "book/monologo.svg" "Resource icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">Resource</div>
|
||||
@@ -204,7 +204,7 @@ function h5pactivity_is_branded(): bool {
|
||||
</div>
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer mr-3">
|
||||
<div class="activityiconcontainer me-3">
|
||||
{{< image "lti/monologo.svg" "Other icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">Other</div>
|
||||
|
||||
@@ -102,8 +102,8 @@ Use primary buttons for the positive action on the page, for example "Save" or "
|
||||
<div class="card-body">
|
||||
<strong>Save Changes?</strong>
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn btn-secondary mr-1">Cancel</button>
|
||||
<button type="button" class="btn btn-primary mr-1">Save</button>
|
||||
<button type="button" class="btn btn-secondary me-1">Cancel</button>
|
||||
<button type="button" class="btn btn-primary me-1">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,7 +113,7 @@ Use primary buttons for the positive action on the page, for example "Save" or "
|
||||
<div class="card-body">
|
||||
<strong>Delete profile</strong>
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn btn-primary mr-1">Cancel</button>
|
||||
<button type="button" class="btn btn-primary me-1">Cancel</button>
|
||||
<button type="button" class="btn btn-secondary">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -143,7 +143,7 @@ The meaning of buttons must be very clear.
|
||||
<strong>Save Changes?</strong>
|
||||
<p>Would you like to not save your changes before exiting?</p>
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn btn-primary mr-1">Yes</button>
|
||||
<button type="button" class="btn btn-primary me-1">Yes</button>
|
||||
<button type="button" class="btn btn-secondary">No</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,7 +156,7 @@ The meaning of buttons must be very clear.
|
||||
<strong>Save Changes</strong>
|
||||
<p>Would you like to save your changes before exiting?</p>
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn btn-primary mr-1">Save</button>
|
||||
<button type="button" class="btn btn-primary me-1">Save</button>
|
||||
<button type="button" class="btn btn-secondary">Discard</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -49,7 +49,7 @@ Disabled toggle with extra classes.
|
||||
{
|
||||
"id": "example-toggle-2",
|
||||
"disabled": true,
|
||||
"extraclasses": "mt-2 ml-2",
|
||||
"extraclasses": "mt-2 ms-2",
|
||||
"dataattributes": [{
|
||||
"name": "action",
|
||||
"value": "toggle-status"
|
||||
|
||||
@@ -24,7 +24,7 @@ Use the ```icon-size-x``` classes to control the icon sizes.
|
||||
|
||||
{{< example show_markup=false >}}
|
||||
<div class="d-flex">
|
||||
<div class="icon-size-1 card bg-light mr-2">
|
||||
<div class="icon-size-1 card bg-light me-2">
|
||||
<div class="card-body d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-arrow-up icon"></i>
|
||||
</div>
|
||||
@@ -32,7 +32,7 @@ Use the ```icon-size-x``` classes to control the icon sizes.
|
||||
icon-size-1<br>4px
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-size-2 card bg-light mr-2">
|
||||
<div class="icon-size-2 card bg-light me-2">
|
||||
<div class="card-body d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-arrow-up icon"></i>
|
||||
</div>
|
||||
@@ -40,7 +40,7 @@ Use the ```icon-size-x``` classes to control the icon sizes.
|
||||
icon-size-2<br>8px
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-size-3 card bg-light mr-2">
|
||||
<div class="icon-size-3 card bg-light me-2">
|
||||
<div class="card-body d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-arrow-up icon"></i>
|
||||
</div>
|
||||
@@ -48,7 +48,7 @@ Use the ```icon-size-x``` classes to control the icon sizes.
|
||||
icon-size-3<br>16px (default)
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-size-4 card bg-light mr-2">
|
||||
<div class="icon-size-4 card bg-light me-2">
|
||||
<div class="card-body d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-arrow-up icon"></i>
|
||||
</div>
|
||||
@@ -56,7 +56,7 @@ Use the ```icon-size-x``` classes to control the icon sizes.
|
||||
icon-size-4<br>24px
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-size-5 card bg-light mr-2">
|
||||
<div class="icon-size-5 card bg-light me-2">
|
||||
<div class="card-body d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-arrow-up icon"></i>
|
||||
</div>
|
||||
@@ -64,7 +64,7 @@ Use the ```icon-size-x``` classes to control the icon sizes.
|
||||
icon-size-5<br>32px
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-size-6 card bg-light mr-2">
|
||||
<div class="icon-size-6 card bg-light me-2">
|
||||
<div class="card-body d-flex justify-content-center align-items-center">
|
||||
<i class="fa fa-arrow-up icon"></i>
|
||||
</div>
|
||||
|
||||
@@ -20,14 +20,14 @@ Use the ```.justify-content-end``` class to position on item in a ```.d-flex```
|
||||
|
||||
## Position on item in a group of items to the right
|
||||
|
||||
Use the ```.ml-auto``` to move the last item in ad ```.d-flex``` container to the right.
|
||||
Use the ```.ms-auto``` to move the last item in ad ```.d-flex``` container to the right.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex">
|
||||
<button class="btn btn-secondary mr-1">Ha!</button>
|
||||
<button class="btn btn-secondary mr-1">Jay</button>
|
||||
<button class="btn btn-secondary mr-1">Wow</button>
|
||||
<button class="ml-auto btn btn-success">OK</button>
|
||||
<button class="btn btn-secondary me-1">Ha!</button>
|
||||
<button class="btn btn-secondary me-1">Jay</button>
|
||||
<button class="btn btn-secondary me-1">Wow</button>
|
||||
<button class="ms-auto btn btn-success">OK</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -37,9 +37,9 @@ Use the ```align-items-center``` class to align items horizontally in a containe
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex align-items-center p-2 bg-light">
|
||||
<div class="bg-success mr-2" style="width: 35px; height: 35px;"></div>
|
||||
<div class="bg-warning mr-2" style="width: 48px; height: 48px;"></div>
|
||||
<div class="bg-info mr-2" style="width: 20px; height: 20px;"></div>
|
||||
<div class="bg-success me-2" style="width: 35px; height: 35px;"></div>
|
||||
<div class="bg-warning me-2" style="width: 48px; height: 48px;"></div>
|
||||
<div class="bg-info me-2" style="width: 20px; height: 20px;"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -49,7 +49,7 @@ Combine the ```align-items-center``` with the ```justify-content-center``` class
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex align-items-center justify-content-center p-3 bg-light" style="height:100px;">
|
||||
<div class="bg-warning mr-2" style="width: 48px; height: 48px;"></div>
|
||||
<div class="bg-warning me-2" style="width: 48px; height: 48px;"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse"
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ms-3" type="button" data-toggle="collapse"
|
||||
data-target="#docssidebar" aria-controls="docssidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false">
|
||||
<title>Menu</title>
|
||||
@@ -30,9 +30,9 @@
|
||||
{{ partial "docs-sidebar" . }}
|
||||
</div>
|
||||
{{ if (eq .Page.Params.toc true) }}
|
||||
<div class="col-md-7 col-xl-8 py-md-3 pl-md-3 pr-md-3 bd-content">
|
||||
<div class="col-md-7 col-xl-8 py-md-3 ps-md-3 pe-md-3 bd-content">
|
||||
{{ else }}
|
||||
<div class="col-md-9 col-xl-10 py-md-3 pl-md-5 pr-md-5 bd-content">
|
||||
<div class="col-md-9 col-xl-10 py-md-3 ps-md-5 pe-md-5 bd-content">
|
||||
{{ end }}
|
||||
<h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
|
||||
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
<strong>{{#str}}headingstandard, tool_customlang{{/str}}</strong>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<span class="pl-3">
|
||||
<span class="ps-3">
|
||||
<strong>{{#str}}headinglocal, tool_customlang{{/str}}</strong>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -131,7 +131,7 @@ class expired_contexts_table extends table_sql {
|
||||
}
|
||||
$infoicon = new pix_icon('i/info', implode(' / ', array_reverse($contextsinpath)));
|
||||
$infoiconhtml = $OUTPUT->render($infoicon);
|
||||
$name = html_writer::span(get_string('nameandparent', 'tool_dataprivacy', $contextdata), 'mr-1');
|
||||
$name = html_writer::span(get_string('nameandparent', 'tool_dataprivacy', $contextdata), 'me-1');
|
||||
|
||||
return $name . $infoiconhtml;
|
||||
}
|
||||
@@ -158,7 +158,7 @@ class expired_contexts_table extends table_sql {
|
||||
}
|
||||
$infoicon = new pix_icon('i/info', implode(', ', $childnames));
|
||||
$infoiconhtml = $OUTPUT->render($infoicon);
|
||||
$name = html_writer::span(get_string('nchildren', 'tool_dataprivacy', count($children)), 'mr-1');
|
||||
$name = html_writer::span(get_string('nchildren', 'tool_dataprivacy', count($children)), 'me-1');
|
||||
|
||||
return $name . $infoiconhtml;
|
||||
}
|
||||
|
||||
@@ -50,12 +50,12 @@
|
||||
<hr />
|
||||
<div class="row">
|
||||
{{#compliant}}
|
||||
<a class="component-expand pl-5" data-component="{{raw_component}}" href='#'>
|
||||
<h4 class=" d-inline pl-5 " id="{{raw_component}}">{{#pix}}t/collapsed, moodle, {{#str}}expandplugin, tool_dataprivacy{{/str}}{{/pix}}{{component}}</h4>
|
||||
<a class="component-expand ps-5" data-component="{{raw_component}}" href='#'>
|
||||
<h4 class=" d-inline ps-5 " id="{{raw_component}}">{{#pix}}t/collapsed, moodle, {{#str}}expandplugin, tool_dataprivacy{{/str}}{{/pix}}{{component}}</h4>
|
||||
</a>
|
||||
{{/compliant}}
|
||||
{{^compliant}}
|
||||
<h4 class="d-inline pl-6 " id="{{raw_component}}">{{component}}</h4>
|
||||
<h4 class="d-inline ps-6 " id="{{raw_component}}">{{component}}</h4>
|
||||
<span>{{#pix}}i/risk_xss, moodle, {{#str}}requiresattention, tool_dataprivacy{{/str}}{{/pix}}</span>
|
||||
{{/compliant}}
|
||||
{{#external}}
|
||||
@@ -73,7 +73,7 @@
|
||||
<div class="hide" data-section="{{raw_component}}" aria-expanded="false" role="contentinfo">
|
||||
{{#metadata}}
|
||||
<hr />
|
||||
<div class="pl-6">
|
||||
<div class="ps-6">
|
||||
<dl class="row">
|
||||
<dt class="col-3">
|
||||
{{#link}}
|
||||
@@ -98,7 +98,7 @@
|
||||
{{/metadata}}
|
||||
{{#nullprovider}}
|
||||
<hr />
|
||||
<div class="pl-6">
|
||||
<div class="ps-6">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
{{nullprovider}}
|
||||
|
||||
@@ -58,13 +58,13 @@
|
||||
<div class="alert alert-info">
|
||||
{{#str}}datadeletionpagehelp, tool_dataprivacy{{/str}}
|
||||
</div>
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
{{#filter}}
|
||||
{{> core/single_select}}
|
||||
{{/filter}}
|
||||
</div>
|
||||
{{#existingcontexts}}
|
||||
<div class="float-right">
|
||||
<div class="float-end">
|
||||
<button data-action="markfordeletion" class="btn btn-secondary">{{#str}}deleteselected, moodle{{/str}}</button>
|
||||
</div>
|
||||
{{/existingcontexts}}
|
||||
@@ -74,7 +74,7 @@
|
||||
</div>
|
||||
<div class="row" data-region="bottom-nav">
|
||||
{{#existingcontexts}}
|
||||
<div class="float-right">
|
||||
<div class="float-end">
|
||||
<button data-action="markfordeletion" class="btn btn-secondary">{{#str}}deleteselected, moodle{{/str}}</button>
|
||||
</div>
|
||||
{{/existingcontexts}}
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
|
||||
<div class="container-fluid mt-2">
|
||||
<div class="row">
|
||||
<div class="col-md-4 pl-0 nav-pills context-tree">
|
||||
<div class="col-md-4 ps-0 nav-pills context-tree">
|
||||
{{#tree}}
|
||||
{{> tool_dataprivacy/context_tree_node}}
|
||||
{{/tree}}
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<dd>{{#str}}userlistexplanation, tool_dataprivacy{{/str}}</dd>
|
||||
</dl>
|
||||
<hr />
|
||||
<div class="clearfix"><a class="tool_dataprivacy-expand-all float-right" href="#" data-visibility-state='visible'>{{#str}}visible, tool_dataprivacy{{/str}}</a></div>
|
||||
<div class="clearfix"><a class="tool_dataprivacy-expand-all float-end" href="#" data-visibility-state='visible'>{{#str}}visible, tool_dataprivacy{{/str}}</a></div>
|
||||
{{#types}}
|
||||
<div>
|
||||
<div>
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
|
||||
<div data-region="datarequests">
|
||||
<div class="mt-1 mb-1">
|
||||
<div class="float-right">
|
||||
<div class="float-end">
|
||||
<a href="{{newdatarequesturl}}" class="btn btn-primary" data-action="new-request">
|
||||
{{#str}}newrequest, tool_dataprivacy{{/str}}
|
||||
</a>
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
}
|
||||
}}
|
||||
<div class="mt-1 d-inline-block w-100">
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
<select id="bulk-action" class="select custom-select">
|
||||
{{#options}}
|
||||
<option value="{{ value }}">{{ name }}</option>
|
||||
@@ -53,7 +53,7 @@
|
||||
</select>
|
||||
<button class="btn btn-primary" id="confirm-bulk-action">{{# str}} confirm {{/ str}}</button>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<div class="float-end">
|
||||
{{{ perpage }}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -60,21 +60,21 @@
|
||||
alt="{{#str}}pictureof, moodle, {{foruser.fullname}}{{/str}}"
|
||||
title="{{#str}}pictureof, moodle, {{foruser.fullname}}{{/str}}" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ml-3">
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h4 class="mt-0 mb-1">
|
||||
<a href="{{foruser.profileurl}}" title="{{#str}}viewprofile{{/str}}">{{foruser.fullname}}</a>
|
||||
</h4>
|
||||
<a href="mailto:{{foruser.email}}">{{foruser.email}}</a>
|
||||
<div class="clearfix mt-1 mb-1">
|
||||
<span class="float-left mr-1">
|
||||
<span class="float-start me-1">
|
||||
<strong>{{#str}}daterequesteddetail, tool_dataprivacy{{/str}}</strong>
|
||||
{{#userdate}} {{timecreated}}, {{#str}} strftimedatetime, core_langconfig {{/str}} {{/userdate}}
|
||||
</span>
|
||||
<span class="float-left mr-1">
|
||||
<span class="float-start me-1">
|
||||
<strong>{{#str}}statusdetail, tool_dataprivacy{{/str}}</strong>
|
||||
<span class="badge {{statuslabelclass}}">{{statuslabel}}</span>
|
||||
</span>
|
||||
<span class="float-left mr-1">
|
||||
<span class="float-start me-1">
|
||||
<strong>{{#str}}requestbydetail, tool_dataprivacy{{/str}}</strong>
|
||||
<span><a href="{{requestedbyuser.profileurl}}" title="{{#str}}viewprofile{{/str}}">{{requestedbyuser.fullname}}</a></span>
|
||||
</span>
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
{{#contexts}}
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><h3>{{contextname}}</h3></div>
|
||||
<div class="card-body pl-5 pr-5">
|
||||
<div class="card-body ps-5 pe-5">
|
||||
|
||||
{{#category.name}}
|
||||
<h4>{{#str}}category, tool_dataprivacy{{/str}}</h4>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
</div><br>
|
||||
<div data-region="action-selector-radio-buttons">
|
||||
{{#choices}}
|
||||
<input id="action-selection-option-{{value}}" type="radio" class="mr-1" name="choice" value="{{value}}"/><label for="action-selection-option-{{value}}">{{text}}</label><br>
|
||||
<input id="action-selection-option-{{value}}" type="radio" class="me-1" name="choice" value="{{value}}"/><label for="action-selection-option-{{value}}">{{text}}</label><br>
|
||||
{{/choices}}
|
||||
</div><br>
|
||||
<div data-region="action_selector-buttons">
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-region="move-buttons" class="float-sm-right">
|
||||
<div data-region="move-buttons" class="float-sm-end">
|
||||
<input type="button" data-action="move" class="btn btn-primary" value="{{#str}}move{{/str}}"/>
|
||||
<input type="button" data-action="cancel" class="btn btn-secondary" value="{{#str}}cancel{{/str}}"/>
|
||||
</div>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<textarea name="comment" id="comment_{{uniqid}}" class="form-control mb-1"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div data-region="footer" class="float-sm-right">
|
||||
<div data-region="footer" class="float-sm-end">
|
||||
<button data-action="rate" class="btn btn-primary">{{#str}}rate, tool_lp{{/str}}</button>
|
||||
<button data-action="cancel" class="btn btn-secondary">{{#str}}cancel{{/str}}</button>
|
||||
</div>
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
<div class="mb-3 d-flex">
|
||||
<label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
|
||||
<input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
|
||||
<button class="btn btn-secondary ml-1">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>
|
||||
<button class="btn btn-secondary ms-1">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul data-enhance="linktree" style="display: none;" class="mt-1 competency-tree">
|
||||
@@ -78,7 +78,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div data-region="link-buttons" class="mt-1 float-sm-right">
|
||||
<div data-region="link-buttons" class="mt-1 float-sm-end">
|
||||
<input type="button" class="btn btn-primary" data-action="add" value="{{#str}}add{{/str}}"/>
|
||||
<input type="button" class="btn btn-secondary" data-action="cancel" value="{{#str}}cancel{{/str}}"/>
|
||||
</div>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<div class="mb-3 d-flex">
|
||||
<label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
|
||||
<input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
|
||||
<button class="btn btn-secondary ml-1">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>
|
||||
<button class="btn btn-secondary ms-1">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul data-enhance="linktree" style="display: none;" class="mt-1 competency-tree">
|
||||
@@ -60,7 +60,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div data-region="link-buttons" class="mt-1 float-sm-right">
|
||||
<div data-region="link-buttons" class="mt-1 float-sm-end">
|
||||
<input type="button" class="btn btn-primary" data-action="add" value="{{#str}}select{{/str}}"/>
|
||||
<input type="button" class="btn btn-secondary" data-action="cancel" value="{{#str}}cancel{{/str}}"/>
|
||||
</div>
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
<div class="mb-3 d-flex">
|
||||
<label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
|
||||
<input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
|
||||
<button class="btn btn-secondary ml-1">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>
|
||||
<button class="btn btn-secondary ms-1">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div data-region="link-buttons" class="mt-1 float-sm-right">
|
||||
<div data-region="link-buttons" class="mt-1 float-sm-end">
|
||||
<input type="button" class="btn btn-primary" data-action="add" value="{{#str}}add{{/str}}"/>
|
||||
<input type="button" class="btn btn-secondary" data-action="cancel" value="{{#str}}cancel{{/str}}"/>
|
||||
</div>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
// No example context because the JS is connected to webservices
|
||||
}}
|
||||
<div class="float-sm-right border p-2 mb-2">
|
||||
<div class="float-sm-end border p-2 mb-2">
|
||||
{{#hascompetencies}}
|
||||
<span>
|
||||
<label for="competency-nav-{{uniqid}}" class="accesshide">{{#str}}jumptocompetency, tool_lp{{/str}}</label>
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
{{/config}}
|
||||
</div>
|
||||
|
||||
<div data-region="footer" class="float-sm-right mt-1">
|
||||
<div data-region="footer" class="float-sm-end mt-1">
|
||||
{{#config}}
|
||||
<input type="button" class="btn btn-primary" data-action="save" value="{{#str}}savechanges{{/str}}"/>
|
||||
{{/config}}
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
<p>{{{competency.description}}}</p>
|
||||
{{/competency.description}}
|
||||
{{#comppath}}
|
||||
<span class="float-left">{{#str}}path, tool_lp{{/str}} </span>{{> tool_lp/competency_path }}
|
||||
<span class="float-start">{{#str}}path, tool_lp{{/str}} </span>{{> tool_lp/competency_path }}
|
||||
{{/comppath}}
|
||||
{{#showrelatedcompetencies}}
|
||||
{{> tool_lp/related_competencies }}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
}}
|
||||
<div data-region="coursecompetenciespage">
|
||||
<div data-region="actions" class="clearfix">
|
||||
<div class="float-sm-left">
|
||||
<div class="float-sm-start">
|
||||
{{#canmanagecoursecompetencies}}
|
||||
<button class="btn btn-secondary" disabled>{{#str}}addcoursecompetencies, tool_lp{{/str}}</button>
|
||||
{{/canmanagecoursecompetencies}}
|
||||
@@ -61,8 +61,8 @@
|
||||
<tr class="drag-samenode" data-id="{{competency.id}}">
|
||||
<td>
|
||||
{{#canmanagecoursecompetencies}}
|
||||
<span class="drag-handlecontainer float-sm-left"></span>
|
||||
<div class="float-sm-right">
|
||||
<span class="drag-handlecontainer float-sm-start"></span>
|
||||
<div class="float-sm-end">
|
||||
<a href="#" data-action="delete-competency-link" data-id="{{competency.id}}">
|
||||
{{#pix}}t/delete, core, {{#str}}delete{{/str}}{{/pix}}
|
||||
</a>
|
||||
@@ -78,7 +78,7 @@
|
||||
<p>{{{competency.description}}}</p>
|
||||
{{/competency}}
|
||||
{{#comppath}}
|
||||
<span class="float-sm-left">{{#str}}path, tool_lp{{/str}} </span>{{> tool_lp/competency_path }}
|
||||
<span class="float-sm-start">{{#str}}path, tool_lp{{/str}} </span>{{> tool_lp/competency_path }}
|
||||
{{/comppath}}
|
||||
{{#usercompetencycourse}}
|
||||
{{#grade}}
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
</label>
|
||||
|
||||
</fieldset>
|
||||
<fieldset class="float-sm-right">
|
||||
<fieldset class="float-sm-end">
|
||||
<input type="button" class="btn btn-primary" data-action="save" value="{{#str}}savechanges{{/str}}"/>
|
||||
<input type="button" class="btn btn-secondary" data-action="cancel" value="{{#str}}cancel{{/str}}"/>
|
||||
</fieldset>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
}}
|
||||
<div class="border p-2 mb-2 evidence" data-region="evidence" data-id="{{id}}">
|
||||
{{#candelete}}
|
||||
<div class="float-sm-right">
|
||||
<div class="float-sm-end">
|
||||
<a href="#" data-action="delete-evidence">{{#pix}}t/delete{{/pix}}</a>
|
||||
</div>
|
||||
{{/candelete}}
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<ul>
|
||||
{{#competencies}}
|
||||
<li>
|
||||
<div class="float-right">
|
||||
<div class="float-end">
|
||||
<a href="#" data-action="deselect-competency" data-id="{{id}}">{{#pix}}t/delete, core, {{#str}}delete{{/str}}{{/pix}}</a>
|
||||
</div>
|
||||
<p>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
<div class="border p-2 mb-2">
|
||||
<div class="card-title">
|
||||
<h4 data-region="selected-competency">{{#str}}selectedcompetency, tool_lp{{/str}}</h4>
|
||||
<span data-region="competencyactionsmenu" class="float-sm-right">
|
||||
<span data-region="competencyactionsmenu" class="float-sm-end">
|
||||
<ul title="{{#str}}edit{{/str}}" class="competencyactionsmenu">
|
||||
<li>
|
||||
<a href="#">{{#str}}edit{{/str}}</a><b class="caret"></b>
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
* navigation - array of strings containing buttons for navigation
|
||||
}}
|
||||
<div data-region="managecompetencies">
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
{{#navigation}}
|
||||
{{{.}}}
|
||||
{{/navigation}}
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
* navigation - array of strings containing buttons for navigation
|
||||
}}
|
||||
<div data-region="managetemplates">
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
{{#navigation}}
|
||||
{{{.}}}
|
||||
{{/navigation}}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
// No example context because the JS is connected to webservices
|
||||
}}
|
||||
<div class="float-right border mb-2 p-2">
|
||||
<div class="float-end border mb-2 p-2">
|
||||
<form class="user-competency-course-navigation">
|
||||
<input type="hidden" name="courseid" value="{{courseid}}"/>
|
||||
<input type="hidden" name="mod" value="{{moduleid}}"/>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
</h2>
|
||||
{{#plan.canbeedited}}
|
||||
<div data-region="actions" class="clearfix">
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
<!-- Button to add competencies to the plan -->
|
||||
<button class="btn btn-secondary" data-action="add">{{#pix}}t/add{{/pix}} {{#str}}addcompetency, tool_lp{{/str}}</button>
|
||||
</div>
|
||||
@@ -129,13 +129,13 @@
|
||||
data-userid="{{plan.userid}}">
|
||||
<td>
|
||||
{{#plan.canbeedited}}
|
||||
<span class="drag-handlecontainer float-left"></span>
|
||||
<span class="drag-handlecontainer float-start"></span>
|
||||
{{/plan.canbeedited}}
|
||||
<a data-usercompetency="true" href="#">{{{competency.shortname}}}</a>
|
||||
<em>{{competency.idnumber}}</em>
|
||||
{{#comppath}}
|
||||
<br>
|
||||
<span class="float-left">{{#str}}path, tool_lp{{/str}} </span>{{> tool_lp/competency_path }}
|
||||
<span class="float-start">{{#str}}path, tool_lp{{/str}} </span>{{> tool_lp/competency_path }}
|
||||
{{/comppath}}
|
||||
</td>
|
||||
{{#plan.iscompleted}}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
}}
|
||||
|
||||
<div data-region="plans">
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
{{#navigation}}
|
||||
{{{.}}}
|
||||
{{/navigation}}
|
||||
@@ -155,7 +155,7 @@
|
||||
{{/plans}}
|
||||
|
||||
{{#canreaduserevidence}}
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
<a href="{{pluginbaseurl}}/user_evidence_list.php?userid={{userid}}">{{#str}}userevidence, tool_lp{{/str}}</a>
|
||||
</div>
|
||||
{{/canreaduserevidence}}
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
{{#relatedcompetencies}}
|
||||
<li>
|
||||
{{#showdeleterelatedaction}}
|
||||
<div class="float-sm-right">
|
||||
<div class="float-sm-end">
|
||||
<a href="#" data-action="deleterelation" id="id-related-{{id}}">{{#pix}}t/delete, core, {{#str}}delete{{/str}}{{/pix}}</a>
|
||||
</div>
|
||||
{{/showdeleterelatedaction}}
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div data-region="scale-buttons" class="mt-1 float-sm-right">
|
||||
<div data-region="scale-buttons" class="mt-1 float-sm-end">
|
||||
<input type="button" class="btn btn-secondary" data-action="close" value="{{#str}}closebuttontitle{{/str}}"/>
|
||||
<input type="button" class="btn btn-secondary" data-action="cancel" value="{{#str}}cancel{{/str}}"/>
|
||||
</div>
|
||||
|
||||
@@ -41,8 +41,8 @@
|
||||
<div class="drag-samenode" data-id="{{competency.id}}">
|
||||
<div class="border p-2 mb-2">
|
||||
{{#canmanagetemplatecompetencies}}
|
||||
<span class="drag-handlecontainer float-left"></span>
|
||||
<div class="float-sm-right">
|
||||
<span class="drag-handlecontainer float-start"></span>
|
||||
<div class="float-sm-end">
|
||||
<a href="#" data-action="delete-competency-link" data-id="{{competency.id}}">{{#pix}}t/delete, core, {{#str}}delete{{/str}}{{/pix}}</a>
|
||||
</div>
|
||||
{{/canmanagetemplatecompetencies}}
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
// No example context because the JS is connected to webservices
|
||||
}}
|
||||
<div class="float-sm-right border p-2 mb-2">
|
||||
<div class="float-sm-end border p-2 mb-2">
|
||||
<p>{{{groupselector}}}</p>
|
||||
<form class="user-competency-course-navigation">
|
||||
<input type="hidden" name="userid" value="{{userid}}"/>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
</dd>
|
||||
<dt>{{#str}}proficient, tool_lp{{/str}}</dt>
|
||||
<dd>
|
||||
<span class="badge {{#proficiency}}bg-success{{/proficiency}}{{^proficiency}}bg-danger{{/proficiency}} text-white float-left">
|
||||
<span class="badge {{#proficiency}}bg-success{{/proficiency}}{{^proficiency}}bg-danger{{/proficiency}} text-white float-start">
|
||||
{{proficiencyname}}
|
||||
</span>
|
||||
</dd>
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
{{#usercompetencycourse}}
|
||||
<dt>{{#str}}proficient, tool_lp{{/str}}</dt>
|
||||
<dd>
|
||||
<span class="badge {{#proficiency}}bg-success{{/proficiency}}{{^proficiency}}bg-danger{{/proficiency}} text-white float-left">
|
||||
<span class="badge {{#proficiency}}bg-success{{/proficiency}}{{^proficiency}}bg-danger{{/proficiency}} text-white float-start">
|
||||
{{proficiencyname}}
|
||||
</span>
|
||||
</dd>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
</dd>
|
||||
<dt>{{#str}}proficient, tool_lp{{/str}}</dt>
|
||||
<dd>
|
||||
<span class="badge {{#proficiency}}bg-success{{/proficiency}}{{^proficiency}}bg-danger{{/proficiency}} text-white float-left">
|
||||
<span class="badge {{#proficiency}}bg-success{{/proficiency}}{{^proficiency}}bg-danger{{/proficiency}} text-white float-start">
|
||||
{{proficiencyname}}
|
||||
</span>
|
||||
</dd>
|
||||
@@ -101,7 +101,7 @@
|
||||
<dd>{{gradename}} - {{#str}}plancompleted, tool_lp{{/str}}</dd>
|
||||
<dt>{{#str}}proficient, tool_lp{{/str}}</dt>
|
||||
<dd>
|
||||
<span class="badge {{#proficiency}}bg-success{{/proficiency}}{{^proficiency}}bg-danger{{/proficiency}} text-white float-left">
|
||||
<span class="badge {{#proficiency}}bg-success{{/proficiency}}{{^proficiency}}bg-danger{{/proficiency}} text-white float-start">
|
||||
{{proficiencyname}}
|
||||
</span>
|
||||
</dd>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
}}
|
||||
|
||||
<div data-region="user-evidence-list">
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
{{#navigation}}
|
||||
{{{.}}}
|
||||
{{/navigation}}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
</h2>
|
||||
{{#canmanage}}
|
||||
<div data-region="actions" class="clearfix">
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
{{#userhasplan}}
|
||||
<button class="btn btn-secondary mb-1" data-action="link-competency">{{#pix}}t/add{{/pix}} {{#str}}linkcompetencies, tool_lp{{/str}}</button>
|
||||
{{/userhasplan}}
|
||||
@@ -85,7 +85,7 @@
|
||||
</td>
|
||||
{{#userevidence.canmanage}}
|
||||
<td>
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
<a href="#" data-action="delete-competency-link" data-id="{{competency.id}}">{{#pix}}t/delete, core, {{#str}}delete{{/str}}{{/pix}}</a>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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',
|
||||
];
|
||||
|
||||
@@ -168,7 +168,7 @@ class factor extends object_factor_base {
|
||||
get_string('editphonenumber', 'factor_sms'),
|
||||
['class' => 'btn btn-secondary', 'type' => 'button']);
|
||||
|
||||
$mform->addElement('html', \html_writer::tag('div', $editphonenumber, ['class' => 'float-sm-left col-md-4']));
|
||||
$mform->addElement('html', \html_writer::tag('div', $editphonenumber, ['class' => 'float-sm-start col-md-4']));
|
||||
|
||||
// Disable the form check prompt.
|
||||
$mform->disable_form_change_checker();
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
</div>
|
||||
{{/active}}
|
||||
{{#button}}
|
||||
<div class="d-flex ml-auto">
|
||||
<div class="d-flex ms-auto">
|
||||
{{>core/single_button}}
|
||||
</div>
|
||||
{{/button}}
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
<input type="hidden" id="{{uniqid}}-factorname" name="factorname" value="{{name}}">
|
||||
<button class="btn-link text-decoration-none tool-mfa-factor-choose d-flex align-items-center p-1 mb-2 {{#disable}}disabled{{/disable}}"
|
||||
type="submit">
|
||||
<span class="icon-no-margin icon-size-3 d-flex p-1 mr-2">
|
||||
<span class="icon-no-margin icon-size-3 d-flex p-1 me-2">
|
||||
<i class="fa {{icon}} fa-fw fa-2x"
|
||||
title="{{logintitle}}"
|
||||
role="img"
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
{{#enabled}}
|
||||
<div class="w-100 d-flex px-2">
|
||||
<a aria-label="{{#str}}aria:footermessage, tool_moodlenet{{/str}}"
|
||||
class="d-inline my-auto mr-1"
|
||||
class="d-inline my-auto me-1"
|
||||
{{#advanced}}
|
||||
href="{{advanced}}"
|
||||
target="_self"
|
||||
|
||||
@@ -23,6 +23,6 @@
|
||||
{
|
||||
}
|
||||
}}
|
||||
<button data-action="close-chooser-option-summary" class="closeoptionsummary btn btn-secondary mr-auto" tabindex="0">
|
||||
<button data-action="close-chooser-option-summary" class="closeoptionsummary btn btn-secondary me-auto" tabindex="0">
|
||||
{{#str}} back {{/str}}
|
||||
</button>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -49,6 +49,6 @@
|
||||
</span>
|
||||
{{/coursecategory}}
|
||||
{{$divider}}
|
||||
<div class="pl-1 pr-1">|</div>
|
||||
<div class="px-1">|</div>
|
||||
{{/divider}}
|
||||
{{/ core_course/coursecards }}
|
||||
|
||||
@@ -60,14 +60,14 @@
|
||||
|
||||
{{#behalfuser}}
|
||||
<div class="clearfix">
|
||||
<div class="float-right mb-2">
|
||||
<div class="float-end mb-2">
|
||||
{{# str }} viewconsentpageforuser, tool_policy, {{{ . }}} {{/ str }}
|
||||
</div>
|
||||
</div>
|
||||
{{/behalfuser}}
|
||||
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
<h2>{{# str }}consentpagetitle, tool_policy{{/ str }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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}}
|
||||
@@ -100,7 +100,7 @@
|
||||
<h3>{{# str }} policydoccontent, tool_policy {{/ str }}</h3>
|
||||
{{{content}}}
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<div class="float-end">
|
||||
<a href="#top">
|
||||
{{# str }} backtotop, tool_policy {{/ str }}
|
||||
<i class="icon text-primary fa fa-caret-up" title="{{# str }} backtotop, tool_policy {{/ str }}" ></i>
|
||||
|
||||
@@ -45,11 +45,11 @@
|
||||
|
||||
<a id="top"></a>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
<h2>{{{policy.name}}}</h2>
|
||||
</div>
|
||||
{{# numpolicy }}
|
||||
<div class="float-right">
|
||||
<div class="float-end">
|
||||
{{# str }} steppolicies, tool_policy,
|
||||
{ "numpolicy": {{# quote }}{{numpolicy}}{{/quote }}, "totalpolicies": {{# quote }}{{totalpolicies}}{{/ quote }} }
|
||||
{{/ str }}
|
||||
@@ -96,7 +96,7 @@
|
||||
<a role="button" href="{{declineurl}}" class="btn btn-link">{{#str}} idontagree, tool_policy, {{{policy.name}}} {{/str}}</a>
|
||||
{{/declineurl}}
|
||||
|
||||
<div class="float-right">
|
||||
<div class="float-end">
|
||||
<a href="#top">
|
||||
{{# str }} backtotop, tool_policy {{/ str }}
|
||||
<i class="icon text-primary fa fa-caret-up" title="{{# str }} backtotop, tool_policy {{/ str }}" ></i>
|
||||
|
||||
+1
-1
@@ -163,7 +163,7 @@
|
||||
echo html_writer::start_div('d-flex mb-2');
|
||||
$url = new moodle_url('/user/editadvanced.php', ['id' => -1]);
|
||||
echo html_writer::link($url, get_string('addnewuser', 'moodle'), [
|
||||
'class' => 'btn btn-primary ml-auto',
|
||||
'class' => 'btn btn-primary ms-auto',
|
||||
'data-action' => 'add-user',
|
||||
]);
|
||||
echo html_writer::end_div();
|
||||
|
||||
@@ -132,7 +132,7 @@ echo $OUTPUT->header();
|
||||
echo $OUTPUT->container_start('d-flex flex-wrap');
|
||||
echo $OUTPUT->heading(get_string('managetokens', 'core_webservice'));
|
||||
echo html_writer::div($OUTPUT->render(new single_button(new moodle_url($PAGE->url, ['action' => 'create']),
|
||||
get_string('createtoken', 'core_webservice'), 'get', single_button::BUTTON_PRIMARY)), 'ml-auto');
|
||||
get_string('createtoken', 'core_webservice'), 'get', single_button::BUTTON_PRIMARY)), 'ms-auto');
|
||||
echo $OUTPUT->container_end();
|
||||
|
||||
if (!empty($SESSION->webservicenewlycreatedtoken)) {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user