feat: redesign accordions of fcs and ipc #138
Conversation
✅ Deploy Preview for wfp-hungermap ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Good job, just few things need to be adjusted regarding code style. What I also noticed is that on Mobile screens the bigger accordion with 1 Month 3 Months is scrollable, this should not be the case. I would reduce the padding on the left and right and also little bit the gap between items. Nevertheless I would also align the items in the accordion to the left instead of center, I think it looks better like this. The breakpoint where we switch to mobile accordions should be earlier, because right now the accordions are overflowing. Also is F-164 going to be done in another PR?
src/components/Cards/Card.tsx
Outdated
| <Image alt={item.altText} className="w-[102px] h-[75px]" src={item.imageSrc} /> | ||
| <div className="svg-icon w-[70px] h-[70px] object-contain">{item.svgIcon}</div> | ||
| ) : item.imageSrc ? ( | ||
| <img alt={item.altText || ''} className="w-[70px] h-[70px] -mt-4" src={item.imageSrc} /> |
src/components/Cards/Card.tsx
Outdated
| <div className="flex flex-row space-x-3"> | ||
| {item.changeValues.map((delta) => ( | ||
| <div key={uuid()} className="flex flex-col items-center gap-2"> | ||
| <img src={delta.imageSrc} alt={delta.altText} className="w-6 h-6" /> |
| { | ||
| imageSrc: deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg', | ||
| text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A', | ||
| timeText: '3 Month ago', |
There was a problem hiding this comment.
Months instead of Month
@marinovl7 regarding the mobile version i didn't get your point. Could you please elaborate |
Well reduce the screen width to 350px and see that the accordion content is scrollable |
|
@bohdangarchu @marinovl7 |
Redesign Food Security accordions of fcs and ipc. Split the Accordions
Desktop Version
Mobile Version
Split version of accordions
-> pack fcs and nutrition files into fcsMap and nutritionMap folder.