search

dragontheory / D7460N-with-db

Your data your way. Fast, easy, and secure.
https://d7460n-app-with-resizer.pages.dev/
2 stars 1 forks source link

ACSS: Highlight row by associating row with aside panel data via the number of the visible row #18

Open dragontheory opened 2 years ago

dragontheory commented 2 years ago

Two things happen when data shows up in the aside panel.

  1. The panel gets display: grid; to show the panel
  2. The row associated with that data in the aside panel gets the .active class to assume the CSS highlighting styles.
  3. This is a repeated process for almost everything a user clicks to get data.
dragontheory commented 2 years ago

From the UI perspective, we are only interested in what is VISIBLE in a list of search result rows.

We need two numbers, the total number of visible rows (for dividing into the total number of results returned for pagination links) and a unique number assigned to each visible row (simple counting) to store as a reference for when the data shows up in the aside panel and then highlights the row.

This process can be repeated for when a filter is clicked on the left NAV panel and the search results show up in the center panel. We count the s (identical HTML) and assign them a number as a reference.

Eventually there will be a loading animation that shows up between when the user clicks something and when the data shows up but only after a short delay (so it doesn't always show up). All handled by CSS. But that is later.

If users sort or filter the results (via the left NAV panel), the data changes underneath the UI but the same system applies because we are only interested in what is VISIBLE. So the counting never changes.

When a user resizes the screen smaller, the number of visible rows go down and the pagination numbers go up. But the unique numbers for each visible row stay the same.