Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
jblumberg
Community Member

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

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

52 Replies

For any who might experience a similar issue, it turns out there was a height set for the #menu in the custom CSS that was not enough to hold the contents on that page and also caused issues when the extra navigation links dropped to a new line. Removing that set height allowed the header to grow with the content. Chris may choose to do some fine tuning, but that was the heart of the problem.

I would be VERY interested Smiley Happy

You'd think there would be a book or library icon in the canvas icon collection (of the style guide). The bookmark is the closest I can find that might work for a "Library" link from the global nav menu.

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?

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! Smiley Happy

This is great help, thank you! I am also a noob in this script, but I am learning a lot by trying out the things you all share.

Do you know a way to write it so that the icon will position above the text rather than on the left side of it?

All I could come up with was calling the function twice, once with an icon and no text, and another underneath with text/no icon, but the spacing is off and it doesn't look good (and seems to double the number of actual links I need there)

$(document).ready(function() {

function addMenuItem (linkText, linkhref, icon, target) {  

  var iconHtml = '',  

  itemHtml,  

  linkId = linkText.split(' ').join('_'),

  newTab = '';

  if (typeof target !== 'undefined') {

    newTab = 'target="' + target + '"';

  }

  if (icon !== '') {  

  iconHtml = '<i class=" + icon + "></i> ';  

  }  

  itemHtml = '<li class="ic-app-header__menu-list-item ">' +  

  '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link" ' + newTab + '>' +  

  ' <div class="menu-item__text">' + iconHtml + linkText + '</div>' +  

  '  </a>' +  

  '</li>';  

  $('#menu').append(itemHtml);  

}  

addMenuItem('', 'http://students.westernsem.edu','icon-educators');

addMenuItem('Student Portal', 'http://students.westernsem.edu','');

});

Screen Shot 2016-04-26 at 4.43.51 PM.png

It seems like I posted this somewhere, but I don't know where. The icon to the left was intentional because (at the time I wrote it) the menu would not scroll if it was too long for the screen. If you want the icon to be centered, try this function instead:

function addMenuItem (linkText, linkhref, icon) {

    'use strict';

    var iconHtml = '',

        itemHtml,

        linkId = linkText.split(' ').join('_');

    if (icon !== '') {

        iconHtml = '<i class="' + icon + '" style="display: block; width: 100%; height: 25px;"></i> ';

    }

    itemHtml = '<li class="ic-app-header__menu-list-item ">' +

        '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link">' +

        '       <div class="menu-item__text">' + iconHtml + linkText + '</div>' +

        '  </a>' +

        '</li>';

    $('#menu').append(itemHtml);

}

addMenuItem('Logout', '/logout', 'icon-off');

The only real difference is the style attribute for the icon.

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.

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)

Yup...  Custom design.