New theme for web UI by nucleogenic · Pull Request #957 · PiSCSI/piscsi

nucleogenic · 2022-11-02T01:08:59Z

Introduction

This change set contains a concept for a "modern" web UI theme.

It provides an interim solution to the New Web UI roadmap item, which is a high effort feature and currently on hold.

Goals

Improve UX and aesthetics on modern browsers
No loss of legacy browser compatibility when using the 'classic' theme
Minimal changes to existing templates (changes must be theme-agnostic)
No additional steps in the build process, e.g. npm build process
Responsive layout for mobile/tablet

Browser Support

The modern theme is selected as the default for the following browsers:

Safari >= 14 (i.e. Big Sur)
Chrome >= 100 (includes Brave, Vivaldi, etc)
Firefox >= 100
Edge >= 100
Mobile Safari >= 14
Chrome Mobile >= 100

All other browsers and browser versions will be given the classic theme, although it is still possible to switch manually.

Changes

Assets located in static/themes/{theme}
Updates to templates to improve ability to style with CSS, e.g. adding classes, wrappers
Added a new theme called "modern"
Restyled Dropzone uploader from scratch
Added a new endpoint to change theme
Added link in footer to switch between the two themes
Added browser_supports_modern_themes() function
Added auto-selection of modern theme for supported browsers
Added Prettier and Stylelint rules
[Updates to Docker dev environment]

Preview

Try It Out

1. Build and launch Docker containers:

git clone https://github.com/nucleogenic/RASCSI.git --branch webui-modern-theme
cd RASCSI/docker
docker compose build --no-cache
docker compose up

2. Access web UI:

URL: http://localhost:8080
Username: pi
Password: rascsi

Todo

Check compatibility across desktop browsers
Check compatibility on mobile devices
Auto-detect whether to offer classic or modern theme
~~Better theme names?~~

Credits

@rdmark for the many improvements to the web UI template markup over the last few months, and suggesting the user-agents/ua-parser library
Andy in #rascsi-dev for the template feedback

python/web/src/templates/base.html

python/web/src/templates/index.html

rdmark · 2022-11-02T02:06:51Z

A very elegant approach to reskin the web app, indeed! I'm impressed. The monochrome icons are stylish, and the on hover rainbow effect on the RaSCSI Reloaded text in the header is a nice touch.

My only nitpick layout wise is that having the load configs form on the far left and the save configs form on the far right. I didn't immediately notice the other when looking at either of them. Perhaps centering is better? Or on top of each other as before? Something to iterate on I think.

BTW what do you mean by dropzone.js being uploaded from scratch? I didn't immediately see a code change that corresponded to that.

Left a few nitpick comments for your consideration.

rdmark · 2022-11-02T02:16:25Z

BTW it might be fun to brainstorm more memorable names for the themes than classic and modern. ;)

nucleogenic · 2022-11-03T22:40:04Z

BTW what do you mean by dropzone.js being uploaded from scratch? I didn't immediately see a code change that corresponded to that.

Oops, I meant to say I've restyled the Dropzone upload-er!

My only nitpick layout wise is that having the load configs form on the far left and the save configs form on the far right. I didn't immediately notice the other when looking at either of them. Perhaps centering is better? Or on top of each other as before? Something to iterate on I think.

That's a fair observation. The rationale was that the most important UI element (IMO) is the table of active devices, so I wanted to visual noise and unused space above it.

We received a comment in #rascsi-dev which critiqued the new theme as having too much vertical padding/whitespace, causing the active devices table not to fit on a 800px depth viewport, so I am hesitant to immediately return these to the stacked layout.

One option - out of scope for this PR - would be to consolidate the two forms; for example, we could start with an empty default.json file (auto-created if missing), then add a 'Save As' button which prompts for the filename.

Example:

rdmark · 2022-11-04T16:09:57Z

Well noted on the conservation of vertical space as a design choice. I like the proposed new unified config management form. We can definitely experiment with that in future PRs.

akuker

Looks good to me, but I'm not an expert on this code. I'd like @rdmark to review/approve this PR if he has time.

akuker · 2022-11-10T02:34:32Z

Note: I'm assuming the failed unit tests are because the nucleogenic fork doesn't have the saved SonarCloud credentials. If this still fails once we merge to develop, I can help figure out what's going on.

rdmark

Looks good overall -- just a few nitpick comments inline.

The main question that I have is the inclusion of the large CSS style file with an MIT license. I assume MIT and BSD are compatible but INAL.

Also, are you the author of the SVG icon graphics? And if not, who's the author and under which license are they distributed?

Apart from this I have no concerns about the code changes! Amazing job!

docker/rascsi/Dockerfile

rdmark · 2022-11-10T21:52:03Z

python/web/src/settings.py

+TEMPLATE_THEMES = ["classic", "modern"]
+
+# Default theme for modern browsers
+TEMPLATE_THEME_DEFAULT = "modern"


How about calling this theme something like "rainbow" to allude to the nice text color effect when hovering over "RaSCSI Reloaded" in the title bar at the top.

The text effect is a gradient made up from the colours inside the raspberry in the RaSCSI logo. I thought it was neat as a subtle 'flourish' (although I can totally see this getting old and us removing it before too long). The theme is otherwise quite formal, IMO. It is comparatively modern, but not what most would consider contemporary.

I think "rainbow" is clever (for those that make the connection), but it's somewhat equivocal, and might therefore be confusing for those that have 🌈 (colourful, vibrant) in their mind?

I don't have any other suggestions at the moment! ☹️

One idea is html5 -- this term is almost retro at this point. :)

python/web/package-lock.json

python/web/src/static/themes/modern/bootstrap-reboot.css

python/web/src/web.py

python/web/src/web_utils.py

nucleogenic · 2022-11-11T00:09:27Z

@rdmark

Regarding licences:

Icons are from an icon set called Feather. I thought the licence was referenced in the SVG source, but it's actually not, so we need to distribute the copyright attribution and MIT licence with them. I propose we do this by including the original licence file (here) in python/web/src/static/themes/modern/icons/LICENSE.
~~Bootstrap Reboot has the MIT license and the file python/web/src/static/themes/modern/bootstrap-reboot.css includes the original licence header.~~ (edit: Moved to CDN.)

akuker · 2022-11-11T19:46:37Z

The main question that I have is the inclusion of the large CSS style file with an MIT license. I assume MIT and BSD are compatible but INAL.

Its my understanding that BSD and MIT are compatible as well. It might be worth adding a note at the bottom of LICENSE in the root directory to state that some components are MIT licensed.

(Note: The Banana Pi code that I'm pulling it is also MIT licensed, so this concern is not unique to the web UI)

rdmark · 2022-11-12T20:52:12Z

@nucleogenic I found one i18n bug when playing around with this. The fixed width of the form buttons in the attached device action column lead to some localized strings being truncated. Affects German/Spanish/Swedish currently.

Can we go back to dynamic widths on those buttons again? We never know how long strings future localizations might bring to the table!

rdmark · 2022-11-12T21:13:07Z

Another minor visual bug: When LUNs are in use, the device icon shows up in the LUN column.

…drop placeholders from login labels, various other adjustments

…thout user-agent wrapper

rdmark · 2022-11-13T20:48:07Z

@nucleogenic Anything left on your todo list now? The "boring" theme naming may be for the best. They make it very clear what they are.

It'd be great to get this merged to open up for continuous iteration on the Web UI code!

nucleogenic · 2022-11-14T03:08:22Z

@rdmark I don't think there are any further changes I want to make at this point, so fine to get this merged into develop.

rdmark reviewed Nov 2, 2022

View reviewed changes

python/web/src/templates/base.html Show resolved Hide resolved

rdmark reviewed Nov 2, 2022

View reviewed changes

python/web/src/templates/base.html Outdated Show resolved Hide resolved

rdmark reviewed Nov 2, 2022

View reviewed changes

python/web/src/templates/base.html Outdated Show resolved Hide resolved

rdmark reviewed Nov 2, 2022

View reviewed changes

python/web/src/templates/index.html Outdated Show resolved Hide resolved

nucleogenic force-pushed the webui-modern-theme branch 2 times, most recently from 77af2d0 to 6ca4ef0 Compare November 3, 2022 21:42

nucleogenic force-pushed the webui-modern-theme branch from 7e64af7 to e177cc6 Compare November 8, 2022 04:27

nucleogenic changed the title ~~[PREVIEW] New theme for web UI~~ New theme for web UI Nov 8, 2022

nucleogenic marked this pull request as ready for review November 8, 2022 14:22

nucleogenic requested review from akuker and erichelgeson as code owners November 8, 2022 14:22

akuker approved these changes Nov 10, 2022

View reviewed changes

rdmark approved these changes Nov 10, 2022

View reviewed changes

nucleogenic added 8 commits November 12, 2022 23:05

Docker environment fixes

79c4d7e

New theme for web UI

d4a1312

Apply breaking wrap to filenames only

047e40f

Reduce font sizes, whitespace and padding

f988bb2

Right align action fields/buttons

7c414db

Improve mobile header, hide superfluous UI elements when logged out, …

f971f8e

…drop placeholders from login labels, various other adjustments

Force footer to bottom of screen

7155eeb

Show manual link to logged out users

c0adb24

nucleogenic added 16 commits November 12, 2022 23:05

Reduce header text size on desktop

1dbfc0d

Fix incorrect selector ID

3345284

Fix selector referencing old class name

fb91987

Fix right-aligned message when images table empty

41cacfc

Add CSS linter/auto-formatter

719cff4

Run Stylelint + Prettier against modern theme CSS

23c02d4

Select default theme based on browser’s user agent

a1fed98

Style inputs on mobile/tablet devices

52f1a71

Fixes for Safari 14 on iOS + iPad OS

8c1fa72

Explicitly define mobile browser support, switch to bare ua-parser wi…

f92380d

…thout user-agent wrapper

Add LICENSE file for modern theme icons

08d808b

Improve theme selection query string/field naming.

87e443e

Remove patch workaround from Docker build

be426bf

Update log level for UAs to info

a0bad15

Move Bootstrap Reboot CSS to CDN

76c2cbc

Account for LUN column in attached devices table

c9c11d7

nucleogenic force-pushed the webui-modern-theme branch from 3e680f0 to c9c11d7 Compare November 12, 2022 23:07

nucleogenic added 3 commits November 13, 2022 03:36

Prevent wrapping of config forms on small viewports

3b6f37b

Fix Stylelint issues

ab8698c

Auto-format CSS with Prettier

ce75288

rdmark merged commit 3627b39 into PiSCSI:develop Nov 14, 2022

Uh oh!

Conversation

nucleogenic commented Nov 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Introduction

Browser Support

Changes

Preview

Try It Out

Todo

Credits

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rdmark commented Nov 2, 2022

Uh oh!

rdmark commented Nov 2, 2022

Uh oh!

nucleogenic commented Nov 3, 2022

Uh oh!

rdmark commented Nov 4, 2022

Uh oh!

akuker left a comment

Choose a reason for hiding this comment

Uh oh!

akuker commented Nov 10, 2022

Uh oh!

rdmark left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rdmark Nov 10, 2022

Choose a reason for hiding this comment

Uh oh!

nucleogenic Nov 11, 2022

Choose a reason for hiding this comment

Uh oh!

rdmark Nov 11, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nucleogenic commented Nov 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

akuker commented Nov 11, 2022

Uh oh!

rdmark commented Nov 12, 2022

Uh oh!

rdmark commented Nov 12, 2022

Uh oh!

rdmark commented Nov 13, 2022

Uh oh!

nucleogenic commented Nov 14, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nucleogenic commented Nov 2, 2022 •

edited

Loading

nucleogenic commented Nov 11, 2022 •

edited

Loading