UX/design debt 3

[jorisleker]

• Consistent page loading experience. The nav menu and footer should not be visible while content is still loading. → Fix more UX/design debt #267
  • On /overview, you briefly see the page footer right below the top navigation bar whilst the content of the page is loading.
  • On /1/input the entire page is white whilst page is loading: this is how we want it to be.
• on /input allow polling-station-numbers starting with 0 (i.e. 033). Strip leading zeros before doing lookup of the polling station number in the database (002 and 02 should evaluate to 2) → Some design fixes #284
• Hints on how to submit forms with keyboard have been redesigned to better show they are keyboard shortcuts. Implement new design. → Some design fixes #284
• in input-grids, when the contents of a cell wraps over two lines, the row-height increases because the text does not fit into remaining cell height. Fix: → Some design fixes #284
  • input-grid td's should have padding:.5rem 1.5 rem (iso 1rem 1.5rem) and line-height:1.25rem (iso inherited value of 1.5rem
  • see screenshots. 1 is before fix, 2 is how it should look
    
    
• Fix space grotesk font rendering straight quotes as curly quotes #346
  • See Typewriter quotes look like ending quotation marks floriankarsten/space-grotesk#44, what do we do with this?
  • → Remove quotes from fixture polling station name #337

After #133 is fixed:

• Pressing Enter in the last input row returns focus to the first row, it should move focus to the submit button. will be fixed in Improve keyboard navigation on list data entry page #207
• Shift+Enter doesn't work (Safari on macOS). → Form component shortcuts #295
• With the tab-key I can highlight the "volgende" button and then submit by hitting the space bar. I can also highlight the navigation items on the left, but there hitting the space bar does not get me to the item I highlighted. No fix needed. Spacebar does not submit actions by default. Only ENTER does.
• Add custom checkbox component to be able to better style checkboxes and radiobuttons (ie the "confirm to accept warnings" and "recounted" questions) → Custom checkbox #292

[praseodym]

@jorisleker what do we do about the Space Grotesk font rendering straight quotes as curly quotes? There is an issue opened with the font (floriankarsten/space-grotesk#44) but it doesn't look like there's any progress made on this.

[jorisleker]

@praseodym
Just downloaded a list of all polling station from TK2023 from https://waarismijnstemlokaal.nl/data. None of them has " or ' in their name. So i'd say this is a very low priority issue. Don't think we will use quotes in h1 elements ourselves. My suggestion: don't fix.

The weird thing is, Space Grotesk actually has straight (single and double) quotes. see Google Fonts glyphs page. But it looks like the chars are flipped in the fontset. When I copy/paste these straight quotes from the screenshot below, I get these chars: ′ and ″... So a fix would be to do a replace in all text we render to the front-end, but feels way too hacky.

[jorisleker]

Woops, my bad. There are quite some polling stations with names like 't Gasthoes or BMV “De Schakel” (about 60 on 10.000 polling stations). Disregard my previous 'don't fix' suggestion. Still low prio though

[praseodym]

What about renaming our example polling stations so that we don't have quotes there? I can align it with the names from the Figma design.

[praseodym]

The weird thing is, Space Grotesk actually has straight (single and double) quotes. see Google Fonts glyphs page. But it looks like the chars are flipped in the fontset. When I copy/paste these straight quotes from the screenshot below, I get these chars: ′ and ″... So a fix would be to do a replace in all text we render to the front-end, but feels way too hacky.

Those are the Unicode prime (U+2032) and double prime (U+2033) symbols. I'm not sure why the font would have those but not proper quote glyphs.

[jorisleker]

What about renaming our example polling stations so that we don't have quotes there? I can align it with the names from the Figma design.

Hiding the issue does not make it go away 😂 But fine with me.
As long as we have an extended test set with names witn quotes

Those are the Unicode prime (U+2032) and double prime (U+2033) symbols. I'm not sure why the font would have those but not proper quote glyphs.

Ah check. Alternative would be to use Space Mono to render straight quotes, because that font has proper quotes. But that feels like an even bigger hack (and requires including an additional font).