Plots2: Implement new design for Tags page (needs breaking up)

Created on 15 Mar 2019  ·  46Comments  ·  Source: publiclab/plots2

Building on #4922, we should work to rebuild the page at https://publiclab.org/tags following this design:

Screen Shot 2019-03-15 at 12 45 20 PM

There's discussion about this here: https://publiclab.org/notes/edie_blues/01-09-2019/the-tags-page-mockup-let-me-know-what-you-think#c22154

The current template is here: https://github.com/publiclab/plots2/tree/master/app/views/tag/index.html.erb

Steps that could be broken out include:

  • [x] making it 2-column #5100
  • [x] adding https://publiclab.org/stats/graph in an iframe to the 2nd column
  • [x] adding the links below the graph
  • [x] Redesigning the search bar (https://github.com/publiclab/plots2/pull/5121)
  • [ ] redesigning the table to use a Card ui instead (starting with panels, here: https://getbootstrap.com/docs/3.3/components/#panels) in a template partial

I'd love help with this one!

HTML Ruby break-me-up design help wanted

Most helpful comment

Can I be of any help here? It would be great if I can contribute! Thanks

All 46 comments

@jywarren I would love to work on this issue. Can I start with the first part of making it two-column.

That'd be super! Thank you -- and note that we're currently on Bootstrap 3,
docs at https://getbootstrap.com/docs/3.3/ -- worth checking out!

On Fri, Mar 15, 2019 at 1:31 PM Lekhika Dugtal notifications@github.com
wrote:

@warren https://github.com/warren I would love to work on this issue.
Can I start with the first part of making it two-column.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5090#issuecomment-473376431,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ8N48ACVTtYlHFbsChYZIFpjb3dpks5vW9jfgaJpZM4b24tN
.

@jywarren Should I work on redesigning the search bar?

Sure! But you can probably go ahead with #5832 (i think?) where you've
already begun! Thank you!

On Fri, Mar 15, 2019 at 1:38 PM Divya Baid notifications@github.com wrote:

@jywarren https://github.com/jywarren Should I work on redesigning the
search bar?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5090#issuecomment-473378955,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJxYkgDzS1hVu9VHErqzbSdRS-RzPks5vW9qKgaJpZM4b24tN
.

@jywarren Is this what the first part says ? I've opened a PR dividing it into two parts.
Screenshot from 2019-03-16 10-11-38

@jywarren Is it possible for a same person to work on other parts too ?
If yes, then I would like to go for second part too. :)

@CleverFool77 I would like to help out here! Let me know if you are stuck anywhere, we can work it out together!

I'll ask you for sure @IshaGupta18 :)

Hi @IshaGupta18,
I was working on the part of showing iframe. So should I write the code again along with ajax or should I show the graph generated in graph.html here. I'm haven't used ruby on rails on fully-fledged project yet. So still learning regarding this.

Yes, i think multiple people can work in parallel and/or collaborate!

For the iframe, we already show the graph as we wanted at /stats/graph, so
I think we can just include it using an iframe instead of ajax. Does that
make sense?

On Sun, Mar 17, 2019 at 7:30 AM Lekhika Dugtal notifications@github.com
wrote:

Hi @IshaGupta18 https://github.com/IshaGupta18,
I was working on the part of showing iframe. So should I write the code
again along with ajax or should I show the graph generated in graph.html
here.


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5090#issuecomment-473656623,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ3l_BuDF5LweofawSM1wzy2lk9S1ks5vXicsgaJpZM4b24tN
.

@jywarren Something like this -
Screenshot from 2019-03-18 23-57-57

I haven't given margin yet. And the tags graph is not getting cut rather I zoomed it as it was not visible because I had 3-4 different small graph. So for now I zoomed it

Can I be of any help here? It would be great if I can contribute! Thanks

@jywarren @gauravano Can we have first PR merged first because I guess all other changes will be dependent on first. PR link
@gautamig54 You can start with any of the part of this issue. But now the further parts will be dependent on each other I guess. :thinking:

@gautamig54 Right now, I'm working on stats graph PR to be shown in second column. If you are interested you can go for third part :wink:

@CleverFool77 Okay! I'll start with the 3rd one! Thanks!

Should I complete the last task? Can I start with that part?
Thanks!

Oops didn't mean to close the whole thing! Re-opening now - and thank you for collaborating!

Oh, oops, ok - so, i see, there's a sequence. It looks like @CleverFool77 has already started #5100 and could we finish up the iframe stuff there before merging it (typically 2 PRs would be great, but these are so tied to one another -- it didn't make sense to me to merge the first one and then publish a page which is halfway empty, you know?) so then we can get the basic page merged at once, then we can move on to the next few? Thanks everyone, this is cool!

If we want to add a new item which is 'zooming the tags graph' i think it's possible perhaps using this documentation: http://js.cytoscape.org/

and this code? -- https://github.com/publiclab/plots2/blob/master/app/views/tag/graph.html.erb

@jywarren I'll add the iframe in same pr with another commit.
Reagrding zooming feature, it was needed because my local graph doesn't have much data.
Thanks

@divyabaid16 I guess we need breaking up in last part. :thinking: Not sure though

Yes, you're absolutely right @CleverFool77.
So what I will do is convert the table into the card ui (as I have already made the changes) and send a PR for that. And then we can collaborately work with further additions in the UI. Sounds good?
Thanks!

That's great @divyabaid16 :wink:

Okay so I am very sorry I couldn't reply to you @CleverFool77 . I will be more helpful from there on. Amazing work is being done here! Let me know if I can help. Thanks everyone!

Awesome everyone, thanks!

On Mon, Mar 18, 2019, 11:50 PM Lekhika Dugtal notifications@github.com
wrote:

That's great @divyabaid16 https://github.com/divyabaid16 😉


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5090#issuecomment-474187999,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ3dnNcKajiyf-RCUqtYVfAzl6Soyks5vYF5JgaJpZM4b24tN
.

We would surely need your help in future @IshaGupta18 :wink:
Take rest and get well soon @jywarren

@divyabaid16 Do ping me after you are done with basic structure of cards :wink: . We'll collaborate and work it out together :smile:

Ya sure @CleverFool77
I would love to work it with you :smile:

Hi @jywarren I found the fix to be done in featured part of this issue. But you mentioned in issue #5004 that this is stored in database. Then can i have some insight on this ?

Merged #5100! Now on to next steps; perhaps https://github.com/publiclab/plots2/pull/5172 is next?

I see progress at https://github.com/publiclab/plots2/pull/5169 as well on a card layout!

Let's make sure the card layout by @CleverFool77 is compatible with the sorting in https://github.com/publiclab/plots2/pull/5176 by @divyabaid16 ! What amazing multiperson cooperation here!!! 🙌

Hi @jywarren The basic card layout is for people's section. Regarding the basic card layout in tags section, I guess @divyabaid16 is working it as she already mentioned. She did great work in sort section,so if the same person is doing the both the work then compatibility will be checked easily.

Later, the UI will be improved from basic structure with collaboration between various contributors.
Thanks !!!

Hi @gautamig54, Do you need any help ?

@CleverFool77 Thanks! I am working on the 3rd task. I'll surely ask for help if need be 👍

I'm actually confused whether to send the PR for the card ui or not. Because it's a carrier forward of my previous 2 PRs.

@jywarren @CleverFool77 I have done the 3rd task and have submitted a PR for the same. Pl review it.

On the tags page, the number of tags shown on the left are more in number which results in empty space on the right, below the graph. I think some amendments should be done regarding this in the design. What say @jywarren @CleverFool77?

Screen Shot 2019-03-21 at 7 58 16 PM

HI @divyabaid16 I wanted to ask which two previous PR. Isn't it one PR which is for sort ?

Oh I see it now regarding what you mean about 2 PRs, @divyabaid16. I guess we need to wait. :thinking:
@gautamig54 Lets see what's there in new UI for this.

@CleverFool77 Featured topics have not been added to the new UI design?

@gautmig54 Yes it has not been added yet. I asked @jywarren about this question in these comments above.
Thanks :)

Ah, sorry, responding now:

Hi @jywarren I found the fix to be done in featured part of this issue. But you mentioned in issue #5004 that this is stored in database. Then can i have some insight on this ?

Yes, I think we are OK on this now: https://publiclab.org/tags

Although we should rename the page simply "Tags" and perhaps we can remove the text (i can copy it into the database so we can change it more easily instead of tracking it in the codebase!)

One thing is that the table headings are a bit crowded - i guess we'll be removing them when we make cards, though?

image

Looking at https://github.com/publiclab/plots2/pull/5176/ now for the sorting, then ready to move on to card display! (@CleverFool77 i saw your note on people page card design, you're totally right, thanks!)

https://github.com/publiclab/plots2/pull/5239 complete - now just the card UI!

I will send the PR for this part by today.
Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

keshavsethi picture keshavsethi  ·  3Comments

first-timers[bot] picture first-timers[bot]  ·  3Comments

first-timers[bot] picture first-timers[bot]  ·  3Comments

keshavsethi picture keshavsethi  ·  3Comments

noi5e picture noi5e  ·  3Comments