studio/blender-studio
3
4
Fork 4
Code Issues 37 Pull Requests 2 Projects 1 Releases 5 Wiki Activity

UI: Training templates fluid video layouts #104435

Merged
Márton Lente merged 13 commits from ui/training-layout-fluid into main 2024-08-23 16:50:27 +02:00
Conversation 2 Commits 13 Files Changed 7 +203 -123
Márton Lente commented 2024-08-22 17:56:47 +02:00
Owner
Copy Link

This pull request updates training pages' UI, bringing a better layout for desktop screens. The new arrangement emphasizes the video while improving both the navigation and the discussion panels' accessibility on the UI, by introducing sidebars for the latter. The fluid video layout takes the available space for an improved viewing.

The PR brings improvements for the following templates:

  • Training base
  • Training chapters list
  • Training chapters detail

The new layout – while optimized for generic screen sizes – handles extremely narrow and wide screen sizes as well. Templates on small screens should render similarily as before.

Screenshots:

image
image
image

This pull request updates training pages' UI, bringing a better layout for desktop screens. The new arrangement emphasizes the video while improving both the navigation and the discussion panels' accessibility on the UI, by introducing sidebars for the latter. The fluid video layout takes the available space for an improved viewing. The PR brings improvements for the following templates: - Training base - Training chapters list - Training chapters detail The new layout – while optimized for generic screen sizes – handles extremely narrow and wide screen sizes as well. Templates on small screens should render similarily as before. **Screenshots:** ![image](https://projects.blender.org/attachments/dae57579-e44d-487a-8009-692a28d73b13) ![image](https://projects.blender.org/attachments/df94a2c8-4ed3-44ab-89de-104f001ac40b) ![image](https://projects.blender.org/attachments/cbbcf823-6902-4d18-bd49-2b4966484653)
blender-studio-ui-layout-training-fluid-2-min.png
370 KiB
blender-studio-ui-layout-training-fluid-5-min.png
293 KiB
blender-studio-ui-layout-training-fluid-1-min.png
744 KiB
❤️ 1
Márton Lente added 8 commits 2024-08-22 17:56:49 +02:00 
Improve training detail pages' layouts by making the video sizing fluid,
and centrally aligned to the viewport, while re-arranging nav and content
columns.
Márton Lente changed title from WIP: Training templates fluid video layouts to UI: Training templates fluid video layouts 2024-08-22 18:18:05 +02:00
Márton Lente requested review from Pablo Vazquez 2024-08-22 18:18:15 +02:00
Pablo Vazquez commented 2024-08-22 19:49:22 +02:00
Owner
Copy Link

Nice! Got a few notes.

Cards listing

What do you think of going full width there too? To fit more cards in the widest layout.

At the moment it only fits 3, and it's centered. Proposal is to make it left-aligned, and up to 5 (?) cards.

This PR Mockup
PR Mockup

Keep in mind that some folders have header images that will need a max-height to not span the entire width. Such as http://studio.local:8001/training/stylized-character-workflow/chapter/5d2f2730af91332f601b23c6/

Stack on Small Screens

On narrow browsers the media size becomes so small that it might be better to switch back to stacking the content under the media. What do you think?

Bugs

Tall images seem broken.

Reference:

This PR Production
PR Production

Thanks!

Nice! Got a few notes. ## Cards listing What do you think of going full width there too? To fit more cards in the widest layout. At the moment it only fits 3, and it's centered. Proposal is to make it left-aligned, and up to 5 (?) cards. |This PR|Mockup| |----|----| |![PR](/attachments/0c4cc294-dd97-4fb6-8d8b-b8405b5c1238)|![Mockup](/attachments/ecd9df73-c854-4409-9884-5efd5182d080)| Keep in mind that some folders have header images that will need a max-height to not span the entire width. Such as http://studio.local:8001/training/stylized-character-workflow/chapter/5d2f2730af91332f601b23c6/ ## Stack on Small Screens On narrow browsers the media size becomes so small that it might be better to switch back to stacking the content under the media. What do you think? <video src="/attachments/b3e1ed8e-f5ea-422e-a877-d8df7b6eadfe" title="narrow_screen.mov" controls></video> ## Bugs Tall images seem broken. Reference: * Local: http://studio.local:8001/training/stylized-character-workflow/5d28b0a4e774c2173c3ccecb/ * Production: https://studio.blender.org/training/stylized-character-workflow/5d28b0a4e774c2173c3ccecb/ |This PR|Production| |----|----| |![PR](/attachments/3c7ddcc1-9e95-40da-a070-e840fddb22ed)|![Production](/attachments/f3e73f5e-f1ff-4623-b1dc-f0ec8580e9f0)| Thanks!
image.png
1.2 MiB
image.png
1.8 MiB
image.png
920 KiB
image.png
1.3 MiB
narrow_screen.mov
8.0 MiB
👍 1
Márton Lente added 1 commit 2024-08-23 12:30:04 +02:00 
Make the trainings cards grid layout fluid, and add more items per row
per breakpoints.
Part of #104435
Márton Lente added 1 commit 2024-08-23 12:56:28 +02:00 
Fix grid-breakpoints 'xl' and 'xxl' Sass variables coming from flat
pre-compiled vendor files with web-assets defaults. Improves the display
of trainings' fluid video arrangement on xl and xxl desktop screens with
more sensible layout changes.
Part of #104435
Márton Lente added 1 commit 2024-08-23 13:07:53 +02:00 
Fix tall images overflowing the media and video container in training section
templates on desktop screens. Images never overflow the media container no
matter their heights and widths.
Part of #104435
Márton Lente commented 2024-08-23 14:56:51 +02:00
Author
Owner
Copy Link

@pablovazquez thank you for your detailed review and ideas! I addressed the above, see below.

At the moment it only fits 3, and it's centered. Proposal is to make it left-aligned, and up to 5 (?) cards.

  • Content container is now left-aligned
  • 4 cards are displayed per row on xl screens, in a fluid container
  • 5 cards are displayed per row on xxl screens, in a fluid container
  • Content containers doesn't exceed main container's width, to keep readability

Screenshot:

blender-studio-ui-layout-training-fluid-rev-3-min.png

On narrow browsers the media size becomes so small that it might be better to switch back to stacking the content under the media.

Because of an issue, the xl and xxl breakpoints were triggered at lower resolutions than defined in web-assets. I moved the breakpoints higher, to match web-assets defaults, that made the layout changes kick in at more optimal screen sizes. With the new breakpoints I think making the layout stacked on 'medium' screens might be not needed. What do you think?

Screenshot:

The video below shows layout behaviour from 1320 px, where desktop layout is triggered.

Tall images seem broken.

This has been fixed so that images never exceed the central media container. Some other changes were added to make images' rendering match the display of videos in the new layout.

Screenshot:

blender-studio-ui-layout-training-fluid-rev-7-min.png

@pablovazquez thank you for your detailed review and ideas! I addressed the above, see below. > At the moment it only fits 3, and it's centered. Proposal is to make it left-aligned, and up to 5 (?) cards. - Content container is now left-aligned - 4 cards are displayed per row on `xl` screens, in a fluid container - 5 cards are displayed per row on `xxl` screens, in a fluid container - Content containers doesn't exceed main container's width, to keep readability **Screenshot:** ![blender-studio-ui-layout-training-fluid-rev-3-min.png](/attachments/4dee6a14-88d3-4d7e-8b7f-b126c06da087) > On narrow browsers the media size becomes so small that it might be better to switch back to stacking the content under the media. Because of an issue, the `xl` and `xxl` breakpoints were triggered at lower resolutions than defined in web-assets. I moved the breakpoints higher, to match web-assets defaults, that made the layout changes kick in at more optimal screen sizes. With the new breakpoints I think making the layout stacked on 'medium' screens might be not needed. What do you think? **Screenshot:** The video below shows layout behaviour from 1320 px, where desktop layout is triggered. <video src="/attachments/4b573787-4162-4b67-804d-d68bef84e0e3" title="blender-studio-ui-layout-training-fluid-rev-min.mkv" controls></video> > Tall images seem broken. This has been fixed so that images never exceed the central media container. Some other changes were added to make images' rendering match the display of videos in the new layout. **Screenshot:** ![blender-studio-ui-layout-training-fluid-rev-7-min.png](/attachments/8d7abcf1-51ee-4ab7-af5f-9e64a1aa3586)
blender-studio-ui-layout-training-fluid-rev-7-min.png
959 KiB
blender-studio-ui-layout-training-fluid-rev-min.mkv
6.9 MiB
blender-studio-ui-layout-training-fluid-rev-3-min.png
1.1 MiB
Márton Lente added 1 commit 2024-08-23 15:00:48 +02:00
Pablo Vazquez requested changes 2024-08-23 16:15:44 +02:00
Dismissed
training/templates/training/training.html Outdated
@ -32,0 +16,4 @@
<section class="training-group-item training-group-item-content-detail">
<div class="row training-group-item-content-detail-inner">
<div class="col">
<div class="mb-3 row">
Pablo Vazquez commented 2024-08-23 16:13:25 +02:00
Owner
Copy Link

This entire div can be empty if {% if training.picture_header_url %} is false.
Adding a gap because of mb-3 without anything inside.

Move the check up here.

This entire div can be empty if `{% if training.picture_header_url %}` is false. Adding a gap because of `mb-3` without anything inside. Move the check up here.
Márton Lente commented 2024-08-23 16:28:52 +02:00
Author
Owner
Copy Link

Thanks, it has been fixed.

Thanks, it has been fixed.
martonlente marked this conversation as resolved
Márton Lente added 1 commit 2024-08-23 16:28:07 +02:00 
Fix conditionals' placement checking for header image in training template.
Part of #104435
Márton Lente requested review from Pablo Vazquez 2024-08-23 16:29:06 +02:00
Pablo Vazquez approved these changes 2024-08-23 16:37:52 +02:00
Pablo Vazquez left a comment
Owner
Copy Link

Thanks!

Thanks!
Márton Lente merged commit 70c9f764c5 into main 2024-08-23 16:50:27 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Pablo Vazquez
Labels
Clear labels   
Priority
High

  
Priority
Low

  
Priority
Normal

  
Status
Archived

  
Status
Confirmed

  
Status
Duplicate

  
Status
Needs Information from User

  
Status
Needs Triage

  
Status
Resolved

  
Type
Bug

  
Type
Content

  
Type
Design

  
Type
Report

  
Type
To Do

  
Type
Web Development

No Label
Priority
High
Priority
Low
Priority
Normal
Status
Archived
Status
Confirmed
Status
Duplicate
Status
Needs Information from User
Status
Needs Triage
Status
Resolved
Type
Bug
Type
Content
Type
Design
Type
Report
Type
To Do
Type
Web Development
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
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: studio/blender-studio#104435
No description provided.
Delete Branch "ui/training-layout-fluid"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?