UI: Web Assets v2 upgrade #85

Merged
Márton Lente merged 52 commits from martonlente/extensions-website:ui/web-assets-v2-upgrade into main 2024-04-30 17:57:33 +02:00

This pull request upgrades Git submodule Web Assets to v2, resolves post-upgrade issues, and makes the necessary project-specific changes.

Web Assets v2 brings UI fixes, improvements, and new features to the platform as detailed on the Web Assets v2 guidelines and notes wiki page.

Technical changes focus mainly only reducing project-specific styling, and rely more on v2 changes to improve maintenance and scalability.

Visual changes include improved typography and more consistent sizing and spacing among others. Example mockups and screens:

Extensions Web Assets v2 upgrade 1
Extensions Web Assets v2 upgrade 2
Extensions Web Assets v2 upgrade 3
Extensions Web Assets v2 upgrade 4

This pull request upgrades Git submodule Web Assets to v2, resolves post-upgrade issues, and makes the necessary project-specific changes. Web Assets v2 brings UI fixes, improvements, and new features to the platform as detailed on the [Web Assets v2 guidelines and notes](https://projects.blender.org/infrastructure/web-assets/wiki/v2-guidelines-and-notes.md) wiki page. Technical changes focus mainly only reducing project-specific styling, and rely more on v2 changes to improve maintenance and scalability. Visual changes include improved typography and more consistent sizing and spacing among others. Example mockups and screens: ![Extensions Web Assets v2 upgrade 1](https://projects.blender.org/attachments/99e0cf6e-893b-4425-8929-fee8af928431) ![Extensions Web Assets v2 upgrade 2](https://projects.blender.org/attachments/16f50481-bfda-4074-b24f-1c6c8eafd36f) ![Extensions Web Assets v2 upgrade 3](https://projects.blender.org/attachments/14c9850a-4857-4762-b755-023a685b598b) ![Extensions Web Assets v2 upgrade 4](https://projects.blender.org/attachments/eb55bfcc-f8f0-46e2-a1fa-01110bbf7c32)
Márton Lente added 8 commits 2024-04-19 16:59:36 +02:00
Márton Lente force-pushed ui/web-assets-v2-upgrade from c4a14b21a5 to 75c389634a 2024-04-22 15:47:42 +02:00 Compare
Márton Lente added 1 commit 2024-04-22 15:59:17 +02:00
Márton Lente added 1 commit 2024-04-22 16:05:26 +02:00
Márton Lente added 1 commit 2024-04-22 16:07:43 +02:00
Márton Lente added 1 commit 2024-04-22 16:11:52 +02:00
Márton Lente added 1 commit 2024-04-22 16:32:47 +02:00
Márton Lente added 1 commit 2024-04-22 16:36:24 +02:00
Márton Lente added 1 commit 2024-04-22 16:54:39 +02:00
Márton Lente added 1 commit 2024-04-22 17:02:27 +02:00
Márton Lente added 1 commit 2024-04-22 17:46:07 +02:00
Run post web-assets v2 upgrade script bash helper for converting sizes and units to new rem sizing, and implement 4 px based sizing.
Márton Lente added 1 commit 2024-04-22 18:02:50 +02:00
Márton Lente added 1 commit 2024-04-23 14:21:58 +02:00
Márton Lente added 1 commit 2024-04-23 14:22:33 +02:00
Márton Lente added 1 commit 2024-04-23 14:23:06 +02:00
Márton Lente added 1 commit 2024-04-23 14:24:45 +02:00
Márton Lente added 1 commit 2024-04-23 14:43:10 +02:00
Márton Lente added 1 commit 2024-04-23 14:53:21 +02:00
Márton Lente added 1 commit 2024-04-23 15:06:12 +02:00
Márton Lente added 1 commit 2024-04-23 15:27:10 +02:00
Márton Lente added 2 commits 2024-04-23 15:32:14 +02:00
Márton Lente added 1 commit 2024-04-23 15:41:05 +02:00
Márton Lente force-pushed ui/web-assets-v2-upgrade from f245e93162 to 7a06add6f0 2024-04-23 18:57:43 +02:00 Compare
Márton Lente added 1 commit 2024-04-25 17:07:51 +02:00
Márton Lente added 1 commit 2024-04-25 17:09:18 +02:00
Márton Lente added 1 commit 2024-04-25 18:06:45 +02:00
Cleanup and remove redundant project-specific styles ext-card after web-assets v2 upgrade.
Márton Lente added 1 commit 2024-04-26 11:22:07 +02:00
Márton Lente added 2 commits 2024-04-26 11:24:56 +02:00
Márton Lente added 1 commit 2024-04-26 11:32:20 +02:00
Change post web-assets v2 upgrade explicit size values to variable based sizing for modularity.
Márton Lente added 1 commit 2024-04-26 11:34:15 +02:00
Márton Lente added 1 commit 2024-04-26 12:13:43 +02:00
Márton Lente added 1 commit 2024-04-26 12:30:01 +02:00
Márton Lente added 1 commit 2024-04-26 16:57:33 +02:00
Márton Lente added 1 commit 2024-04-26 17:03:24 +02:00
Márton Lente changed title from WIP: Web Assets v2 upgrade to UI: Web Assets v2 upgrade 2024-04-26 17:05:20 +02:00
Márton Lente added 1 commit 2024-04-29 14:37:32 +02:00
Márton Lente added 2 commits 2024-04-29 14:50:19 +02:00
Pablo Vazquez requested changes 2024-04-29 18:22:20 +02:00
Dismissed
Pablo Vazquez left a comment
Owner

Looking great! Just got some minor notes (besides the crash in approval-queue detail page):

  1. Abuse Report status in detail page looks like an alert, not a badge. To test make a fake report on an extension by clicking Report Abuse in the bottom of the page, then go to http://extensions.local:8111/abuse/reports/
    report

  2. Too much padding in the sidebar of profile settings.
    profile

  3. Teams is missing icon (you could use i-users), and styling on the list in http://extensions.local:8111/settings/teams/
    teams

Looking great! Just got some minor notes (besides the crash in approval-queue detail page): 1. Abuse Report status in detail page looks like an alert, not a badge. To test make a fake report on an extension by clicking Report Abuse in the bottom of the page, then go to http://extensions.local:8111/abuse/reports/ ![report](/attachments/3127afe0-308b-4340-8622-2746287b3587) 2. Too much padding in the sidebar of profile settings. ![profile](/attachments/e0109f02-47cf-432d-954d-6406ecc514e4) 3. `Teams` is missing icon (you could use `i-users`), and styling on the list in http://extensions.local:8111/settings/teams/ ![teams](/attachments/c25c8378-cf38-4a9d-ae11-c98fcbe234aa)
@ -169,2 +169,3 @@
<div class="d-flex align-items-center">
<div class="btn-row ml-3 w-100 justify-content-end">
<div class="btn-row ms-3 w-100 justify-content-end">
{% if is_maintainer or request.user.is_moderator %}

Getting a template error on items in approval-queue. This added if is not closed.

approval queue

Getting a template error on items in approval-queue. This added `if` is not closed. ![approval queue](/attachments/812bd802-d0ab-44a1-9d27-5181b8e9df7b)
  1. Too much padding in the sidebar of profile settings.
    profile

Looking at it again, it's not just the padding but the use of the active color is strange. Understandable though since in Blender Studio we don't even highlight the active area. Notice how we are in "Invoices" but the sidebar does not reflect it.
studio

It should look something like in Blender Conference at the moment. Perhaps you could copy the markup so it's unified.

conference

> 2. Too much padding in the sidebar of profile settings. > ![profile](/attachments/e0109f02-47cf-432d-954d-6406ecc514e4) Looking at it again, it's not just the padding but the use of the active color is strange. Understandable though since in Blender Studio we don't even highlight the active area. Notice how we are in "Invoices" but the sidebar does not reflect it. ![studio](/attachments/aed76798-8ba7-4ae8-b7bc-ec191e107702) It should look something like in [Blender Conference](https://conference.blender.org/account/profile/) at the moment. Perhaps you could copy the markup so it's unified. ![conference](/attachments/2268f945-cb1c-4183-9e1b-92d43e1367cd)
Márton Lente added 2 commits 2024-04-30 10:59:49 +02:00
Márton Lente added 1 commit 2024-04-30 11:54:52 +02:00
Improve template users tabs and and nav pills styles to match UI patterns that are present in Web Assets.
Márton Lente added 1 commit 2024-04-30 12:01:52 +02:00
Márton Lente added 1 commit 2024-04-30 12:42:18 +02:00
Author
Owner

Thanks for the remarks. The fixes and improvements have been done.

The navdrawers' paddings now match other sidebar panels' padding, but can be drecreased further to look closer to the example instead.

Thanks for the remarks. The fixes and improvements have been done. The navdrawers' paddings now match other sidebar panels' padding, but can be drecreased further to look closer to the example instead.

Thanks for the fixes!

The navdrawers' paddings now match other sidebar panels' padding

Do you mean this padding? It's not matching, seems bigger in the profile settings to me?

Still not totally sold on the styling of the navdrawer but we can tackle that later on web-assets. We could make a section there since this is a component that is used in several websites.

Thanks for the fixes! > The navdrawers' paddings now match other sidebar panels' padding Do you mean this padding? It's not matching, seems bigger in the profile settings to me? ![](/attachments/201b856a-55f8-4225-a9fc-a58909ddbc97) ![](/attachments/0963efbf-e3df-4807-a8b0-b882335afba0) Still not totally sold on the styling of the navdrawer but we can tackle that later on web-assets. We could make a section there since this is a component that is used in several websites.
Author
Owner

@pablovazquez thanks for the remarks. I think why the navdrawer's padding felt bigger is that its inner buttons with transparent backgrounds indeed had an extra padding, which resulted in more horizontal spacings overall. I made some spacing tweaks and changes to font-weights: it looks better to me. (Alternatively we can make an exception here, and fine-tune visually.)

Currently almost all boxes in Extensions have a dedicate utility class assigned defining their spacings which are basically the same: we can do a cleanup and check all box-spacings in the project systematically.

Good idea to make navdrawer component in web-assets, let's do that. 👍

@pablovazquez thanks for the remarks. I think why the navdrawer's padding felt bigger is that its inner buttons with transparent backgrounds indeed had an extra padding, which resulted in more horizontal spacings overall. I made some spacing tweaks and changes to font-weights: it looks better to me. (Alternatively we can make an exception here, and fine-tune visually.) Currently almost all boxes in Extensions have a dedicate utility class assigned defining their spacings which are basically the same: we can do a cleanup and check all box-spacings in the project systematically. Good idea to make navdrawer component in web-assets, let's do that. 👍
Márton Lente requested review from Pablo Vazquez 2024-04-30 17:21:06 +02:00
Pablo Vazquez approved these changes 2024-04-30 17:56:08 +02:00
Pablo Vazquez left a comment
Owner

Thanks for the fixes!

Thanks for the fixes!
Márton Lente merged commit 00937ea179 into main 2024-04-30 17:57:33 +02:00
Sign in to join this conversation.
No reviewers
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: infrastructure/extensions-website#85
No description provided.