diff --git a/app/views/guidances/new_edit.html.erb b/app/views/guidances/new_edit.html.erb index 09d3aca..af133d4 100644 --- a/app/views/guidances/new_edit.html.erb +++ b/app/views/guidances/new_edit.html.erb @@ -12,7 +12,9 @@ <%= f.label :text, class: 'control-label' %> <%= text_area_tag("guidance-text", guidance.text, class: "tinymce form-control", 'aria-required': true, rows: 10) %> - <%= render partial: 'org_admin/shared/theme_selector', locals: { f: f, all_themes: themes } %> + <%= render partial: 'org_admin/shared/theme_selector', + locals: { f: f, all_themes: themes, + popover_message: _('Select one or more themes that are relevant to this guidance. This will display your generic institution-level guidance, as well as that from other sources e.g. the %{org_name} guidance or any Schools/Departments that you provide guidance for.') % { org_name: (current_user.org.abbreviation.present? ? current_user.org.abbreviation : current_user.org.name ) } } %>
<%= f.label _('Guidance group'), for: :guidance_group_id, class: 'control-label' %> <%= f.collection_select(:guidance_group_id, guidance_groups, diff --git a/app/views/org_admin/shared/_theme_selector.html.erb b/app/views/org_admin/shared/_theme_selector.html.erb index b68c502..5828516 100644 --- a/app/views/org_admin/shared/_theme_selector.html.erb +++ b/app/views/org_admin/shared/_theme_selector.html.erb @@ -1,6 +1,8 @@ -<%# locals: all_themes %> +<%# locals: all_themes & popover_message %>
<%= f.label _('Themes'), for: :theme_ids, class: 'control-label' %> + <%= render partial: 'shared/popover', + locals: { message: popover_message, placement: 'right' }%>
<% if all_themes.length > 0 %> <% @@ -15,7 +17,7 @@
<% cntr = 0 %> <% end %> -
+
<%= f.label :theme_ids, raw("#{f.check_box :theme_ids, {multiple: true}, theme.id, nil} #{theme.title}") %>
<% cntr += 1 %> diff --git a/app/views/questions/_add_question.html.erb b/app/views/questions/_add_question.html.erb index 654aa97..95d9921 100644 --- a/app/views/questions/_add_question.html.erb +++ b/app/views/questions/_add_question.html.erb @@ -79,7 +79,9 @@
- <%= render partial: 'org_admin/shared/theme_selector', locals: { f: f, all_themes: Theme.all.order("title") } %> + <%= render partial: 'org_admin/shared/theme_selector', + locals: { f: f, all_themes: Theme.all.order("title"), + popover_message: _('Select one or more themes that are relevant to this question. This will allow similarly themed institution-level guidance to appear alongside your question.') } %>
diff --git a/app/views/questions/_edit_question.html.erb b/app/views/questions/_edit_question.html.erb index 70d06fe..55b6c95 100644 --- a/app/views/questions/_edit_question.html.erb +++ b/app/views/questions/_edit_question.html.erb @@ -87,7 +87,9 @@
- <%= render partial: 'org_admin/shared/theme_selector', locals: { f: f, all_themes: Theme.all.order("title") } %> + <%= render partial: 'org_admin/shared/theme_selector', + locals: { f: f, all_themes: Theme.all.order("title"), + popover_message: _('Select one or more themes that are relevant to this question. This will allow similarly themed institution-level guidance to appear alongside your question.') } %>
diff --git a/app/views/shared/_popover.html.erb b/app/views/shared/_popover.html.erb new file mode 100644 index 0000000..1c0b099 --- /dev/null +++ b/app/views/shared/_popover.html.erb @@ -0,0 +1,8 @@ +<%# available locals: message, placement %> +<% if message.present? %> + + + +<% end %> \ No newline at end of file diff --git a/lib/assets/javascripts/application.js b/lib/assets/javascripts/application.js index 5730159..5de3404 100644 --- a/lib/assets/javascripts/application.js +++ b/lib/assets/javascripts/application.js @@ -5,6 +5,7 @@ import './utils/tabHelper'; import './utils/tableHelper'; import './utils/tooltipHelper'; +import './utils/popoverHelper'; // Page specific JS import './views/answers/edit'; diff --git a/lib/assets/javascripts/utils/popoverHelper.js b/lib/assets/javascripts/utils/popoverHelper.js new file mode 100644 index 0000000..2fd0afa --- /dev/null +++ b/lib/assets/javascripts/utils/popoverHelper.js @@ -0,0 +1,8 @@ +import 'bootstrap-sass/assets/javascripts/bootstrap/popover'; + +$(() => { + $('[data-toggle="popover"]').popover({ + animated: 'fade', + placement: 'right', + }); +}); diff --git a/lib/assets/stylesheets/overrides.scss b/lib/assets/stylesheets/overrides.scss index 1682f64..1282a91 100644 --- a/lib/assets/stylesheets/overrides.scss +++ b/lib/assets/stylesheets/overrides.scss @@ -175,6 +175,20 @@ margin-bottom: 10px; } +/* Popover button */ +.btn-default[data-toggle=popover], +.btn-default:hover[data-toggle=popover], +.btn-default:focus[data-toggle=popover], +.btn-default:active[data-toggle=popover], +.btn-default:visited[data-toggle=popover], +.btn-default:active:hover[data-toggle=popover] { + color: $grey; + background-color: $white; + border: none; + padding-left: -10px; + font-size: .8rem; +} + // Footer (for actions) .modal-footer { text-align: right; // right align buttons