Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Single Lesson: Polish the design #2862

Merged
merged 33 commits into from
Sep 6, 2024
Merged

Single Lesson: Polish the design #2862

merged 33 commits into from
Sep 6, 2024

Conversation

renintw
Copy link
Contributor

@renintw renintw commented Aug 26, 2024 •
edited
Loading

Resolves #2638 #2809

This PR goes through the breadcrumbs, sidebar nav, and the main content style to make them align with the latest design, for both non-standalone and standalone lessons.

Non-Standalone

Nav Main Content
Screenshot 2024-08-26 at 13 26 13 Screenshot 2024-08-26 at 14 17 45
Rounded Progress Bar
image

Standalone
image

@renintw renintw self-assigned this Aug 26, 2024
@renintw renintw added the [Component] Learn Theme Website development issues related to the Learn theme. label Aug 26, 2024
@renintw renintw added this to the Learning Pathways Post-launch milestone Aug 26, 2024
@jasmussen
Copy link

Thanks for keeping on this. Happy to defer to Francisco on the color styles, where the green doesn't match the blue from the referenced issue, but was introduced by the larger visual refresh. Can work well.

I know this is probably tricky, but would it be possible to get the rounded pill-shape on the green bar here?

Screenshot 2024-08-26 at 14 30 17

@renintw
Copy link
Contributor Author

renintw commented Aug 26, 2024

image

Does something like this fit? Only the top-right and bottom-right are made rounded.

@jasmussen
Copy link

Yes, exactly. Nice.

@adamwoodnz
Copy link
Contributor

adamwoodnz commented Aug 27, 2024 •
edited
Loading

Alignment of the dropdown arrows and completion icons still looks off to me. The design shows them aligned with the first line

Design This PR
Screenshot 2024-08-27 at 12 20 11 PM Screenshot 2024-08-27 at 12 14 02 PM

adamwoodnz
adamwoodnz reviewed Aug 27, 2024
View reviewed changes
Copy link
Contributor

@adamwoodnz adamwoodnz left a comment

Choose a reason for hiding this comment

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

Nice work cleaning this up! One comment on the sidebar icon alignment above.

@adamwoodnz
Copy link
Contributor

image Does something like this fit? Only the top-right and bottom-right are made rounded.

I noticed the design has the progress bar wider than the border too

Screenshot 2024-08-27 at 12 23 21 PM

@renintw
Copy link
Contributor Author

renintw commented Aug 27, 2024

I noticed the design has the progress bar wider than the border too

I feel that it can be as wide as the border just like other progress bars are. What do you think? @fcoveram

@jasmussen
Copy link

I noticed the design has the progress bar wider than the border too

I think Francisco changed this, and I'm happy to defer to him. No blockers on that detail if this was part of the design.

@fcoveram
Copy link

I have pending the update of those mockups. There are a few changes that worth addressing all together (including #2638 and #2809)

@renintw renintw force-pushed the 2638-Single-Lesson-Polish-the-design branch 3 times, most recently from 5b00a9f to 709cdd6 Compare September 1, 2024 14:09
@renintw
Copy link
Contributor Author

renintw commented Sep 1, 2024

Alignment of the dropdown arrows and completion icons still looks off to me. The design shows them aligned with the first line

4797aea & df3c906

@renintw renintw force-pushed the 2638-Single-Lesson-Polish-the-design branch from 709cdd6 to 424a82d Compare September 1, 2024 14:29
@renintw
Copy link
Contributor Author

renintw commented Sep 1, 2024 •
edited
Loading

Header and Sidebar Updates based on the latest design
878d3c1, 37a4bc3, 38d0f6c

Module Standalone
Desktop Screenshot 2024-09-02 at 01 17 02 Screenshot 2024-09-02 at 01 17 10
Tablet image image
Mobile image image

@renintw
Copy link
Contributor Author

renintw commented Sep 1, 2024 •
edited
Loading

Actions Style Updates
a8200dd, 00e0e1a, 8c38d97

Next Lesson Take Quiz Complete
Desktop Screenshot 2024-09-02 at 03 18 42 Screenshot 2024-09-02 at 03 15 52 Screenshot 2024-09-02 at 03 16 14
Mobile Screenshot 2024-09-02 at 03 19 30 Screenshot 2024-09-02 at 03 19 16 Screenshot 2024-09-02 at 03 19 40

The style and design for the "Complete Lesson" are not yet consistent. I have left a comment in Figma and will wait for feedback before making further adjustments.

For the quiz single page actions, I will open another PR to address their style updates, as in Sensei, the components there cannot easily be separated and moved into Learn without making things overly complex. Creating a PR directly in Sensei will be cleaner and easier to understand. (Issue was created for tracking)

Update

  1. Always display "Next/Previous lesson" buttons as per discussion aecb969 4d62a3d

  2. Green background color 4f8b11c
    Screen Capture on 2024-09-02 at 23-47-18

@renintw renintw mentioned this pull request Sep 1, 2024
Closed
@renintw
Copy link
Contributor Author

renintw commented Sep 1, 2024 •
edited
Loading

Suggestions Block Reposition
73ce7b1, a43274f, f3d52ae

Desktop Tablet Mobile
image image image

@renintw
Copy link
Contributor Author

renintw commented Sep 1, 2024 •
edited
Loading

Login Block Reposition (*styles of action buttons on either desktop or mobile view will be fixed in the following commits)
8aca602, 2ed7dcb

Desktop Tablet Mobile
Screenshot 2024-09-02 at 04 08 57 image Screenshot 2024-09-02 at 04 09 46

@renintw
Copy link
Contributor Author

renintw commented Sep 1, 2024 •
edited
Loading

Completed Notice
89e409e

Desktop Tablet Mobile
Screenshot 2024-09-03 at 05 09 09 Screenshot 2024-09-03 at 05 09 15 Screenshot 2024-09-03 at 05 09 25

@renintw
Copy link
Contributor Author

renintw commented Sep 1, 2024 •
edited
Loading

Sign-in Block Updates

This will be addressed in another PR, as it's slightly more complicated.

@renintw
Copy link
Contributor Author

renintw commented Sep 2, 2024 •
edited
Loading

Preview Mode

Pending feedback.

@renintw
Copy link
Contributor Author

renintw commented Sep 2, 2024 •
edited
Loading

@adamwoodnz I think this PR is ready for review again, and you can start from this comment. I have documented all the changes that are based on the latest design in separate comments, each with screenshots and relevant commits. Thanks 🙏

The following items will be handled separately later:

  • Single quiz updates will be handled in a separate PR.
  • Sign-in block styles will be handled in a separate PR.
  • Facilitator Notes will be handled in a separate PR.
  • Preview mode indicator is pending feedback.

@renintw renintw force-pushed the 2638-Single-Lesson-Polish-the-design branch from a8dbb4f to 44fbab0 Compare September 5, 2024 15:32
@renintw renintw force-pushed the 2638-Single-Lesson-Polish-the-design branch from b095bf1 to 06eeda5 Compare September 5, 2024 16:52
@renintw
Copy link
Contributor Author

renintw commented Sep 5, 2024 •
edited
Loading

The design shows the h1 in Inter now

0dc0f03
image

Little shift in the progress bar width on iPad when activating the menu:

06eeda5
image

And the buttons don't take up the full width of the wrapper, so when they are active/focused they look like this:

3bdadac
image

@renintw
Copy link
Contributor Author

renintw commented Sep 5, 2024

This PR has quite a few commits. If there are no issues at the moment, I plan to merge it first and handle the remaining parts and the latest design updates in other PRs.

@renintw renintw force-pushed the 2638-Single-Lesson-Polish-the-design branch from 3f1f25b to 0dc0f03 Compare September 5, 2024 17:37
@renintw renintw linked an issue Sep 5, 2024 that may be closed by this pull request
Clearer lesson completed indicator on the single lesson page #2809
Closed
adamwoodnz
adamwoodnz approved these changes Sep 6, 2024
View reviewed changes
Copy link
Contributor

@adamwoodnz adamwoodnz left a comment

Choose a reason for hiding this comment

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

LGTM! Great work 🎸

@renintw renintw merged commit b917e59 into trunk Sep 6, 2024
1 check passed
@renintw renintw deleted the 2638-Single-Lesson-Polish-the-design branch September 6, 2024 16:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adamwoodnz adamwoodnz adamwoodnz approved these changes

@fcoveram fcoveram Awaiting requested review from fcoveram

@jasmussen jasmussen Awaiting requested review from jasmussen

Assignees

@renintw renintw

Labels
[Component] Learn Theme Website development issues related to the Learn theme.
Projects
WordPress.org Redesign
Status: ✅ Done
Milestone
Learning Pathways Post-launch
Development

Successfully merging this pull request may close these issues.

Clearer lesson completed indicator on the single lesson page Single Lesson: Polish the design
4 participants
@renintw @jasmussen @adamwoodnz @fcoveram