UP-4622: Add offcanvas stickynav flyout

[cousquer]

Add sticky nav like mySail but with notification and greeting on mobile
Restore optional Fly-out menu bootstrapized. (the menu toggle is on the left of each tab because it won't interfere with delete tab link)
Add a new optional off-canvas menu for the main nav.
in navigation.xsl you just need to set true for these param

Old Version

### New Version

[blamonet]

👍

[drewwills]

Great to have this! I hope to have a chance to look shortly.

[jameswennmacher]

FYI One common approach that is done in other areas is to have something like
https://github.com/Jasig/uPortal/blob/uportal-4.2.1/uportal-war/src/main/resources/layout/theme/respondr/content.xsl#L94-L99
which is used later like at https://github.com/Jasig/uPortal/blob/uportal-4.2.1/uportal-war/src/main/resources/layout/theme/respondr/content.xsl#L119. This insures there is one place for specifying the CSS classes and HTML markup to reduce the chance someone later on will change one HTML element or attribute but forget to change the other. It's an alternate to what you have above but I think it reads a little easier IMHO.

Oh, and I see you do that later on.

[jameswennmacher]

+1 Overall looks great! I'm looking forward to seeing this merged in.

[cousquer]

Hi James, hi All

In fact my approach was at two level with OffCanvas :

First, make it optional, I don't want to disturb people who like the vertical dropdown navigation on mobile. So, that's why all the offcanvas css classes are separated from the other css classes

Also the second level is to manage the future possibility to have perhaps on mobile rightOffcanvas, topOffcanvas, leftOffcanvas or downOffcanvas
(like the double or triple offcanvas of http://forecast.io on iphone, if you don't know this html5app, have a look, it's so great, no need to go in iTunesStore).
and I'll try to explain my code
if the offcanvas is activated, when someone clicks on the toggle menu two things happen first the visibility of the nav bar is activated and then in an other function, the offcanvas panel is open simply by toggle of a css class.
this means that you can imagine to open the panel for an other purpose if you want it for options in a portlet, aside blocks in portlet, etc.
you just need to position these blocks in the offcanvas on mobile and switch the visibility and open the panel. not sure if I am clear, sorry for my english, I'm french...

James you can improve the code as you want.

I will improve maybe the code in a couple of weeks with swipe right and swipe left functions on mobile but I need to test this, if it won't enter in conflict with your pull resquest with drag 'n drop portlet you've made which is very cool.

I'm doing baby steps

I have a doubt and a question for Drew about region.header-top what's in it ? and for which purpose, because the sticky nav will be perhaps positionned on it on mobile...

Sorry for "#portalCASLogin" it was the end of friday night...

[jameswennmacher]

@cousquer sounds great. Baby steps are good (and encouraged 😄 ).

RE the regions: see https://wiki.jasig.org/display/UPC/Respondr+Regions+Feature. Currently there are no portlets in the quickstart data set that use header-top. However it is available for use as a general region. I know we are using it for a multi-tenant client where the top has a logo branding that applies to all college campuses, and header left and right are used for a college-specific branding area and search.

[cousquer]

@drewwills
Hi Drew,
Did you have time to look at this PR ?

[auxepaul]

+1

[jgribonvald]

+1

And more with our new version of the portal we will use this PR

[cervomix]

This is definitely a must have

[cervomix]

Hi guys, why this hasn't been merged yet ? Any compatibility issues ? Cheers

[cousquer]

Hi @cervomix
I do not know why.
For my part, everything works fine for my deployment and I don't think there is any compatibility issues. But I think they need to solve the most important problems first.

[drewwills]

Why reorder portal-greeting & notification-icon? (Can probably answer for myself once I review the changes... just making a note.)

[cousquer]

It was to preserve the visual order of the items because Ihave change the css alignment rules

[drewwills]

I'd say this implementation of the small-display menu is vastly preferable to the old version. I'm not sure we need the old version at all... I think I'm inclined to cut it, in the interests of simplicity.

[jgribonvald]

Could it be integrated in the upcomming release ?
👍

[drewwills]

@jgribonvald -- That is my hope & intention.

[jgribonvald]

thanks a lot Drew for that !