Information Dashboard button moved to slides page

[akhil-rana]

Description

Information dashboard button has been removed from the nav-bar and a butoon is added into the slides page itself.

Motivation and Context

**Why is this change required? What problem does it solve?
It makes more sense to have the dashboard build into the slides page rather than having a different switch in the nav-bar.

How Has This Been Tested?

• Tested on Mozilla 75.0, Chrome 81.0
• Ubuntu 19.10

This does not affect any other areas of code,

Screenshots:

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.

[akhil-rana]

A small change but I thought it might make more sense like this. Any thoughts?

[cjchirag7]

@akhil-rana , well I think keeping the option in navbar is better as users can easily see the option from any page. These are my thoughts anyways.

[birm]

I'll let resident ui magician @nanli-emory share their thoughts!

[nanli-emory]

@birm @akhil-rana
Option 1 (I don't know the detail of your perspective for the dashboard. You can easily add two fields into slides page's table if you only want to show # annotation and # heatmap.): you can move annotation and heatmap fields into the slides page.
Option 2 (good for scaling dashboard content): Form user habits, you should use tabs to split two contents. The benefit is that users will easily see and understand it.

This is my personal opinion. We can discuss it back and forward. Thanks. 😄

[birm]

That's a good point. It's almost like an extended version of the review check tool you had made before. At the least then, we could add viewer links to the info page.

[akhil-rana]

@nanli-emory
I was going for something like your option 2 only.
Do you think a bootstrap button group might work or something like that?
Or nav-bar option should stay?

We may need to scale the dashboard later on.
And since dashboard is the part of slides only (at least for now) then it might be nicer to put that into slides page?

[akhil-rana]

Or maybe we could use bootstrap tabs inside the slides page where the info button is placed in the above screenshot?

[akhil-rana]

What about this? @nanli-emory

[cjchirag7]

@akhil-rana , this looks fine on the desktop (except the upload and reload icons, which should be fixed). But in small screens, the tabs are colliding with the other options -

I think this is due to not closing the <div> containing these tabs. You may wish to fix this.

[akhil-rana]

Okay, thanks for pointing it out. I'll fix that.

[nanli-emory]

@akhil-rana Yes, this is exactly what I was talking about. Nice tabs. Thanks. @cjchirag7 caught the mobile-friendly bugs. 😄

[akhil-rana]

@nanli-emory
@cjchirag7
This position would work? Sorry for the changes again and again.

[cjchirag7]

Looks good to me !
You may wish to add a tooltip, so that it helps users to find the information dashboard easily, if it looks better.

[akhil-rana]

I was thinking of adding the tooltip already to many other elements like other buttons(delete, edit etc..) and navigations too.