Adjust grid in simple item view#4720
Conversation
alanorth
added
quick win
|
On second thought, perhaps the previous grid was doing this deliberately to optimize the line length for readability? Many studies show a "sweet spot" being:
We can set the CSS |
|
Heh, there's a reason that the old fixed-pitch "dumb terminal" had an 80-column display, and it wasn't just because tab cards were that wide. |
|
Hi @alanorth , |
|
Thanks @EikLoe. I just realized that the simple publication (entity) view uses a strange grid as well: 4 + 7! So that, in addition to the simple untyped-item view using 4+6, is another weird grid. I think we should do something here too. I think we should use the correct the grid and apply a max-width of 75ch. |
|
Yes, I agree with you!
|
alanorth
force-pushed
the
simple-item-view
branch
from
59899b1 to
1f2af17
Compare
alanorth
changed the title
alanorth
removed
port to dspace-7_x
|
I updated this to fix the entity item pages as well. I removed the change to adjust columns (3+9) on large displays for now, though I think that would be an improvement to DSpace's out-of-the-box user interface. And I have not figured out how to apply a max-width of 75 characters yet. I also think it would be good (in another pull request) to increase the default thumbnail size. I also removed the port to previous branches because I thought it may be too much of a change. What do you think? |
|
@EikLoe today I realized that the search result list uses a grid of I will update the PR to this effect, and I will add a max-width of 75 on item page field components. Edit: I tried to get the max-width to apply to the |
The Bootstrap grid is composed of 12 columns, but we are not using the entire grid, which could lead to unexpected stacking depending on the viewport size. This also adjusts the columns to be consist- ent with the sizing use by the search results page (3+9).
alanorth
force-pushed
the
simple-item-view
branch
2 times, most recently
from
974f09e to
42c2617
Compare
EikLoe
left a comment
EikLoe
left a comment
There was a problem hiding this comment.
I would agree. The 3-9 col system sounds reasonable to me.
alanorth
force-pushed
the
simple-item-view
branch
from
42c2617 to
6f515fa
Compare
|
Thanks @EikLoe. I tried your method and it works—I've updated the PR. |
EikLoe
left a comment
EikLoe
left a comment
There was a problem hiding this comment.
Look good as far as can see, I just saw, you still had the 4-8 schema in the org-unit and person item-page.
github-project-automation
Bot
moved this from 🙋 Needs Reviewers Assigned
to 👀 Under Review
in DSpace 10.0 Release
The Bootstrap grid is composed of 12 columns, but we are not using the entire grid, which could lead to unexpected stacking depending on the viewport size. This also adjusts the columns to be consist- ent with the sizing use by the search results page (3+9).
Set max-width of item-page-field components to 75 characters. This is in line with some best practices regarding readability, though may need to be adjusted in the future. See the following recommendations: - 50 to 75 characters: https://baymard.com/blog/line-length-readability - 60 to 80 characters: https://pimpmytype.com/line-length-line-height/ - 50 to 75 characters: https://www.uxpin.com/studio/blog/optimal-line-length-for-readability/ - 50 to 75 characters: https://medium.com/@wblekhoa/talk-aboutthe-optimal-length-of-text-in-ux-ui-525e689f0b71 - Less than 80 characters: https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html
alanorth
force-pushed
the
simple-item-view
branch
from
6f515fa to
2fdb04d
Compare
Ah yes thanks, I didn't notice those. Updated now. |
|
Hi @alanorth, |
4 participants
Description
The Bootstrap grid is composed of 12 columns and several of our item pages are not using the entire grid on medium displays and up, for example 4+6 (10) on the untyped item display and 4+7 (11) on publication entity pages. To make things even more confusing, our search results pages use a grid layout of 3+9!
This adjusts all item views to use 3+9 to be consistent with the search result lists and to allow more space to be used for things like abstracts and citations. To improve readability, I have included a change to limit the max-width of the item page fields to 75ch.
Before and after screenshots on an "xl" viewport according to Bootstrap (this is a 14" laptop screen).
Before
After
I tested with this item on DSpace sandbox: https://sandbox.dspace.org/items/b1689b37-5002-4646-b85f-4c5070d208a3
Instructions for Reviewers
Please add a more detailed description of the changes made by your PR. At a minimum, providing a bulleted list of changes in your PR is helpful to reviewers.
List of changes in this PR:
Include guidance for how to test or review your PR. This may include: steps to reproduce a bug, screenshots or description of a new feature, or reasons behind specific changes.
Checklist
This checklist provides a reminder of what we are going to look for when reviewing your PR. You do not need to complete this checklist prior creating your PR (draft PRs are always welcome).
However, reviewers may request that you complete any actions in this list if you have not done so. If you are unsure about an item in the checklist, don't hesitate to ask. We're here to help!
mainbranch of code (unless it is a backport or is fixing an issue specific to an older branch).npm run lintnpm run check-circ-deps)package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.