Commit 123e8ac2 authored by Robert Lyon's avatar Robert Lyon Committed by Gerrit Code Review

Merge "Bug 1835329 Alert message icons"

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