randimays
commented
1 year ago Great work Jerry! I have some observations. I have screenshots for a desktop (~1240px), tablet/medium (768px) and tiny mobile (320px). Many of the fixes should be checked browser widths and all of the screens, though :)
The fonts are not rendering correctly on my browser; please ignore.
When I use "DSC," I'm referring to https://digitalservicescoalition.org
Header and footer
- [x] 1. The underline under the top navigation should not have right margin. DSC
- [x] 2. Spacing between the navigation items should be controlled by either padding or margin here. Right now, it's picking up both which is causing more space to the left of "Home." Kind
- [x] 3. The mobile menu items need less vertical space between them, and once the margins are adjusted from item 2 in this list it should help with the spacing to the left. It's hard to tell from these screenshots, but there's more space to the left of the menu items in the Kind build than in the DSC. DSC
- [ ] 4. Should the footer hamburger be working on mobile? It didn't do anything when I clicked it.
- [x] 5. Note the placement of the hamburger icon with `Our code is open source` across breakpoints. Seen here at 768px width. DSC
- [x] 6. Note the placement of the triangle on the Mission page. It should be overlapped by the navigation items. DSC
- [ ] 7. It seems like the mobile navigation should overlap the triangles when it is open. DSC
Home page
- [ ] 1. The scale of the illustration is larger on our build. Below are screenshots of equal screen width (1250px). We need to scale down the illustration. DSC
- [ ] 2. Our illustration seems less vibrant than the one on DSC. It's like that in the source image in the repo. Can we replace? DSC
- [x] 3. We need more line-height on the blue bar text. Note the vertical spacing between the "e" and the "h." This may be an artifact of my browser not loading fonts, though. DSC
- [ ] 4. If you scroll down the DSC home page, you'll notice the big gray triangle slides up the page as you go down. Are we implementing this?
- [x] 5. The `What does digital transformation look like?` section and `Stronger together.` section should have visual overlap. The positioning needs some adjustment. Note that the top and bottom part of the purple triangle are visible in DSC. DSC
- [ ] 6. The blueish image at the bottom of the page needs some adjustment for cropping. DSC
- [ ] 7. On mobile, there is a white background behind all the text. DSC
- [ ] 8. The illustration scale on mobile is quite a bit smaller than we're showing it. DSC
- [x] 10. The `What does digital transformation look like?` section needs its text and image flipped. There's also too much empty space under the triangle. DSC
- [x] 11. The photo at the bottom is doing a parallax effect (scrolling within itself). The photo is shown too large for its frame and needs to be scaled down to fit within the viewport. We also need more space between that bottom image and the footer. DSC
- [x] 12. The `Stronger together` section needs less padding on the bottom. DSC
Mission page
- [ ] 1. In the top section, the light blue triangle on the right side is already under the photo triangle in the Kind build. This triangle should move like the one on the home page. Make sure to check the medium width (768px) as well. DSC
- [x] 2. The purple heading text ("We're focused on the long game...") is smaller than it should be. DSC
- [x] 3. The line width of the paragraph text should wrap under the photo triangle. DSC
- [x] 4. The padding on the Mar 12 block is too large. On the `Read our 2022-2025...` block, the padding on the left is too big, while the padding on the top and bottom is too small. On the right at the end of the line, it should be a longer line width (same issue as paragraph text) so it doesn't wrap, and has space to the right. DSC
- [ ] 5. Note the triangle positioning and spacing from the bottom of the triangle to the purple header. DSC
- [x] 6. There should be a white margin out to the right of the `As thought leaders...` Though maybe this is a bug on the DSC side. It also pushes the footer content to the left. DSC
Story page
- [x] 1. The triangle positioning needs less space from the top navigation. DSC
- [x] 2. The `Our community` section: - Community members are ordered from left to right in the Kind build rather than top to bottom. Note the DSC version order on the left column goes 540, Ad Hoc, Agile6, etc. and the Kind version goes 540, Agile6, AWL. - Some outdated logos in here - Logos are also rendering smaller than they should - Note the positioning of the gray triangle behind this section. It starts too low - Where the triangle ends, there should not be a gap between the two quote sections vertically DSC - logo size
DSC - triangle positioning
Kind - triangle positioning
- [x] 3. There should be less vertical spacing between the text lines under each staff member DSC
- [x] 4. Note the spacing between photo rows should be smaller. And the photos themselves should be 300x324px. Right now they are square at 333px. DSC
- [x] 5. The spacing under `Founding member` and the logos/quotes below should be taller. Also note triangle positioning here. And thank you for making the logos visible! The DSC's logos are way too small on mobile. But, we could benefit from less space out to the left of the logos so we can make the text span wider. DSC
- [ ] 6. The triangle positioning on tablet needs some adjustment. DSC
Membership page
- [x] 1. The spacing between headings and text needs to be expanded. Also note that the alignment of the text is not left-aligned (although I do think this is cleaner). Instead, new lines are flush with the bullet. DSC
- [x] 2. This page seems to have too much extra margin on the left side. DSC
- [x] 3. Same issues with the blueish image at the bottom of this page as in the home page. Cropping / sizing
- [x] 4. Need some line-height adjustment on the purple header DSC
- [x] 5. The margin on the left and right side of the screen (`body` element or container) should be a bit narrower.
- [x] 6. Check spacing after the unordered lists; it should be taller DSC
netlify[bot]
SeaJerry
I appreciate your time in going through this PR. Any feedback or insights would be helpful to me. Please feel free to share your thoughts openly; I'm here to learn and improve. I'm eager to soak up as much as possible about PR best practices and front-end engineering from all of you. Your guidance would mean a lot to me. Thanks again!
For some context, the original Digital Services Coalition website originally used Bootstrap V4 and Vue.js, When we re-platform the site, we decided to switch to TailwindCSS V3 and Eleventy.
This PR is quite extensive, and I know there are better practices now in retrospect, but I'm still determining how to split them into smaller PRs without potentially breaking the code base.
Currently, this PR is addressing the following issues
The views should be fully responsive with mobile, tablet, and desktop.
Below is a video of the responsiveness of each page's mobile, tablet, and desktop views.
Digital Services Coalition Responsive View- 15 August 2023 - Watch Video
Concerns:
atag that downloads on the membership view with markdown. @gracexu94, will this affect the markdown file widget in DecapCMS?