EZP-29811: Content field definitions is misaligned while creating Content Type #790
Conversation
|
Styled using flex - ping @sunpietro @dew326 |
| height: 1.5rem; | ||
| margin-top: 5px; | ||
| } | ||
| .ez-icon-trash { |
There was a problem hiding this comment.
You can use class ez-icon--medium to set 24px height and width
There was a problem hiding this comment.
Yes, but I have decided to add .ez-icon-trash instead, because in create.html.twig this statement:
generates button with
.ez-icon-trash. Also, other trash buttons in our system have .ez-icon-trash class. For consistency, I think we should use this class here as well.
There was a problem hiding this comment.
But adding class to set width and height is redundant. For having icons with width and height we have special modifier class ez-icon--medium. I'm not against adding .ez-icon-trash, I'm against using this class to set 24px width and height.
There was a problem hiding this comment.
You're right, better idea would be to use .ez-icon--medium. Also, I realised that the template for {{ form_widget(form.removeFieldDefinition ... is in the same file, so I can add .ez-icon--medium there.
Unfortunately, after applying changes I realised that we are styling .ez-card__header .form-inline .btn-danger .ez-icon in _icons.scss:
ezplatform-admin-ui/src/bundle/Resources/public/scss/_icons.scss
Lines 76 to 81 in 5b9dce4
what overwrites
.ez-icon--medium selector. Probably this is why someone before me styled it here using this selector: .ez-card__header--sticky-top .form-inline .btn-danger .ez-icon (I only changed .ez-icon -> .ez-icon-trash and moved out from --sticky-top).
So, I think that my current solution is valid in context of this task. Definitely, it would be great to refactor .ez-card__header .form-inline .btn-danger .ez-icon from _icons.scss, but I think that it should be done in another task/PR.
What do you think, @dew326 ? 🙂
There was a problem hiding this comment.
Maybe you should fix that selector as well and apply a proper CSS class the elements defined by .ez-card__header .form-inline .btn-danger .ez-icon selector?
There was a problem hiding this comment.
I checked what elements are styled with .ez-card__header .form-inline .btn-danger .ez-icon from _icons.scss and it turned out that it affects only two buttons which I'm fixing in this PR. I was suprised a little bit. 😄
Long story short, I removed .ez-card__header .form-inline .btn-danger .ez-icon from _icons.scss and styled buttons using ez-icon--medium & ez-icon--light. 🙂 👍
|
ping @sunpietro @dew326 |
|
@dew326 could you make a final review here? So we can move this to QA? |
|
@tischsoic could you change target branch to 1.4? |
|
Target branch changed to 1.4 - ping @lserwatka |
|
@tischsoic according to Affects Version base here should be 1.3. Please, do the rebase also :) |
tischsoic
force-pushed
the
EZP-29811-Content-field-definitions-is-misaligned-while-creating-CT
branch
from
ac88b4b to
b846455
Compare
|
Changed target branch to 1.3 - ping @katarzynazawada |
| @@ -6,7 +6,7 @@ | |||
|
|
|||
| {% block _ezrepoforms_contenttype_update_removeFieldDefinition_widget %} | |||
| <button type="{{ type|default('button') }}" {{ block('button_attributes') }}> | |||
| <svg class="ez-icon ez-icon-trash"> | |||
| <svg class="ez-icon ez-icon--medium ez-icon--light ez-icon-trash"> | |||
There was a problem hiding this comment.
Is this class: ez-icon-trash used anywhere in CSS or JS?
There was a problem hiding this comment.
Actually it is not used, I will remove it.
lserwatka
deleted the
EZP-29811-Content-field-definitions-is-misaligned-while-creating-CT
branch
|
@tischsoic could you merge it up? |
|
1.4 -> master |
Fixes button styling. After changes: