Skip to content

Jeff Balicki / st_joseph

Go to a project
Toggle navigation
Toggle navigation pinning
a2bd643b by Jeff Balicki
Options

Clean up 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 67e0e29c
Expand all
Inline Side-by-side
Showing 13 changed files with 507 additions and 133 deletions
......@@ -15152,6 +15152,202 @@ input[type=checkbox] {
content: "" !important;
}
.thumbnail {
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
transition: all 0.2s ease-in-out;
display: inline-block;
max-width: 100%;
height: auto;
display: block;
position: relative;
padding: 0;
margin: 0;
}
.thumbnail .ribbon {
background: #5cb85c;
box-shadow: 0 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px rgba(0, 0, 0, 0.2);
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
position: absolute;
font-size: 14px;
left: -8px;
right: unset;
top: 10px;
padding: 3px 10px;
z-index: 2;
border-radius: 0px;
font-weight: bold;
}
.thumbnail .ribbon.enrolled {
background: #428bca;
}
.thumbnail .ribbon:before {
border: 4px solid transparent;
border-top: 4px solid #348c34;
border-right: 4px solid #348c34;
content: "";
position: absolute;
left: 0;
right: unset;
border-radius: 0px;
bottom: -8px;
}
.thumbnail .ribbon.enrolled:before {
border-top: 4px solid #357ebd;
border-right: 4px solid #357ebd;
}
.entry-title {
margin: 0 !important;
}
.entry-content {
margin-bottom: 10px;
padding: 0;
}
.items-wrapper_button {
margin: 5px 0 !important;
width: 100%;
}
.items-wrapper_button a {
text-decoration: none !important;
width: 100%;
}
.thumbnail a.btn-primary {
color: white;
}
.btn, .wpcf7 input[type=submit], .woocommerce-notices-wrapper .woocommerce-message a.button, .woocommerce-info a.button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn:focus, .wpcf7 input[type=submit]:focus, .woocommerce-notices-wrapper .woocommerce-message a.button:focus, .woocommerce-info a.button:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover, .wpcf7 input[type=submit]:hover, .woocommerce-notices-wrapper .woocommerce-message a.button:hover, .woocommerce-info a.button:hover, .learndash-course-grid .btn:focus, .learndash-course-grid .wpcf7 input[type=submit]:focus, .wpcf7 .learndash-course-grid input[type=submit]:focus, .learndash-course-grid .woocommerce-notices-wrapper .woocommerce-message a.button:focus, .woocommerce-notices-wrapper .woocommerce-message .learndash-course-grid a.button:focus, .learndash-course-grid .woocommerce-info a.button:focus, .woocommerce-info .learndash-course-grid a.button:focus {
color: #333333;
text-decoration: none;
}
.btn:active, .wpcf7 input[type=submit]:active, .woocommerce-notices-wrapper .woocommerce-message a.button:active, .woocommerce-info a.button:active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-primary {
color: #ffffff;
background-color: #428bca;
border-color: #357ebd;
}
.btn-primary:hover, .learndash-course-grid .btn-primary:focus, .learndash-course-grid .btn-primary:active {
color: #ffffff;
background-color: #3276b1;
border-color: #285e8e;
}
.btn-primary:active {
background-image: none;
}
.btn-primary {
color: white;
text-decoration: none;
}
.btn-primary:hover {
color: white;
}
.thumbnail img {
display: block;
max-width: 100%;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
box-shadow: none;
max-height: 400px;
}
.thumbnail a, .learndash-course-grid .thumbnail a:hover {
box-shadow: none;
}
.thumbnail .caption {
padding: 9px;
color: #333333;
}
.thumbnail .caption a {
text-decoration: none !important;
}
.thumbnail .caption p {
float: none !important;
margin: 15px 0 0 !important;
width: 100% !important;
}
.element-item {
position: relative;
float: left;
width: calc(33% - 30px);
height: 600px;
margin: 5px;
padding: 10px;
}
.element-item > * {
margin: 0;
padding: 0;
}
#load-more {
float: right;
margin: 5px;
}
.hidden {
visibility: hidden;
width: 0px !important;
height: 0px !important;
margin: 0px !important;
padding: 0px !important;
display: none;
}
.has-blue-color,
.has-blue-color:visited {
color: #0d6efd;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
import jQuery from 'jquery';
import jQueryBridget from 'jquery-bridget';
import Isotope from "isotope-layout";
jQueryBridget( 'isotope', Isotope, $ );
jQuery( document ).ready(function($) {
// quick search regex
var qsRegex;
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}, 200 ) );
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
//****************************
// Isotope Load more button
//****************************
var initShow = 3; //number of images loaded on init & onclick load more button
var counter = initShow; //counter for load more button
var iso = $grid.data('isotope'); // get Isotope instance
console.log('iso');
console.log(iso);
console.log(iso.elemCount);
loadMore(initShow); //execute function onload
function loadMore(toShow) {
$grid.find(".hidden").removeClass("hidden");
var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
console.log('hiddenElem');
console.log(item.element);
return item.element;
});
$(hiddenElems).addClass('hidden');
$grid.isotope('layout');
//when no more to load, hide show more button
if (hiddenElems.length == 0) {
$("#load-more").hide();
}
else {
$("#load-more").show();
};
}
//append load more button
$grid.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>');
//when load more button clicked
$(document).on("click", "#load-more", function(e) {
e.preventDefault();
if ($('#filters').data('clicked')) {
//when filter button clicked, set initial value for counter
counter = initShow;
j$('#filters').data('clicked', false);
} else {
counter = counter;
};
counter = counter + initShow;
loadMore(counter);
});
});
import jQuery from 'jquery';
import jQueryBridget from 'jquery-bridget';
import Isotope from "isotope-layout";
// Add your custom JS here.
import "./_carousels";
import "./jssocials.min";
jQueryBridget( 'isotope', Isotope, $ );
jQuery( document ).ready(function($) {
// quick search regex
var qsRegex;
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}, 200 ) );
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
//****************************
// Isotope Load more button
//****************************
var initShow = 3; //number of images loaded on init & onclick load more button
var counter = initShow; //counter for load more button
var iso = $grid.data('isotope'); // get Isotope instance
console.log('iso');
console.log(iso);
console.log(iso.elemCount);
loadMore(initShow); //execute function onload
function loadMore(toShow) {
$grid.find(".hidden").removeClass("hidden");
var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
console.log('hiddenElem');
console.log(item.element);
return item.element;
});
$(hiddenElems).addClass('hidden');
$grid.isotope('layout');
//when no more to load, hide show more button
if (hiddenElems.length == 0) {
$("#load-more").hide();
}
else {
$("#load-more").show();
};
}
//append load more button
$grid.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>');
//when load more button clicked
$(document).on("click", "#load-more", function(e) {
e.preventDefault();
if ($('#filters').data('clicked')) {
//when filter button clicked, set initial value for counter
counter = initShow;
j$('#filters').data('clicked', false);
} else {
counter = counter;
};
counter = counter + initShow;
loadMore(counter);
});
});
import "./_course_list"
var a = document.querySelector('.blur-image');
......
......@@ -14,6 +14,7 @@
@import "theme/carousel";
@import "theme/accordion";
@import "theme/sharethis";
@import "theme/course_list";
@import "assets/understrap/theme/colors"; // <-------- This creates the necessary bootstrap color classes.
......
.thumbnail{
line-height:1.428571429;
background-color:#ffffff;
border:1px solid #dddddd;
border-radius:4px;
-webkit-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
display:inline-block;
max-width:100%;
height:auto;
display:block;
position:relative;
padding:0;
margin:0;
}
.thumbnail .ribbon{
background:#5cb85c;
box-shadow:0 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px rgba(0,0,0,0.2);
-webkit-box-shadow:0 1px rgba(0,0,0,0.2);
color:#fff;
text-shadow:0 1px rgba(0,0,0,0.3);
position:absolute;
font-size:14px;
left:-8px;
right: unset;
top:10px;
padding:3px 10px;
z-index:2;
border-radius: 0px;
font-weight:bold;
}
.thumbnail .ribbon.enrolled{
background:#428bca;
}
.thumbnail .ribbon:before{
border:4px solid transparent;
border-top:4px solid #348c34;
border-right:4px solid #348c34;
content:"";
position:absolute;
left:0;
right: unset;
border-radius: 0px;
bottom:-8px;
}
.thumbnail .ribbon.enrolled:before{
border-top:4px solid #357ebd;
border-right:4px solid #357ebd;
}
.entry-title{
margin:0!important;
}
.entry-content{
margin-bottom:10px;
padding:0;
}
.items-wrapper_button{
margin:5px 0!important;
width:100%;
}
.items-wrapper_button a{
text-decoration:none!important;
width:100%;
}
.thumbnail a.btn-primary{
color:white;
}
.btn{
display:inline-block;
padding:6px 12px;
margin-bottom:0;
font-size:14px;
font-weight:normal;
line-height:1.428571429;
text-align:center;
vertical-align:middle;
cursor:pointer;
border:1px solid transparent;
border-radius:4px;
white-space:nowrap;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
.btn:focus{
outline:thin dotted #333;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px;
}
.btn:hover,.learndash-course-grid .btn:focus{
color:#333333;
text-decoration:none;
}
.btn:active{
outline:0;
background-image:none;
-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-primary{
color:#ffffff;
background-color:#428bca;
border-color:#357ebd;
}
.btn-primary:hover,.learndash-course-grid .btn-primary:focus,.learndash-course-grid .btn-primary:active{
color:#ffffff;
background-color:#3276b1;
border-color:#285e8e;
}
.btn-primary:active{
background-image:none;
}
.btn-primary{
color:white;
text-decoration:none;
}
.btn-primary:hover{
color:white;
}
.thumbnail img{
display:block;
max-width:100%;
width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
box-shadow:none;
max-height: 400px;
}
.thumbnail a,.learndash-course-grid .thumbnail a:hover{
box-shadow:none;
}
.thumbnail .caption{
padding:9px;
color:#333333;
}
.thumbnail .caption a{
text-decoration:none!important;
}
.thumbnail .caption p{
float:none!important;
margin:15px 0 0!important;
width:100%!important;
}
.element-item {
position: relative;
float: left;
width: calc(33% - 30px);
height: 600px;
margin: 5px;
padding: 10px;
}
.element-item > * {
margin: 0;
padding: 0;
}
#load-more{
float:right;
margin:5px;
}
.hidden{
visibility:hidden;
width:0px!important;
height:0px!important;
margin:0px!important;
padding:0px!important;
display:none;
}
\ No newline at end of file