CSS Refactoring (Or: UI Redesign 2 ) #1402
Conversation
# Conflicts: # angular.json # package-lock.json # package.json # src/app/child-dev-project/attendance/activity-card/activity-card.component.html # src/app/child-dev-project/attendance/add-day-attendance/add-day-attendance.component.html # src/app/child-dev-project/attendance/add-day-attendance/roll-call-setup/roll-call-setup.component.html # src/app/child-dev-project/attendance/attendance.module.ts # src/app/core/demo-data/faker.ts # src/app/core/entity-components/entity-details/entity-details.component.html # src/app/core/entity-components/entity-details/entity-details.component.scss # src/app/core/entity-components/entity-list/entity-list.component.html # src/app/core/entity-components/entity-list/entity-list.module.ts # src/app/core/entity-components/entity-subrecord/entity-subrecord.module.ts
# Conflicts: # angular.json # src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.html # src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.scss # src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss # src/app/child-dev-project/children/child-block/child-block.component.html # src/app/child-dev-project/children/children.module.ts # src/app/child-dev-project/children/demo-data-generators/demo-child-generator.service.ts # src/app/child-dev-project/notes/notes.module.ts # src/app/child-dev-project/schools/school-block/school-block.component.html # src/app/core/admin/user-list/user-list.component.html # src/app/core/admin/user-list/user-list.component.ts # src/app/core/entity-components/entity-details/entity-details.component.html # src/app/core/entity-components/entity-form/entity-form/entity-form.component.html # src/app/core/entity-components/entity-list/entity-list.component.html # src/app/core/entity-components/entity-list/entity-list.component.scss # src/app/core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.component.html # src/app/core/ui/ui/ui.component.html # src/app/core/user/user-account/user-account.component.html # src/app/core/user/user-account/user-account.component.scss # src/app/core/webdav/cloud-file-service-user-settings/cloud-file-service-user-settings.component.html # src/app/core/webdav/cloud-file-service-user-settings/cloud-file-service-user-settings.component.ts # src/ndb-theme.scss # src/styles.scss
# Conflicts: # src/app/core/ui/ui/ui.component.scss
according to the hierarchy of the "Record Attendance" screen the headline should also logically be a h3 (and it looks better with the font size proportions)
# Conflicts: # src/app/features/data-import/data-import.module.ts # src/app/features/data-import/data-import/data-import.component.html
# Conflicts: # src/app/core/entity-components/entity-form/entity-form/entity-form.component.html
There was a problem hiding this comment.
Really nice changes. I went through the code now and I am impressed by all the generalisations that you achieved. Good job. I only have marked a few small issues, they are not too important.
Generally, you added some nice documentation to the global CSS classes which is very helpful, but I think it would be great if you could also give a little overview of the most relevant changes once this is merged. Important topics would be, what classes are very useful, where do we find them and what should we consider when designing/layouting a new component?
| // There is no `ndb-alert--info` class since `info` has the default styling. | ||
|
|
||
| &--warning { | ||
| background-color: mat.get-color-from-palette(mat.$orange-palette, 800) !important; |
There was a problem hiding this comment.
The orange background with the blue dismiss button looks a bit difficult for me.
|
|
||
| getGroupedByString = getGroupingInformationString; | ||
| treeFlattener = new MatTreeFlattener<ReportRow, FlattenedReportRow>( |
There was a problem hiding this comment.
Nice change. Looks much more the angular way now!
|
SonarCloud Quality Gate failed.
|
|
🎉 This PR is included in version 3.14.0-master.1 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 3.14.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
see issues: #1375, #1357
This PR includes several minor updates to
The UI as such
The main intent here is to iron out some rough edges that were left out by the UI Redesign. Examples include:
UIcomponent which makesposition: absoluteobsolete and fixes Menu width and margins #1375The Architecture
flex-layout. Since CSS flex is flexible enough (pun intended) this is no longer needed, messes with styles, and is an extra dependency.divs that are mostly not necessary (the:hostpseudo-selector can do magic here)divs or other generic containers with more specific HTML elementsAlertServiceso that there is no issue usingAlerts andMatSnackBartogether. Use the default styling so it is consistentCreation of several Helper-Components
app-dialog-closeis a generic close button used in pop-ups. Also added this helper to elements that didn't have it but should havepillelement which simply places a pill-shaped background around an element. This replaces usages ofmat-chips andmat-chip-listsThe handling of styles
This PR redefines how styles are used around the app. The following has been changed:
@importwith@use(@import is deprecated)@angular/materialand replace it with@use