Apply grid layout to deck options 2

[kleinerpirat]

Closes #1210.

This is a less intrusive version of my previous PR. I have split GeneralOptions.svelte into

• TimerOptions.svelte
• AudioOptions.svelte

for more consistency.

The grid layout is now better encapsulated in ConfigEditor.svelte.

---

Other changes

• reduce <h2> font size to 1.5em
• adjust padding of #main and .outer

Showcase

---

I would highly appreciate if someone could tell me how to run Prettier on checkout via VS-Code.

[hgiesel]

I would highly appreciate if someone could tell me how to run Prettier on checkout via VS-Code.

bazel run //ts:format

To execute them as part of a hook, you could add them to e.g. .git/hooks/pre-commit.

[kleinerpirat]

Thanks, Henrik!

I thought about using a Svelte prop rows instead of the two classes small and large, but that would require changes within the individual option components (similar to the previous PR).

Is eb03d8e a viable option or would you prefer a more dynamic or completely different approach? I don't mind if anyone (looking at you @hgiesel) creates an alternative since I'm just starting out here.

Just curious what you think about the grid layout in general.

[hgiesel]

First of all, I think there's some duplicated effort here with #1207, e.g. splitting up TimerOptions and AudioOptions.

In this PR, I also made another suggestion regarding the issue of wider windows, which was to have a scrollspy / navigation element to the left of the main content, taking inspiration from other configuration menus, like the Chrome preferences.

Having the content collapse into columns is a good way to prevent overly wide input elements, however you still have to scan the entire page to find the appropriate section.

In the end, it will be up to @dae to make a judgement :)

[kleinerpirat]

Ah yes, glad you pointed that out. I wasn't aware of your refactoring efforts when I worked on these changes. I'm happy to postpone design contributions such as this one until the foundations are more solid / reworked.

The last thing I want is for you guys to have more work because of me - that would be the opposite of what's intended ;)

[kleinerpirat]

I'll close this PR and create a new one after #1207 gets merged.

The double column-design I suggested on the forum would only need a few minor additions to DeckOptionsPage.svelte.

[dae]

Thanks Matthias :-)