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/app/views/org_admin/phases/container.html.erb b/app/views/org_admin/phases/container.html.erb index fed9838..cd14438 100644 --- a/app/views/org_admin/phases/container.html.erb +++ b/app/views/org_admin/phases/container.html.erb @@ -31,18 +31,38 @@

<%= _('Sections') %>

- <% if phase.sections.length > 1 %> -
-
- <%= _('expand all') %> - | - <%= _('collapse all') %> -
+ +
+ +
+ <% if phase.sections.many? %> + + <% end %>
- <% end %> + +
+
+ + Drag arrows to rearrange sections +
+
+
+
- <%= render partial: 'org_admin/sections/index', locals: local_assigns.merge({ modifiable: modifiable }) %> + <%= render partial: 'org_admin/sections/index', + locals: local_assigns.merge(modifiable: modifiable) %>
diff --git a/app/views/org_admin/sections/_section.html.erb b/app/views/org_admin/sections/_section.html.erb index 1cf76ca..4b50ed7 100644 --- a/app/views/org_admin/sections/_section.html.erb +++ b/app/views/org_admin/sections/_section.html.erb @@ -17,9 +17,9 @@
<% if local_assigns[:draggable] %> - - + <% end %>
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/javascripts/utils/panelHeading.js b/lib/assets/javascripts/utils/panelHeading.js index 194657f..670c048 100644 --- a/lib/assets/javascripts/utils/panelHeading.js +++ b/lib/assets/javascripts/utils/panelHeading.js @@ -1,5 +1,8 @@ $(() => { $('.heading-button').on('click', (e) => { - $(e.currentTarget).find('i.fa').toggleClass('fa-plus').toggleClass('fa-minus'); + $(e.currentTarget) + .find('i.fa-plus, i.fa-minus') + .toggleClass('fa-plus') + .toggleClass('fa-minus'); }); }); diff --git a/lib/assets/javascripts/views/org_admin/phases/show.js b/lib/assets/javascripts/views/org_admin/phases/show.js index b8be4fe..ed5b270 100644 --- a/lib/assets/javascripts/views/org_admin/phases/show.js +++ b/lib/assets/javascripts/views/org_admin/phases/show.js @@ -1,4 +1,5 @@ import 'jquery-ui/ui/widgets/sortable'; +import { renderAlert } from '../../../utils/notificationHelper'; $(() => { // Is there already one prefix section on this Phase? @@ -15,15 +16,18 @@ // Initialize the draggable-sections element as a jQuery sortable. // Read the docs here for more info: http://api.jqueryui.com/sortable/ $('.draggable-sections').sortable({ - handle: 'i.fa-bars', + handle: 'i.fa-arrows', axis: 'y', cursor: 'move', beforeStop() { if (prefixSectionExists($(this))) { // Prevent the sort action from completing. Moves element back to source $(this).sortable('cancel'); - // Display a wobble effec to signify error - $(this).effect('shake'); + + renderAlert(`You can only place one section before the funder template. + Multiple can go afterwards.`, { + floating: true, autoDismiss: true, + }); } }, update() { 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 */ diff --git a/lib/assets/stylesheets/overrides.scss b/lib/assets/stylesheets/overrides.scss index 814495f..c12b71c 100644 --- a/lib/assets/stylesheets/overrides.scss +++ b/lib/assets/stylesheets/overrides.scss @@ -200,7 +200,7 @@ } /* FONTAWESOME STYLING */ -.fa { +.fa:not(.small) { font-size: 2rem; } .fa-reverse { @@ -599,18 +599,18 @@ } /* Skip to main content link styling */ -div.skip a { - position:absolute; - left:-10000px; - top:auto; - width:1px; - height:1px; +div.skip a { + position:absolute; + left:-10000px; + top:auto; + width:1px; + height:1px; overflow: hidden !important; -} - -div.skip a:focus { - width:auto; - height:auto; +} + +div.skip a:focus { + width:auto; + height:auto; overflow:visible !important; }