feat: New UI (search + dataset preview)

[bprusinowski]

Closes #817.

This PR introduces new UI for search and dataset preview pages.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
visualization-tool	✅ Ready (Inspect)	Visit Preview	Nov 4, 2022 at 9:24AM (UTC)

[bprusinowski]

@AnninaWalker can you take a look at deployment preview and see if dataset highlighting on mouse over looks good? Previously we had some left padding applied to the cards so there was some space on the left side, not sure if it looks ok now 😅

[ptbrowne]

Wow, I haven't looked at the code yet, but this looks really nice, kudos @AnninaWalker and @bprusinowski ! I love the header animation 💯

Concerning the hover, If you are talking about this @bprusinowski, I think you need to fix it 😁, I think you need to apply a cursor pointer also.

[bprusinowski]

Cool, thanks @ptbrowne! I am not 100% happy with the animation, as when you scroll down to select a dataset, it jumps to the top immediately and just after that it starts shrinking. I tried to "fix" this by animating the scroll up (as by default router.push scrolls to the top without the animation), but I wasn't sure if it looked good either. Let me know if it's fine this this :)

And for the hovering, I think the cursor should be there already, it's not a pointer on your side?

[ptbrowne]

Ah sorry, for the pointer, I made a mistake, my focus was not on the window when I saw that.

I see your point concerning the animation when you have scrolled down, it's true that it's a bit distracting. Maybe we could try to deactivate the animation altogether when the banner is not in the viewport ?

[ptbrowne]

Nit: Animation is a bit annoying when switching language

LGTM at the moment for me 👍

[bprusinowski]

Ah, good point about switching the language, I missed that. I'll try with the viewport suggestion + think about locale switch 🙇

[AnninaWalker]

YAY nice to see the new search layout in action and even animated! So cool! Regarding your questions @bprusinowski I think the highlighting of the dataset would need some padding. Maybe it could even extend to the line on the left?

[bprusinowski]

@AnninaWalker @ptbrowne I introduced the changes, I it should be better now :)

I also managed to fix the locale switching animation problem, but it means that we will lack initial banner animation. Let me know if it's acceptable 😅

[AnninaWalker]

@bprusinowski LGTM. The only thing I was wondering is regarding the responsive behaviour, if the content shouldn't be centred?

[bprusinowski]

@AnninaWalker the whole site should "extend" to the available width, or the banner content should be centered (right now it's left-aligned to the content below)? Or should the banner take more space, to have the same width as the dataset results below?

[AnninaWalker]

Currently the content below has at some point a fixed width and the content is aligned to the left, so when I extend my window, I get this white whole on the right. That's why I was wondering if we should center the content, as in the screenshot above. But maybe it doesn't make sense. I guess most people don't have such a huge screen as I do ;-)

[ptbrowne]

👏