Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* Note: laregly the same as Canvas's Dashboard styling */
.ou-ModuleCard{
box-sizing: border-box;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
border-radius: 6px;
overflow: hidden;
background: #fff;
width: 262px;
display: inline-block;
vertical-align: top;
margin: 0 36px 36px 0;
}
.ou-ModuleCard__header_hero {
box-sizing: border-box;
height: 108px;
border: 1px solid rgba(0,0,0,0.1);
}
.ou-ModuleCard__header_content {
box-sizing: border-box;
padding: 12px 18px 0;
background: #fff;
}
.ou-ModuleCard__header-title {
transition: all 0.2s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
padding: 0;
margin: 0;
line-height: 1.3;
font-size: 14px;
font-weight: bold;
}
.ou-ModuleCard__header-subtitle {
line-height: 1.3;
padding: 0 0 10px 0;
margin-top: 4px;
color: rgb(108, 117, 124);
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*
* Module 'Dashboard'
*/
$(document).ready(function() {
/* First test if we are on the Modules page */
if($('div.context_module').length){
//Canvas colours for cards
var moduleColours = ['#EF4437','#E71F63','#8F3E97','#65499D','#4554A4','#2083C5','#35A4DC','#09BCD3','#009688','#43A047','#8BC34A','#FDC010','#F8971C','#F0592B','#F06291'];
var delimiter = '.' //The character used to separate your module name and module description
var first = true;
$('#module-nav').remove(); //remove any existing module_nav
$('div.context_module').each( function(index) {
//get details of each module
var moduleFullName = $(this).find('span.name:first').text();
var moduleNameParts = moduleFullName.split(delimiter);
var moduleName = moduleNameParts[0];
var moduleDescription = " "; //default to a non-breaking space
if(moduleNameParts.length>1) {
moduleDescription = moduleNameParts[1]; //only update moduleDescription if there's something after the separator
}
var moduleId = $(this).children('a:first').attr('id'); //get moduleId to link to
if(moduleName!=='' && moduleName.trim() && moduleName!==' ') {
if(first){
//add module-nav which will contain the dashboard cards only once
first = false;
$('#content').prepend('<div id="module-nav" class="ou-ModuleCard__box"><a id="module-nav-anchor"></a></div>');
}
//add dashboard cards to module-nav
$('#module-nav').append(''+
'<div class="ou-ModuleCard">'+
' <a href="#' + moduleId + '">' +
' <div class="ou-ModuleCard__header_hero" style="background-color:'+moduleColours[index]+';" aria-hidden="true"></div>' +
' <div class="ou-ModuleCard__header_content">' +
' <h2 class="ou-ModuleCard__header-title ellipsis" title="' + moduleFullName + '">' +
' <span style="color:'+moduleColours[index]+';">' + moduleName + '</span>' +
' </h2>' +
' <div class="ou-ModuleCard__header-subtitle ellipsis" title="moduleDescription" data-reactid=".1.$43.0.2.0.1">' + moduleDescription +'</div>' +
' </a>' +
'</div>');
$(this).find('.ou-top-button').remove(); //remove any existing 'top' button
$(this).find('.ig-header').append('<a href="#module-nav-anchor" class="btn ou-top-button"><i class="icon-arrow-up"></i>Top</a>'); //add the 'top' button
}
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.