[template/angular-xmcloud] Fix SXA component styles for basic site #1910
Conversation
| @@ -4,5 +4,22 @@ import { SxaComponent } from '../sxa.component'; | |||
| @Component({ | |||
| selector: 'app-promo', | |||
| templateUrl: './promo.component.html', | |||
| styles: [ | |||
There was a problem hiding this comment.
Can we create a separate SCSS file to store the styles?
| import { Field } from '@sitecore-jss/sitecore-jss-angular'; | ||
| import { SxaComponent } from '../sxa.component'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-richtext', | ||
| templateUrl: './richtext.component.html', | ||
| styles: [ |
There was a problem hiding this comment.
Same as above regarding SCSS file
| import { Field } from '@sitecore-jss/sitecore-jss-angular'; | ||
| import { SxaComponent } from '../sxa.component'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-richtext', | ||
| templateUrl: './richtext.component.html', | ||
| styles: [ | ||
| ` | ||
| :host(.footer-richtext) { |
There was a problem hiding this comment.
Inside all of these styles I see a lot of "magic" numbers
e.g. "width: 17%", "nth-child(2)", "max-width: 992px"
to me it means that here is kind of "hack" applied to this component, so the solution is not reliable
There was a problem hiding this comment.
maybe we can explore using attribute selectors for components instead type selectors? that could possibly remove the additional markup generated by angular
| let parent = this.el.nativeElement.parentElement; | ||
|
|
||
| while (parent) { | ||
| if (parent.id === 'footer') { |
There was a problem hiding this comment.
We can't use such condition and rely on specific parent component
it's a "hack", what will happen if id of the parent element is changed but it's actually the same "footer" placeholder?
Description / Motivation
Testing Details
Types of changes