Design and CSS Catch-all issue

[captdeaf]

Clarity for terms:

• Mainboard: The display of the Svalboard's layout, or any other Vial-compat board connected.
• Sample boards: The bottom half with the sample keys, from QWERTY to Layers, macros, and qmk keys.
• 'key' - a class used for all keys, both in mainboard and sample boards. Also used to refer to anything using that class.

Biggest design concerns:

• [ ] Main board and sample board overall view
• [ ] Key rendering and display, including text inside keys
• [ ] Key rendering for various subtypes
• [ ] Layer selector for mainboard.
• [ ] Sample board selector at the bottom - should it be a slide-out? On top?
• [ ] Sample board sizes - they're different heights and that impacts visibility of mainboard. Should they all be the same sizes? Scrollbars for QWERTY, tapdances, macros? (The largest boards)
• [ ] "Modmask" above QWERTY and International keyboards. It is intended to apply the given mods to the next key assigned, not to current selected key.
• [ ] Macro Editor
• [ ] Tapdance Editor
• [ ] Combos (I think they're in a mostly good state except colors and minor styling)
• [ ] Key Overrides (ditto Combos)
• [ ] How should everything scale, depending on screen sizes?
• [ ] Menu dropdowns?
• [ ] R-click context menus?
• [ ] Floating dialogs: Separate from sample boards, e.g: QMK settings, manual entry, about dialog, etc.
• [ ] Floating dialogs dependent on sample boards, e.g: Macro editor and Tapdance editor
• [ ]

Key Rendering (and current behavior)

• [ ] Basic. - "A", "B", "Bckspc", "Print\nScreen", etc
• [ ] Modded basic "Shift+A" (Green bar on bottom detailing mods)
• [ ] Unknown keys. "0x1fe", etc.
• [ ] Non-basic separation? (I do blue bg to separate basic from the rest)
• [ ] Layer selection (currently an image + layer name or number)
• [ ] Layer selection type ("MO" is most common, not labeled. Others add a label on top.)
• [ ] Macros (A '...' on top to indicate macro, and small text to identify the macro)
• [ ] Tapdances ('TD(#)' on top of key, attempt at indicators in bottom part of key)
• [ ] "Hold vs Tap" keys, with different behavior on tap vs hold. e.g: LCTL_T(), LT0() (Currently showing the hold behavior on top with tap behavior as main key)

Colors and contrast needs:

• [ ] Current key, key type (layer/macro/etc), :hover, and changed/uncommitted key
• [ ] Combo and key override alternating colors?

Overall issues:

• [ ] Split screen between mainboard and sample board is weird at most resolutions / zooms.
• [ ] Fix mainboard vs sample boards - they look weird at most resolutions. Including overflow and scrollbars.
• [ ] Scaling? I used ##vw originally for better scale, but it made the issue w/ mainboard + sample boards even worse.
• [ ] Make keys look better when they show two symbols. e.g: "\n'

Behaviors:

• [ ] Items 'changed' but not committed. Maybe a globally visible "UNCOMMITTED CHANGES" type thing? Make "Commit changes" a big red button?
• [ ] Floating dialogs: QMK settings,

More minor issues:

• [ ] Making the keys in sample boards consistent in width, and probably tweak flexbox layouts.
• [ ] Make the macro editor look nice
• [ ] Make tapdance editor look nice
• [ ] Color schema for keys
• [ ] Make 'matrix tester' look better - mostly color scheme.
• [ ] Sample board selection buttons
• [ ] Should/can we scale key contents? For longer descriptions and names?

[binduwavell]

I think this is an example of your first bullet point "Split screen between mainboard and sample board is broken at most resolutions / zooms."

Adding here for reference and on the off chance you meant something else.

[jgarvin]

the split seems worse today, now they're closer together but half the screen is unused, sorry for the noise if this is known