diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 9f43109..5eff0ea 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,7 +1,7 @@ - <%= content_for?(:title) ? yield(:title) : _('%{application_name}') % { :application_name => Rails.configuration.branding[:application][:name] } %> + <title><%= content_for?(:title) ? yield(:title) : _('%{application_name}') % { :application_name => Rails.configuration.branding[:application][:name] } %> <%= favicon_link_tag "favicon.ico" %>
@@ -57,7 +57,7 @@
<%= (has_alert or has_notice) ? 'show' : 'hide' %>" role="<%= (has_notice ? 'status' : (has_alert ? 'alert' : '')) %>"> diff --git a/lib/assets/javascripts/utils/notificationHelper.js b/lib/assets/javascripts/utils/notificationHelper.js index 9380dbc..7e29d57 100644 --- a/lib/assets/javascripts/utils/notificationHelper.js +++ b/lib/assets/javascripts/utils/notificationHelper.js @@ -1,32 +1,58 @@ import { isString, isObject } from './isType'; + /* Helpers that will display the specified message in in the notification area at the top of the page */ -export const renderNotice = (msg) => { + +export function hideNotifications() { + $('#notification-area') + .addClass('hide') + .removeClass('notification-area--floating'); +} + +function renderMessage(options = {}) { const notificationArea = $('#notification-area'); - if (isString(msg) && isObject(notificationArea)) { - notificationArea.removeClass('alert-warning').addClass('alert-info'); + if (isString(options.message) && isObject(notificationArea)) { + notificationArea + .removeClass('alert-info', 'alert-warning') + .addClass(options.className); + + if (options.floating) { + notificationArea.addClass('notification-area--floating'); + } + notificationArea.find('i, span').remove(); notificationArea.append(` - ${msg}`); + + ${options.message} + `); + notificationArea.removeClass('hide'); + + if (options.autoDismiss) { + setTimeout(() => { hideNotifications(); }, 5000); + } } -}; +} -export const renderAlert = (msg) => { - const notificationArea = $('#notification-area'); +export function renderNotice(msg, options = {}) { + renderMessage({ + message: msg, + icon: 'check-circle', + className: 'alert-info', + floating: options.floating === true, + autoDismiss: options.autoDismiss === true, + }); +} - if (isString(msg) && isObject(notificationArea)) { - notificationArea.removeClass('alert-info').addClass('alert-warning'); - notificationArea.find('i, span').remove(); - notificationArea.append(` - ${msg}`); - notificationArea.removeClass('hide'); - } -}; - -export const hideNotifications = () => { - $('#notification-area').addClass('hide'); -}; +export function renderAlert(msg, options = {}) { + renderMessage({ + message: msg, + icon: 'times-circle', + className: 'alert-warning', + floating: options.floating === true, + autoDismiss: options.autoDismiss === true, + }); +} diff --git a/lib/assets/stylesheets/application.scss b/lib/assets/stylesheets/application.scss index d260a65..1eff42f 100644 --- a/lib/assets/stylesheets/application.scss +++ b/lib/assets/stylesheets/application.scss @@ -24,3 +24,21 @@ clear: left; margin-bottom: 10px; } + +// TODO: Move this into it's own file once CSS has been fixed +.notification-area { +} +.notification-area--floating { + position: fixed; + top: 4rem; + z-index: 1000; + // Take up width of the page on mobile + right: 5vw; + width: 90vw; + + // Non-mobile settings + @media (min-width: #{$screen-sm-min}) { + right: 4rem; + width: 300px; + } +} diff --git a/lib/assets/stylesheets/dmproadmap.scss b/lib/assets/stylesheets/dmproadmap.scss index 5b2909c..e4c162e 100644 --- a/lib/assets/stylesheets/dmproadmap.scss +++ b/lib/assets/stylesheets/dmproadmap.scss @@ -1,3 +1,5 @@ +@import "dmproadmap/notifications"; + /**** Main layout configuration ****/ /* For sticky footer */