Skip to content

Conversation

@annavik
Copy link
Member

@annavik annavik commented Mar 22, 2023

About

In this PR we setup a settings dialog (still not posting any data though). This setup also includes some new UI components:

  • Dialog
  • Text input
  • Number input
  • Select
  • Slider

Also, we tweak the layout to fit screens of any size better. For example, we adjust the padding in some places and for the settings dialog we change width and number of columns depending on the screen size.

Screenshots

New UI components:

Dialog:
Screenshot 2023-03-22 at 17 56 15

Text input:
Screenshot 2023-03-22 at 17 54 35

Number input:
Screenshot 2023-03-22 at 17 54 44

Select:
Screenshot 2023-03-22 at 17 55 21

Slider:
Screenshot 2023-03-22 at 17 55 37

Settings dialog with different screen sizes:

On a large screen (> 1024px):
Screenshot 2023-03-22 at 17 48 55

On a medium screen (<= 1024px && > 720px)
Screenshot 2023-03-22 at 17 49 26

On a small screen (<= 720px)
Screenshot 2023-03-22 at 17 49 39

@netlify
Copy link

netlify bot commented Mar 22, 2023

Deploy Preview for ami-storybook ready!

Name Link
🔨 Latest commit 3102d88
🔍 Latest deploy log https://app.netlify.com/sites/ami-storybook/deploys/641b62ad981bed0008f47764
😎 Deploy Preview https://deploy-preview-94--ami-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Mar 22, 2023

Deploy Preview for ami-web ready!

Name Link
🔨 Latest commit 3102d88
🔍 Latest deploy log https://app.netlify.com/sites/ami-web/deploys/641b62ad5a2f7600082fbffa
😎 Deploy Preview https://deploy-preview-94--ami-web.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@annavik annavik changed the title [Draft]: Settings page and layout tweaks Settings page and layout tweaks Mar 22, 2023
@annavik annavik requested a review from mihow March 22, 2023 17:23
Copy link
Collaborator

@mihow mihow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great stuff! Thanks for the well documented PR!

@mihow mihow merged commit 5301e1e into main Mar 23, 2023
@annavik annavik deleted the web-ui-settings-page branch June 13, 2023 07:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants