Skip to content

Refactor: Split DMP Assistant custom stylesheets into separate blocks#1219

Open
aaronskiba wants to merge 2 commits intointegrationfrom
aaron/refactor-stylesheets-blocks
Open

Refactor: Split DMP Assistant custom stylesheets into separate blocks#1219
aaronskiba wants to merge 2 commits intointegrationfrom
aaron/refactor-stylesheets-blocks

Conversation

@aaronskiba
Copy link
Collaborator

Changes proposed in this PR:

  • Address redundancies between custom stylesheets
    • grey-rebranding.scss is imported after rebranding.scss, so its styling will take precedence.
    • margin-top: 0.6em; was copied from rebranding.scss to grey-rebranding.scss. (height: 200px was never being used.)
    • We can delete lines 113-124 from rebranding.scss because the following already exists in grey-rebranding.scss:
      .nav-tabs, .nav-pills{ //_navs.scss
      background-color: $color-alliance-digital-grey;
      }
      
      //_table.scss
      thead th{
      background-color: $color-alliance-digital-grey;
      }
  • Refactor: Split DMP Ass't SCSS into block partials
    • Break down the three large DMP Assistant stylesheets into smaller, maintainable partials under app/assets/stylesheets/dmp-assistant/blocks/.

    • Each partial corresponds to or overrides matching a file in app/assets/stylesheets/blocks/, improving organization and clarity. However, _close.scss has also been added, which overrides Bootstrap’s default _close.scss for custom close button styling.

    • NOTE: All block code has been reorganized for maintainability but retains its original sequence and @import order within the original files (i.e. @import "rebranding";, @import "rebranding-animation";, @import "grey-branding";.). Thus, this refactor should not result in any visual or behavioural changes.

`grey-rebranding.scss` is imported after `rebranding.scss`, so its styling will take precedence.
- `margin-top: 0.6em;` was coped from `rebranding.scss` to  `grey-rebranding.scss`. (`height: 200px` was never being used.)
- We can delete lines 113-124 from `rebranding.scss` because the following already exists in  `grey-rebranding.scss`:
```
.nav-tabs, .nav-pills{ //_navs.scss
    background-color: $color-alliance-digital-grey;
}

//_table.scss
thead th{
    background-color: $color-alliance-digital-grey;
}
```
Break down the three large DMP Assistant stylesheets into smaller, maintainable partials under `app/assets/stylesheets/dmp-assistant/blocks/`.

Each partial corresponds to or overrides matching a file in app/assets/stylesheets/blocks/, improving organization and clarity. However, `_close.scss` has also been added, which overrides Bootstrap’s default `_close.scss` for custom close button styling.

NOTE: All block code has been reorganized for maintainability but retains its original sequence and @import order within the original files (i.e. @import "rebranding";, @import "rebranding-animation";, @import "grey-branding";.). Thus, this refactor should not result in any visual or behavioural changes.
@github-actions
Copy link

1 Error
🚫 Please include a CHANGELOG entry. You can find it at CHANGELOG.md.
1 Warning
⚠️ There are code changes, but no corresponding tests. Please include tests if this PR introduces any modifications in behavior. \n
Ignore this warning if the PR ONLY contains translation.io synced updates.

Generated by 🚫 Danger

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant