From f71754e597bc865bc79b284003b2989fc414d82e Mon Sep 17 00:00:00 2001 From: gjacob24 Date: Fri, 27 Oct 2023 16:37:41 +0100 Subject: [PATCH] Issue #3144 - first official commit for upgrade to Bootstrap 5 --- app/assets/stylesheets/application.scss | 30 +++- app/assets/stylesheets/blocks/_accordion.scss | 82 +++++++++ app/assets/stylesheets/blocks/_buttons.scss | 17 +- app/assets/stylesheets/blocks/_cards.scss | 55 ++++++ .../stylesheets/blocks/_font_awesomes.scss | 4 +- app/assets/stylesheets/blocks/_footers.scss | 7 +- app/assets/stylesheets/blocks/_html.scss | 20 ++- app/assets/stylesheets/blocks/_index.scss | 3 +- .../stylesheets/blocks/_input_groups.scss | 7 +- .../blocks/_inverse_dropdowns.scss | 3 +- app/assets/stylesheets/blocks/_labels.scss | 13 +- app/assets/stylesheets/blocks/_lists.scss | 6 +- app/assets/stylesheets/blocks/_logos.scss | 7 +- .../stylesheets/blocks/_modal_dialogs.scss | 7 + .../blocks/_modal_permissions.scss | 6 +- .../stylesheets/blocks/_modal_search.scss | 1 + app/assets/stylesheets/blocks/_navbars.scss | 11 +- app/assets/stylesheets/blocks/_navs.scss | 25 ++- .../stylesheets/blocks/_new_plans_form.scss | 6 +- .../blocks/_notification_areas.scss | 6 +- app/assets/stylesheets/blocks/_org_links.scss | 2 +- app/assets/stylesheets/blocks/_panels.scss | 30 ---- .../stylesheets/blocks/_profile_form.scss | 6 +- app/assets/stylesheets/blocks/_spinner.scss | 15 +- app/assets/stylesheets/blocks/_tables.scss | 24 ++- .../stylesheets/blocks/_template_filters.scss | 6 +- app/assets/stylesheets/utils/_functions.scss | 9 + app/assets/stylesheets/utils/_index.scss | 1 + .../stylesheets/variables/_bootstrap.scss | 12 +- .../stylesheets/variables/_colours.scss | 9 + app/javascript/application.js | 3 - app/javascript/src/orgAdmin/phases/newEdit.js | 60 +++---- app/javascript/src/orgAdmin/phases/show.js | 2 +- app/javascript/src/researchOutputs/form.js | 6 +- app/javascript/src/utils/accordion.js | 169 +++++++++++++----- app/javascript/src/utils/popoverHelper.js | 8 - app/javascript/src/utils/sectionUpdate.js | 15 +- app/javascript/src/utils/spinner.js | 4 +- app/javascript/src/utils/tooltipHelper.js | 2 - app/views/answers/_new_edit.html.erb | 4 +- .../contact_us/contacts/_new_left.html.erb | 10 +- app/views/contact_us/contacts/new.html.erb | 4 +- app/views/contributors/_form.html.erb | 17 +- app/views/contributors/edit.html.erb | 4 +- app/views/contributors/new.html.erb | 2 +- app/views/devise/invitations/edit.html.erb | 86 ++++----- app/views/devise/passwords/edit.html.erb | 80 ++++----- app/views/devise/passwords/new.html.erb | 50 +++--- .../devise/registrations/_api_token.html.erb | 6 +- .../_password_confirmation.html.erb | 12 +- .../registrations/_password_details.html.erb | 15 +- .../registrations/_personal_details.html.erb | 18 +- app/views/devise/registrations/edit.html.erb | 28 +-- .../_guidance_group_form.html.erb | 4 +- .../guidance_groups/_index_by_theme.html.erb | 41 ++--- app/views/guidance_groups/_show.html.erb | 21 ++- app/views/guidance_groups/admin_edit.html.erb | 2 +- app/views/guidance_groups/admin_new.html.erb | 2 +- .../guidances/_guidance_display.html.erb | 85 +++++---- app/views/guidances/new_edit.html.erb | 8 +- app/views/kaminari/_last_page.html.erb | 2 +- app/views/kaminari/_next_page.html.erb | 2 +- app/views/kaminari/_page.html.erb | 2 +- app/views/kaminari/_prev_page.html.erb | 2 +- app/views/layouts/_branding.html.erb | 91 +++++----- app/views/layouts/_footer.html.erb | 28 +-- app/views/layouts/_header.html.erb | 4 +- app/views/layouts/_navigation.html.erb | 84 +++++---- app/views/layouts/_paginable.html.erb | 4 +- app/views/layouts/_signin_signout.html.erb | 27 +-- app/views/layouts/application.html.erb | 10 +- app/views/layouts/modal_search/_form.html.erb | 25 +-- .../layouts/modal_search/_result.html.erb | 4 +- .../layouts/modal_search/_results.html.erb | 4 +- .../layouts/modal_search/_selections.html.erb | 2 +- app/views/notes/_archive.html.erb | 2 +- app/views/notes/_edit.html.erb | 4 +- app/views/notes/_layout.html.erb | 6 +- app/views/notes/_list.html.erb | 4 +- app/views/notes/_new.html.erb | 4 +- .../org_admin/annotations/_form.html.erb | 2 +- .../conditions/_webhook_form.html.erb | 6 +- app/views/org_admin/departments/edit.html.erb | 10 +- app/views/org_admin/departments/new.html.erb | 10 +- app/views/org_admin/phases/_form.html.erb | 8 +- app/views/org_admin/phases/_index.html.erb | 23 ++- app/views/org_admin/phases/_phase.html.erb | 4 +- app/views/org_admin/phases/container.html.erb | 12 +- app/views/org_admin/phases/preview.html.erb | 6 +- app/views/org_admin/plans/index.html.erb | 6 +- app/views/org_admin/questions/_form.html.erb | 20 +-- app/views/org_admin/questions/_index.html.erb | 2 +- app/views/org_admin/questions/_show.html.erb | 71 ++++---- app/views/org_admin/sections/_form.html.erb | 10 +- app/views/org_admin/sections/_index.html.erb | 77 ++++---- .../org_admin/sections/_section.html.erb | 61 +++---- .../sections/_section_group.html.erb | 4 +- .../org_admin/shared/_theme_selector.html.erb | 5 +- app/views/org_admin/templates/_form.html.erb | 14 +- .../org_admin/templates/_navigation.html.erb | 12 +- .../org_admin/templates/container.html.erb | 8 +- .../org_admin/templates/history.html.erb | 2 +- app/views/org_admin/templates/index.html.erb | 18 +- app/views/org_admin/templates/new.html.erb | 6 +- app/views/org_admin/users/edit.html.erb | 14 +- app/views/orgs/_external_identifiers.html.erb | 8 +- app/views/orgs/_feedback_form.html.erb | 6 +- app/views/orgs/_profile_form.html.erb | 30 ++-- app/views/orgs/admin_edit.html.erb | 36 ++-- app/views/orgs/shibboleth_ds.html.erb | 2 +- .../paginable/api_clients/_index.html.erb | 2 +- .../paginable/contributors/_index.html.erb | 2 +- .../paginable/departments/_index.html.erb | 4 +- .../paginable/guidance_groups/_index.html.erb | 2 +- app/views/paginable/guidances/_index.html.erb | 2 +- app/views/paginable/orgs/_index.html.erb | 2 +- .../plans/_privately_visible.html.erb | 16 +- .../research_outputs/_index.html.erb | 6 +- .../templates/_customisable.html.erb | 15 +- .../templates/_organisational.html.erb | 22 +-- .../templates/_publicly_visible.html.erb | 2 +- app/views/phases/_edit_plan_answers.html.erb | 41 ++--- app/views/phases/_guidances_notes.html.erb | 67 ++++--- app/views/phases/_overview.html.erb | 2 +- app/views/plans/_download_form.html.erb | 30 ++-- app/views/plans/_edit_details.html.erb | 4 +- app/views/plans/_guidance_selection.html.erb | 12 +- app/views/plans/_navigation.html.erb | 43 +++-- app/views/plans/_overview_details.html.erb | 26 ++- app/views/plans/_project_details.html.erb | 66 +++---- .../plans/_request_feedback_form.html.erb | 2 +- app/views/plans/_share_form.html.erb | 10 +- app/views/plans/new.html.erb | 25 ++- .../_new_edit_question_datefield.html.erb | 4 +- .../_new_edit_question_option_based.html.erb | 2 +- .../_new_edit_question_textarea.html.erb | 4 +- .../_new_edit_question_textfield.html.erb | 4 +- app/views/research_outputs/_form.html.erb | 56 +++--- app/views/research_outputs/edit.html.erb | 2 +- app/views/research_outputs/new.html.erb | 2 +- .../repositories/_search_result.html.erb | 2 +- app/views/shared/_access_controls.html.erb | 21 ++- app/views/shared/_copy_link_modal.html.erb | 28 +-- .../shared/_create_account_form.html.erb | 21 ++- app/views/shared/_create_plan_modal.html.erb | 10 +- app/views/shared/_links.html.erb | 18 +- app/views/shared/_modal.html.erb | 4 +- app/views/shared/_search.html.erb | 11 +- app/views/shared/_sign_in_form.html.erb | 70 ++++---- app/views/shared/_table_filter.html.erb | 42 ++--- app/views/static_pages/about_us.html.erb | 2 +- app/views/static_pages/privacy.html.erb | 2 +- app/views/static_pages/termsuse.html.erb | 2 +- .../super_admin/api_clients/_form.html.erb | 20 +-- .../super_admin/api_clients/edit.html.erb | 2 +- .../super_admin/api_clients/index.html.erb | 2 +- .../super_admin/api_clients/new.html.erb | 2 +- .../super_admin/notifications/_form.html.erb | 16 +- .../super_admin/notifications/edit.html.erb | 2 +- .../super_admin/notifications/index.html.erb | 2 +- .../super_admin/notifications/new.html.erb | 2 +- app/views/super_admin/orgs/index.html.erb | 2 +- app/views/super_admin/orgs/new.html.erb | 6 +- app/views/super_admin/themes/_form.html.erb | 6 +- app/views/super_admin/themes/edit.html.erb | 2 +- app/views/super_admin/themes/index.html.erb | 2 +- app/views/super_admin/themes/new.html.erb | 2 +- .../super_admin/users/_confirm_merge.html.erb | 2 +- app/views/super_admin/users/edit.html.erb | 20 +-- .../_template_statistics_accordion.html.erb | 34 ++-- app/views/usage/_total_usage.html.erb | 16 +- app/views/usage/_user_statistics.html.erb | 16 +- .../usage/_user_statistics_accordion.html.erb | 34 ++-- app/views/usage/index.html.erb | 2 +- .../users/_admin_grant_permissions.html.erb | 16 +- .../users/_notification_preferences.html.erb | 30 ++-- app/views/users/admin_index.html.erb | 2 +- package.json | 6 +- 178 files changed, 1612 insertions(+), 1346 deletions(-) create mode 100644 app/assets/stylesheets/blocks/_accordion.scss create mode 100644 app/assets/stylesheets/blocks/_cards.scss delete mode 100644 app/assets/stylesheets/blocks/_panels.scss create mode 100644 app/assets/stylesheets/utils/_functions.scss delete mode 100644 app/javascript/src/utils/popoverHelper.js diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 5e6d597552..523645353e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,12 +1,8 @@ // Import locally defined variables. Load this before 'bootstrap' - @use "variables"; -@use "blocks"; -@use "utils"; - // Pull in the webpacker managed copy of Bootstrap Stylesheets -@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; +@import "../../../node_modules/bootstrap/scss/bootstrap"; @import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss"; // Pull in the webapcker managed copy of JQuery-UI Stylesheets @@ -19,3 +15,27 @@ $fa-font-path: '.'; // @import '@fortawesome/fontawesome-free/scss/brands'; @import '@fortawesome/fontawesome-free/scss/regular'; @import '@fortawesome/fontawesome-free/scss/solid'; + +// Custom.scss +// Option B: Include parts of Bootstrap + +// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) +@import "../../../node_modules/bootstrap/scss/functions"; + +// 2. Include any default variable overrides here + +// 3. Include remainder of required Bootstrap stylesheets +@import "../../../node_modules/bootstrap/scss/variables"; +@import "../../../node_modules/bootstrap/scss/mixins"; + +// 4. Include any optional Bootstrap components as you like +@import "../../../node_modules/bootstrap/scss/root"; +@import "../../../node_modules/bootstrap/scss/reboot"; +@import "../../../node_modules/bootstrap/scss/type"; +@import "../../../node_modules/bootstrap/scss/images"; +@import "../../../node_modules/bootstrap/scss/containers"; +@import "../../../node_modules/bootstrap/scss/grid"; + +//Importing customised stylesheets after Bootstrap defaults +@import "blocks"; +@import "utils"; diff --git a/app/assets/stylesheets/blocks/_accordion.scss b/app/assets/stylesheets/blocks/_accordion.scss new file mode 100644 index 0000000000..889942f587 --- /dev/null +++ b/app/assets/stylesheets/blocks/_accordion.scss @@ -0,0 +1,82 @@ +@use '../variables/colours' as *; + +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; + + +// An explanation of how we change the Bootstrap arrow icon for the accordion to use the footawesome icons. +// First we get the fontawesome plus.svg and minus.svg for use in background image from: +// node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg (in .accordion-button.collapsed::after) +// node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg +// We then encode the svg. +// Next the svg fill attribute is added with color set by a variable $color-accordion-button-icon in the _colours.scss. +// This allows us to change color of symbols. +// "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}' +// SVG we are using are encoded with fill added as fill='#{$color-accordion-button-icon}': +// After encoding # symbols in svg with the unicode %23. Hence the use of the replace function. +// We could have done this without str-replace by adding encoded fill='%23{$color-accordion-button-icon}'. +// Example of process for version Font Awesome Free 6.4.0 (node_modules/@fortawesome/fontawesome-free). +// Get svgs +// node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg: +// +// Encode using a "URL-encoder for SVG" like https://yoksel.github.io/url-encoder/ +// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E +// Repeat for +// node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg +// +// Encode using a "URL-encoder for SVG" +// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E? +// We now use svgs as the background-image for the .accordion-button class as follows leaving a space. +// After viewBox='0 0 448 512' we add fill='#{$color-accordion-button-icon}' as follows: +// For node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg: +// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E +// node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg: +// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E?? +// Now add to scss with a str-replace javascript function (which replaces '#' with '%23' after evaluation of #{$color-accordion-button-icon}. +// background-image: str-replace(url("data:image/svg+xml, ENCODED_SVG, , '#', '%23'); + +// Change when fontawesome library upgraded. Using Font Awesome Free 6.4.0 (node_modules/@fortawesome/fontawesome-free). See above explanation on how it is done. +.accordion-button::after, .accordion-button.collapsed::after { + background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E"), '#', '%23'); +} + +.accordion-button:not(.collapsed)::after { + background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E"), '#', '%23'); + transition: all 0.5s; +} + + +// // move fa-arrows-alt to right +h2.accordion-header { + display: flex; + align-items: center; + color: $color-accordion-button; + background-color: $color-accordion-button-bg; + font-size: 1rem; +} + +h2.accordion-header > a.i { + margin-left: auto; +} + +// Remove box-shadow and highlight from Accordion button +a.accordion-button, +a.accordion-button.collapsed, +a.accordion-button:not(.collapsed), +a.accordion-button:hover, +a.accordion-button:active, +a.accordion-button:focus, +a.accordion-button:focus-visible, +button.accordion-button.collapsed, +button.accordion-button:not(.collapsed), +button.accordion-button, +button.accordion-button:hover, +button.accordion-button:active, +button.accordion-button:focus, +button.accordion-button:focus-visible { + color: $color-accordion-button; + background-color: $color-accordion-button-bg; + text-decoration: none !important; + box-shadow: none !important; + outline: none !important; +} diff --git a/app/assets/stylesheets/blocks/_buttons.scss b/app/assets/stylesheets/blocks/_buttons.scss index ffc1d5ee69..67b4545935 100644 --- a/app/assets/stylesheets/blocks/_buttons.scss +++ b/app/assets/stylesheets/blocks/_buttons.scss @@ -1,10 +1,6 @@ @use '../variables/colours' as *; // Bootstrap overrides -.btn { - border-radius: 0px; -} - /* primary button */ .btn-primary, .btn-primary:hover, @@ -19,6 +15,7 @@ outline: none; margin-top: 5px; margin-bottom: 10px; + border-radius: 0rem; } /* default button */ @@ -35,6 +32,9 @@ outline: none; margin-top: 5px; margin-bottom: 10px; + text-align: center; + text-decoration: none; + border-radius: 0rem; } /* Popover button */ @@ -52,6 +52,13 @@ } /* link button */ -.btn-link { +.btn-link, .btn-close { color: $color-link-text; + border: $color-border-default; + border-radius: 0rem; +} + +.btn:disabled { + background-color: lighten($color-primary-background, 40%); + border: none; } diff --git a/app/assets/stylesheets/blocks/_cards.scss b/app/assets/stylesheets/blocks/_cards.scss new file mode 100644 index 0000000000..edb25d6e1f --- /dev/null +++ b/app/assets/stylesheets/blocks/_cards.scss @@ -0,0 +1,55 @@ +@use '../variables/colours' as *; + +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; + +// Override Bootstrap 5 cards + +.card { + border-color: $color-border-default; + border-radius: 0rem; +} +.heading-button > .card-heading, .card > .card-heading { + background-color: $color-primary-background; + color: $color-primary-text; + border-top-right-radius: 0px; + border-top-left-radius: 0px; +} + +.empty-section { + background-color: $color-muted-background !important; + cursor: 'auto' !important; +} + +.card-title a { + display: block; + padding: 8px calc($grid-gutter-width / 2); + margin: -10px calc($grid-gutter-width / -2); + background-color: $color-primary-background; + color: $color-primary-text; +} +.card-title > a.reverse { + background-color: $color-secondary-background; + color: $color-secondary-text; +} + +// Classes from Boostrap 3 panels (renamed card) - interim solution +.card-default { + border-color: #ddd; + border-radius: 0rem; +} +.card-default > .card-heading { + color: #333333; + background-color: #f5f5f5; + border-color: #ddd; +} +.card-default > .card-heading + .card-collapse > .card-body { + border-top-color: #ddd; +} +.card-default > .card-heading .badge { + color: #f5f5f5; + background-color: #333333; +} +.card-default > .card-footer + .card-collapse > .card-body { + border-bottom-color: #ddd; +} diff --git a/app/assets/stylesheets/blocks/_font_awesomes.scss b/app/assets/stylesheets/blocks/_font_awesomes.scss index ddfc9d197d..57e6fba58f 100644 --- a/app/assets/stylesheets/blocks/_font_awesomes.scss +++ b/app/assets/stylesheets/blocks/_font_awesomes.scss @@ -1,6 +1,6 @@ @use '../variables/colours' as *; -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; - +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; // Override FontAwesome icons /* FONTAWESOME STYLING */ diff --git a/app/assets/stylesheets/blocks/_footers.scss b/app/assets/stylesheets/blocks/_footers.scss index 768fb83001..8e0b09c949 100644 --- a/app/assets/stylesheets/blocks/_footers.scss +++ b/app/assets/stylesheets/blocks/_footers.scss @@ -1,5 +1,6 @@ -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; -/* For sticky footer */ +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; + #footer-navbar { margin-bottom: 0px; position: absolute; @@ -8,6 +9,6 @@ border-radius:0px; z-index: 1; ul { - padding-right: $grid-gutter-width / 2; + padding-right: calc($grid-gutter-width / 2); } } diff --git a/app/assets/stylesheets/blocks/_html.scss b/app/assets/stylesheets/blocks/_html.scss index 226b940dd3..28e827fe5e 100644 --- a/app/assets/stylesheets/blocks/_html.scss +++ b/app/assets/stylesheets/blocks/_html.scss @@ -4,6 +4,8 @@ // blocks. html { + font-size: 0.9rem; + font-weight: 300; position: relative; min-height: 100%; } @@ -11,6 +13,7 @@ html { /* For sticky footer */ main { margin-bottom: 100px; + margin-top: 30px; @media (max-width: 768px) { margin-bottom: 420px; } @@ -21,6 +24,15 @@ main { body{ padding-bottom: 50px; + + hr { + border-top: 1px solid #eeeeee; + } + + .row { + --bs-gutter-x: 0rem; + } + } /* footer */ @@ -51,7 +63,7 @@ fieldset { legend { border: none; - font-size: 14px; + font-size: 14px; font-weight: bold; margin-bottom: 5px; text-transform: capitalize; @@ -65,3 +77,9 @@ h1, h2, h3, h4, h5, h6 { /* font-family: "GillSansLight"; */ color: $color-heading-text; } + + +.fas:not(.small) { + font-size: 1rem; +} + diff --git a/app/assets/stylesheets/blocks/_index.scss b/app/assets/stylesheets/blocks/_index.scss index b850d43e6d..a443f64d94 100644 --- a/app/assets/stylesheets/blocks/_index.scss +++ b/app/assets/stylesheets/blocks/_index.scss @@ -1,7 +1,9 @@ @use 'accessibility'; +@use 'accordion'; @use 'alerts'; @use 'autocomplete'; @use 'buttons'; +@use 'cards'; @use 'clearable_field'; @use 'datepicker'; @use 'display'; @@ -23,7 +25,6 @@ @use 'new_plans_form'; @use 'new_window_popup'; @use 'notification_areas'; -@use 'panels'; @use 'profile_form'; @use 'progress'; @use 'project_details'; diff --git a/app/assets/stylesheets/blocks/_input_groups.scss b/app/assets/stylesheets/blocks/_input_groups.scss index 88f19d1cec..80b1762d08 100644 --- a/app/assets/stylesheets/blocks/_input_groups.scss +++ b/app/assets/stylesheets/blocks/_input_groups.scss @@ -1,5 +1,10 @@ @use '../variables/colours' as *; .input-group-addon { - border-radius: 0px; + border-radius: 0rem; background-color: $color-primary-background; + padding: 0.5rem; +} + +.form-control { + border-radius: 0rem; } diff --git a/app/assets/stylesheets/blocks/_inverse_dropdowns.scss b/app/assets/stylesheets/blocks/_inverse_dropdowns.scss index e7f48d5378..f39b41bfdd 100644 --- a/app/assets/stylesheets/blocks/_inverse_dropdowns.scss +++ b/app/assets/stylesheets/blocks/_inverse_dropdowns.scss @@ -1,4 +1,5 @@ -@use '../variables/bootstrap' as *; + @use '../variables/bootstrap' as *; + /* For dark (inverse) navbars */ .inverse-dropdown { background-color: $dropdown-inverse-bg !important; diff --git a/app/assets/stylesheets/blocks/_labels.scss b/app/assets/stylesheets/blocks/_labels.scss index 71d6b7fdb5..4dce63f098 100644 --- a/app/assets/stylesheets/blocks/_labels.scss +++ b/app/assets/stylesheets/blocks/_labels.scss @@ -1,6 +1,11 @@ -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; /* label stlying */ +label { + font-weight: 700; +} + .label { font-size: 85%; border-radius: 0px; @@ -8,7 +13,11 @@ /* RADIO BUTTONS */ .radio label { - margin-right: $grid-gutter-width / 2; + margin-right: calc($grid-gutter-width / 2); +} + +.radio label, .checkbox label { + font-weight: 400; } /* Remove mandatory * from check_box_tag in Admin search */ diff --git a/app/assets/stylesheets/blocks/_lists.scss b/app/assets/stylesheets/blocks/_lists.scss index 1bd84f06b3..50e10d6546 100644 --- a/app/assets/stylesheets/blocks/_lists.scss +++ b/app/assets/stylesheets/blocks/_lists.scss @@ -1,4 +1,6 @@ -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; + // Overrides Bootstrap 3.0's lists /* list-group styling */ @@ -13,6 +15,6 @@ /* LIST STYLING */ span.sublist { - margin-left: $grid-gutter-width / -2; + margin-left: calc($grid-gutter-width / -2); margin-right: 25px; } diff --git a/app/assets/stylesheets/blocks/_logos.scss b/app/assets/stylesheets/blocks/_logos.scss index 33baedbbe1..7b9af2f22a 100644 --- a/app/assets/stylesheets/blocks/_logos.scss +++ b/app/assets/stylesheets/blocks/_logos.scss @@ -1,12 +1,13 @@ -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; /* HEADER LOGOS */ .app-logo { height: 50px; - padding-right: $grid-gutter-width / 2; + padding-right: calc($grid-gutter-width / 2); } .org-logo { height: 100px; - padding-right: $grid-gutter-width / 2; + padding-right: calc($grid-gutter-width / 2); } diff --git a/app/assets/stylesheets/blocks/_modal_dialogs.scss b/app/assets/stylesheets/blocks/_modal_dialogs.scss index 051f8b8096..ae590386ab 100644 --- a/app/assets/stylesheets/blocks/_modal_dialogs.scss +++ b/app/assets/stylesheets/blocks/_modal_dialogs.scss @@ -1,10 +1,17 @@ @use '../variables/colours' as *; // Overrides Bootstrap 3.0's Modals +.modal{ + --bs-modal-border-radius: 0rem; +} + .modal-dialog { background-color: $color-secondary-background; } +.modal-header > h2 { + font-size: 20px; +} // Footer (for actions) .modal-footer { diff --git a/app/assets/stylesheets/blocks/_modal_permissions.scss b/app/assets/stylesheets/blocks/_modal_permissions.scss index 9a5d277be6..c6afcd9b2b 100644 --- a/app/assets/stylesheets/blocks/_modal_permissions.scss +++ b/app/assets/stylesheets/blocks/_modal_permissions.scss @@ -1,4 +1,6 @@ -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; + /* Overrides ul list */ #modal-permissions ul { list-style-type: none; @@ -12,5 +14,5 @@ /* Overrides list-group-item */ #modal-permissions .list-group-item { height: 30px; - padding: 5px $grid-gutter-width / 2; + padding: 5px calc($grid-gutter-width / 2); } diff --git a/app/assets/stylesheets/blocks/_modal_search.scss b/app/assets/stylesheets/blocks/_modal_search.scss index 5c842c7a23..6b9ebd4eb6 100644 --- a/app/assets/stylesheets/blocks/_modal_search.scss +++ b/app/assets/stylesheets/blocks/_modal_search.scss @@ -65,6 +65,7 @@ border-radius: 25px; padding: 2px 5px; font-size: 1.3rem; + text-decoration: none; } .modal-search-result .modal-search-result-selector { background-color: $color-green; diff --git a/app/assets/stylesheets/blocks/_navbars.scss b/app/assets/stylesheets/blocks/_navbars.scss index f8851e6b5c..99e4e85e53 100644 --- a/app/assets/stylesheets/blocks/_navbars.scss +++ b/app/assets/stylesheets/blocks/_navbars.scss @@ -1,5 +1,8 @@ @use '../variables/bootstrap' as *; -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; +@import "../../../../node_modules/bootstrap/scss/mixins"; + /* For org navbar custom height */ #org-navbar { border-radius: 0px; @@ -39,7 +42,7 @@ } } #org-navbar .org-links { - padding-top: $grid-gutter-width / 2; + padding-top: calc($grid-gutter-width / 2); } #org-navbar .org-a { line-height: 36px !important; @@ -52,7 +55,7 @@ // Branding navbar. This is defined as a clone of .navbar-branding with customizations .navbar-branding { - @extend .navbar-inverse; + @extend .navbar-inverse !optional; background-color: $navbar-branding-bg; border-color: $navbar-branding-border; @@ -116,7 +119,7 @@ } } - @media (max-width: $grid-float-breakpoint-max) { + @include media-breakpoint-down(md) { // Dropdowns get custom display .open .dropdown-menu { > .dropdown-header { diff --git a/app/assets/stylesheets/blocks/_navs.scss b/app/assets/stylesheets/blocks/_navs.scss index 8849b77155..6bab1214e4 100644 --- a/app/assets/stylesheets/blocks/_navs.scss +++ b/app/assets/stylesheets/blocks/_navs.scss @@ -19,17 +19,24 @@ nav ul { } -// Overrides Bootstrap 3.0's nav-tabs +// Overrides Bootstrap /* nav-tabs and nav-pills styling */ + .nav-tabs, .nav-pills { background-color: $color-primary-background; color: $color-primary-text; - border-bottom: 0px; + border-radius: 0px; } + +.nav-tabs .nav-item .nav-link, .nav-pills .nav-item .nav-link { + border-radius: 0px; +} + .nav-tabs > li > a, .nav-pills > li > a { color: $color-primary-text; } + .nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav-tabs > li > a.active, @@ -40,6 +47,7 @@ nav ul { border: 1px solid $color-border-default; border-bottom-color: transparent; /* Only nav-tabs have a transparent border-bottom */ } + .nav-pills > li > a:hover, .nav-pills > li > a:focus, .nav-pills > li > a.active, @@ -49,14 +57,19 @@ nav ul { color: $color-secondary-text; border: 1px solid $color-border-default; } + +.nav-pills > li:first-child > a:hover, +.nav-pills > li:first-child > a:focus, +.nav-pills > li:first-child > a.active, +.nav-pills > li:first-child > a.active:focus, +.nav-pills > li:first-child > a.active:hover, .nav-pills > li:last-child > a:hover, .nav-pills > li:last-child > a:focus, .nav-pills > li:last-child > a.active, .nav-pills > li:last-child > a.active:focus, .nav-pills > li:last-child > a.active:hover { border-right: 0px; + background-color: $color-secondary-background; + color: $color-secondary-text; } -.nav-tabs > li > a, -.nav-pills > li > a { - border-radius: 0px; -} + diff --git a/app/assets/stylesheets/blocks/_new_plans_form.scss b/app/assets/stylesheets/blocks/_new_plans_form.scss index 34b8928596..f1394be173 100644 --- a/app/assets/stylesheets/blocks/_new_plans_form.scss +++ b/app/assets/stylesheets/blocks/_new_plans_form.scss @@ -1,9 +1,11 @@ -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; + // TODO: Refactor this. Instead of writing specific CSS rules for particular objects, // we should provide utility classes which can provide the desired style to this object #new_plan { .create-plan-or { - padding: 5px 0 0 $grid-gutter-width / 2; + padding: 5px 0 0 calc($grid-gutter-width / 2); } .create-plan-checkbox { margin-left: -40px; diff --git a/app/assets/stylesheets/blocks/_notification_areas.scss b/app/assets/stylesheets/blocks/_notification_areas.scss index 5570785be5..1bb63f5629 100644 --- a/app/assets/stylesheets/blocks/_notification_areas.scss +++ b/app/assets/stylesheets/blocks/_notification_areas.scss @@ -1,4 +1,6 @@ -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; +@import "../../../../node_modules/bootstrap/scss/mixins"; .notification-area--floating { position: fixed; @@ -9,7 +11,7 @@ width: 90vw; // Non-mobile settings - @media (min-width: #{$screen-sm-min}) { + @include media-breakpoint-up(sm) { right: 4rem; width: 300px; } diff --git a/app/assets/stylesheets/blocks/_org_links.scss b/app/assets/stylesheets/blocks/_org_links.scss index 3ce92c4b23..ca5b7dd02d 100644 --- a/app/assets/stylesheets/blocks/_org_links.scss +++ b/app/assets/stylesheets/blocks/_org_links.scss @@ -1,6 +1,6 @@ // TODO: Refactor this. Instead of writing specific CSS rules for particular objects, // we should provide utility classes which can provide the desired style to this object .remove-org-link i { - margin-left: $grid-gutter-width / -2; + margin-left: calc($grid-gutter-width / -2); margin-top: $grid-gutter-width; } diff --git a/app/assets/stylesheets/blocks/_panels.scss b/app/assets/stylesheets/blocks/_panels.scss deleted file mode 100644 index ca7197aa96..0000000000 --- a/app/assets/stylesheets/blocks/_panels.scss +++ /dev/null @@ -1,30 +0,0 @@ -@use '../variables/colours' as *; -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; -// Override Bootstrap 3.0's Panels - -.panel-default { - border-color: $color-border-default; -} -.heading-button > .panel-heading, .panel-default > .panel-heading { - background-color: $color-primary-background; - color: $color-primary-text; - border-top-right-radius: 0px; - border-top-left-radius: 0px; -} - -.empty-section { - background-color: $color-muted-background !important; - cursor: 'auto' !important; -} - -.panel-title a { - display: block; - padding: 8px $grid-gutter-width / 2; - margin: -10px $grid-gutter-width / -2; - background-color: $color-primary-background; - color: $color-primary-text; -} -.panel-title > a.reverse { - background-color: $color-secondary-background; - color: $color-secondary-text; -} diff --git a/app/assets/stylesheets/blocks/_profile_form.scss b/app/assets/stylesheets/blocks/_profile_form.scss index 19a26e017f..2883d74994 100644 --- a/app/assets/stylesheets/blocks/_profile_form.scss +++ b/app/assets/stylesheets/blocks/_profile_form.scss @@ -1,9 +1,11 @@ -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; + // TODO: Refactor this. Instead of writing specific CSS rules for particular objects, // we should provide utility classes which can provide the desired style to this object .org-logo-controls { display: inline-block; - margin-left: $grid-gutter-width / 2; + margin-left: calc($grid-gutter-width / 2); input { display: inline-block; } strong { margin: 0 10px; } } diff --git a/app/assets/stylesheets/blocks/_spinner.scss b/app/assets/stylesheets/blocks/_spinner.scss index a812084c90..6897b2ac1e 100644 --- a/app/assets/stylesheets/blocks/_spinner.scss +++ b/app/assets/stylesheets/blocks/_spinner.scss @@ -1,10 +1,9 @@ + .spinner-border { - position: fixed; - top: 48%; - left: 43%; + animation: spinner-border 1.5s linear infinite !important; + position: fixed !important; + top: 48% !important; + left: 43% !important; + width: 2rem !important; + height: 2rem !important; } - -.spinner-border img { - height: 80px; - width: 80px; -} \ No newline at end of file diff --git a/app/assets/stylesheets/blocks/_tables.scss b/app/assets/stylesheets/blocks/_tables.scss index 32e3a2038c..bc8f91dd1b 100644 --- a/app/assets/stylesheets/blocks/_tables.scss +++ b/app/assets/stylesheets/blocks/_tables.scss @@ -1,11 +1,21 @@ @use '../variables/colours' as *; -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; + // This file contains overrides to the core Bootstrap 3.x styling -.table { border: 1px solid $color-border-default; } -.table thead > tr > th { border-bottom: none; } -.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { border: 1px solid $color-border-default; } +.table { + border: 1px solid $color-border-default; +} + +.table thead > tr > th { + border-bottom: none; + } + +.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { + border: 1px solid $color-border-default; +} -thead th { +.table thead th { background-color: $color-border-default; color: $color-primary-text; } @@ -16,7 +26,7 @@ thead th.table-scope { a { color: $color-secondary-text; - padding: 2px ($grid-gutter-width / 2) 2px 2px; + padding: 2px calc($grid-gutter-width / 2) 2px 2px; } } @@ -35,7 +45,7 @@ th.download-column { /* Fix issues with dropdwon within tables being cut off */ .table-responsive > .table { width: 100%; - margin-bottom: $grid-gutter-width / 2; + margin-bottom: calc($grid-gutter-width / 2); overflow: auto; } diff --git a/app/assets/stylesheets/blocks/_template_filters.scss b/app/assets/stylesheets/blocks/_template_filters.scss index ed78964bba..1d20649327 100644 --- a/app/assets/stylesheets/blocks/_template_filters.scss +++ b/app/assets/stylesheets/blocks/_template_filters.scss @@ -1,6 +1,8 @@ @use '../variables/colours' as *; -@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *; +@import "../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../node_modules/bootstrap/scss/variables"; + .template-table-filters .navbar-nav > li > a { color: $color-secondary-text; - padding: 5px ($grid-gutter-width / 2) 5px 5px; + padding: 5px calc($grid-gutter-width / 2) 5px 5px; } diff --git a/app/assets/stylesheets/utils/_functions.scss b/app/assets/stylesheets/utils/_functions.scss new file mode 100644 index 0000000000..50d6bbb27c --- /dev/null +++ b/app/assets/stylesheets/utils/_functions.scss @@ -0,0 +1,9 @@ +@function str-replace($string, $search, $replace: '') { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} diff --git a/app/assets/stylesheets/utils/_index.scss b/app/assets/stylesheets/utils/_index.scss index b323b19921..ec7573c8c0 100644 --- a/app/assets/stylesheets/utils/_index.scss +++ b/app/assets/stylesheets/utils/_index.scss @@ -5,3 +5,4 @@ @use 'font_size'; @use 'icons'; @use 'margins'; +@use 'functions'; diff --git a/app/assets/stylesheets/variables/_bootstrap.scss b/app/assets/stylesheets/variables/_bootstrap.scss index d8fbbb4a4b..98391ac759 100644 --- a/app/assets/stylesheets/variables/_bootstrap.scss +++ b/app/assets/stylesheets/variables/_bootstrap.scss @@ -10,23 +10,19 @@ // NOTE: We need to stick to the !default format below, to ensure variables can be set in // other files for individual deployments. -// Forms -$input-border-radius: 0px !default; - - -// Navbar -$navbar-border-radius: 0px !default; // Buttons -$btn-border-radius-base: 0px !default; +$btn-border-radius-base: 0rem !default; $btn-primary-color: $color-primary-text !default; $btn-default-color: $color-primary-text !default; // Panels -$panel-border-radius: 0px !default; +$panel-border-radius: 0rem !default; +// Links +$link-decoration: none !default; // from colors: diff --git a/app/assets/stylesheets/variables/_colours.scss b/app/assets/stylesheets/variables/_colours.scss index 041d394803..eecf3b8ea5 100644 --- a/app/assets/stylesheets/variables/_colours.scss +++ b/app/assets/stylesheets/variables/_colours.scss @@ -30,6 +30,7 @@ $color-footer-background: $color-navbar-background; $color-tooltip-background: $color-primary-background; $color-icon-bar-background: $color-white; + // Text $color-primary-text: $color-white; $color-secondary-text: $color-grey; @@ -64,3 +65,11 @@ $color-fa: $color-grey; // Focus colors $color-focus-outline: $color-blue-alice-darkest; + +// Accordion colors +$color-accordion-button: $color-primary-text; +$color-accordion-button-icon: $color-primary-text; +$color-accordion-button-bg: $color-primary-background; +$color-accordion-button-active-bg: darken($color-accordion-button-bg, 30%) ; + + diff --git a/app/javascript/application.js b/app/javascript/application.js index dff19b9c41..ccad6aa6a5 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -12,7 +12,6 @@ import 'regenerator-runtime/runtime'; // Pull in Bootstrap JS functionality import 'bootstrap'; -import 'bootstrap-3-typeahead'; import 'bootstrap-select'; // Uncomment to copy all static images under ../images to the output folder and reference @@ -29,10 +28,8 @@ import './src/utils/modalSearch'; import './src/utils/outOfFocus'; import './src/utils/paginable'; import './src/utils/panelHeading'; -import './src/utils/popoverHelper'; import './src/utils/requiredField'; import './src/utils/tabHelper'; -import './src/utils/tooltipHelper'; // Specific functions from the Utilities files that will be made available to // the js.erb templates in the `window.x` statements below diff --git a/app/javascript/src/orgAdmin/phases/newEdit.js b/app/javascript/src/orgAdmin/phases/newEdit.js index 7904ed124b..556bf886c9 100644 --- a/app/javascript/src/orgAdmin/phases/newEdit.js +++ b/app/javascript/src/orgAdmin/phases/newEdit.js @@ -1,5 +1,5 @@ // import 'bootstrap-sass/assets/javascripts/bootstrap/collapse'; -import { Tinymce } from '../../utils/tinymce.js'; +import { Tinymce } from '../../utils/tinymce'; import { isObject, isString } from '../../utils/isType'; import getConstant from '../../utils/constants'; import { addAsterisks } from '../../utils/requiredField'; @@ -46,14 +46,14 @@ $(() => { }); const getQuestionPanel = (target) => { - let panelBody; + let cardBody; if (isObject(target)) { - panelBody = target.closest('.question_container'); - if (!isObject(panelBody) || !isString(panelBody.attr('id'))) { - panelBody = target.closest('.panel-body').find('.new-question'); + cardBody = target.closest('.question_container'); + if (!isObject(cardBody) || !isString(cardBody.attr('id'))) { + cardBody = target.closest('.card-body').find('.new-question'); } } - return panelBody; + return cardBody; }; const initSection = (selector) => { if (isString(selector)) { @@ -61,7 +61,7 @@ $(() => { // For some reason the toolbar options are retained after the call to Tinymce.init() on // the views/notifications/edit.js file. Tried 'Object.assign' instead of '$.extend' but it // made no difference - const prefix = 'collapseSection' + const prefix = 'collapseSection'; let sectionId = selector; if (sectionId.startsWith(prefix)) { sectionId = `sc_${sectionId.replace(prefix, '')}_section_description` @@ -90,63 +90,63 @@ $(() => { // Attach handlers for the Section expansion $(parentSelector).on('ajax:before', 'a.ajaxified-section[data-remote="true"]', (e) => { - const panelBody = $(e.target).parent().find('.panel-body'); - return panelBody.attr('data-loaded') === 'false'; + const accordionBody = $(e.target).parents('.accordion-item').find('.accordion-collapse').find('.accordion-body'); + return accordionBody.attr('data-loaded') === 'false'; }); $(parentSelector).on('ajax:success', 'a.ajaxified-section[data-remote="true"]', (e) => { - const panelBody = $(e.target).parent().find('.panel-body'); - const panel = panelBody.parent(); - if (isObject(panelBody)) { + const accordionBody = $(e.target).parents('.accordion-item').find('.accordion-collapse').find('.accordion-body'); + const accordionCollapse = accordionBody.parents('.accordion-collapse'); + if (isObject(accordionBody)) { // Display the section's html - panelBody.attr('data-loaded', 'true'); - panelBody.html(e.detail[0].html); + accordionBody.attr('data-loaded', 'true'); + accordionBody.append(e.detail[0].html); // Wire up the section - initSection(`${panel.attr('id')}`); + initSection(`${accordionCollapse.attr('id')}`); } }); // Attach handlers for the Question show/edit/new $(parentSelector).on('ajax:before', 'a.ajaxified-question[data-remote="true"]', (e) => { - const panelBody = getQuestionPanel($(e.target)); - if (isObject(panelBody)) { + const cardBody = getQuestionPanel($(e.target)); + if (isObject(cardBody)) { // Release any Tinymce editors that have been loaded - panelBody.find('.question').each((idx, el) => { + cardBody.find('.question').each((idx, el) => { Tinymce.destroyEditorById($(el).attr('id')); }); } }); $(parentSelector).on('ajax:success', 'a.ajaxified-question[data-remote="true"]', (e) => { const target = $(e.target); - const panelBody = getQuestionPanel(target); - if (isObject(panelBody)) { - const id = panelBody.attr('id'); + const cardBody = getQuestionPanel(target); + if (isObject(cardBody)) { + const id = cardBody.attr('id'); // Display the section's html - panelBody.html(e.detail[0].html); + cardBody.html(e.detail[0].html); initQuestion(id); updateConditions(id); - if (panelBody.is('.new-question')) { + if (cardBody.is('.new-question')) { target.hide(); } } }); $(parentSelector).on('ajax:error', 'a.ajaxified-question[data-remote="true"]', (e) => { - const panelBody = getQuestionPanel($(e.target)); - if (isObject(panelBody)) { - panelBody.html(``); + const cardBody = getQuestionPanel($(e.target)); + if (isObject(cardBody)) { + cardBody.html(``); } }); // When we cancel the new question we just remove the form and its Tinymce editors $(parentSelector).on('click', '.cancel-new-question', (e) => { e.preventDefault(); const target = $(e.target); - const panel = target.closest('.question_container'); - panel.find('.question').each((idx, el) => { + const card = target.closest('.question_container'); + card.find('.question').each((idx, el) => { Tinymce.destroyEditorById($(el).attr('id')); }); - panel.html(''); - panel.closest('.panel-body').find('.new-question-button a.ajaxified-question[data-remote="true"]').show(); + card.html(''); + card.closest('.card-body').find('.new-question-button a.ajaxified-question[data-remote="true"]').show(); }); // Handle the section that has focus on initial page load diff --git a/app/javascript/src/orgAdmin/phases/show.js b/app/javascript/src/orgAdmin/phases/show.js index f7f7f96095..57af3b2634 100644 --- a/app/javascript/src/orgAdmin/phases/show.js +++ b/app/javascript/src/orgAdmin/phases/show.js @@ -29,7 +29,7 @@ $(() => { // 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-up-down-left-right', + handle: 'i.fa-arrows-alt', axis: 'y', cursor: 'move', // Remove the placeholder object from the DOM once the item has been placed diff --git a/app/javascript/src/researchOutputs/form.js b/app/javascript/src/researchOutputs/form.js index c3df1eb317..c57035f3c6 100644 --- a/app/javascript/src/researchOutputs/form.js +++ b/app/javascript/src/researchOutputs/form.js @@ -18,11 +18,11 @@ $(() => { const info = $(link).siblings('div.info'); if (info.length > 0) { - if (info.hasClass('hidden')) { - info.removeClass('hidden'); + if (info.hasClass('d-none')) { + info.removeClass('d-none'); link.text(`${getConstant('LESS_INFO')}`); } else { - info.addClass('hidden'); + info.addClass('d-none'); link.text(`${getConstant('MORE_INFO')}`); } } diff --git a/app/javascript/src/utils/accordion.js b/app/javascript/src/utils/accordion.js index 253893bbd9..abbac3753a 100644 --- a/app/javascript/src/utils/accordion.js +++ b/app/javascript/src/utils/accordion.js @@ -9,53 +9,136 @@ * <%= _('collapse all') %> * * - * Your accordion should follow the Boostrap 3.x layout: + * Your accordion should follow the Boostrap 5.x layout: * ------------------------------------------------------------ - *
- *
- *