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

New layout #1204

Merged
merged 3 commits into from
Oct 18, 2023
Merged

New layout #1204

merged 3 commits into from
Oct 18, 2023

Conversation

yndajas
Copy link
Member

@yndajas yndajas commented Oct 6, 2023

Closes #1199
Closes #1142

See those issues for more context

Summary of changes

On large screens:

  • the top menu and contribution footer are now constrained width, in line with the main navigation menu
  • the main content of the page is now full height, giving it more space
  • the main navigation menu is restyled to make it easier to scan: reduced font weight (also on small screens); list item indicator (a style taken from our main site's impact report); no second line indent

On all screen sizes:

  • index pages no longer include the 'Contact dxw' link, but this still appears in the main navigation menu

Previews

Interactive

Available at https://deploy-preview-1204--laughing-payne-b9fbd2.netlify.app

Video

Screen.Recording.2023-10-16.at.21.08.30.mov

@netlify
Copy link

netlify bot commented Oct 6, 2023

Deploy Preview for laughing-payne-b9fbd2 ready!

Name Link
🔨 Latest commit b8af08a
🔍 Latest deploy log https://app.netlify.com/sites/laughing-payne-b9fbd2/deploys/652fa3f2b11aae00082bbf42
😎 Deploy Preview https://deploy-preview-1204--laughing-payne-b9fbd2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@yndajas yndajas force-pushed the new-layout branch 2 times, most recently from 694022a to a6c6b50 Compare October 16, 2023 19:02
@yndajas yndajas changed the title WIP new layout New layout Oct 16, 2023
@yndajas yndajas changed the base branch from main to add-stylelint October 16, 2023 19:02
@yndajas yndajas marked this pull request as ready for review October 16, 2023 20:13
@yndajas yndajas force-pushed the new-layout branch 3 times, most recently from 18b9e57 to 8d7dd8a Compare October 17, 2023 09:49
@yndajas yndajas requested a review from jdudley1123 October 17, 2023 09:49
Base automatically changed from add-stylelint to main October 17, 2023 13:53
Copy link
Member

@jdudley1123 jdudley1123 left a comment

Choose a reason for hiding this comment

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

This is a big improvement, the navigation is much more readable!

@@ -13,9 +13,9 @@
{% endif %}
{% endif %}

<footer class="contribute" data-proofer-ignore>
<a href="/admin/#/collections/{{ collection_name }}/entries/{{ entry_name }}">Edit this page</a>
<div class="contribute" data-proofer-ignore>
Copy link
Member

Choose a reason for hiding this comment

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

Is the change from <footer> to <div> a semantic change or just a styling one?

Copy link
Member Author

@yndajas yndajas Oct 17, 2023

Choose a reason for hiding this comment

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

Semantic - the large screen layout is now horizontal, so I'm considering the left side the header and right main. On small screens the contribute section isn't shown. Not sure whether this is good practice though?

Copy link
Member Author

Choose a reason for hiding this comment

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

On a stylistic note, it would actually work fine if it was still a footer given the fixed positioning. I'm going back and forth on whether it should live in the header, main, or footer semantically 🤔

Constrain the nav and contribute element to the same width as the
related content menu, allowing the main article to stretch the full
height of the viewport
- Reduce the font weight
- Add the dxw 'D' as a list item indicator (excluding the back link),
  which is a style adopted from our main site's [impact report][1]
- Remove the second line indent

[1]: https://www.dxw.com/dxw-impact
Index pages (i.e. pages which have children but not their own content)
include the same partial as the nav menu. This menu includes a 'Contact
dxw' link, which looks a little out of place in the body of the index
page. This makes it so that the 'Contact dxw' link will only appear in
the nav, not the list of child pages on index pages
@yndajas yndajas merged commit ee75fb7 into main Oct 18, 2023
5 checks passed
@yndajas yndajas deleted the new-layout branch October 18, 2023 13:30
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.

Optimise real estate Indentation of multi-line entries in menu
2 participants