scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-25 01:03:18 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2329 from mlorb/ml-sci-4132

Browse source 
Redesign flash alerts [SCI-4132]
This commit is contained in:
mlorb 2020-01-17 13:58:20 +01:00 committed by GitHub
commit f91db8eb41
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 53 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/javascripts/application.js.erb
View file

@ -238,14 +238,12 @@ var HelperModule = (function(){
}
var htmlSnippet = '<div id="alert-flash" class="alert alert' + alertType +
'alert-dismissable alert-floating">' +
'<div>' +
'<span class="fas' + fasSign + '"></span>&nbsp;' +
'<span class="message">' + message + '</span>' +
'<button type="button" class="close" ' +
'data-dismiss="alert" aria-label="Close">' +
'data-dismiss="alert" aria-label="Close">' +
'<span aria-hidden="true">×</span></button>' +
'<span class="fas' + fasSign + '"></span>&nbsp;' +
'<span>' + message + '</span>' +
'</div>' +
'</div>';
'</div>';
$('#notifications').html(htmlSnippet);
helpers.hideFlashMsg();
helpers.dismissAlert();

48
app/assets/stylesheets/constants.scss
View file

@ -309,17 +309,17 @@ $container-lg: auto;
// $jumbotron-heading-font-size: ceil(($font-size-base * 4.5));
// Form states and alerts
$state-success-text: #3c763d;
$state-success-bg: #d5f2df;
$state-success-text: $brand-success;
$state-success-bg: $brand-success-light;
$state-success-border: adjust-hue(darken($state-success-bg, 5%), -10);
$state-info-text: #31708f;
$state-info-bg: #d7ecf7;
$state-info-text: $brand-focus;
$state-info-bg: $brand-focus-light;
$state-info-border: adjust-hue(darken($state-info-bg, 7%), -10);
$state-warning-text: #8a6d3b;
$state-warning-bg: #fcf8e3;
$state-warning-text: $brand-warning;
$state-warning-bg: $brand-warning-light;
$state-warning-border: adjust-hue(darken($state-warning-bg, 5%), -10);
$state-danger-text: #a94442;
$state-danger-bg: #fadcd9;
$state-danger-text: $brand-danger;
$state-danger-bg: $brand-danger-light;
$state-danger-border: adjust-hue(darken($state-danger-bg, 5%), -10);
// // Tooltips
@ -367,22 +367,22 @@ $state-danger-border: adjust-hue(darken($state-danger-bg, 5%), -10);
// $modal-md: 600px;
// $modal-sm: 300px;
//
// // Alerts
// $alert-padding: 15px;
// $alert-border-radius: $border-radius-base;
// $alert-link-font-weight: bold;
// $alert-success-bg: $state-success-bg;
// $alert-success-text: $state-success-text;
// $alert-success-border: $state-success-border;
// $alert-info-bg: $state-info-bg;
// $alert-info-text: $state-info-text;
// $alert-info-border: $state-info-border;
// $alert-warning-bg: $state-warning-bg;
// $alert-warning-text: $state-warning-text;
// $alert-warning-border: $state-warning-border;
// $alert-danger-bg: $state-danger-bg;
// $alert-danger-text: $state-danger-text;
// $alert-danger-border: $state-danger-border;
// Alerts
$alert-padding: 15px;
$alert-border-radius: $border-radius-base;
$alert-link-font-weight: bold;
$alert-success-bg: $state-success-bg;
$alert-success-text: $state-success-text;
$alert-success-border: $state-success-border;
$alert-info-bg: $state-info-bg;
$alert-info-text: $state-info-text;
$alert-info-border: $state-info-border;
$alert-warning-bg: $state-warning-bg;
$alert-warning-text: $state-warning-text;
$alert-warning-border: $state-warning-border;
$alert-danger-bg: $state-danger-bg;
$alert-danger-text: $state-danger-text;
$alert-danger-border: $state-danger-border;
//
// // Progress bars
// $progress-bg: #f5f5f5;

25
app/assets/stylesheets/shared_styles/elements/alerts.scss Normal file
View file

@ -0,0 +1,25 @@
.alert {
align-items: center;
border-radius: 0;
display: flex;
height: 52px;
margin-bottom: 0;
opacity: .86;
padding: 9px;
width: 100%;
.fas {
font-size: $font-size-h2;
margin-left: 12px;
}
.message {
color: $color-volcano;
flex-grow: 1;
margin-left: 14px;
}
.close {
top: 0;
}
}

5
app/assets/stylesheets/themes/main_navigation.scss
View file

@ -369,11 +369,6 @@
// Alert
.alert {
border-radius: 0;
margin-bottom: 0;
opacity: .86;
width: 100%;
&.alert-hidden {
display: none;
}

10
app/assets/stylesheets/themes/scinote.scss
View file

@ -1904,24 +1904,14 @@ a.disabled-with-click-events {
}
#alert-flash {
button {
margin-right: 400px;
}
.fas {
margin-left: 100px;
}
@media(max-width:768px) {
button {
display: none;
}
.fas {
margin-left: 10px;
}
}
}