Commit cacded84 authored by Evonne's avatar Evonne Committed by Robert Lyon

Bug 1835329 Alert message icons

Taken out spans within alert and put in icons in alert:before,
added variation for site-messages so it can be shorter and hang
with page breakpoints. Also added icons for error messages under
form inputs.

behatnotneeded

Change-Id: Ia31af160808ecc2943bb16ba68f04e8a98c0e055
parent 58557cf3
......@@ -43,16 +43,15 @@ if ((badgegroups_hosts instanceof Array && badgegroups_hosts.length >= 1)
count++;
/* Fetching the badge info via ajax and render the pieform checkbox element */
sendjsonrequest(config['wwwroot'] + '/blocktype/openbadgedisplayer/badgegroupnames.json.php', params, 'POST', function(data) {
var icon = jQuery('<span class="icon icon-lg icon-exclamation-triangle left" aria-hidden="true" role="presentation"></span>');
var container = jQuery('<div class="alert alert-warning" role="alert">');
if (!data.uid) {
var msg = jQuery('<span>').text(data.nobackpackmsg);
container.append(icon).append(msg);
container.append(msg);
jQuery("div#instconf_loadinginfo_container > div").append(container);
}
else if (!data.badgegroups || data.badgegroups.length === 0) {
var msg = jQuery('<span>').text(data.nobadgegroupsmsg);
container.append(icon).append(msg);
container.append(msg);
jQuery("div#instconf_loadinginfo_container > div").append(container);
}
else {
......
......@@ -352,7 +352,7 @@ class PluginBlocktypeOpenbadgedisplayer extends SystemBlocktype {
'message' => array(
'type' => 'html',
'class' => '',
'value' => '<div class="alert alert-warning" role="alert"><span class="icon icon-lg icon-exclamation-triangle left" aria-hidden="true" role="presentation"></span>' . get_string('missingbadgesources', 'blocktype.openbadgedisplayer') . '</div>'
'value' => '<div class="alert alert-warning" role="alert">' . get_string('missingbadgesources', 'blocktype.openbadgedisplayer') . '</div>'
),
);
return $fields;
......
......@@ -96,8 +96,7 @@
.card {
.card-header:before {
font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
font-weight: 900;
@include fonttype(solid);
color: rgba(255, 255, 255, 0.6);
padding-right: 5px;
}
......@@ -212,10 +211,8 @@
}
}
.card.card-regular .card-header:before {
font-family: "Font Awesome 5 Free Regular", "Font Awesome 5 Free" !important;
font-weight: 400;
@include fonttype(regular);
}
.card.card-brand .card-header:before {
font-family: "Font Awesome 5 Brands Regular", "Font Awesome 5 Free" !important;
font-weight: 400;
@include fonttype(brands);
}
......@@ -46,26 +46,56 @@
color: $gray-500;
}
.alert {
position: relative;
padding: .75rem 1.25rem .75rem 3rem;
&:before {
@include fonttype(solid);
position: absolute;
left: 20px;
top: 15px;
font-size: 1.33333em;
line-height: .75em;
}
}
// overrides bootstrap calculations so this is same as states
.alert-success {
color: scale-color($success, $lightness: -30%);
background-color: scale-color($success, $lightness: 70%);
border-color: scale-color($success, $lightness: 50%);
&:before {
content: fa-content($fa-var-check);
color: scale-color($success, $lightness: -30%);
}
}
.alert-info {
color: scale-color($info, $lightness: -30%);
background-color: scale-color($info, $lightness: 70%);
border-color: scale-color($info, $lightness: 50%);
&:before {
content: fa-content($fa-var-info-circle);
color: scale-color($info, $lightness: -30%);
}
}
.alert-warning {
color: scale-color($warning, $lightness: -40%);
background-color: scale-color($warning, $lightness: 85%);
border-color: scale-color($warning, $lightness: 50%);
&:before {
content: fa-content($fa-var-exclamation-triangle);
color: scale-color($warning, $lightness: -40%);
}
}
.alert-danger {
color: scale-color($danger, $lightness: -30%);
background-color: scale-color($danger, $lightness: 70%);
border-color: scale-color($danger, $lightness: 50%);
&:before {
content: fa-content($fa-var-times);
color: scale-color($danger, $lightness: -30%);
}
}
.alert-submitted {
background-color: $state-submitted-bg;
......
......@@ -505,6 +505,14 @@
font-size: $font-size-base - 1;
display: block;
padding-top: 10px;
font-size: $font-size-sm;
&:before {
@include fonttype(solid);
content: fa-content($fa-var-times);
color: scale-color($danger, $lightness: -30%);
padding-right: 5px;
}
@include media-breakpoint-up(lg) {
margin-left: 265px;
......
......@@ -3,10 +3,42 @@
top: 0;
width: 100%;
z-index: 1001;
.site-message.alert {
margin-bottom: 0;
border-radius: 0;
padding: 5px 15px;
padding: 6px 1.25rem;
border: 0;
// take away default alert icon so it can be aligned with different break points
&:before {
display: none;
}
// puts the alert icons into the container with break points
.container:before {
@include fonttype(solid);
position: relative;
top: 1px;
font-size: 1.33333em;
line-height: .75em;
padding-right: 5px;
}
&.alert-success .container:before {
content: fa-content($fa-var-check);
color: scale-color($success, $lightness: -30%);
}
&.alert-info .container:before {
content: fa-content($fa-var-info-circle);
color: scale-color($info, $lightness: -30%);
}
&.alert-warning .container:before {
content: fa-content($fa-var-exclamation-triangle);
color: scale-color($warning, $lightness: -40%);
}
&.alert-danger .container:before {
content: fa-content($fa-var-times);
color: scale-color($danger, $lightness: -30%);
}
}
@include media-breakpoint-down(sm) {
display: none;
......
......@@ -9,31 +9,31 @@
</div>
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}
<div class="site-messages text-center">
<div class="site-messages">
{/if}
{if $USERMASQUERADING}
<div class="site-message alert alert-warning" role="alert">
<span class="icon icon-lg icon-exclamation-triangle left" role="presentation" aria-hidden="true"></span>
<span>{$masqueradedetails}</span>
<a href="{$becomeyoulink}">{$becomeyouagain}</a>
<div class="container">
<span>{$masqueradedetails}</span>
<a href="{$becomeyoulink}">{$becomeyouagain}</a>
</div>
</div>
{/if}
{if !$PRODUCTIONMODE}
<div class="site-message alert alert-info" role="alert">
<span class="icon icon-lg icon-info-circle left" role="presentation" aria-hidden="true"></span>
{str tag=notproductionsite section=error}
<div class="container">
{str tag=notproductionsite section=error}
</div>
</div>
{/if}
{if $SITEOUTOFSYNC}
<div class="site-message alert alert-warning" role="alert">
<span class="icon icon-lg icon-info-circle left" role="presentation" aria-hidden="true"></span>
{str tag=siteoutofsyncfor section=error arg1=$SITEOUTOFSYNC}
</div>
{/if}
{if $SITECLOSED}
<div class="site-message alert alert-danger" role="alert">
<span class="icon icon-lg icon-lock left" role="presentation" aria-hidden="true"></span>
{if $SITECLOSED == 'logindisabled'}{str tag=siteclosedlogindisabled section=mahara arg1="`$WWWROOT`admin/upgrade.php"}{else}{str tag=siteclosed}{/if}
</div>
{/if}
......
......@@ -939,8 +939,7 @@ section .card-quarter:nth-child(4n) .page-access .dropdown-menu {
This is used to indicate that you should make the recommended change.
```
<div class="admin-warning alert alert-warning">
<h3>Warning</h3>
<span class="icon icon-lg icon-exclamation-triangle left" role="presentation" aria-hidden="true"></span> This is a warning alert.
This is a warning alert.
</div>
```
</section>
......@@ -950,8 +949,7 @@ This is used to indicate that you should make the recommended change.
Used to show that there is an error, which must be fixed before you can continue.
```
<div class="alert alert-danger">
<h3>Danger</h3>
<span class="icon icon-lg icon-times text-danger left" role="presentation" aria-hidden="true"></span>This is a danger alert.
This is a danger alert.
</div>
```
</section>
......@@ -961,8 +959,7 @@ Used to show that there is an error, which must be fixed before you can continue
Used to show that an action was successful.
```
<div class="alert alert-success">
<h3>Success</h3>
<span class="icon icon-lg icon-check text-success left" role="presentation" aria-hidden="true"></span> This is a success alert.
This is a success alert.
</div>
```
</section>
......@@ -972,8 +969,7 @@ Used to show that an action was successful.
Used to show information about Mahara. Usually, this is only shown to administrators.
```
<div class="alert alert-info">
<h3>Info</h3>
<span class="icon icon-lg icon-info-circle left" role="presentation" aria-hidden="true"></span> This is a info alert.
This is a info alert.
</div>
```
</section>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment