Skip to content

Jeff Balicki / st_joseph

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

course list 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent d6745007
Expand all
Inline Side-by-side
Showing 16 changed files with 353 additions and 46 deletions
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.
......@@ -388,10 +388,6 @@ legend + * {
padding: 0;
}
::-webkit-file-upload-button {
font: inherit;
}
::file-selector-button {
font: inherit;
}
......@@ -1047,41 +1043,41 @@ body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-cont
}
@media (min-width: 576px) {
body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
max-width: 1320px;
}
}
......@@ -1101,37 +1097,37 @@ body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-cont
}
@media (min-width: 576px) {
body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
max-width: 1320px;
}
}
@media (max-width: 920px) {
body.understrap-no-sidebar .alignwide,
body.understrap-no-sidebar .wp-block-cover.alignwide {
body.understrap-no-sidebar .wp-block-cover.alignwide {
margin: 0px calc(50% - 48vw);
max-width: 96vw;
width: 100vw;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -91,3 +91,236 @@ return ob_get_clean();
}
add_shortcode('share-this', 'share_this');
function course_list()
{
$custom_args = array(
'post_type' => 'sfwd-courses',
'posts_per_page' => -1,
'paged' => 1,
);
$custom_query = new \WP_Query($custom_args);
ob_start();
$uniqid = uniqid();
if ($custom_query->have_posts()):?>
<p><input type="text" class="quicksearch" placeholder="Search" /></p>
<div class="button-group filters-button-group">
<button class="button is-checked" data-filter="*">Clear</button>
<button class="button" data-filter=".resilience-and-well-being">Resilience and Well-Being</button>
<button class="button" data-filter=".leadership-and-teamwork">Leadership and Teamwork</button>
<button class="button" data-filter=".clinical-skills">Clinical Skills</button>
<button class="button" data-filter=".coaching-and-mentoring">Coaching and Mentoring</button>
</div>
<div class="grid">
<?php while ($custom_query->have_posts()): $custom_query->the_post();
$id = get_the_ID();
$post = get_post($id);
$link = get_permalink($id);
$text = strip_shortcodes($post->post_content);
$text = apply_filters( 'the_content', $text );
$text = str_replace(']]>', ']]&gt;', $text);
$excerpt_length = apply_filters( 'excerpt_length', 40 );
$text = wp_trim_words( $text, $excerpt_length, ' ...' );
$categories = get_the_terms( $id, 'ld_course_category' );
$cat ="";
foreach( $categories as $category ) { $cat .= " ".$category->slug; };
?>
<div class="element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>">
<article id="post-<?php echo $id; ?>" class="post post-<?php echo $id; ?> sfwd-courses type-sfwd-courses status-publish has-post-thumbnail hentry ld_course_tag-online">
<div class="thumbnail"><div class="ribbon"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_ribbon_text', true);?></div>
<div class="image">
<a href="<?php echo $link; ?>" rel="bookmark">
<?php echo get_the_post_thumbnail($id, 'full' ); ?>
</a>
</div>
</div>
<div class="content">
<h3 class="entry-title"><a href="<?php echo $link; ?>"><?php echo $post->post_title; ?></a></h3>
<div class="entry-content">
<p><?php echo $text; ?></p>
</div>
<div class="button"><a role="button" href="<?php echo $link; ?>" rel="bookmark"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_button_text', true);?></a></div>
</div>
</article>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php $output = ob_get_clean(); ?>
<style>
.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;
}
</style>
<?php return $output;
}
add_shortcode('course-list', 'course_list');
\ No newline at end of file
......
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.
......@@ -42,36 +42,39 @@
},
"homepage": "https://understrap.com",
"dependencies": {
"isotope": "^1.0.0-alpha.3",
"isotope-layout": "^3.0.6",
"jquery-bridget": "^3.0.1",
"jssocials": "^1.5.0",
"rollup-plugin-postcss": "^4.0.2",
"swiper": "^8.4.6"
"swiper": "^8.4.7"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@popperjs/core": "^2.11.0",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.0",
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"@popperjs/core": "^2.11.6",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^21.1.0",
"@rollup/plugin-multi-entry": "^4.1.0",
"@rollup/plugin-node-resolve": "^13.0.6",
"@rollup/plugin-replace": "^3.0.0",
"autoprefixer": "^10.4.0",
"bootstrap": "^5.1.3",
"browser-sync": "^2.27.7",
"browserslist": "^4.18.1",
"caniuse-lite": "^1.0.30001283",
"clean-css-cli": "^5.4.2",
"del": "^6.0.0",
"@rollup/plugin-node-resolve": "^13.3.0",
"@rollup/plugin-replace": "^3.1.0",
"autoprefixer": "^10.4.13",
"bootstrap": "^5.2.3",
"browser-sync": "^2.27.11",
"browserslist": "^4.21.5",
"caniuse-lite": "^1.0.30001449",
"clean-css-cli": "^5.6.2",
"del": "^6.1.1",
"font-awesome": "^4.7.0",
"nodemon": "^2.0.15",
"nodemon": "^2.0.20",
"npm-run-all": "^4.1.5",
"popper.js": "^1.16.1",
"postcss": "^8.4.4",
"postcss-cli": "^9.0.2",
"postcss": "^8.4.21",
"postcss-cli": "^9.1.0",
"postcss-understrap-palette-generator": "git+https://github.com/understrap/postcss-understrap-palette-generator.git",
"rollup": "^2.60.2",
"sass": "^1.44.0",
"terser": "^5.10.0",
"rollup": "^2.79.1",
"sass": "^1.58.0",
"terser": "^5.16.2",
"understrap": "github:understrap/understrap#develop"
}
}
......
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');
});
});
});
var a = document.querySelector('.blur-image');
......