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.

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

courses: improve second toolbar layout for small screens (fixes #7137) #7147

Merged
merged 10 commits into from Aug 15, 2023

Conversation

Mutugiii
Copy link
Member

@Mutugiii Mutugiii commented Nov 8, 2022

Fixes #7137

Description

Using the checkMobile service to change the internal filter header toolbar to be two-lines in mobile screens

Note

On hold until checkMobile Service is merged from PR #7143

@Mutugiii Mutugiii requested a review from lmmrssa November 8, 2022 06:23
@Mutugiii Mutugiii changed the title 7137 Make Internal Filter Header Two-line Toolbar Courses & Resources: Make Internal Filter Header Two-line Toolbar Nov 9, 2022
@Mutugiii
Copy link
Member Author

Mutugiii commented Nov 9, 2022

Update

Pushed an update for the Internal filter header in the courses component as well.

Suggestion

Should consider having it to 3 lines in the courses only, the button and the search bar are cut off on significantly smaller screens

Normal Mobile Screens
ole_courses_2_bar

Significantly smaller mobile screens
ole_courses_2_bar_smaller_screens

src/app/courses/courses.component.html Outdated Show resolved Hide resolved
src/app/courses/courses.component.ts Outdated Show resolved Hide resolved
src/app/courses/courses.component.html Show resolved Hide resolved
src/app/courses/courses.component.html Outdated Show resolved Hide resolved
src/app/resources/resources.component.html Outdated Show resolved Hide resolved
@Mutugiii Mutugiii changed the title Courses & Resources: Make Internal Filter Header Two-line Toolbar Responsiveness(Courses & Resources): Make the Header & Filter toolbar to be 2 lines in mobile screens Jul 18, 2023
@Mutugiii Mutugiii requested a review from lmmrssa July 18, 2023 17:58
@dogi dogi changed the title Responsiveness(Courses & Resources): Make the Header & Filter toolbar to be 2 lines in mobile screens courses: refactor header & filter toolbar for mobile screens (fixes #7137) Aug 15, 2023
@dogi dogi changed the title courses: refactor header & filter toolbar for mobile screens (fixes #7137) courses: refactor second toolbar for mobile screens (fixes #7137) Aug 15, 2023
@dogi dogi changed the title courses: refactor second toolbar for mobile screens (fixes #7137) courses: refactor second toolbar for tiny screens (fixes #7137) Aug 15, 2023
@dogi dogi changed the title courses: refactor second toolbar for tiny screens (fixes #7137) courses: improve second toolbar layout for small screens (fixes #7137) Aug 15, 2023
@dogi dogi merged commit ce4fe16 into master Aug 15, 2023
11 checks passed
@dogi dogi deleted the 7137-two-line branch August 22, 2023 18:07
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.

Internal Filter Header make it two line
3 participants