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

Adjustments to tile responsiveness when sidebar is opened #1221

Closed
jmakowski1123 opened this issue Aug 19, 2024 · 11 comments
Closed

Adjustments to tile responsiveness when sidebar is opened #1221

jmakowski1123 opened this issue Aug 19, 2024 · 11 comments

Comments

@jmakowski1123
Copy link

Currently when the sidebar is opened, tiles with long titles and descriptions become very elongated. UI solution?

@bradenmacdonald
Copy link
Contributor

bradenmacdonald commented Aug 26, 2024

Screenshot 2024-08-26 at 2 04 36 PM

@jmakowski1123 It only affects smaller displays. I think we can address that by switching to three cards per row instead of four? (for small displays)

@sdaitzman
Copy link

Rather than setting a fixed number of columns at specific breakpoints and letting the preview text flow across an arbitrary number of lines, I think we should use different fixed constraints (Figma link with examples and comments):

  • Minimum card width: e.g. 200px. This allows minimum recognition and should fit comfortably on mobile sizes, with padding.
  • Maximum card width: e.g. 400px. Any greater width adds diminishing value, adds noise, and makes text more difficult to follow.
  • Maximum lines of preview text: 3. Cards are intended for quick recognition, and this should be enough to recognize content.

Rather than a fixed number of columns between each breakpoint, this approach limits the card size to ensure all cards are a reasonable size in all dimensions, and allows them to use up more space when it's available.

image

I've left the constraints a bit open-ended here. I'm wondering about feasibility of this sort of approach— let me know if more specific constraints, examples and breakpoints would be helpful. Does something more like this responsive approach seem possible?

@bradenmacdonald
Copy link
Contributor

@sdaitzman Yes, we can do that and I agree it's better than dealing with breakpoints and fixed columns and all that.

CC @rpenido @ChrisChV

@rpenido
Copy link
Contributor

rpenido commented Aug 28, 2024

Ack! I will check that tomorrow and post an update here.

@rpenido
Copy link
Contributor

rpenido commented Aug 29, 2024

As the other PR was merged, I will create a small task for this next sprint.

@sdaitzman
Copy link

Discussed this at libraries relaunch touchpoint today. We decided to (pending evaluating feasibility of scoping these changes to the content libraries studio page only):

  • Drop the xl max-width container, so the header, content, cards and footer can flow across the full screen width
  • Add a maximum width for the cards, and allow them to flow across multiple lines and flex within their min/max size range
  • Post-MVP, evaluate how list views will handle wide screens / remain legible on them

Before:
image

After:
image

@bradenmacdonald
Copy link
Contributor

^ Ideally, we'd add a way that we can enable this "full width mode" for just this one page, and potentially other course authoring MFE pages in the future. If it's too complicated to do, or would affect ALL pages and potentially introduce layout issues on other pages, we can consider postponing it.

@rpenido
Copy link
Contributor

rpenido commented Sep 4, 2024

We can parametrize the header only for the library authoring, so I think it is possible to make the change only for this context. Let me know if I should include the header/content size change as part of this issue. CC @bradenmacdonald

@bradenmacdonald
Copy link
Contributor

@rpenido Yes please include it with this issue. Thanks.

@rpenido
Copy link
Contributor

rpenido commented Oct 3, 2024

@jmakowski1123 @lizc577 @sdaitzman @marcotuts This is ready for AC testing on the sandbox.

@jmakowski1123
Copy link
Author

This looks ok to my non-UI eyes

@jmakowski1123 jmakowski1123 closed this as completed by moving to Done in Libraries Overhaul Oct 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

No branches or pull requests

4 participants