sparcopen/infrastructure

Implement HTML & CSS for new homepage

Closed this issue · 7 comments

sssoz commented

Based on the approved mockups in Figma.

https://test.infrastructure.sparcopen.org/

@JosephMcArthur: some of the adjustments that were made (mobile considerations, or other things I changed because it ended up looking clearer or more logical in the browser):

  • Reports: hovering (on desktop) over the cards highlights the title and nudges people to click it (HTML thread); the bottom part, with additional file formats/access to summary is black because I considered those to be secondary actions
  • Reports: re: the bottom part of the card / secondary actions, keep in mind that those won't be available to users on mobile (they will have to tap through to the thread to download the PDF if they want it on their phone)
  • Quotes: to keep it consistent with other blockquotes in posts, I had to place the portrait above. Trying to place it to the left using different methods (float, column/grid system, absolute positioning...) just didn’t look good and would've required additional CSS for something so minor
  • Quotes: you will have to update that in the homepage HTML, as you were already planning on doing (though I would've preferred an external data file, didn't think it was worth the time to do that for now unless you want me to)
  • Topics (interventions/companies/challenges): those lists are generated from the content of your _topics/ directory files. I’ve added "order" to the frontmatter to determine the order in which they appear in the list
  • Latest analysis: I know you wanted to do it manually... but I felt it was better to keep it consistent and easier to manage -- it is also generated from posts which have homepage_latest: true in the frontmatter. they are displayed in chronological order.
  • Latest analysis: as you can see, I opted for six posts... the three on their own were very sparse and way too large when each item took up a whole row.
  • As highlighted...: all logos on one row: displaying them in two rows made the layout look a bit wonky and each logo ended up being way too large. looks better on mobile as well (3/row). I didn’t link each logo to its homepage, but I can do that if you want.
  • About: not sure about these: I think we could re-use the component/layout with which we display "About the authors" boxes in individual posts.
JosephMcArthur commented
JosephMcArthur commented
sssoz commented

On full report / exec summary links, when you hoover over HTML / PDF do you think having the link turn red would make sense? All others do, and I sorta expected it to as a user, although I think it's clear it's a link from the text :)

I did try that actually -- but I found the red text to look too much like a warning/alert of some sort. Don’t think it needs to look like the rest of the links since it’s in a different type of container.

sssoz commented

Ah, and the latest analysis links don't work.

Fixed

JosephMcArthur commented

On full report / exec summary links, when you hoover over HTML / PDF do you think having the link turn red would make sense? All others do, and I sorta expected it to as a user, although I think it's clear it's a link from the text :)

I did try that actually -- but I found the red text to look too much like a warning/alert of some sort. Don’t think it needs to look like the rest of the links since it’s in a different type of container.

fair enough, I can see how it could come off like that. Thanks for trying it.

  • 👍1
sssoz commented

@JosephMcArthur I ended up moving the quotes into a data file, it was very quick! See 68c86fb if you want to update it (it put in some placeholder data for now)

JosephMcArthur commented