UI Improvements Planning Issue : Individual tags page

gautamig54 commented 5 years ago

Next we start with the implementation of individual tags page.

Checklist

[x] Divide the page into three sections(Main image and the introduction card, sidebar with map, activity cards) @gautamig54
[x] Adjust the main image and add the number of people following on to the right. @CleverFool77
[x] make an introduction card for the tag containing the subscribe and learn more options. @gautamig54
[x] Activity cards with new design of style guide @CleverFool77
[ ] ~Show map on the sidebar and people near options @gautamig54~
[ ] Sort by name, users and people following @CleverFool77 Wait a bit
[ ] ~Post a question option with dropdown @gautamig54~
[x] Implement type dropdown containing options for all, questions, wikis and notes related to the tag. @CleverFool77
[x] Add related tags @gautamig54

cc : @CleverFool77

gautamig54 commented 5 years ago

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??

gautamig54 commented 5 years ago

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

CleverFool77 commented 5 years ago

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

CleverFool77 commented 5 years ago

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??

gautamig54 commented 5 years ago

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

CleverFool77 commented 5 years ago

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

gautamig54 commented 5 years ago

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

gautamig54 commented 5 years ago

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?

CleverFool77 commented 5 years ago

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 !!

CleverFool77 commented 5 years ago

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 ?

gautamig54 commented 5 years ago

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

CleverFool77 commented 5 years ago

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 ?

CleverFool77 commented 5 years ago

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

gautamig54 commented 5 years ago

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

jywarren commented 5 years ago

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?

jywarren commented 5 years ago

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?

jywarren commented 5 years ago

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

gautamig54 commented 5 years ago

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?

CleverFool77 commented 5 years ago

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

gautamig54 commented 5 years ago

Yea, I am beginning with the first part

gautamig54 commented 5 years ago

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

CleverFool77 commented 5 years ago

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 .

gautamig54 commented 5 years ago

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

CleverFool77 commented 5 years ago

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.

CleverFool77 commented 5 years ago

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 ?

gautamig54 commented 5 years ago

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.

gautamig54 commented 5 years ago

Screen Shot 2019-06-14 at 12 13 37 AM

Screen Shot 2019-06-14 at 12 14 04 AM

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

gautamig54 commented 5 years ago

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.

jywarren commented 5 years ago

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

gautamig54 commented 5 years ago

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

CleverFool77 commented 5 years ago

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

without wiki image

Screenshot from 2019-06-14 16-23-40

with wiki and image

Screenshot from 2019-06-14 16-24-06

with wiki but no image

Screenshot from 2019-06-14 16-28-00

gautamig54 commented 5 years ago

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?

CleverFool77 commented 5 years ago

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

CleverFool77 commented 5 years ago

This is full screen. Should I reduce the height ? Screenshot from 2019-06-14 16-44-00

cc: @gautamig54

gautamig54 commented 5 years ago

I think this fine. Looking great!

CleverFool77 commented 5 years ago

Cool. :+1: :+1:

gautamig54 commented 5 years ago

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

Screen Shot 2019-06-17 at 11 21 23 PM

Screen Shot 2019-06-17 at 11 21 31 PM

gautamig54 commented 5 years ago

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

jywarren commented 5 years ago

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 .

gautamig54 commented 5 years ago

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

CleverFool77 commented 5 years ago

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 !!!

jywarren commented 5 years ago

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 .

gautamig54 commented 5 years ago

@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 commented 5 years ago

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

CleverFool77 commented 5 years ago

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 !!

gautamig54 commented 5 years ago

Sure!

CleverFool77 commented 5 years ago

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.

jywarren commented 5 years ago

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 .

CleverFool77 commented 5 years ago

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. Screenshot from 2019-06-19 20-12-04

jywarren commented 5 years ago

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 .

publiclab / plots2