fix: Fix mobile toolbar when no env-selector, results not wrapping correctly and selected filters badge getting cut #151
Conversation
…rrectly and selected filters badge getting cut EX-6625
src/components/results/result.vue
Outdated
| @@ -32,7 +32,7 @@ | |||
| {{ result.name }} | |||
| </h2> | |||
| <span v-if="showDescription" class="x-text">{{ result.season }}</span> | |||
| <div class="x-list x-list--horizontal x-list--gap-04"> | |||
| <div class="x-list x-list--horizontal x-list--wrap x-list--justify-center x-list--gap-03"> | |||
There was a problem hiding this comment.
The gap between the result new and old price should be 12px (our 04 option). Why did you decided to change it?
There was a problem hiding this comment.
With this change the result price is always centered, and it shouldn't
There was a problem hiding this comment.
The gap between the result new and old price should be 12px (our 04 option). Why did you decided to change it?
The change for the gap was done because when the prices wrapped the gap between them was too big. Talked again with Cristina to confirm and she gave the OK to the gap change from -04 to -03.
With this change the result price is always centered, and it shouldn't
Mixup with Kenay, there the price is center, will fix it.
src/components/mobile/mobile.vue
Outdated
| @@ -34,7 +34,7 @@ | |||
| </template> | |||
|
|
|||
| <template #toolbar v-if="$x.query.search"> | |||
| <MobileToolbar class="x-padding--05 x-padding--top-00" /> | |||
| <MobileToolbar class="x-padding--left-05 x-padding--bottom-05" /> | |||
There was a problem hiding this comment.
I'm not entirely sure that this is well done. The icon for the bigger grid cells is confusing in terms of spacing 🤣.
What I can see in figma is that the right spacing should be a little bigger than the left spacing:
And if we remove the env selector, they are now equal. Doesn't look bad IMHO, but it does not match the designs.
There was a problem hiding this comment.
Talked with Cris and we fixed it the best we could.
The thing is that the button for the column picker in the designs and in the archetype look the same but are different.
In the designs, the column picker icon is a button with a padding of 8px and a gap or padding between elements of 8px. In the archetype, it's just a button with a padding of 16px. That creates a bit of a mismatch on the right side of the last icon. Setting the padding-right of the toolbar to 8px corrects the extra padding of the icon and makes it the same as the designs.
There was a problem hiding this comment.
The next queries list in the grid is not rendering properly (I think the css is loaded in a different order than in the demo, so it is displayed incorrectly (see attached image).
I think we should add the utility class x-list--horizontal to the next-queries-group.vue in line 20:
<NextQuery
#default="{ suggestion: nextQuery }"
:suggestion="suggestion"
class="
x-tag x-tag--pill
x-list x-list--horizontal x-list--gap-03
x-padding--bottom-03 x-padding--top-03
x-border-color--neutral-70
x-background--neutral-100
"
>
|
We are showing 0 filters selected by default
We should not have the badge until we select something |
EX-6625
Pull request template
Motivation and context
Minor fixes for the archetype found while doing the setups for Kenay and Izas.
Type of change
What is the destination branch of this PR?
MainHow has this been tested?