cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
erinhmcmillan
Community Team
Community Team

Do you use InstUI? We want to hear from you!

Hi, Canvas developers! Our UI team is working on way to improve InstUI, Instructure's UI library, from an open source standpoint. If you are using InstUI in your projects, our UI team would like to hear from you!

Please reply and share your experience. Some things we'd like to know:

  • Why you are using InstUI
  • How you are using InstUI in your projects
  • What you currently like about InstUI
  • What changes would improve your InstUI experience

...and anything else you'd like to contribute about InstUI.

Thanks!

Erin

Labels (2)
36 Replies
robotcars
Community Champion

+1

vkl86
Community Member

I guess as an end-user, instructor, I am very confused.  So, you deprecated the old tools, but have not fully rolled out a new solution?  Am I understanding this correctly?  What are the thousands upon thousands of instructors, TAs, and staff support members with no React background or access to do now that we can't customize our own course pages?

kathleencunning
Community Member

Hi Erin,

After this weekend's release broke all our tabs and accordions, I tried to follow the links to InstUI. It is only accessible to programmers. The ease of use of the style sheets is now gone and I don't see an easy solution to fixing our tabs and accordions layout. What was the thinking on releasing it without putting the rich content editor interface in place? From the comments I've been reading, I believe you have thousands of instructors scrambling today to make their content layout usable.

erinhmcmillan
Community Team
Community Team

Hi, All,

Accordions were removed from jqueryui in the Canvas style guide, which has been deprecated for some time. If you need help with accordions in your existing content, here are some resources:

Thanks!

Erin

This is the solution we used and probably  @kenneth_larsen ‌ mentions in #comment-140821 for 4/20 Release Notes...

Just popping jQueryUI into Canvas may now have unintended consequences.

If you do this, expect issues, triage your content, and rip off the bandaid quickly.

danielcktan
Community Contributor

Hi all,

This is what we have done to keep our Accordions working. Hope this solution will be helpful to everyone.

  1. Do a custom download of JQuery UI. Only select Accordion Widget. Unzip the package to get the CSS and JS files.
     
  2. Copy the CSS code (jquery-ui.css) required for JQuery UI Accordion to the Custom CSS before uploading the file to the Theme Editor.

    Note 1: Links to the CDN for icon sprite files, code below

    /* JQuery Icons
    /* ----------------------------------------------------------------------------------------------------*/
    /* states and images */
    .ui-icon { width: 16px; height: 16px; }
    .ui-icon, .ui-widget-content .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_444444_256x240.png"); }
    .ui-widget-header .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_444444_256x240.png"); }
    .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_555555_256x240.png"); }
    .ui-state-active .ui-icon, .ui-button:active .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_ffffff_256x240.png"); }
    .ui-state-highlight .ui-icon, .ui-button .ui-state-highlight.ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_777620_256x240.png"); }
    .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_cc0000_256x240.png"); }
    .ui-button .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_777777_256x240.png"); }

     
    Note 2: Comment out the font size in the CSS classes below as this will conflict with the existing styles for Canvas and caused the text certain fields to render wrongly.
    .ui-widget { font-family: Arial,Helvetica,sans-serif; /*font-size: 1em;*/ }
    .ui-widget .ui-widget { /*font-size: 1em;*/ }
    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial,Helvetica,sans-serif; /*font-size: 1em;*/ }
     
  3. You can add additional CSS to style your Accordion as the Theme Colours no longer apply to the Accordions.
    /* Customised Styles for Accordion
    /* ----------------------------------------------------------------------------------------------------*/
    .ui-accordion h3.ui-accordion-header { padding: 5px 20px !important; margin-bottom: 0 !important; }
    .ui-accordion .ui-accordion-content { padding: 15px 15px 30px !important; }
    enhanceable_content.accordion,
    .accordion { display: block !important; height: 100%; margin-bottom: 30px !important; clear: both !important; }
     
  4. Copy the JS code (jquery-ui.js) and Initiation code (below) required for JQuery UI Accordion  to the Custom Javascript before uploading the file to the Theme Editor.

    // Initialise Accordion within Canvas
    $(document).ready(function(){
       $('.enhanceable_content.accordion').accordion({ heightStyle: "content", autoHeight: false, collapsible: true, active: false });
    });

    $(window).resize(function(){
        // update accordion height
        $('.enhanceable_content.accordion').accordion( 'resize' )
    });

     
  5. Test the CSS and JS on your Test Environment before implementing the solution to your Live Environment.
     

 @danielcktan  Thank You

Thank you, thank you, thank you!! This has worked wonderfully for my situation. I really appreciate your help.

 @danielcktan 's solution will probably work better for most institutions than what I did since what I did ties into the bigger Cidi Labs DesignPLUS Design Tools. However, you may want to test the Canvas Embed Image tool in the rce toolbar to make sure you can still add files from the Canvas course or Flickr. When I loaded jQuery back into Canvas, it broke that functionality. Granted, I was adding more than just the accordion JavaScript so you might be good but I thought I would pass that on as something that was an unintended consequence.

Thanks  @kenneth_larsen ‌.

I tested my environment and confirmed that the Image Embed Tool for inserting images from Canvas and Flickr works.

The search field for Flickr image insert seems to behave weirdly as I cannot see the words input into the search field. But the search term is captured.

 @kenneth_larsen  and  @danielcktan ,

Thanks for the heads up! I am seeing the same as Daniel. The search box is there. I can type search terms but the text doesn't display or even highlight. I can search though and the results do populate.

I did a quick look at the CSS and found that there is a "font-size: 1em;" that if I remove it the text field displays.

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
   font-family: Arial,Helvetica,sans-serif;
   font-size: 1em; 
}

Not sure if that effects anything else yet.