Remove settings from card

[bndw]

With the growing number of controls and features, the card is beginning to feel pretty busy. One way to solve this would be to pull these sort of options into an "Advanced" section that's outside of the card border. This section should be collapsible and default to closed. Advanced controls could include:

• Rotate
• Font Size
• Hidden SSID
• Hide password

EDIT: The more accurate problem, I think, is that the card has controls on it that are not on the printed card. Keeping the card as a WYSIWYG would be a better approach. The natural place for these controls is below the card. They could be hidden behind a button by default but that's additional complexity that could always be added later.

[olekstomek]

I think that's a very good idea! Too many options may scare the user. In fact, in most cases it is enough to use the basic options.

[olekstomek]

The best time to do this is when we will have on master Font Size and Hidden SSID?

[bndw]

@olekstomek I've been planning to sit down and play around with the design of an advanced controls section and ideally include the above features in the initial rollout, rather than having a period of time where the card has many extra features. I'll make some time in the next few days to do a quick exploration and push it up in a branch. From there we could retarget #89 and #101 against that branch. Thanks for your patience! 😅

[bndw]

Here's a quick, rough exploration of the idea -- what do you think? What if we put all the options into this section, including encryption mode?

[olekstomek]

For me, it fully meets the expectations 💯%. It is much clearer. 👍 The user sees the simple interface straight away and won't be scared off by the many options. The default settings will be correct for the vast majority of users (WPA is the most popular). Therefore, I would also transfer encryption mode to Advanced. Let's be honest, if someone is a layman will not know what type of encryption he has. Therefore, this option can be advanced - for people who know what they are setting.

[bndw]

Most recent iteration from https://github.com/bndw/wifi-card/pull/150 (available at https://dev.wificard.io):

• The card is now WYSIWYG
• All settings are grouped below the card

[bndw]

Proposition to move the language dropdown to settings too.

https://github.com/bndw/wifi-card/pull/150#issuecomment-890405269

[bndw]

Update: I'm still exploring the design and layout. After relocating all of the settings, including the language select below the card, I turned my attention to the styling. Rather than hand-rolling a design system I opted to pull in evergreen. I've largely finished the refactor and am working through various cleanup/sizing issues.

I'd appreciate any feedback on the layout: you can play with it at https://dev.wificard.io

cc: @olekstomek , @Teraskull

[olekstomek]

I like. It looks nice and more modern. And it is more convenient for the user to show the information on the wifi card instead of using the standard alert() function. The alert() function requires an additional click from the user and this is unnecessary. In my opinion, the changes are going in a very good direction.