Plots2: UI Improvements Planning Issue : Individual tags page

I had a few doubts regarding the design.
Not all tags have a wiki page due to which there will be no background image. What should be the design in that case?
Where should we add the related tags section?
Also, I would like to suggest to add the list of sub-pages for a parent tag here on its main page itself.
Do we need to make this as a shadow page as well??

@jywarren @CleverFool77 @gauravano @SidharthBansal
Let's get started on this. Thanks!

Ohk. Seems like the Issues ave been divided here. So I'll close the earlier issue that I made then.
Thanks !!

The new style guide design looks good but there are many features that we are yet to place in it Like gautami mentioned in the comment.

I had a few doubts regarding the design.
Not all tags have a wiki page due to which there will be no background image. What should be the design in that case?
Where should we add the related tags section?
Also, I would like to suggest to add the list of sub-pages for a parent tag here on its main page itself.
Do we need to make this as a shadow page as well??

@CleverFool77 I have assigned the tasks to us. You can change it according to your preference. Thanks.
And let's wait for @jywarren comment on the doubts we have.

Hi @gautamig54 do the assignment alternativily. So that it's easier to work and it's faster.

I'll do it. I will also write the detailed tasks and divide accordingly.

I have updated the issue.
@CleverFool77 I was thinking whether we really need to sort the activity using name or people. I mean we are already dividing the tag's activity into types like wikis, questions and notes. We can utilize this space for displaying the related tags.
What do you say?

I'm not sure regarding sorting @gautamig54 . But that yeah your point does makes sense. As we already distinction based on wikis, questions and notes.
Lets wait a bit for @jywarren.
Hi @gautamig54 I added nearby user search option to map on add map part. As Both of them are related and addition of map looked very small task.
Thanks !!

Hi @gautamig54 Are we going to do this in shadow route or in similar route.
According to me, The new UI won't break everything as it was happening in Questions page. As the new UI was totally different from earlier. So we needed shadow route before to test.
But here the new design is just a refined and better way of earlier. The position is almost same with some changes to nav tabs to dropdown. The different UI cards. That's it.
So should we do this in shadow route or do changes above earlier one ?

I am not sure about the shadow page. We are dividing the page into 3 sections. You think that might affect the current page?

As you can see, the page right now is already divided into two sections. Just divide the second section into columns for cards and maps.
col-10 and col-2 maybe ?
https://publiclab.org/tag/air-quality
What do you say ?
And we can have sorting by views and likes instead of places ?

Hi @gautamig54 Lets wait for @jywarren regarding the shadow or original route.

Maybe we can manage on the original page itself. Let's wait for @jywarren's views.

I think given the state of the tag page now (pretty bad) we might as well do this without a shadow page, and that might mean we do things that are going to disrupt, later in the process (like we try to order it so that the things we do first will be an improvement on the current page, rather than do something that'll need a fix later on and leave the page in a broken state) Make sense?

Not all tags have a wiki page due to which there will be no background image. What should be the design in that case?

I think we can make the background grey, unless you can think of something else. There are examples of pages in the style guide with no lead image, but then the top box would appear differently. So, let's go with light grey? What do you think?

As for the text if there's no wiki page, we might have text like this page has no summary; _click here to add one_ by making a wiki page -- this may need some more refinement but does that make any sense? Or should it say more simply Add summary but the longer text as a tooltip?

Where should we add the related tags section?

Perhaps this could go where See people near is in this screenshot? The Style guide will have to be refined to make the various uses of this space more clear, perhaps.

Also, I would like to suggest to add the list of sub-pages for a parent tag here on its main page itself.

Would it go in the left sidebar?

sorting options

In default view we are seeing all Notes, Questions and Wikis mixed, sorted by recent updates. The sorting area would be different for different pages, so perhaps here we'd offer created | updated | likes ? What about commented? we can show 2-3, and have a more with more options added if we need?

Exciting!!!!! This will be great. We can ask people for input as we go and the new auto screenshots feature can also let us work on this a lot in a set of PRs even before merging. In fact, it should be possible for PRs to be opened against other PR branches, so that we can see the page evolve in the screenshots before doing a larger merge... what do you think?

Or we can progressively merge PRs into the master branch. Either way. Whatever works for you all!

I think given the state of the tag page now (pretty bad) we might as well do this without a shadow page, and that might mean we do things that are going to disrupt, later in the process (like we try to order it so that the things we do first will be an improvement on the current page, rather than do something that'll need a fix later on and leave the page in a broken state) Make sense?

This is a good idea. We can start of with improvising the main image display together with the main tag card. This is more like an enhancement.

I think we can make the background grey, unless you can think of something else. There are examples of pages in the style guide with no lead image, but then the top box would appear differently. So, let's go with light grey? What do you think?

Light grey sounds good!!

Regarding the sub topics, we can add it on the sidebar. Maybe below the related tags?

Hi @gautamig54 Are you starting off with first part then ?

Yea, I am beginning with the first part

So we are not leaving any marginal space for the image?

You'll be leaving col-2 for map right ?

On Thu, Jun 13, 2019 at 11:19 PM Gautami Gupta notifications@github.com
wrote:

Yea, I am beginning with the first part

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

I was thinking of col-3 for the maps.
col -2 is also fine.

So we are not leaving any marginal space for the image?

Let' work on other understand and directly applicable parts first and till that we can discuss regarding image.

I was thinking of col-3 for the maps.

It would make activity cards way too small. Les see. how about posting both the col-2 and col-3 rough mockup. Then we'll decide ?

Sure! we can try both.
Also, Since the main layout of the website has a set marginal space, let's keep it that way only and implement. If we need to remove the space, we can do it later.

col-3 looks fine.
And the division of page looks fine?

I did not change much content on the page. It will gradually take its place as we move ahead with other tasks. Like, Tag name, its description, stats, rss, follow/unfollow will be in the main tags card which I will implement after you manage the image.

I tried adding the "related tags" area in the sidebar in the style guide:

It looks good @jywarren. We'll implement it. Thanks!

Hi @jywarren @gautamig54
Is this what we need for image absolute positioning ?
i have attached the screenshots.
Thanks !!

without wiki image

with wiki and image

with wiki but no image

This looks great @CleverFool77.
Can you try reducing the height of the image as it is covering more than half a page? What do you think?

Ahh the screenshot is of smaller part actually. Wait I'll put full screen screenshot.

This is full screen. Should I reduce the height ?

cc: @gautamig54

I think this fine. Looking great!

Cool. :+1: :+1:

@CleverFool77 @jywarren I am in the process of making the tag card. Kindly have a look and suggest changes.

Should I add the "add tag parent" option in the ellipsis menu?

That would be awesome. This is looking great! Perhaps the Subscribe button
ought to be btn-primary? i.e. blue?

On Mon, Jun 17, 2019 at 1:53 PM Gautami Gupta notifications@github.com
wrote:

Should I add the "add tag parent" option in the ellipsis menu?

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

@jywarren PR #5903 is ready for merge. After merging that, I'll position the card to the required place and publish a PR for the same. Thanks!

I guess the PR for partitioning the page into two column https://github.com/publiclab/plots2/pull/5902 by @gautamig54 is ready too. Merging this would help us in forwarding the work on following activity cards and other parts of this Issue which are dependent on this.
Thanks !!!

OK Great I'll take a look!

On Tue, Jun 18, 2019 at 12:38 PM Lekhika Dugtal notifications@github.com
wrote:

I guess the PR for partitioning the page into two column #5902
https://github.com/publiclab/plots2/pull/5902 by @gautamig54
https://github.com/gautamig54 is ready too. Merging this would help us
in forwarding the work on following activity cards and other parts of this
Issue which are dependent on this.
Thanks !!!

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

@CleverFool77 I want to help you with the activity card. I have implemented ellipsis for the two cards. Can I help you with that here as well?

@CleverFool77 I want to help you with the activity card. I have implemented ellipsis for the two cards. Can I help you with that here as well?

I seem to unable to understand ?? Regarding the activity cards. I'll surely ask you regarding problems. Is that what you mean ?

Ellipsis part doesn't seem like problem to me as of now. But yeah if I do come across any. I'll ask you for help.
Juts pushed latest changes for https://github.com/publiclab/plots2/pull/5903 in https://github.com/publiclab/plots2/pull/5903#issuecomment-503429664.
It would be great to have some review.
Thanks !!

Sure!

Hi @jywarren As we can see that the cards for questions, wiki and notes shared on all the pages are is the same code. So If I'll chnage the UI for the cards present in Individual tag page, then the UI for cards present in all pages will be changed. So should I write a make new files for the code,or rewrite over the older one. Thus allowing the changes for the card UI in dashboard and other pages also. Considering soon the dashboard UI and card will be changed again. rewriting over the older one and allowing change of card UI in all pages looks like better idea.

If we overwrite the old one, what pages would be affected? By old one, can
you name the exact file so I follow carefully? But if there's any doubt,
it's fine to make a 2nd template file, maybe marked _new or _2, which we
will replace the original with once we're totally confident.

Thank you!

On Wed, Jun 19, 2019 at 5:37 AM Lekhika Dugtal notifications@github.com
wrote:

Hi @jywarren https://github.com/jywarren As we can see that the cards
for questions, wiki and notes shared on all the pages are is the same
code. So If I'll chnage the UI for the cards present in Individual tag
page, then the UI for cards present in all pages will be changed. So should
I write a make new files for the code,or rewrite over the older one. Thus
allowing the changes for the card UI in dashboard and other pages also.
Considering soon the dashboard UI and card will be changed again. rewriting
over the older one and allowing change of card UI in all pages looks like
better idea.

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

The code for these cards is being reused everywhere. For example in dashboard then again in here. We render notes/notes and reuse it many times.

Ah, well, we could replace it... but we'd want to check how it appears
anywhere in the site. So perhaps we should get it working /completely/ in
once place, then make it appear everywhere? What do you think?

On Wed, Jun 19, 2019 at 10:46 AM Lekhika Dugtal notifications@github.com
wrote:

The code for these cards is being reused everywhere. For example in
dashboard then again in here. We render notes/notes and reuse it many
times.
[image: Screenshot from 2019-06-19 20-12-04]
https://user-images.githubusercontent.com/26685258/59775286-97404280-92ce-11e9-8e6c-079a60306535.png

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

Sure. I'll check it out first then.

Just https://github.com/publiclab/plots2/pull/5902 now? 🎉

I updated some of the checklist but probably not all -- thanks!

This is now up at https://stable.publiclab.org/tag/balloon-mapping

Hi @jywarren This looks cool

But for notes, Are these images not loaded ?

Hi jeff!! Should I work on notes card ? :thinking:

For the images, I think on stable, the images may not be pointed properly
but they should work on production. Can you look at the URL of the image
and change "stable.publiclab.org" to "publiclab.org" to see if it really
exists on production? Thanks!

On Fri, Jul 5, 2019 at 12:23 PM Lekhika Dugtal notifications@github.com
wrote:

Hi jeff!! Should I work on notes card ? 🤔

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

Should I decrease the height of note title ?

This isn't pushed to production yet I guess.

It's being pushed right now :smiley:

Hi @jywarren. I am seeing this option for "how to edit this card" in the ellipsis of the main card. I don't think I added this. Is this deliberately done?

Yes, I added that! I made a page on PublicLab.org to help explain this
feature :-)

On Mon, Jul 8, 2019 at 2:37 PM Gautami Gupta notifications@github.com
wrote:

Hi @jywarren https://github.com/jywarren. I am seeing this option for
"how to edit this card" in the ellipsis of the main card. I don't think I
added this. Is this deliberately done?

[image: Screen Shot 2019-07-09 at 12 05 10 AM]
https://user-images.githubusercontent.com/35326753/60834075-738d5f80-a1dd-11e9-87ce-a64539a2750a.png

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

I closed #5902 PR, due to many design conflicts as it got delayed. I will open a new PR for the same and other required changes.

Do we need the format toggle options in the new design or we can remove it?

I think we can remove it, thanks!

On Mon, Jul 8, 2019 at 3:27 PM Gautami Gupta notifications@github.com
wrote:

Do we need the format toggle options in the new design or we can remove it?

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

@jywarren here in the design there are a few drop-downs whose purpose I am not able to understand. Like in "Post a question", what will be there in the drop down?
The ellipsis beside the types dropdown and in the sidebar beside the "see people near"?

In Post a question I thought it might go to different types of posts. But if we implement the popup template menu shown here:

Then the dropdown there wouldn't be necessary, and we could just say Post. What do you think?

The other two, I think we can skip, since we have one in the top card. They were just other suggested places to "tuck away" or hide extra functionality!

@jywarren , So do you want a modal kind of pop up to select the template from? We can even have it as options in drop down. And yes, if we are going with giving user options to select their purpose, we have to change to "Post".

Hey @gautamig54, we can use dropdown but this design https://github.com/publiclab/plots2/issues/5890#issuecomment-509830813 looks really great, so can you try to implement it?

Hi @gautamig54 Are you working on the post button ? and using modal and all ?

Hi @CleverFool77! I have been a bit busy lately. I am working on the remaining tasks on the tags page. I will push the changes very soon.
Sorry for the delay!

Hi @gautamig54 If you want, I can do the task of Posting a Question ? What do you say ? As I can see you still have some tasks left in other pages.

What is suppose to be in the dropdown of posting a question?

Cool. You work on this, I'll start with dashboard then.
In post question dropdown, There should be a modal which would let us
choose template.
@jywarren had added one draft design for it on style guide.
Thanks !!!

On Sun, Aug 4, 2019 at 10:17 PM Gautami Gupta notifications@github.com
wrote:

What is suppose to be in the dropdown of posting a question?

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

@gauravano @aSquare14 I have a few doubts regarding the options available for the post.

• question
• story or a project. Now the story will be a post with tag as blog-submission where as a project can be a simple post. Which one to choose?
• Issue, will it be a post with tagging as issue-brief? And where is the template of an issue for I think it is a feature and not in the code.

Hi @gautamig54 First of all , I don't seem to completely understand your question though, But I'll try to explain whatever I understood.
We need to have the options like we have in our dashboard for Share your Work , In this dashboard we have options such as Notes, Wikis and Questions. etc -

In here, what we are suppossed to have is the modal for choosing between notes, qikis and questions I guess.

cc: @gauravano @aSquare14

And what you wrote about Issue/story/project and stuff - Instead doing it for Wikis Note and Questions like we have in dashboard would be good.

And Here one of the main thing to notice is that we won't have be directly posting but rather we should have tag attached for that particular tag as This is posting either Note or Question on that tag. SO You need to make sure that tag is attached.

Like this which we currently have for posting question for particular tag -

I implemented what I understood @CleverFool77. I have attached the tags and they working correctly. Except in issues I added the tag, issue-brief-tagname. I think this is how it works.
For others I did the same as you suggested.

Also, @CleverFool77 I was thinking, if we can have a separate issue for correcting the view for the mobile view or tab view. What do you think?

Hi @gautamig54 Is there need to create more issue ? we can just add this in checklist of follow up fixes and bugs. As If we'll keep on creating issues, we will have lots of issue for every bug. So its better to just checklist them in one existing issue. Cool.

Sorry to reply slowly here, but i hope it helps clarify - the original
dashboard with the dropdown of options to post is intended to be replaced
by the modal (showing /before/ redirecting to the editor, because which
editor depends on the selection made) because the modal gives us more space
to explain what the different types are for. As it is now, newcomers seeing
the dropdown may not understand easily what each "type" of post is for, so
the modal gives us some space to explain this. Could this work? The modal
could be its own partial template. We'll just want to be sure it renders
nicely in mobile.

On Thu, Aug 8, 2019 at 2:01 PM Lekhika Dugtal notifications@github.com
wrote:

Hi @gautamig54 https://github.com/gautamig54 Is there need to create
more issue ? we can just add this in checklist of follow up fixes and bugs.
As If we'll keep on creating issues, we will have lots of issue for every
bug. So its better to just checklist the in one existing issue. Cool.

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

Cool. @gautamig54 has updated this modal feature in her pr.
cc: @jywarren

I think we're almost done here too, just need to ensure sorting works! I crossed out a couple we're not doing.

@CleverFool77 were you interested in wrapping up the sorting issue, or at least breaking it out into a new issue under the same milestone that is a bit more thoroughly documented? Then we can close this out!

I believe this is almost complete, except for this issue which I'm going to link to! https://github.com/publiclab/plots2/issues/6307

Thanks all!