Update header

[katelynnobrien]

• The girder register, login and user dropdown have been incorporated into the header.
• The Minerva logo has been added to the upper left corner of the header on a white background.
• A teal background color (which complements both the default map color and the logo color) has been added to the header as a way to distinguish it from the rest of the app.
• The session information (name, description, save and action controls) have been moved to a secondary header overlaying the map with a semi-transparent background to maintain legibility. The intention here is to visually tie this information to the visualization and the options in the left hand column. Next step for this area will be to provide a way to view a list of other sessions and manage them without having to go to a separate "Sessions" screen. There is also the possibility of combining this with the main header to conserve real estate.
• The entire app is now fullscreen so it will not scroll horizontally or vertically.
• The left column spans the full height of the screen and has a pale gray background. When the content is too long, the column itself will scroll rather than the entire page.

[katelynnobrien]

@mgrauer This is ready for QA!

[mgrauer]

@katelynnobrien

You removed the .m-portrait-wrapper from layoutHeaderUser.jade. This was the element where the gravatar image was displayed. If I put this back in, I can see the gravatar like

Did you intentionally remove this or was it accidental? Do you have strong feelings about it?

I'm fine either way, but if we remove it, we should remove our dependencies on the Gravatar plugin.

[mgrauer]

The intention here is to visually tie this information to the visualization and the options in the left hand column.

I don't follow how this visually ties the session info to the options in the left hand column, can you explain what you mean?

I realize we have some further changes coming here anyway, related to listing the sessions, so I'm fine with this as is for now.

Overall great changes, it looks much better now (and actually allows you to log in/register).

Once you removed the commented out code and answer a few questions I think this could go in.

[katelynnobrien]

@mgrauer

I intentionally removed the gravatar, but I can't say I feel strongly about it. I thought it looked cleaner without. If we keep it I would like to make the image a bit smaller.

Regarding tying the session header to the left column visually - I think you are right. It is tied to the map, but not really to the left column. I can work on improving that - I have an idea for combining the main header and the session header and can create some mockups in Photoshop to demonstrate.

[mgrauer]

Thanks @katelynnobrien I give this an LGTM. You can merge it and then delete the branch.

I created an issue to deal with gravatar.

I look forward to seeing those mockups--and I'm fine with looking into them after release 0.1.0.

If you want to start playing with something sooner, it might be good to also think about somehow breaking/separating the Session Layers panel out from the main left column panel--as that is the only panel that directly relates to the state of the map and the state of the session. All the other panels are for the application state as it relates to the current user.

The other "panels" (that aren't really panels) that relates to session state are the two popups that occur when you click on a WMS layer (or multiple) and when you click on a choropleth, these popups display info related to the click.

[mgrauer]

Actually, before you merge this @katelynnobrien -- this branch removes the ability to create new sessions. We need to bring this functionality back to solve #305.

You were going to work on that next anyway I believe. Let's not merge this one in until we have the ability to create sessions. You can base any new work related to #305 on this branch. Then we can merge them in at similar times.

Let me know any questions.

[mgrauer]

Turns out there is already an issue related to unifying the two different popup panels. Linking it here for tracking purposes.

https://github.com/Kitware/minerva/issues/275

[katelynnobrien]

@essamjoubori I pushed up the changes that add a "New Session" item to the actions pulldown, as well as a new pulldown that is triggered by the session name. This new pulldown would be a list of other sessions the user has access to. Selecting one would open that session. Can you hook the existing javascript from the sessionsView.js and sessionView.js files up to make them work?

I think we can improve the look/ux of these but this at least gets everything on the same screen.

[aashish24]

@katelynnobrien @mgrauer can we have the blue background go all the way to the logo? It seems bit usual that logo is placed on a white background.

[danlamanna]

Opposed.

[katelynnobrien]

If displaying the logo on it's own white block is not desirable, I would suggest returning to a full width white header (or a neutral pale color like light grey or a cream would also be OK I think).

I tried converting it to white and placing it on the dark background, but the nice details of the owl's face are lost and overall it looses it's impact. I would not suggest this as an option.

[ebradyjobory]

@katelynnobrien The "New Session" item in the actions pulldown is working now. Also, the end user can view the list of sessions in the new pulldown and navigate through them. Do you think we need to add some styles to the session description (pictures below)? session description, if any, appears in the top center of the session header (looks good but might be hard to see) and also it appears in the new pulldown.

@mgrauer I've noticed that switching sessions won't change the sources nor the datasets list. Is that normal?

[mgrauer]

@essamjoubori Yes, that's expected. See my comment above for the full context.

If you want to start playing with something sooner, it might be good to also think about somehow breaking/separating the Session Layers panel out from the main left column panel--as that is the only panel that directly relates to the state of the map and the state of the session. All the other panels are for the application state as it relates to the current user.

Sources and Datasets are application wide, but the Session Layers panel (happy to change the name BTW) is tied to the current session. That's why we should think about breaking that panel out from the others and it should better integrated visually somehow with the map.

[katelynnobrien]

These styling changes include:

• making the header white all the way across
• styling for the dropdown of sessions
• removing the background on the left panel
• making the individual panels slightly more transparent, and adding a hover effect that removes the transparency

[katelynnobrien]

@mgrauer These styling changes are ready for review!

[mgrauer]

I need to do some more QA here and also clean up the sessions page/path.

@essamjoubori I've merged in master and fixed the merge conflict. This should correct the issue for you where the logo wasn't showing up (once you grunt init && grunt).

[mgrauer]

I was playing around and tried a very faint creamy color behind the Minerva logo. Any opinions, compared to white? #FFFFF4

[katelynnobrien]

@mgrauer I prefer the white over the cream for the header. But there is a need to carry the logo colors/tones into the rest of the site. I think the color palette will need to be 'warmed up' in order to match and use the colors from the logo. And the previous teal color that was in the banner was a complimentary color to the logo type (opposite on the color wheel) so that could be added back in a more subtle way also.

Something along these lines might be nice and clean.

[aashish24]

@mgrauer I prefer the white over the cream for the header. But there is a need to carry the logo colors/tones into the rest of the site. I think the color palette will need to be 'warmed up' in order to match and use the colors from the logo. And the previous teal color that was in the banner was a complimentary color to the logo type (opposite on the color wheel) so that could be added back in a more subtle way also.

+1.

[mgrauer]

Thanks for the explanation @katelynnobrien , that sounds like a good direction to go.

[mgrauer]

Another question. Any opinions on the ideal opacity for the control panels? When they are hovered, they become opaque.

Here is 0.9, 0.75, and 0.5. I'm liking 0.5, but I haven't used this value extensively, so it's possible it could become a hindrance over longer use, or e.g. the legends for map layers would now be harder to see. My initial reason for liking it is that it really gets the controls panels out of the way and allows you to focus on the map.

[aashish24]

@mgrauer I think somewhere in the middle of 0.75 and 0.5 might be ideal for me. (say 0.6). I think we just need to give a sense of the data thats behind the panels. But I will be okay with 0.5 as well.

[mgrauer]

Fixes #304, #305, #306.

[aashish24]

@mgrauer can we merge this now?

[mgrauer]

I wanted to remove all of the sessions pages before we merged this, but I'm starting to regret that decision. I'll decide relatively soon about merging as is or get the fixes in.

[mgrauer]

Removing the sessions page was harder than I first thought, due to dealing with all of the user state issues. I'm giving this an LGTM as is and merging.