Plots2: UI Improvements Planning Issue : People Section

[CleverFool77]

Description

The basic Card UI of people section is already on halfway.
Now the further improvements are left.
As we were told during proposal that we should start off with easier ones first. And they should be given beginning of time in timeline. So we will start off with people section first which is the easiest.
The final UI for the people's page :

@gautamig54 We will add checklists here

card ui of users

• [x] Vertical to horizontal cards @CleverFool77
• [x] Add tags on cards @CleverFool77
• [x] Add ellipsis which contains the user details as shown in the design @gautamig54

location

• [x] Add user's location. @gautamig54

search by

• [ ] Add search by various places option below maps.

others

• [ ] Make the map sticky.
• [x] position map on the top instead of bottom, in the mobile view @CleverFool77
• [x] Fix overflow of tags @CleverFool77

[gautamig54]

@CleverFool77 Let's first start with the questions page as was mentioned by @jywarren.
Also, The six pages mentioned earlier only need to be redesigned?
We have the blog page remaining as well. The task was divided amongst lot of us, but since we are suppose to work towards UI implementation, can we complete the blog2 page as well?

[CleverFool77]

Hi @gautamig54 Actually, People section has most of the part done.
So, I was thinking of completing the section one by one.
But yeah if it was suggested by @jywarren , We can go with questions page first.
I'll open a new issue for questions page and break them into parts.
regarding blog2, I'll go and look into the matter that How much parts is already done.
I have some project evaluations and other pending stuff of this semester, So I won't fully active till 18th of May. Thanks for the patience.
And @gautamig54 It would be great if you could check out the other issue https://github.com/publiclab/plots2/issues/5708 that I've opened. I have added some points in checklists.
Once again. Thanks !!!

[jywarren]

Hi, all! I was thinking, based on the new style guide that is rapidly coming to completion, what if we focused on 2 things: first, looking for any remaining Bootstrap 4 issues to fix, and 2nd, implementing the "content card" sections of the style guide and moving them into a common area like app/views/content/_person.html.erb, app/views/content/_post.html.erb and app/views/content/_topic.html.erb? Then they can be re-used all across the site.

[CleverFool77]

Hi @jywarren
This looks like great Idea.
But I wanted to ask that How should I divide the work in todos and milestones which was mentioned by siddharth in one of the issues of planning.
I'm bit confused regarding the process.

[jywarren]

Well, it sounded like people wanted to try using Projects, or planning issues with checkboxes and lists. You could do either. The main thing is to move a lot of the items from your proposals into GitHub somewhere so they can be updated as you go and boxes checked and issues closed bit by bit. Milestones are another way to manage this. I don't really have a strong preference as long as each team can coordinate between them, and others across the community can keep up to date on your overall progress. Make sense?

[gautamig54]

@CleverFool77 You are right! Completing people's sections seems like a great start. I have updated the issue. Also, I was thinking if we could add a search feature here. It seems relevant and necessary to add search feature. What do you think about it?

[CleverFool77]

Hi @gautamig54
Which search are you talking about ?
I'm not clear regarding that.
Thanks !!!!!

[gautamig54]

Search feature as in where anyone can search for a member on the page. Like we have a search feature on tags page. You get it @CleverFool77 ??

[gautamig54]

@CleverFool77 I also see a change in the margins due to which there is a change in card design from vertical to horizontal.

What do think about this? Should we change that as well?

[CleverFool77]

Let's discuss regarding search feature with @jywarren .
@gautamig54 Actually regarding card design. There were two designs. So I went for vertical for now.
But now as we are adding new features. I'll fix it. I have added it in checklist.

[gautamig54]

@CleverFool77 So you will be changing the margins as well??
I will get started with adding the user's location.

[CleverFool77]

Hi @gautamig54
I guess you have to wait a bit as first #5740 need to get reviewed and merged. How about doing the work in Questions Page like me.
As I told you earlier. I'm taking two issues sideways. As some parts or portions of some issues are dependent on each other and it might make us to stop for a while as we are unable to move further.
Thanks !!!

[gautamig54]

Yes @CleverFool77. Even I will follow the same strategy and work on two tasks simultaneously. I will implement the Add location option as it is not related to the cards design.

[CleverFool77]

Hi @gautamig54
yes, you can start off with location as it doesn't seem related.
thanks !!!

[gautamig54]

Also, alignment of the left and right column is required.

[CleverFool77]

Thanks for mentioning @gautamig54 I guess people text went out of column grid. That's why it wasn't algined.
I'll fix it.
Thanks !!

[CleverFool77]

Oh I just went through it and realised that it's due to margin-top in map. I'll fix it. Thanks !!!

Fixed UI

I've updated it in horizontal cards PR https://github.com/publiclab/plots2/pull/5740

[gautamig54]

@CleverFool77 I have implemented the add location button.
You can now start with the tags and I will start with the ellipses.
Thanks!

[CleverFool77]

Hi @gautamig54
Great Work !!!!
I'll start off with tags then :smiley:
Thanks !!

[jywarren]

This is looking great - and noting that all the extra text on the people
card, once replaced with the tags, could then be moved to a popover menu
under the "..." button, how does that sound? And, perhaps we should only
show 3 tags -- the 3 most popular tags people are subscribed to (so, like,
based on # of subscribers?)

If we find that this causes slow page loads, we could cache the tags people
are subscribed to; if you're interested please let me know and I can point
you at an example of such caching -- and there are folks in the chatroom
that will also know more about this. :-)

On Tue, May 21, 2019 at 11:39 AM Lekhika Dugtal [e-mail]
wrote:

Hi @gautamig54 https://github.com/gautamig54
Great Work !!!!
I'll start off with tags then 😃
Thanks !!

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5707?email_source=notifications&email_token=AAAF6J24N47XVINVXR3I3H3PWQJPVA5CNFSM4HMISW22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV4KAQA#issuecomment-494444608,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JZXNPI545AWI66UFZ3PWQJPVANCNFSM4HMISW2Q
.

[gautamig54]

Yes @jywarren, I am working on creating the ellipsis which has member's other details. We have added it to the checklist. Thanks!

[CleverFool77]

This is looking great - and noting that all the extra text on the people card, once replaced with the tags, could then be moved to a popover menu under the "..." button, how does that sound? And, perhaps we should only show 3 tags -- the 3 most popular tags people are subscribed to (so, like, based on # of subscribers?) If we find that this causes slow page loads, we could cache the tags people are subscribed to; if you're interested please let me know and I can point you at an example of such caching -- and there are folks in the chatroom that will also know more about this. :-)

Sure @jywarren It would great to have some links regarding the example of caching.
Thanks !!

[jywarren]

Here's a good example of a template cache that expires in a set amount of
time:

https://github.com/publiclab/plots2/blob/eafff3811de4e7c19d49fbb2968a38ebeed7830f/app/views/home/home.html.erb#L8

So, you do need to set a globally unique key for the cache, and I would
recommend using the username in it, so it's unique per-user. Make sense?
This is also a good resource:
https://guides.rubyonrails.org/caching_with_rails.html

Hope that helps!

On Tue, May 21, 2019 at 11:53 AM Lekhika Dugtal [e-mail]
wrote:

This is looking great - and noting that all the extra text on the people
card, once replaced with the tags, could then be moved to a popover menu
under the "..." button, how does that sound? And, perhaps we should only
show 3 tags -- the 3 most popular tags people are subscribed to (so, like,
based on # of subscribers?) If we find that this causes slow page loads, we
could cache the tags people are subscribed to; if you're interested please
let me know and I can point you at an example of such caching -- and there
are folks in the chatroom that will also know more about this. :-)
… <#m_3791727848790690632_>
On Tue, May 21, 2019 at 11:39 AM Lekhika Dugtal @.*> wrote: Hi
@gautamig54 https://github.com/gautamig54 https://github.com/gautamig54
Great Work !!!! I'll start off with tags then Thanks !! — You are receiving
this because you modified the open/close state. Reply to this email
directly, view it on GitHub <#5707
https://github.com/publiclab/plots2/issues/5707?email_source=notifications&email_token=AAAF6J24N47XVINVXR3I3H3PWQJPVA5CNFSM4HMISW22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV4KAQA#issuecomment-494444608>,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JZXNPI545AWI66UFZ3PWQJPVANCNFSM4HMISW2Q
.

Sure @jywarren https://github.com/jywarren It would great to have some
links regarding the example of caching.
Thanks !!

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

[gautamig54]

Hi! I have implemented the ellipses. I have modified the design a bit as I thought this looks better.

User login:

Admin/Moderator login:

I have not added the "Read more" link in the popover as its purpose would be directing the user to the member's profile page, which is already happening by clicking on the member's name on the card.
How about this? @CleverFool77 @jywarren @gauravano.
Thanks!

[CleverFool77]

Hi, @gautamig54
The Design looks great.
But How about shifting the icon for this popover to corner most right-bottom ? And How about we use horizontal icon for this ?
The design looks great as of now but it would not be that compatible when we will add the tags and other parts.
Though It would be better to wait for @jywarren's view.
Thanks !!!

[gautamig54]

Yea, that was the original design. I modified it a bit. Generally user's information is beside the user's name, that's why I changed it this way.
The tags will be coming in the sub info and it won't intersect with the ellipsis.
Also, I had problem with the padding. Like, "Active # days ago" isn't in the same line. I am working on it.
Let's wait for @jywarren's and @gauravano 's view on this.
Thanks @CleverFool77 !!!

[gautamig54]

@CleverFool77 the tags are exceeding the card boundaries. Can you check this.

[jywarren]

This is looking cool, thanks all! Actually i've been making further
refinements to the card designs and button styles in the style guide. I'd
love some input (comments, ideas, critique) from both of you now that
you've had a week or so working more deeply in this!
https://publiclab.org/notes/warren/05-07-2019/introducing-a-draft-style-guide-for-public-lab

On Wed, May 29, 2019 at 6:05 PM Gautami Gupta [e-mail]
wrote:

@CleverFool77 https://github.com/CleverFool77 the tags are exceeding
the card boundaries. Can you check this.

[image: Screen Shot 2019-05-30 at 3 34 40 AM]
https://user-images.githubusercontent.com/35326753/58594658-e117a900-828b-11e9-83b7-1b4bbbed59ab.png

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5707?email_source=notifications&email_token=AAAF6JZQF2LTOTKAESXBOM3PX34YTA5CNFSM4HMISW22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWQYUDQ#issuecomment-497125902,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JZRGKDW52IKCZ76VDDPX34YTANCNFSM4HMISW2Q
.

[gautamig54]

@jywarren I was going through the style guide and found a new design for the /people page.

Is this the updated design for the people's page?
cc: @CleverFool77

[CleverFool77]

@CleverFool77 the tags are exceeding the card boundaries. Can you check this.

Hmmm @gautamig54 @jywarren Any suggestions How should we deal with it ?

• Restricting tagname maybe ?
• add ellipses at overflow maybe ?

[jywarren]

Hi Gautami! The new design is not totally done yet. One thing I heard from
people was that they prefer a smaller map which expands when you click it,
so the page is not as overwhelmed by the map. It's not a huge change,
really, but I'd love to hear your thoughts on it.

On Wed, May 29, 2019, 8:34 PM Gautami Gupta [e-mail]
wrote:

@jywarren https://github.com/jywarren I was going through the style
guide and found a new design for the /people page.

[image: Screen Shot 2019-05-30 at 6 04 37 AM]
https://user-images.githubusercontent.com/35326753/58600058-90f71180-82a0-11e9-9ee7-98781e565935.png

Should we redesign the page according to this design?

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

[CleverFool77]

Hi @jywarren
This thing about small map which expands looks cool idea. Because we usually don't prefer a big map spanning over the huge area on page rather a small open which we can span when we specifically want to look over it.
I guess we should implement this

[gautamig54]

Yes @jywarren even I think smaller map is a better idea. It takes up half the page, due to which the space below the map is wasted. It will help optimising the page. We can definitely go with this!

[gautamig54]

@CleverFool77 I played around a bit with font-size and padding. How do the cards look now?

[jywarren]

ok, glad we have some consensus on small map design! One question I had was, when you expand it, should it open to cover the whole page, or should it direct you to a new page at, for example, publiclab.org/maps (although at the location and with the same layers showing?)

[gautamig54]

How about a modal, not covering the entire page?

[jywarren]

Hm, can we make a mockup of what that might look like? Thanks!

On Tue, Jun 4, 2019 at 5:21 PM Gautami Gupta [e-mail]
wrote:

How about a modal, not covering the entire page?

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

[gautamig54]

How about something like this @jywarren @CleverFool77
The modal will open up on clicking the map. People can zoom in and out the map on the modal itself.

[gautamig54]

@CleverFool77 regarding the exceeding of the tags from the card, I think adding ellipsis at overflow is a better option than restricting the tag name.

[jywarren]

I think the modal idea has promise. Why don't we take this approach: we
start by simply sending people to a common map page at a fixed url. But we
continue to prototype modal and other means of loading a map without
reloading a page, and refine that gradually as it would be a bit more
complex. This will also give us time to do more user testing. And, if we
send to a fixed url we can do so to a specific location using the url hash
approach. Visit publiclab.org/maps to see how the location hash works... It
uses the # character.

On Thu, Jun 6, 2019, 12:50 PM Gautami Gupta [e-mail]
wrote:

@CleverFool77 https://github.com/CleverFool77 regarding the exceeding
of the tags from the card, I think adding ellipsis at overflow is a better
option than restricting the tag name.

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

[gautamig54]

Great work with the tags overflow @CleverFool77. It will be good if you could display the the entire tag on hover over the tags. What say?

[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:.

[jywarren]

This is basically done! Thanks, all!