Plots2: New front page design!

[jywarren]

After a LOT of design work, we've settled on a new design for our front page! It incorporates a lot from our new Style Guide, but also with a lot of input from @ebarry @steviepubliclab on our communities team at the Public Lab non-profit.

Here's the mockup (from our shared mockups doc):

OK, so, it breaks into three sections:

The top is very much like one of our tag pages (see https://publiclab.org/tag/water-quality), plus a 4-column pane. The 4-column area could be run from a Feature. We're still working on the final text, so let's use placeholder text for everything in this section for now.

The middle section is a set of 3 bands, each showing content from a wiki page. The title is the wiki page title, the description is the first paragraph of the wiki page, and people are not quite decided yet -- so we can leave them off in the first implementation. We should fetch these as the most recently 3 pages bearing the tag "front-page" (at least for now).

The bottom is a set of columns showing a wide range of topics (tags). This could be a second Feature (https://github.com/publiclab/plots2/blob/master/doc/DATA_MODEL.md#features).

So this needs breaking up, and we should do it as a shadow page, I think, before we're ready to publish it -- so at, maybe, /front-shadow?

@CleverFool77 @gautamig54 what do you think of this? Would you be interested in trying to implement this new design or are you pretty busy at the end of this month?

Thank you!

[CleverFool77]

Sure @jywarren This looks great. We can go for it I guess !! Should I break it up in parts ? This design is for home page right ?

[jywarren]

That's right! And yes, we can break it up. Actually now that I think about
it, the list of topics was intended to go into the footer, actually! So we
could just add that portion to the footer feature that's already on the
site. What do you think?

On Tue, Aug 20, 2019 at 7:09 AM Lekhika Dugtal [e-mail]
wrote:

Sure @jywarren https://github.com/jywarren This looks great. We can go
for it I guess !! Should I break it up in parts ? This design is for home
page right ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AAAF6J4KFMQEZGIHWRWEKHDQFPGFFA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4V5EWQ#issuecomment-522965594,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6J3Q4WZB4CGLEXRWLHDQFPGFFANCNFSM4INE2GTQ
.

[gautamig54]

Sure. Should I make a new issue for it adding in the footer?

On Tue, Aug 20, 2019, 21:27 Jeffrey Warren [e-mail] wrote:

That's right! And yes, we can break it up. Actually now that I think about
it, the list of topics was intended to go into the footer, actually! So we
could just add that portion to the footer feature that's already on the
site. What do you think?

On Tue, Aug 20, 2019 at 7:09 AM Lekhika Dugtal [e-mail]
wrote:

Sure @jywarren https://github.com/jywarren This looks great. We can go
for it I guess !! Should I break it up in parts ? This design is for home
page right ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AAAF6J4KFMQEZGIHWRWEKHDQFPGFFA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4V5EWQ#issuecomment-522965594
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AAAF6J3Q4WZB4CGLEXRWLHDQFPGFFANCNFSM4INE2GTQ

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AINQWIMDRJCNI3N2YYOCTMDQFQH5BA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4WY6WI#issuecomment-523079513,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AINQWIIUOZ3DM6LDPTKYMYTQFQH5BANCNFSM4INE2GTQ
.

[jywarren]

Sure, and copy in the screenshot? I think it'll be pretty simple HTML and
we can share the HTML in the issue, then paste it into the live site
feature. How does that sound?

On Tue, Aug 20, 2019 at 1:15 PM Gautami Gupta [e-mail]
wrote:

Sure. Should I make a new issue for it adding in the footer?

On Tue, Aug 20, 2019, 21:27 Jeffrey Warren [e-mail]
wrote:

That's right! And yes, we can break it up. Actually now that I think
about
it, the list of topics was intended to go into the footer, actually! So
we
could just add that portion to the footer feature that's already on the
site. What do you think?

On Tue, Aug 20, 2019 at 7:09 AM Lekhika Dugtal <[email protected]

wrote:

Sure @jywarren https://github.com/jywarren This looks great. We can
go
for it I guess !! Should I break it up in parts ? This design is for
home
page right ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<

https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AAAF6J4KFMQEZGIHWRWEKHDQFPGFFA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4V5EWQ#issuecomment-522965594

,
or mute the thread
<

https://github.com/notifications/unsubscribe-auth/AAAF6J3Q4WZB4CGLEXRWLHDQFPGFFANCNFSM4INE2GTQ
>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AINQWIMDRJCNI3N2YYOCTMDQFQH5BA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4WY6WI#issuecomment-523079513
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AINQWIIUOZ3DM6LDPTKYMYTQFQH5BANCNFSM4INE2GTQ

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AAAF6JZ7BFEYYBD333PYMBTQFQRAXA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4XANZQ#issuecomment-523110118,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6J3WKUPOLTIFMAYC7FLQFQRAXANCNFSM4INE2GTQ
.

[gautamig54]

Sounds great!

On Tue, Aug 20, 2019, 22:55 Jeffrey Warren [e-mail] wrote:

Sure, and copy in the screenshot? I think it'll be pretty simple HTML and
we can share the HTML in the issue, then paste it into the live site
feature. How does that sound?

On Tue, Aug 20, 2019 at 1:15 PM Gautami Gupta [e-mail]
wrote:

Sure. Should I make a new issue for it adding in the footer?

On Tue, Aug 20, 2019, 21:27 Jeffrey Warren [e-mail]
wrote:

That's right! And yes, we can break it up. Actually now that I think
about
it, the list of topics was intended to go into the footer, actually! So
we
could just add that portion to the footer feature that's already on the
site. What do you think?

On Tue, Aug 20, 2019 at 7:09 AM Lekhika Dugtal <
[email protected]

wrote:

Sure @jywarren https://github.com/jywarren This looks great. We
can
go
for it I guess !! Should I break it up in parts ? This design is for
home
page right ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<

https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AAAF6J4KFMQEZGIHWRWEKHDQFPGFFA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4V5EWQ#issuecomment-522965594

,
or mute the thread
<

https://github.com/notifications/unsubscribe-auth/AAAF6J3Q4WZB4CGLEXRWLHDQFPGFFANCNFSM4INE2GTQ

>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<

https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AINQWIMDRJCNI3N2YYOCTMDQFQH5BA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4WY6WI#issuecomment-523079513

,
or mute the thread
<

https://github.com/notifications/unsubscribe-auth/AINQWIIUOZ3DM6LDPTKYMYTQFQH5BANCNFSM4INE2GTQ
>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AAAF6JZ7BFEYYBD333PYMBTQFQRAXA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4XANZQ#issuecomment-523110118
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AAAF6J3WKUPOLTIFMAYC7FLQFQRAXANCNFSM4INE2GTQ

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AINQWINGMV76Q3TU5VTO64TQFQSIXA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4XBNPA#issuecomment-523114172,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AINQWIKOKXEGL3E2V5G74IDQFQSIXANCNFSM4INE2GTQ
.

[CleverFool77]

Hi @jywarren How are we supposed to do from third to fifth sections ? Are they default data to be written in code ?
And If no one took the first section, then I would like to start off with it.
Thanks !!

[gautamig54]

Hi @jywarren How are we supposed to do from third to fifth sections ? Are they default data to be written in code ?

I think it might be added as a feature. Hi @CleverFool77! I am half way there in the first part.

[jywarren]

Actually we are aiming for these to be wiki pages, and to develop a template for them. The idea could be for wiki pages that bear a specific tag, perhaps using Tag.find_pages(tagname)?

https://github.com/publiclab/plots2/blob/60f6eb5de7e99e835c3ca5b2c180d80117df0e84/app/models/tag.rb#L129

The tagname could be front-page maybe, for now. Or featured. find_pages will sort by node_revisions.timestamp DESC automatically, so it's possible we want to override and use the timestamp of the tag?

[CleverFool77]

Hi @gautamig54 If you are halfway on first part , then should i go for second parts onward ?

[gautamig54]

Sure @CleverFool77 !

[CleverFool77]

Hi @jywarren I wanted to ask that what do we have add in feature, feature2 till feature4 of second section ? For now its just a default icon and default data for template in draft design.

[jywarren]

Yes, actually let's make that whole section into a feature. we are still working on the text for that!

[gautamig54]

Hi @jywarren @CleverFool77 Are we making the whole of front page as a feature?

[CleverFool77]

It is indeed a feature I guess. 🤔 Right

On Fri, 30 Aug 2019, 13:23 Gautami Gupta, [e-mail] wrote:

Hi @jywarren https://github.com/jywarren @CleverFool77
https://github.com/CleverFool77 Are we making the whole of front page
as a feature?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AGLS6SQGQCXXQBR5O3BJTXLQHDGY7A5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5Q35OA#issuecomment-526499512,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGLS6SV5MUMQOTBXIMHIKVLQHDGY7ANCNFSM4INE2GTQ
.

[gautamig54]

We were suppose to make a shadow page right?
Should I add the first portion as a shadow page and open a PR?

On Fri, Aug 30, 2019, 14:14 Lekhika Dugtal [e-mail] wrote:

It is indeed a feature I guess. 🤔 Right

On Fri, 30 Aug 2019, 13:23 Gautami Gupta, [e-mail]
wrote:

Hi @jywarren https://github.com/jywarren @CleverFool77
https://github.com/CleverFool77 Are we making the whole of front page
as a feature?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AGLS6SQGQCXXQBR5O3BJTXLQHDGY7A5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5Q35OA#issuecomment-526499512
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AGLS6SV5MUMQOTBXIMHIKVLQHDGY7ANCNFSM4INE2GTQ

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AINQWIJGYL5UFPG6EDLCPH3QHDMYBA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5RAF2A#issuecomment-526516968,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AINQWIM67AJOJD7FWH763H3QHDMYBANCNFSM4INE2GTQ
.

[CleverFool77]

Hi @gautamig54 This is the feature I guess. So we have to share it in gist
like you did it in footer.
Thanks !!

On Fri, Aug 30, 2019 at 5:07 PM Gautami Gupta [e-mail]
wrote:

We were suppose to make a shadow page right?
Should I add the first portion as a shadow page and open a PR?

On Fri, Aug 30, 2019, 14:14 Lekhika Dugtal [e-mail]
wrote:

It is indeed a feature I guess. 🤔 Right

On Fri, 30 Aug 2019, 13:23 Gautami Gupta, [e-mail]
wrote:

Hi @jywarren https://github.com/jywarren @CleverFool77
https://github.com/CleverFool77 Are we making the whole of front
page
as a feature?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<

https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AGLS6SQGQCXXQBR5O3BJTXLQHDGY7A5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5Q35OA#issuecomment-526499512

,
or mute the thread
<

https://github.com/notifications/unsubscribe-auth/AGLS6SV5MUMQOTBXIMHIKVLQHDGY7ANCNFSM4INE2GTQ
>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AINQWIJGYL5UFPG6EDLCPH3QHDMYBA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5RAF2A#issuecomment-526516968
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AINQWIM67AJOJD7FWH763H3QHDMYBANCNFSM4INE2GTQ

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AGLS6SQYWGALJUEK5GBTSDLQHEA6XA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5RM2WQ#issuecomment-526568794,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGLS6SQPV55ACSCA3EZPFVTQHEA6XANCNFSM4INE2GTQ
.

[CleverFool77]

Yes, actually let's make that whole section into a feature. we are still working on the text for that!

Hi @jywarren Should I just use some default icons then ?

[gautamig54]

Cool. I'll do that!!

On Fri, Aug 30, 2019, 17:35 Lekhika Dugtal [e-mail] wrote:

Hi @gautamig54 This is the feature I guess. So we have to share it in gist
like you did it in footer.
Thanks !!

On Fri, Aug 30, 2019 at 5:07 PM Gautami Gupta [e-mail]
wrote:

We were suppose to make a shadow page right?
Should I add the first portion as a shadow page and open a PR?

On Fri, Aug 30, 2019, 14:14 Lekhika Dugtal [e-mail]
wrote:

It is indeed a feature I guess. 🤔 Right

On Fri, 30 Aug 2019, 13:23 Gautami Gupta, [e-mail]
wrote:

Hi @jywarren https://github.com/jywarren @CleverFool77
https://github.com/CleverFool77 Are we making the whole of front
page
as a feature?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<

https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AGLS6SQGQCXXQBR5O3BJTXLQHDGY7A5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5Q35OA#issuecomment-526499512

,
or mute the thread
<

https://github.com/notifications/unsubscribe-auth/AGLS6SV5MUMQOTBXIMHIKVLQHDGY7ANCNFSM4INE2GTQ

>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<

https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AINQWIJGYL5UFPG6EDLCPH3QHDMYBA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5RAF2A#issuecomment-526516968

,
or mute the thread
<

https://github.com/notifications/unsubscribe-auth/AINQWIM67AJOJD7FWH763H3QHDMYBANCNFSM4INE2GTQ
>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AGLS6SQYWGALJUEK5GBTSDLQHEA6XA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5RM2WQ#issuecomment-526568794
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AGLS6SQPV55ACSCA3EZPFVTQHEA6XANCNFSM4INE2GTQ

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AINQWILBPFYFNWRLCJVUV5TQHEEKNA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5ROTXY#issuecomment-526576095,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AINQWIMYZ72AUB5GUK3P2RDQHEEKNANCNFSM4INE2GTQ
.

[jywarren]

So sorry! The "Community Projects" section is not a feature. But the rest is! Thank you!!!

[jywarren]

For icons, yes, sure! We will find appropriate ones in nounproject.org at a later time. Thank you!

[CleverFool77]

Cool. I'll share the gist for this.

On Fri, Aug 30, 2019 at 10:22 PM Jeffrey Warren [e-mail]
wrote:

For icons, yes, sure! We will find appropriate ones in nounproject.org at
a later time. Thank you!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/6155?email_source=notifications&email_token=AGLS6SXAWP234GGL77SHI4DQHFF6BA5CNFSM4INE2GT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5SGFOI#issuecomment-526672569,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGLS6SSVSCRHVN32333NAS3QHFF6BANCNFSM4INE2GTQ
.

[gautamig54]

I have implemented the first part. The screenshot is as follows :

Link to the gist :https://gist.github.com/gautamig54/fea9094b40c72ab16a805d17a15d50e6

[gautamig54]

Hi @jywarren! What projects are to be shown in community projects? Are we not adding it as a feature?

[jywarren]

Hi, check out my comment above about this! I think we can code it up pretty easily, not in a feature: https://github.com/publiclab/plots2/issues/6155#issuecomment-524927240

Thank you!

[discombobulateme]

Hello all :) I'm a current Outreachy applicant, but also quite fan of PublicLab project. I'm am also currently renewing PyLadies Berlin design and StyleGuide with special attention to accessibility. I took a look at your StyleGuide proposition and found those are super good points to work on design, but missed some accessibility guidelines. Is there something I could do module-contribute in this matter?

[NitinBhasneria]

@jywarren Is there some more task left for this issue. If yes please tell and assign them to me.

[stale[bot]]

Hi :smile:, this issue has been automatically marked as stale because it has not had recent activity. Don't worry you can continue to work on this and ask @publiclab/reviewers to add "work in progress" label :tada: . Otherwise, it will be closed if no further activity occurs in 5 days -- but you can always re-open it if you like! :100: Thank you for your contributions :raised_hands: :balloon:.

[ebarry]

I think this issue has actually been completely resolved, @jywarren is it safe to close?