UX/design debt 2

[jorisleker]

• On /input the link 'Bekijk de lijst met alle stembureaus' should have cursor:pointer (applies to all links)
• The 'Shift + Enter' text should not break over multiple lines. Use white-space: nowrap;. Add some padding/margin below the 'Beginnen' button so the 'shift + enter' text is positioned neatly below the button (screenshot of how it should look: .5rem between button and text, text has .5rem margin-left (iso 2rem)
• There should be a spacer before the input for the list-totals, that's lacking. Also, there should not be a bottom border nor a background on the totals row. (see design below)
• On /input it looks like the width of the paragraph of text "Klopt de naam van het stembureau met de naam op je papieren proces verbaal? Dan kan je beginnen." is defined as a percentage of the parent column. Please use max-width instead, to allow the text to occupy more space on smaller viewports. (applies to all paragraph texts: use max-width instead of percentage)
• All pages have 'Abacus' as page title. Pages should have descriptive titles
  • /user/login --> Inloggen - Abacus
  • /user/account/setup --> Account instellen - Abacus
  • /overview --> Overzicht verkiezingen - Abacus
  • /input --> Kies een stembureau - Abacus
  • /input/030 --> Invoeren <stembureau nummer> <stembureau naam> - Abacus
• When navigating to another page, user should be scrolled to top of page (repro: make your window less high, open list of polling stations on '/input', scroll to bottom of page and pick the last polling station. You will end up on a scrolled down version of the data entry screen (tested on https://6b2ce232.urn-uitslag.pages.dev/input/030 with long list of political groups)
• Toggle between /input/030/numbers and /input/030/recount: the navigation items below "Is er herteld?" move up and down by 1 or 2 pixels. (more or less the same seems to happen if you click from an item halfway down the list to the bottom item and back. All items between the item halfway and the bottom most move a couple of pixels)
  • Looked into this a bit more: looks like the selected menu item just has 1px more padding (top and bottom / or a border maybe) then the non selected items. This make everything shift a bit, which stands out more if the items you toggle between are not adjacent to each other
• The clickable area for items in the navigation menu in /input/030/ consists of just the text of the link. Ideally the clickable target is a big as the box we highlight for selected menu-items
• The selected menu-item is a link. This should not be the case, do not link to the current page.
• In the nav-menu and in the h2, the name of the political group should be prepended with Lijst <lijstnummer> -
• There is no fallback for the Geist Mono font in the input screen. When loading this page for the first time, the user might run into a situation where the input fields are rendered with Times New Roman as font. Possible solutions: → Fix more UX/design debt #267
  • Define a DMSans as fallback for the GeistMono font for the --font-number var
  • Only render the page if all resources have been loaded
• The tooltip on paste only works on /input/:pollingstation-id/numbers, and not /input/:pollingstation-id/list/:listnumber. It should be implementend on all numeric inputs
• when a list has exactly n*25 candidates, the spacer/separator for the next 25 candidates is shown. The separator should only be added if there is a (n*25)+1'nd candidate.
• The zebra-striping of the rows does not match the striping used in the paper forms. On paper, the first row of each 25 rows is white. In our digital form, row 26 and row 76 have a dark background. Each block of 25 rows should start with a white background.
  
• styling of the "Invoer afbreken" button isn't as designed (should not have an icon, padding / line-height looks off) → Fixed in Implement data entry abort modal behaviour #256
• Add hover state in navigation menu on /1/input/33/... (see Figma)
• Check colors of icons (current page, empty input) in the nav menu. Have been updated in Figma, they were a subtly different color then the texts, is now consistent with text
• font-weights: het is ok om de 500 en 600 te vervangen door 700 (gebeurt op een aantal buttons al, daar wordt een bold over de 500 weight gezet, waardoor die 500 al niks meer doet). Nb: alleen voor de DM Sans teksten. De 500 op Space Grotesk (de badges) moet zo blijven
• Fix layout issues on "Alle stembureaus zijn twee keer ingevoerd" (margin above button) and make not closable → Fix more UX/design debt #267
• Only show "account is ingesteld" when account has just been set up → Fix more UX/design debt #267

[Lionqueen94]

* [ ]  On /input it looks like the width of the paragraph of text "Klopt de naam van het stembureau met de naam op je papieren proces verbaal? Dan kan je beginnen." is defined as a percentage of the parent column. Please use max-width instead, to  allow the text to occupy more space on smaller viewports. (applies to all paragraph texts: use max-width instead of percentage) <img alt="Scherm­afbeelding 2024-06-26 om 08 21 10" width="573" src="https://private-user-images.githubusercontent.com/3286523/343031833-2d23c334-c84f-455b-9332-5f261b05cd42.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA0Mzk4MzIsIm5iZiI6MTcyMDQzOTUzMiwicGF0aCI6Ii8zMjg2NTIzLzM0MzAzMTgzMy0yZDIzYzMzNC1jODRmLTQ1NWItOTMzMi01ZjI2MWIwNWNkNDIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDhUMTE1MjEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTA0YjkwNjFkOTkzMGQyMjAxOGY3NzNmZTE2NjUyZGFmODZkZGVmZWNmYWM2NmVjYmY0MTEzOTQwMDU4NWU5ZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.djDZgnqUKR_8tETbw7wnZJov41SQ7oE_ss6x6qhIyvw">

* [ ]  The 'Shift + Enter' text should not break over multiple lines. Use `white-space: nowrap;`. Add some padding/margin below the 'Beginnen' button so the 'shift + enter' text is positioned neatly below the button (screenshot of how it should look: .5rem between button and text, text has .5rem margin-left (iso 2rem) <img alt="Scherm­afbeelding 2024-06-26 om 08 27 17" width="273" src="https://private-user-images.githubusercontent.com/3286523/343033080-358dac49-f065-4be1-ac9e-98ae2637f980.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA0Mzk4MzIsIm5iZiI6MTcyMDQzOTUzMiwicGF0aCI6Ii8zMjg2NTIzLzM0MzAzMzA4MC0zNThkYWM0OS1mMDY1LTRiZTEtYWM5ZS05OGFlMjYzN2Y5ODAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDhUMTE1MjEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZGI1MGU5MmRmNTMzZTcxMzNmNjA1OGRlNWIzMjVmNGJhZDAyNGIwZDVjZDI0NmY1YWQ0NmI1YTkzYjQ3YjFmNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.AQs5vtdyazpq1XbYg0EvLB6aHz8_HjOK3kRrC3qsuv0">

The percentage of the parent column is not the case, the padding-right and padding-left are 5rem as defined in the design, causing the empty gap between the 2 sections.

Would you like this changed in the design @jorisleker ?
Fixed the 2nd point in #138

[jorisleker]

Aah, no need to fix. It now looks weird because the second column is empty. But that will resolve itself once the progress indicator is implemented!

[Lionqueen94]

For setting the page titles, do we want to use a dependency for this or do it in a useEffect:
https://stackoverflow.com/questions/46160461/how-do-you-set-the-document-title-in-react
@praseodym @lkleuver

[praseodym]

For setting the page titles, do we want to use a dependency for this or do it in a useEffect: https://stackoverflow.com/questions/46160461/how-do-you-set-the-document-title-in-react @praseodym @lkleuver

useEffect seems like the way to go, here's an example with react-router-dom: https://dev.to/rohitnirban/adding-page-titles-to-react-app-23oe