Has anyone been working on scripts for the new Beta UI?

[jblumberg]

There are some very common branding and UI scripts that a lot of institutions run that will need to be rewritten with the change of UI.  Most of these are pretty basic changes.

One in particular:

   A lot of schools have added extra pull down menus to the top navigation menu.  Our institution added "Library" and "Support" here.  We will need to move these to the left side navigation replacing the with icons.

   I know we got our code from our implementation manager from Instructure... the nice thing about this is that most institutions had similar code.  I wonder if there will be any sample code for this that we could base our implementation on.

Thanks,

Josh

[jblumberg]

Joe,

You are correct...  No global CSS or JS applies for the mobile app.  Instructure says they may address this at some point in the future.

Josh

p.s.  The New Theme Editor gives a confusing message about mobile.  The custom JS & CSS is for mobile browsers and does not apply to the dedicated mobile Canvas app.

[kenneth_larsen]

Thanks for the clarification  @jblumberg ​, I was really hoping that the custom JS & CSS was for the mobile app but hadn't really had time to test that theory. Hopes crushed, moving on.

[angela]

Hi Josh! If you haven't yet seen the Beta notes, this is addressed in this Beta release. These fields now are functioning, and it has been clarified that these indeed support the App, not mobile browsers.

[jblumberg]

Thanks Angela.  Yup it's clearer now.

See you in a few weeks!

[jblumberg]

We rolled out the new UI to our users over the break.  I think the solution we came up with is a pretty good one (though I want to improve our icons...  we simply picked from the built-in Instructure icons for now).

We used to modal window approach like the help menu uses rather than the slide out tray.  There was no good way to get Instructure's slide out tray to work and hacking out our own looked too flaky.

Huge thanks to Cooper Fellows (our web programmer) for solving this!  He agreed to share this with the Canvas Community.  Below is the javascript he created for making it happen.

Here is how our solution looks.  Notice the library link on the left side.  Clicking it pops up the following modal window:

The javascript function for adding a menu item.  It is generalized so it can add items with or without the modal window (we pre-pend cc to the title of our JavaScript and CSS for Champlain College...  I recommend changing this if you reuse it)

Also very cool is that you can use an icon from the Canvas style-guide​ or an svg graphic (which is what is done in the example below).

Here is a link to our code on codepen​

[jblumberg]

Sorry, I noticed our solution's code wasn't displaying correctly.  I switched the post to link to codepen instead... the built in syntax highlighting in the Canvas Community was tripping me up.

We also added support for svg images.

I think this is now a really complete solution to the need to be able to add menu items!

Josh

[powellj]

Hi Josh,

Thank you so much for sharing this!! I have a question: should I be able to take the supplied code and push it into my Canvas environment and see it working as-is? I know it will be Champlain links, etc. but as a starting point, should I be able to see a working model right away?

Thanks!

[jblumberg]

Yes Jacci,

You should be able to just cut & paste this into your Global JS file.  Test it on the "test" or "beta" site obviously.

Josh

[ephraimross1]

Hi Josh, I've tried both of the javascript files you posted on your linked code pens (they are subtly different), but neither of them work when applied to our sandbox. Am I missing a step? Thanks so much, this is exactly what I've been looking for if we can get it working!

[jblumberg]

Life got busy and I only just noticed your question...  I hope you were able to track down a javascript programmer at your school for assistance. 

p.s.  If you are coming to instructureCon stop by the hack night and I am sure you will find someone who can help you with this quite quickly (I'll be there)

[ddieckmeyer]

Hi Ephraim!

I was directed to this topic just today and have NOT been able to get this to work either. Did you ever get it going? If so what were the steps you took that finally rendered your changes?

Thanks in advance!

     Dave

[ephraimross1]

Josh, I'm not seeing that library icon from your screenshot in the icon collection. Am I missing it or was it a custom add?

[jblumberg]

Yup...  Custom design.