Improve the button group at the bottom of infragram page

[Rishabh570]

Please describe the problem (or idea)

The forward and fast-forward buttons in the button group at the bottom of infragram.org page are not very nice from the UI standpoint. They can be either made like the ones in publiclab.org or we can add an svg/png for them.

What happened just before the problem occurred? Or what problem could this idea solve?

Currently, the button group at infragram.org looks like,

We can either make it like the one at publiclab.org, which looks like

or we add an SVG/PNG, (flaticon.com has many options)

Please show us where to look

https://infragram.org

What's your PublicLab.org username?

icode365

This can help us diagnose the issue:

Browser, version, and operating system

Many bugs are related to these -- please help us track it down and reproduce what you're seeing!

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[faithngetich]

I'd like to work on this issue

[champagnepappi]

@Rishabh570 https://infragram.org seems to be an external link. is it part of the public lab plots code...

[Rishabh570]

@champagnepappi Code related to infragram is here
@faithngetich Go ahead!

[faithngetich]

Hey @Rishabh570 I have made some changes and raised a WIP PR, unfortunately, I am unable to test how it looks on the browser using my local environment. So the current changes are just based on the modification I did on the developer tools browser.
Could you please share instructions on how I can be able to view the page locally.

[Rishabh570]

Hi @faithngetich, setup instructions are shown at this page itself...just run the node server and go to the related URL, you'll land on that page.

[faithngetich]

Thanks @Rishabh570 I have been able to access the http://localhost:8000/sandbox/ but I have not been able to navigate to the local version of the site below in the screenshot. Could you please help.

[Rishabh570]

@faithngetich Okay, so you want to see that button group on localhost...do this,

• Go to index.js of routes and in export.index function, remove everything(or comment them out) such that it should contain only this:

res.render('index', {
          title: 'Infragram: online infrared image analysis',
          images: "",
          pageNumber: 1,
          pageCount: 1
        });

I think searching for an image in local db is causing the template to not get rendered...Try this and then go to localhost:8001/

[Rishabh570]

@faithngetich Were you able to open that page up on localhost?

[faithngetich]

Hey @Rishabh570 yes I have thanks.

[faithngetich]

localhost:8001/ is not working though so I have just had to access it through localhost

[Rishabh570]

No worries, you can change the port in app.js if it's not working anyways (only for development obviously)

[faithngetich]

@Rishabh570 could you please my PR. Here's the link to the PR

[jywarren]

This was solved by @faithngetich ! Thank you!

Actually if you put the exact text closes #____ where ____ is the issue number, in the PR description, then when the PR is merged, the corresponding issue is closed automatically! Just a tip!