Last active
July 5, 2019 05:21
-
-
Save theotherdy/af97bb42110b94dec0e2acd967eece9a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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