search

wevisdemo / parliament-watch

Citizens are watching 👀
https://parliamentwatch.wevis.info
Other
61 stars 33 forks source link

Incorrect DataPage's filter and NavigationBar z-index alignment #38

Closed Th1nkK1D closed 1 year ago

Th1nkK1D commented 1 year ago

Step to reproduce

  1. Open https://parliament-watch.pages.dev/politicians/สมชาติ-สกุลสมมุติ/votes in the mobile screen size of responsive mode

Current incorrect behaviors

  1. Filter button in the bottom left is barely visible. The background is missing. (This one also occurs in desktop size) image

  2. When opening the hamburger menu, the filter button is still showing.

Screencast from 2023-10-19 14-41-15.webm

  1. The navigation bar is in front of the filter panel, which hides the search box and close button.

Screencast from 2023-10-19 14-45-35.webm

Tested on Firefox and Chromium on Linux

Expectation

  1. The filter button should have interactive-01 color. (See Figma)
  2. The sidebar opened with the hamburger menu should be in front of the filter button.
  3. The filter panel should be in front of the navigation bar

Starting point

  1. DataPage component (contain the filter button and panel) src/components/DataPage/DataPage.svelte
  2. NavigationBar component (contain the hamburger menu and sidebar) src/components/NavigationBar/NavigationBar.svelte
loukhin commented 1 year ago

Hi, can I work on this?

loukhin commented 1 year ago

Updating z-index of filter panel solve the issue on mobile screen. However, on desktop, the filter panel will be in front of the navigation bar.

We can apply the z-index only when on mobile screen, but the navigation bar is still in front of the filter panel on desktop.

What do we want to do in this case?

Kapture 2023-10-21 at 12.14.44 2.webm

Th1nkK1D commented 1 year ago

Updating z-index of filter panel solve the issue on mobile screen. However, on desktop, the filter panel will be in front of the navigation bar.

We can apply the z-index only when on mobile screen, but the navigation bar is still in front of the filter panel on desktop.

What do we want to do in this case?

Good catch. On the mobile, the filter should be in front of the navbar because it acts like a fullscreen pop-up. But on the desktop, filter should be behind the navbar because it's just an element in the body.

loukhin commented 1 year ago

Good catch. On the mobile, the filter should be in front of the navbar because it acts like a fullscreen pop-up. But on the desktop, filter should be behind the navbar because it's just an element in the body.

If we leave the filter panel behind the navigation bar then we need to scroll down if we want to filter/close filter panel, is that acceptable?

loukhin commented 1 year ago

I try experimenting with using the header show/hide logic to determine filter input location, what do you think?

What it's currently look like:

Kapture 2023-10-21 at 14.58.23.webm

What's my experiment look like:

Kapture 2023-10-21 at 14.53.22.webm

Th1nkK1D commented 1 year ago

I try experimenting with using the header show/hide logic to determine filter input location, what do you think?

Oh yeah, I forget that navbar behavior. Love your solution. It looks so smooth 🔥