From 981a61d11928087311dd0194708303b90efb4d4f Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Mon, 7 Oct 2024 17:56:45 +0000 Subject: [PATCH] Bug 37980: Style corrections for installer and onboarding following Bootstrap 5 update This patch makes a couple of CSS updates to the installer and and onboarding pages: 1. Add more Bootstrap imports to the installer SCSS. I included a pared-down selection of components to save file size. I should have included more. 2. Add a temporary fix for the fact that the Font Awesome checkbox icons aren't working correctly. According to the docs the "empty check box" icons should look like a square border, not a solid square. They don't, and I've included a temporary fix for it. To test apply the patch and rebuild the staff interface CSS. - Drop and recreate the Koha database. Run 'restart_all' if necessary. - Navigate to the staff interface. You should be presented with the installer login. The form should be centered on the page. - Log in. In the list of steps displayed on the "Choose your language" page you should see square icons resembling empty checkboxes (not solid black squares). - Select your language and proceed to the next step. The "Choose your language" line should now have a green icon of a checked checkbox. - Follow the rest of the installer and onboarding steps to confirm that there aren't other unreported style issues. Signed-off-by: Phil Ringnalda --- .../intranet-tmpl/prog/css/src/installer.scss | 45 ++++++++++++++-- .../prog/en/modules/installer/step1.tt | 52 +++++++++---------- .../prog/en/modules/installer/step2.tt | 8 +-- .../prog/en/modules/installer/step3.tt | 32 ++++++------ .../en/modules/onboarding/onboardingstep1.tt | 12 ++--- .../en/modules/onboarding/onboardingstep2.tt | 10 ++-- .../en/modules/onboarding/onboardingstep3.tt | 8 +-- .../en/modules/onboarding/onboardingstep4.tt | 6 +-- .../en/modules/onboarding/onboardingstep5.tt | 4 +- 9 files changed, 108 insertions(+), 69 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss index 873bb6f435..48691d67a0 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss @@ -1,7 +1,9 @@ +@import "~bootstrap/scss/mixins/_banner"; +@include bsBanner(""); + // scss-docs-start import-stack -// Configuration @import "~bootstrap/scss/_functions"; - +// Configuration // Include any default variable overrides here @import "_variables"; @@ -13,20 +15,42 @@ $enable-dark-mode: false; @import "~bootstrap/scss/_maps"; @import "~bootstrap/scss/_utilities"; + +// Layout & components @import "~bootstrap/scss/_root"; @import "~bootstrap/scss/_reboot"; @import "~bootstrap/scss/_type"; +@import "~bootstrap/scss/_images"; @import "~bootstrap/scss/_containers"; @import "~bootstrap/scss/_grid"; +@import "~bootstrap/scss/_tables"; @import "~bootstrap/scss/_forms"; @import "~bootstrap/scss/_buttons"; @import "~bootstrap/scss/_transitions"; +@import "~bootstrap/scss/_dropdown"; +@import "~bootstrap/scss/_button-group"; +@import "~bootstrap/scss/_nav"; +@import "~bootstrap/scss/_navbar"; @import "~bootstrap/scss/_breadcrumb"; +@import "~bootstrap/scss/_pagination"; @import "~bootstrap/scss/_badge"; @import "~bootstrap/scss/_alert"; +@import "~bootstrap/scss/_progress"; +@import "~bootstrap/scss/_list-group"; +@import "~bootstrap/scss/_close"; +@import "~bootstrap/scss/_placeholders"; + +// Helpers @import "~bootstrap/scss/_helpers"; -@import "~bootstrap/scss/_utilities/api"; + +// Utilities +@import "~bootstrap/scss/utilities/_api"; +// scss-docs-end import-stack + +@import "_mixins"; +@import "_tables"; @import "_flatpickr"; +@import "_fonts"; body { background-color: #EEE; @@ -278,3 +302,18 @@ span.breadcrumbs { color: #727272; font-size: 90%; } + +.fa-svg-icon { + &.checkbox-square { + &::before { + background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/svg%3E") 50% 50% no-repeat; + background-size: 12px; + content: ""; + display: inline-block; + float: none; + height: .8em; + margin-right: .3rem; + width: .8em; + } + } +} diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step1.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step1.tt index 034a856a96..ea7fc9b9f5 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step1.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step1.tt @@ -33,12 +33,12 @@
    -
  1. Choose your language
    2. -
  2. Check Perl dependencies
    3. -
  3. Database settings
    4. -
  4. Set up database
    5. -
  5. Install basic configuration settings
    6. -
  6. Onboarding
    7. +
  7. Choose your language
    8. +
  8. Check Perl dependencies
    9. +
  9. Database settings
    10. +
  10. Set up database
    11. +
  11. Install basic configuration settings
    12. +
  12. Onboarding
@@ -77,11 +77,11 @@
  1. Choose your language
    2. -
  2. Check Perl dependencies
    3. -
  3. Database settings
    4. -
  4. Set up database
    5. -
  5. Install basic configuration settings
    6. -
  6. Onboarding
    7. +
  7. Check Perl dependencies
    8. +
  8. Database settings
    9. +
  9. Set up database
    10. +
  10. Install basic configuration settings
    11. +
  11. Onboarding
@@ -101,11 +101,11 @@
  1. Choose your language
    2. -
  2. Check Perl dependencies
    3. -
  3. Database settings
    4. -
  4. Set up database
    5. -
  5. Install basic configuration settings
    6. -
  6. Onboarding
    7. +
  7. Check Perl dependencies
    8. +
  8. Database settings
    9. +
  9. Set up database
    10. +
  10. Install basic configuration settings
    11. +
  11. Onboarding
@@ -127,11 +127,11 @@
  1. Choose your language
    2. -
  2. Check Perl dependencies
    3. -
  3. Database settings
    4. -
  4. Set up database
    5. -
  5. Install basic configuration settings
    6. -
  6. Onboarding
    7. +
  7. Check Perl dependencies
    8. +
  8. Database settings
    9. +
  9. Set up database
    10. +
  10. Install basic configuration settings
    11. +
  11. Onboarding
@@ -156,11 +156,11 @@
  1. Choose your language
    2. -
  2. Check Perl dependencies
    3. -
  3. Database settings
    4. -
  4. Set up database
    5. -
  5. Install basic configuration settings
    6. -
  6. Onboarding
    7. +
  7. Check Perl dependencies
    8. +
  8. Database settings
    9. +
  9. Set up database
    10. +
  10. Install basic configuration settings
    11. +
  11. Onboarding
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step2.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step2.tt index a7271f99b8..882db4fc23 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step2.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step2.tt @@ -23,10 +23,10 @@
  1. Choose your language
  2. Check Perl dependencies
    3. -
  3. Database settings
    4. -
  4. Set up database
    5. -
  5. Install basic configuration settings
    6. -
  6. Onboarding
    7. +
  7. Database settings
    8. +
  8. Set up database
    9. +
  9. Install basic configuration settings
    10. +
  10. Onboarding
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt index a0c7081036..6590b93e7e 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt @@ -57,7 +57,7 @@
  • Database settings
  • Set up database
  • Install basic configuration settings
    • -
  • Onboarding
    • +
  • Onboarding
    • @@ -74,12 +74,12 @@
  • Check Perl dependencies
  • Database settings
  • Set up database
    • -
  • Install basic configuration settings
    • +
  • Install basic configuration settings
      • -
    1. Select your MARC flavor
      2. -
    2. Selecting default settings
      3. +
    3. Select your MARC flavor
      4. +
    4. Selecting default settings
    -
  • Onboarding
    • +
  • Onboarding
    • @@ -114,12 +114,12 @@
  • Check Perl dependencies
  • Database settings
  • Set up database
    • -
  • Install basic configuration settings
    • +
  • Install basic configuration settings
    1. Select your MARC flavor
      2. -
    2. Selecting default settings
      3. +
    3. Selecting default settings
    -
  • Onboarding
    • +
  • Onboarding
    • @@ -223,7 +223,7 @@
  • Select your MARC flavor
  • Selecting default settings
    • -
  • Onboarding
    • +
  • Onboarding
    • @@ -286,8 +286,8 @@
  • Check Perl dependencies
  • Database settings
  • Set up database
    • -
  • Install basic configuration settings
    • -
  • Onboarding
    • +
  • Install basic configuration settings
    • +
  • Onboarding
    • @@ -306,9 +306,9 @@
  • Choose your language
  • Check Perl dependencies
  • Database settings
    • -
  • Set up database
    • -
  • Install basic configuration settings
    • -
  • Onboarding
    • +
  • Set up database
    • +
  • Install basic configuration settings
    • +
  • Onboarding
    • @@ -340,8 +340,8 @@
  • Check Perl dependencies
  • Database settings
  • Set up database
    • -
  • Install basic configuration settings
    • -
  • Onboarding
    • +
  • Install basic configuration settings
    • +
  • Onboarding
    • diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt index fa25acb9ee..000f75ab43 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt @@ -22,13 +22,13 @@
    1. Installation
      2. -
    2. Onboarding +
    3. Onboarding
        -
      1. Create a library
        2. -
      2. Create a patron category
        3. -
      3. Create Koha administrator patron
        4. -
      4. Create a new item type
        5. -
      5. Create a new circulation rule
        6. +
      6. Create a library
        7. +
      7. Create a patron category
        8. +
      8. Create Koha administrator patron
        9. +
      9. Create a new item type
        10. +
      10. Create a new circulation rule
    diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt index 38a15d0e63..205ad99745 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt @@ -32,13 +32,13 @@
    1. Installation
      2. -
    2. Onboarding +
    3. Onboarding
      1. Create a library
        2. -
      2. Create a patron category
        3. -
      3. Create Koha administrator patron
        4. -
      4. Create a new item type
        5. -
      5. Create a new circulation rule
        6. +
      6. Create a patron category
        7. +
      7. Create Koha administrator patron
        8. +
      8. Create a new item type
        9. +
      9. Create a new circulation rule
    diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt index 3876246cba..40b041cc23 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt @@ -23,13 +23,13 @@
    1. Installation
      2. -
    2. Onboarding +
    3. Onboarding
      1. Create a library
      2. Create a patron category
        3. -
      3. Create Koha administrator patron
        4. -
      4. Create a new item type
        5. -
      5. Create a new circulation rule
        6. +
      6. Create Koha administrator patron
        7. +
      7. Create a new item type
        8. +
      8. Create a new circulation rule
    diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt index 3ee60a0c33..2e059abbb0 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt @@ -21,13 +21,13 @@
    1. Installation
      2. -
    2. Onboarding +
    3. Onboarding
      1. Create a library
      2. Create a patron category
      3. Create Koha administrator patron
        4. -
      4. Create a new item type
        5. -
      5. Create a new circulation rule
        6. +
      6. Create a new item type
        7. +
      7. Create a new circulation rule
    diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt index 4470516b96..ca4fc33324 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt @@ -43,13 +43,13 @@
    1. Installation
      2. -
    2. Onboarding +
    3. Onboarding
      1. Create a library
      2. Create a patron category
      3. Create Koha administrator patron
      4. Create a new item type
        5. -
      5. Create a new circulation rule
        6. +
      6. Create a new circulation rule
    -- 2.44.0