Implement HTML & CSS for new homepage

[sssoz]

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]

Amazing, all these changes seem fine to me and I'm glad you made them. 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 :) Joseph McArthur Assistant Director: Right to Research Coalition ( http://righttoresearch.org ) Director / Founder: Open Access Button ( http://openaccessbutton.org ) Twitter: @Mcarthur_Joe ( https://twitter.com/Mcarthur_Joe ) Skype: joseph_mcarthur

…

On Mon, Aug 24, 2020 at 7:12 PM, Sophy < ***@***.*** > wrote: Based on the approved mockups in Figma ( https://www.figma.com/proto/m45GZHBnUOZMdpQWTJrGL5/SPARC-Infra?node-id=453%3A152&viewport=-12098%2C801%2C0.5746687650680542&scaling=min-zoom ). https:/ / test. infrastructure. sparcopen. org/ ( https://test.infrastructure.sparcopen.org/ ) @ JosephMcArthur ( https://github.com/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 * 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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub ( #97 ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/ABFZMZ7IYBBBI7YDHCOI57TSCKUP5ANCNFSM4QJYWU3A ).

[JosephMcArthur]

Ah, and the latest analysis links don't work. Joseph McArthur Assistant Director: Right to Research Coalition ( http://righttoresearch.org ) Director / Founder: Open Access Button ( http://openaccessbutton.org ) Twitter: @Mcarthur_Joe ( https://twitter.com/Mcarthur_Joe ) Skype: joseph_mcarthur

…

On Mon, Aug 24, 2020 at 7:21 PM, Joseph Mcarthur < ***@***.*** > wrote: Amazing, all these changes seem fine to me and I'm glad you made them. 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 :) Joseph McArthur Assistant Director: Right to Research Coalition ( http://righttoresearch.org ) Director / Founder: Open Access Button ( http://openaccessbutton.org ) Twitter: @ Mcarthur_Joe ( https://twitter.com/Mcarthur_Joe ) Skype: joseph_mcarthur On Mon, Aug 24, 2020 at 7:12 PM, Sophy < notifications@ github. com ( ***@***.*** ) > wrote: > > > Based on the approved mockups in Figma ( > https://www.figma.com/proto/m45GZHBnUOZMdpQWTJrGL5/SPARC-Infra?node-id=453%3A152&viewport=-12098%2C801%2C0.5746687650680542&scaling=min-zoom > ). > > > > https:/ / test. infrastructure. sparcopen. org/ ( > https://test.infrastructure.sparcopen.org/ ) > > > > @ JosephMcArthur ( https://github.com/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 > * 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. > > > > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub ( > #97 ) , or unsubscribe ( > https://github.com/notifications/unsubscribe-auth/ABFZMZ7IYBBBI7YDHCOI57TSCKUP5ANCNFSM4QJYWU3A > ). > > >

[sssoz]

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]

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

Fixed

[JosephMcArthur]

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.

[sssoz]

@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]

Haha great thanks :) Joseph McArthur Assistant Director: Right to Research Coalition ( http://righttoresearch.org ) Director / Founder: Open Access Button ( http://openaccessbutton.org ) Twitter: @Mcarthur_Joe ( https://twitter.com/Mcarthur_Joe ) Skype: joseph_mcarthur

…

On Mon, Aug 24, 2020 at 10:14 PM, Sophy < ***@***.*** > wrote: @ JosephMcArthur ( https://github.com/JosephMcArthur ) I ended up moving the quotes into a data file, it was very quick! See 68c86fb ( 68c86fb ) if you want to update it (it put in some placeholder data for now) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub ( #97 (comment) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/ABFZMZ7M7VUPFBZ32TSJLELSCLJZVANCNFSM4QJYWU3A ).