Create a tabbed interface for the admin

[manaswisaha]

Currently, the page is really slow since it loads all the data for the tables on page load.

Creating a tabbed (top or sidebar) interface, each part of the page being on its own tab, will let us have a cleaner looking interface where the data is requested based on the user's selected tab.

[jonfroehlich]

We should (rapidly) sketch out some ideas before implementing. :)

[manaswisaha]

I really like the tabbed interface of waffle board view (see here). This is what I had in mind for the admin interface. And as we add more metrics, it will be even more important to have such an interface.

[tongning]

Here's what a basic implementation with tabs across the top could look like. Any comments on this?

For a waffle-like view perhaps a fixed left-side navbar like this one would work:
http://bootsnipp.com/snippets/z4Q2r

[manaswisaha]

Yeah, this looks good. Although, I would like to see the left sidebar one too. :)

Few updates to the tab labels:
Graphs --> Analytics
Labels --> Contributions

Rest looks good. Has the speed decreased by doing this view and is everything working as it should?

[tongning]

I'm still moving the content into the tabs so I can't comment on speed yet, but hopefully I'll be able to test it soon :)

[jonfroehlich]

I think the left sidebar is probably a better fit for this and more scalable. We'll likely have more verification pixels than horizontal pixels for menu items. Thoughts?

I'd specifically be curious to hear from Soheil.

Sent from my iPhone

On Nov 2, 2016, at 1:50 PM, Anthony Li notifications@github.com wrote:

I'm still moving the content into the tabs so I can't comment on speed yet, but hopefully I'll be able to test it soon :)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[jonfroehlich]

Can't be sure about this until I see the mock

Sent from my iPhone

On Nov 2, 2016, at 2:08 PM, Jon Froehlich jonfroehlich@gmail.com wrote:

I think the left sidebar is probably a better fit for this and more scalable. We'll likely have more verification pixels than horizontal pixels for menu items. Thoughts?

I'd specifically be curious to hear from Soheil.

Sent from my iPhone

On Nov 2, 2016, at 1:50 PM, Anthony Li notifications@github.com wrote:

I'm still moving the content into the tabs so I can't comment on speed yet, but hopefully I'll be able to test it soon :)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[Soben713]

I agree that having the tabs in the sidebar is better. I think the first step should be brainstorming what the categories (and possibly sub-categories) must be.

This is a dashboard I designed for another project. Thought it might be a good source of inspiration.

[tongning]

With the content split into separate pages it should be fairly easy to change the design now. I'll work on the sidebar prototype next.

[jonfroehlich]

Great!

[Soben713]

This link might also be useful for inspiration: https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/

I like this particular library:
https://almsaeedstudio.com/themes/AdminLTE/index2.html

Update: I used this library for my quality control project's dashboard and it is so cool. It provides a lot of useful widgets/icons.

[m-furman]

I've been trying to think of various ways to split up the content, and so far the only two ideas I have are (1) the one that was previously mentioned (grouping by type/kind of data being displayed) and (2) grouping based on the display format (for instance, all tables in one tab with subsections dedicated to the specific data that each table is displaying). And since that sounded super confusing here are some quick prototypes that I created:

(1)

(2)

I don't really like how the black tab bar (which obviously needs to extend down the page rather than ending halfway..oops!) looks in the second one, but I was playing around to see if something like that would work at all. I'm also not sure if something along the lines of the first one would require any subsections (it personally doesn't seem to me like it would).

I was originally thinking that it might also be nice to have icons on each tab in addition to labels, but after creating these two prototypes it seems somewhat unnecessary.

Any ideas/suggestions?

[jonfroehlich]

I think (1) is much stronger and categorizes the data in a way that is more related to end-user tasks. Also, I don't think we need icons. This is just for us admins, so that additional UI would be superfluous imo. Please push on (1) a bit more. I'd like to see a working demo soon (even if just for a few tabs). Also, would be great if you could provide a speed-up analysis of load times and compare them to current admin page.

…

On Thu, Jan 12, 2017 at 7:01 PM, Maria ***@***.***> wrote: I've been trying to think of various ways to split up the content, and so far the only two ideas I have are (1) the one that was previously mentioned (grouping by type/kind of data being displayed) and (2) grouping based on the display format (for instance, all tables in one tab with subsections dedicated to the specific data that each table is displaying). And since that sounded super confusing here are some quick prototypes that I created: (1) <https://camo.githubusercontent.com/455f89e43e92216fa47b1d2479f3b2c100a6e464/687474703a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d304236383742456a47746746564e306f3063336c3365473934555467> (2) <https://camo.githubusercontent.com/fcd062782e4b226a5743eee3175b9308d4c8b79f/687474703a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d304236383742456a47746746564d56564b52304e49645546754d3030> I don't really like how the black tab bar (which obviously needs to extend down the page rather than ending halfway..oops!) looks in the second one, but I was playing around to see if something like that would work at all. I'm also not sure if something along the lines of the first one would require any subsections (it personally doesn't seem to me like it would). I was originally thinking that it might also be nice to have icons on each tab in addition to labels, but after creating these two prototypes it seems somewhat unnecessary. Any ideas/suggestions? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#343 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABi-9T256BJ8EvzOeakA65ee6HVI5tV1ks5rRr7pgaJpZM4KVYHh> .

-- Jon Froehlich Assistant Professor Computer Science University of Maryland, College Park http://www.cs.umd.edu/~jonf/ @jonfroehlich <https://twitter.com/jonfroehlich> - Twitter

[m-furman]

I have the basic tabs implemented:

I haven't worked on styling them properly or ensuring that only the necessary information is loaded for each tab, but I'll try to have that up and working soon so that I can compare the current load time with that of this new tabbed implementation.

[jonfroehlich]

Great. Thank you. Are you using Twitter Bootstrap for this? Looking forward to seeing new iterations.

[m-furman]

I was actually just using the jQuery UI tabs, but I just reimplemented it using Twitter Bootstrap (haven't worked with it before so using it didn't come to mind at first!). It looks a lot cleaner now:

[jonfroehlich]

Nice progress. Can you do sub-sections in the tabs like you showed in your mockups?

[m-furman]

I don't think that creating subsections should be too difficult, but I'm not too clear on what exactly the subsections should be...

[jonfroehlich]

Maybe each visualization. But I agree. Let's hold off on this for now.

…

Sent from my iPhone

On Jan 17, 2017, at 6:45 PM, Maria ***@***.***> wrote: I don't think that creating subsections should be too difficult, but I'm not too clear on what exactly the subsections should be... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.