Plots2: Make shortlinks consistent across site

[jywarren]

This has been marked as a good candidate for becoming a first-timers-only issue like these, meaning that it's simple, self-contained, and with some extra formatting, could be a great entry point for a new contributor. If you're familiar enough with this code, please consider reformatting or reposting it as a first-timers-only issue, and then ping @publiclab/reviewers to get it labelled. Or, if this is not your first time, try to solve it yourself!

---

We display "short links" in the format https://publiclab.org/n/00000 using the node id or nid as 00000, in a few places:

• Questions page (example https://publiclab.org/questions/warren/04-30-2018/what-are-your-thoughts-on-this-initial-sketch-for-a-tag-page-on-publiclab-org)
• wiki pages (example https://publiclab.org/ui)
• notes page (https://publiclab.org/notes/sagarpreet/06-06-2018/leaflet-environmental-layer-library)

These also have different displays at narrow width (for phones) as well as medium and wide.

Let's consolidate them so they all look nice like this:

The code for this is here:

https://github.com/publiclab/plots2/blob/5c94fe54e1a3fed19fb0de2c910d5478f03d2391/app/views/notes/show.html.erb#L48

---

Then as a follow-up, let's also add a button to the list view as on the dashboard:

[k-sau]

Hey, i'm first timer and I want to contribute on it but I have few doubts.

1. These also have different displays at narrow width (for phones) as well as medium and wide.
   Using the chrome developer tools, opening the site as mobile , I was able to check that there's no shortlink option for mobile but I didn't get the as well as medium and wide :(

2. Then as a follow-up, let's also add a button to the list view as on the dashboard:
   Do we have to add New contributor green button?

[jywarren]

what you can do is make your browser window wider and narrower to view
different styles!

Are you thinking of where to put it? Maybe on the dashboard, it could be
shown as just the "link" icon, next to the comment icon?

On Tue, Jul 24, 2018 at 1:09 PM Kumar Saurabh [e-mail]
wrote:

Hey, i'm first timer and I want to contribute on it but I have few doubts.

1.

These also have different displays at narrow width (for phones) as
well as medium and wide.
Using the chrome developer tools, opening the site as mobile , I was
able to check that there's no shortlink option for mobile but I didn't get
the as well as medium and wide :(
2.

Then as a follow-up, let's also add a button to the list view as on
the dashboard:
Do we have to add New contributor green button?

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

[k-sau]

Thanks alot! I understood the first point and for the second point:

• I have to add a link icon next to the comment icon on the dashboard
• And that link icon points to short link ?

Am I correct ?

[jywarren]

Yes! Similarly to how the #0000 link works on the full page view, the link icon would itself just be linked to the same short URL. Thanks!

[k-sau]

Hi,

• I have added shortlink icons to the question page. The other two pages already have that icon.
• I also added to the dashboard: https://imgur.com/a/DpQAZAO

Doubts:

• Do i also have to add shortlink icon to the question activity also? Like: currently it only have ? icon
• I have almost no experience with styling, so im stuck at styling part for phone (and medium & wide size window). Do i need to remove class like: hidden-xs hidden-sm hidden-print for fixing the styling part?

[jywarren]

Looks nice! On the dashboard, could we put it to the left of the button that's at the bottom right of each box? In a similar looking button but with the # symbol?

I think that'll allow you to do the same for question entries on the dashboard too - thanks!

Can you name what line of what file you're looking at for the styling part? Thanks for your help, we'll do our best to support as this moves along -- you're doing great! 👍

[k-sau]

Hey, sorry for the late replies and thanks alot for the appreciation, this means alot!

• Do you want it like like this: https://imgur.com/a/ygL71AC ?

For styling part:

• Do i have to remove class name like these: hidden-xs hidden-sm. One of them can be found here: https://github.com/publiclab/plots2/blob/c54fe4fc97725bef20d8c7133bbb22ae10b86710/app/views/questions/show.html.erb#L36

[jywarren]

That looks super! Maybe we can even leave out the number in the most compact view, like when on a phone?

[k-sau]

Tysm :)

Maybe we can even leave out the number in the most compact view

By this you mean, I should remove the node.id no. and # on compact view?

[jywarren]

This is looking great. Still a few more to go. Note how on this view, we might just show the link icon and not the actual ID number, since space is limited:

That also shows a regular (non question) note, where we could also show a link icon similarly! @k-sau are you interested maybe? Or anyone else?

[jywarren]

Some of those templates are here:

https://github.com/publiclab/plots2/blob/master/app/views/dashboard/_node_default.html.erb

https://github.com/publiclab/plots2/blob/master/app/views/dashboard/_node_comment.html.erb

https://github.com/publiclab/plots2/blob/master/app/views/dashboard/_node_question.html.erb

Note how the comment template also shows the number, where we could keep it more minimal and just show the icon:

[jywarren]

I'm also not sure why it's not appearing on the https://publiclab.org/questions page?

It seems to be in the code here:

https://github.com/publiclab/plots2/blob/4015e70ca5270e8312b6b340e81c7cd1155880e8/app/views/dashboard/_node_question.html.erb#L21

[k-sau]

@jywarren Yes i will happily work on this. Will work on this tomorrow and will keep you updated with my progress :)

[jywarren]

oh super! Thanks so much!!!

On Fri, Aug 31, 2018 at 2:41 PM Kumar Saurabh [e-mail]
wrote:

@jywarren https://github.com/jywarren Yes i will happily work on this.
Will work on this tomorrow and will keep you updated with my progress :)

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

[k-sau]

Hey @jywarren,

• I actually removed all my past changes and added the link icon to this meta file: https://github.com/publiclab/plots2/blob/4015e70ca5270e8312b6b340e81c7cd1155880e8/app/views/dashboard/_node_meta.html.erb#L19
  is that looks good?
• And for the /questions. I added the icon in this file:
  https://github.com/publiclab/plots2/blob/4015e70ca5270e8312b6b340e81c7cd1155880e8/app/views/questions/_questions.html.erb#L7
  

[jywarren]

Ah, i love consolidating it in the meta file. But could we have it
displayed at the bottom in the same way on questions? I like your top icon
a lot but it also makes a difference for it to be in the same place
regardless of the post type, you know?

On Sat, Sep 1, 2018 at 5:15 PM Kumar Saurabh [e-mail]
wrote:

Hey @jywarren https://github.com/jywarren,
[image: screenshot from 2018-09-02 02-33-56]
https://user-images.githubusercontent.com/7109945/44949971-19ec3400-ae5a-11e8-8b7c-08a6357617ed.png

• I actually removed all my past changes and added the link icon to
  this meta file:
  https://github.com/publiclab/plots2/blob/4015e70ca5270e8312b6b340e81c7cd1155880e8/app/views/dashboard/_node_meta.html.erb#L19
  is that looks good?

• And for the /questions. I added the icon in this file:

  https://github.com/publiclab/plots2/blob/4015e70ca5270e8312b6b340e81c7cd1155880e8/app/views/questions/_questions.html.erb#L7
  [image: screenshot from 2018-09-02 02-41-35]
  https://user-images.githubusercontent.com/7109945/44949968-0b9e1800-ae5a-11e8-8c8d-336bef8b4eb1.png

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

[k-sau]

hey @jywarren , Is this look better now ?
https://github.com/publiclab/plots2/blob/4015e70ca5270e8312b6b340e81c7cd1155880e8/app/views/questions/_questions.html.erb#L17
I just cut and pasted this above line to line 26. I hope doesn't broke anything.

but it also makes a difference for it to be in the same place
regardless of the post type, you know?

I'm not able to understand this :(

[jywarren]

Yes, this looks super. This then is in the same place so it's not
unexpected when people look at questions.

On Wed, Sep 5, 2018 at 5:06 PM Kumar Saurabh [e-mail]
wrote:

[image: screenshot from 2018-09-06 02-29-19]
https://user-images.githubusercontent.com/7109945/45120767-bb39f980-b17c-11e8-9533-25066805e72c.png
hey @jywarren https://github.com/jywarren , Is this look better now ?

https://github.com/publiclab/plots2/blob/4015e70ca5270e8312b6b340e81c7cd1155880e8/app/views/questions/_questions.html.erb#L17
I just cut and pasted this above line to line 26. I hope doesn't broke
anything.

but it also makes a difference for it to be in the same place
regardless of the post type, you know?
I'm not able to understand this :(

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

[jywarren]

Looks great -- want to open a PR? THANKS!!! 🎉

[k-sau]

I just did but my Gemfile.lock also got updated. Is that an issue?