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
Inline Side-by-side
Showing 13 changed files with 562 additions and 348 deletions
...@@ -15152,6 +15152,202 @@ input[type=checkbox] { ...@@ -15152,6 +15152,202 @@ input[type=checkbox] {
15152 content: "" !important; 15152 content: "" !important;
15153 } 15153 }
15154 15154
15155 .thumbnail {
15156 line-height: 1.428571429;
15157 background-color: #ffffff;
15158 border: 1px solid #dddddd;
15159 border-radius: 4px;
15160 transition: all 0.2s ease-in-out;
15161 display: inline-block;
15162 max-width: 100%;
15163 height: auto;
15164 display: block;
15165 position: relative;
15166 padding: 0;
15167 margin: 0;
15168 }
15169
15170 .thumbnail .ribbon {
15171 background: #5cb85c;
15172 box-shadow: 0 1px rgba(0, 0, 0, 0.2);
15173 -moz-box-shadow: 0 1px rgba(0, 0, 0, 0.2);
15174 -webkit-box-shadow: 0 1px rgba(0, 0, 0, 0.2);
15175 color: #fff;
15176 text-shadow: 0 1px rgba(0, 0, 0, 0.3);
15177 position: absolute;
15178 font-size: 14px;
15179 left: -8px;
15180 right: unset;
15181 top: 10px;
15182 padding: 3px 10px;
15183 z-index: 2;
15184 border-radius: 0px;
15185 font-weight: bold;
15186 }
15187
15188 .thumbnail .ribbon.enrolled {
15189 background: #428bca;
15190 }
15191
15192 .thumbnail .ribbon:before {
15193 border: 4px solid transparent;
15194 border-top: 4px solid #348c34;
15195 border-right: 4px solid #348c34;
15196 content: "";
15197 position: absolute;
15198 left: 0;
15199 right: unset;
15200 border-radius: 0px;
15201 bottom: -8px;
15202 }
15203
15204 .thumbnail .ribbon.enrolled:before {
15205 border-top: 4px solid #357ebd;
15206 border-right: 4px solid #357ebd;
15207 }
15208
15209 .entry-title {
15210 margin: 0 !important;
15211 }
15212
15213 .entry-content {
15214 margin-bottom: 10px;
15215 padding: 0;
15216 }
15217
15218 .items-wrapper_button {
15219 margin: 5px 0 !important;
15220 width: 100%;
15221 }
15222
15223 .items-wrapper_button a {
15224 text-decoration: none !important;
15225 width: 100%;
15226 }
15227
15228 .thumbnail a.btn-primary {
15229 color: white;
15230 }
15231
15232 .btn, .wpcf7 input[type=submit], .woocommerce-notices-wrapper .woocommerce-message a.button, .woocommerce-info a.button {
15233 display: inline-block;
15234 padding: 6px 12px;
15235 margin-bottom: 0;
15236 font-size: 14px;
15237 font-weight: normal;
15238 line-height: 1.428571429;
15239 text-align: center;
15240 vertical-align: middle;
15241 cursor: pointer;
15242 border: 1px solid transparent;
15243 border-radius: 4px;
15244 white-space: nowrap;
15245 -webkit-user-select: none;
15246 -moz-user-select: none;
15247 -o-user-select: none;
15248 user-select: none;
15249 }
15250
15251 .btn:focus, .wpcf7 input[type=submit]:focus, .woocommerce-notices-wrapper .woocommerce-message a.button:focus, .woocommerce-info a.button:focus {
15252 outline: thin dotted #333;
15253 outline: 5px auto -webkit-focus-ring-color;
15254 outline-offset: -2px;
15255 }
15256
15257 .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 {
15258 color: #333333;
15259 text-decoration: none;
15260 }
15261
15262 .btn:active, .wpcf7 input[type=submit]:active, .woocommerce-notices-wrapper .woocommerce-message a.button:active, .woocommerce-info a.button:active {
15263 outline: 0;
15264 background-image: none;
15265 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
15266 }
15267
15268 .btn-primary {
15269 color: #ffffff;
15270 background-color: #428bca;
15271 border-color: #357ebd;
15272 }
15273
15274 .btn-primary:hover, .learndash-course-grid .btn-primary:focus, .learndash-course-grid .btn-primary:active {
15275 color: #ffffff;
15276 background-color: #3276b1;
15277 border-color: #285e8e;
15278 }
15279
15280 .btn-primary:active {
15281 background-image: none;
15282 }
15283
15284 .btn-primary {
15285 color: white;
15286 text-decoration: none;
15287 }
15288
15289 .btn-primary:hover {
15290 color: white;
15291 }
15292
15293 .thumbnail img {
15294 display: block;
15295 max-width: 100%;
15296 width: 100%;
15297 height: auto;
15298 margin-left: auto;
15299 margin-right: auto;
15300 box-shadow: none;
15301 max-height: 400px;
15302 }
15303
15304 .thumbnail a, .learndash-course-grid .thumbnail a:hover {
15305 box-shadow: none;
15306 }
15307
15308 .thumbnail .caption {
15309 padding: 9px;
15310 color: #333333;
15311 }
15312
15313 .thumbnail .caption a {
15314 text-decoration: none !important;
15315 }
15316
15317 .thumbnail .caption p {
15318 float: none !important;
15319 margin: 15px 0 0 !important;
15320 width: 100% !important;
15321 }
15322
15323 .element-item {
15324 position: relative;
15325 float: left;
15326 width: calc(33% - 30px);
15327 height: 600px;
15328 margin: 5px;
15329 padding: 10px;
15330 }
15331
15332 .element-item > * {
15333 margin: 0;
15334 padding: 0;
15335 }
15336
15337 #load-more {
15338 float: right;
15339 margin: 5px;
15340 }
15341
15342 .hidden {
15343 visibility: hidden;
15344 width: 0px !important;
15345 height: 0px !important;
15346 margin: 0px !important;
15347 padding: 0px !important;
15348 display: none;
15349 }
15350
15155 .has-blue-color, 15351 .has-blue-color,
15156 .has-blue-color:visited { 15352 .has-blue-color:visited {
15157 color: #0d6efd; 15353 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.
1 <?php 1 <?php
2
3
4 add_shortcode( 'promos', 'promos' );
5
6
2 function promos() 7 function promos()
3 { 8 {
4 $custom_args = array( 9 $custom_args = array(
...@@ -15,7 +20,24 @@ function promos() ...@@ -15,7 +20,24 @@ function promos()
15 <div id="<?php echo $uniqid; ?>" class="promo-carousel carousel-items"> 20 <div id="<?php echo $uniqid; ?>" class="promo-carousel carousel-items">
16 <div class='swiper-wrapper'> 21 <div class='swiper-wrapper'>
17 <?php while ($custom_query->have_posts()): $custom_query->the_post(); 22 <?php while ($custom_query->have_posts()): $custom_query->the_post();
18 $id = get_the_ID(); 23 echo promos_slides(get_the_ID());
24 endwhile; ?>
25 </div>
26 <div class="swiper-pagination"></div>
27 <div class="swiper-button-prev" data-id="<?= $uniqid; ?>"></div>
28 <div class="swiper-button-next" data-id="<?= $uniqid; ?>"></div>
29 </div>
30 </div>
31 <?php endif; ?>
32 <?php wp_reset_query(); ?>
33 <?php $output = ob_get_clean();
34
35 return $output;
36 }
37
38 function promos_slides($id)
39 {
40 ob_start();
19 $post = get_post($id); 41 $post = get_post($id);
20 $link = get_permalink($id); 42 $link = get_permalink($id);
21 if ($custom_link = get_post_meta($id, 'link', true)) { 43 if ($custom_link = get_post_meta($id, 'link', true)) {
...@@ -25,13 +47,10 @@ function promos() ...@@ -25,13 +47,10 @@ function promos()
25 if ($custom_link_text = get_post_meta($id, 'link_text', true)) { 47 if ($custom_link_text = get_post_meta($id, 'link_text', true)) {
26 $link_text = $custom_link_text; 48 $link_text = $custom_link_text;
27 } 49 }
28 $text = strip_shortcodes($post->post_content); 50 $text = str_replace(']]>', ']]&gt;', apply_filters( 'the_content', strip_shortcodes($post->post_content)));
29 $text = apply_filters( 'the_content', $text );
30 $text = str_replace(']]>', ']]&gt;', $text);
31
32 $excerpt_length = apply_filters( 'excerpt_length', 40 ); 51 $excerpt_length = apply_filters( 'excerpt_length', 40 );
33 $text = wp_trim_words( $text, $excerpt_length, ' ...' ); 52 $text = wp_trim_words( $text, $excerpt_length, ' ...' );
34 ?> 53 ?>
35 <div class="swiper-slide container"> 54 <div class="swiper-slide container">
36 <div class="promo row align-items-center"> 55 <div class="promo row align-items-center">
37 <div class="col-lg-4 col-md-12"> 56 <div class="col-lg-4 col-md-12">
...@@ -46,22 +65,14 @@ function promos() ...@@ -46,22 +65,14 @@ function promos()
46 </div> 65 </div>
47 </div> 66 </div>
48 </div> 67 </div>
49 <?php endwhile; ?>
50 </div>
51 <div class="swiper-pagination"></div>
52 <div class="swiper-button-prev" data-id="<?= $uniqid; ?>"></div>
53 <div class="swiper-button-next" data-id="<?= $uniqid; ?>"></div>
54 </div>
55 </div>
56 <?php endif; ?>
57 <?php wp_reset_query(); ?>
58 <?php $output = ob_get_clean();
59 68
60 return $output; 69 <?php
70 $output = ob_get_clean();
71 return $output;
61 } 72 }
62 73
63 add_shortcode( 'promos', 'promos' );
64 74
75 add_shortcode('share-this', 'share_this');
65 76
66 77
67 function share_this($atts) 78 function share_this($atts)
...@@ -90,10 +101,11 @@ function share_this($atts) ...@@ -90,10 +101,11 @@ function share_this($atts)
90 return ob_get_clean(); 101 return ob_get_clean();
91 } 102 }
92 103
93 add_shortcode('share-this', 'share_this');
94 104
95 105
96 106
107 add_shortcode('course-list', 'course_list');
108
97 109
98 function course_list() 110 function course_list()
99 { 111 {
...@@ -115,30 +127,36 @@ function course_list() ...@@ -115,30 +127,36 @@ function course_list()
115 <button class="button" data-filter=".leadership-and-teamwork">Leadership and Teamwork</button> 127 <button class="button" data-filter=".leadership-and-teamwork">Leadership and Teamwork</button>
116 <button class="button" data-filter=".clinical-skills">Clinical Skills</button> 128 <button class="button" data-filter=".clinical-skills">Clinical Skills</button>
117 <button class="button" data-filter=".coaching-and-mentoring">Coaching and Mentoring</button> 129 <button class="button" data-filter=".coaching-and-mentoring">Coaching and Mentoring</button>
118
119 </div> 130 </div>
120 <div class="grid"> 131 <div class="grid">
121 <?php while ($custom_query->have_posts()): $custom_query->the_post(); 132 <?php while ($custom_query->have_posts()): $custom_query->the_post();
122 $id = get_the_ID(); 133 echo course_card(get_the_ID());
134 endwhile; ?>
135 </div>
136 <?php endif;
137 wp_reset_query();
138 $output = ob_get_clean();
139 return $output;
140 }
141
142
143
144 function course_card($id)
145 {
146 ob_start();
123 $post = get_post($id); 147 $post = get_post($id);
124 $link = get_permalink($id); 148 $link = get_permalink($id);
125 $text = strip_shortcodes($post->post_content); 149 $text = str_replace(']]>', ']]&gt;', apply_filters( 'the_content', strip_shortcodes($post->post_content)));
126 $text = apply_filters( 'the_content', $text );
127 $text = str_replace(']]>', ']]&gt;', $text);
128 $excerpt_length = apply_filters( 'excerpt_length', 40 ); 150 $excerpt_length = apply_filters( 'excerpt_length', 40 );
129 $text = wp_trim_words( $text, $excerpt_length, ' ...' ); 151 $text = wp_trim_words( $text, $excerpt_length, ' ...' );
130 $categories = get_the_terms( $id, 'ld_course_category' ); 152 $categories = get_the_terms( $id, 'ld_course_category' );
131 $cat =""; 153 $cat ="";
132 foreach( $categories as $category ) { $cat .= " ".$category->slug; }; 154 foreach( $categories as $category ) { $cat .= " ".$category->slug; }; ?>
133 ?>
134 <div class="element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>"> 155 <div class="element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>">
135 156 <article id="post-<?php echo $id; ?>" class="post post-<?php echo $id; ?> sfwd-courses type-sfwd-courses">
136 <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">
137 <div class="thumbnail"><div class="ribbon"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_ribbon_text', true);?></div> 157 <div class="thumbnail"><div class="ribbon"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_ribbon_text', true);?></div>
138 <div class="image"> 158 <div class="image">
139 <a href="<?php echo $link; ?>" rel="bookmark"> 159 <a href="<?php echo $link; ?>" rel="bookmark"> <?php echo get_the_post_thumbnail($id, 'full' ); ?></a>
140 <?php echo get_the_post_thumbnail($id, 'full' ); ?>
141 </a>
142 </div> 160 </div>
143 </div> 161 </div>
144 <div class="content"> 162 <div class="content">
...@@ -146,191 +164,13 @@ function course_list() ...@@ -146,191 +164,13 @@ function course_list()
146 <div class="entry-content"> 164 <div class="entry-content">
147 <p><?php echo $text; ?></p> 165 <p><?php echo $text; ?></p>
148 </div> 166 </div>
149 <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> 167 <div class="button">
168 <a role="button" href="<?php echo $link; ?>" rel="bookmark"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_button_text', true);?></a>
150 </div> 169 </div>
151 </article>
152 </div> 170 </div>
153 <?php endwhile; ?> 171 </article>
154 </div> 172 </div>
155 <?php endif; ?> 173 <?php
156 <?php wp_reset_query(); ?> 174 $output = ob_get_clean();
157 <?php $output = ob_get_clean(); ?> 175 return $output;
158 <style>
159 .thumbnail{
160 line-height:1.428571429;
161 background-color:#ffffff;
162 border:1px solid #dddddd;
163 border-radius:4px;
164 -webkit-transition:all 0.2s ease-in-out;
165 transition:all 0.2s ease-in-out;
166 display:inline-block;
167 max-width:100%;
168 height:auto;
169 display:block;
170 position:relative;
171 padding:0;
172 margin:0;
173 }
174 .thumbnail .ribbon{
175 background:#5cb85c;
176 box-shadow:0 1px rgba(0,0,0,0.2);
177 -moz-box-shadow:0 1px rgba(0,0,0,0.2);
178 -webkit-box-shadow:0 1px rgba(0,0,0,0.2);
179 color:#fff;
180 text-shadow:0 1px rgba(0,0,0,0.3);
181 position:absolute;
182 font-size:14px;
183 left:-8px;
184 right: unset;
185 top:10px;
186 padding:3px 10px;
187 z-index:2;
188 border-radius: 0px;
189 font-weight:bold;
190 }
191 .thumbnail .ribbon.enrolled{
192 background:#428bca;
193 }
194 .thumbnail .ribbon:before{
195 border:4px solid transparent;
196 border-top:4px solid #348c34;
197 border-right:4px solid #348c34;
198 content:"";
199 position:absolute;
200 left:0;
201 right: unset;
202 border-radius: 0px;
203 bottom:-8px;
204 }
205 .thumbnail .ribbon.enrolled:before{
206 border-top:4px solid #357ebd;
207 border-right:4px solid #357ebd;
208 }
209 .entry-title{
210 margin:0!important;
211 }
212 .entry-content{
213 margin-bottom:10px;
214 padding:0;
215 }
216 .items-wrapper_button{
217 margin:5px 0!important;
218 width:100%;
219 }
220 .items-wrapper_button a{
221 text-decoration:none!important;
222 width:100%;
223 }
224 .thumbnail a.btn-primary{
225 color:white;
226 }
227 .btn{
228 display:inline-block;
229 padding:6px 12px;
230 margin-bottom:0;
231 font-size:14px;
232 font-weight:normal;
233 line-height:1.428571429;
234 text-align:center;
235 vertical-align:middle;
236 cursor:pointer;
237 border:1px solid transparent;
238 border-radius:4px;
239 white-space:nowrap;
240 -webkit-user-select:none;
241 -moz-user-select:none;
242 -ms-user-select:none;
243 -o-user-select:none;
244 user-select:none;
245 }
246 .btn:focus{
247 outline:thin dotted #333;
248 outline:5px auto -webkit-focus-ring-color;
249 outline-offset:-2px;
250 }
251 .btn:hover,.learndash-course-grid .btn:focus{
252 color:#333333;
253 text-decoration:none;
254 }
255 .btn:active{
256 outline:0;
257 background-image:none;
258 -webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
259 box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
260 }
261 .btn-primary{
262 color:#ffffff;
263 background-color:#428bca;
264 border-color:#357ebd;
265 }
266 .btn-primary:hover,.learndash-course-grid .btn-primary:focus,.learndash-course-grid .btn-primary:active{
267 color:#ffffff;
268 background-color:#3276b1;
269 border-color:#285e8e;
270 }
271 .btn-primary:active{
272 background-image:none;
273 }
274 .btn-primary{
275 color:white;
276 text-decoration:none;
277 }
278 .btn-primary:hover{
279 color:white;
280 }
281 .thumbnail img{
282 display:block;
283 max-width:100%;
284 width:100%;
285 height:auto;
286 margin-left:auto;
287 margin-right:auto;
288 box-shadow:none;
289 max-height: 400px;
290 }
291 .thumbnail a,.learndash-course-grid .thumbnail a:hover{
292 box-shadow:none;
293 }
294 .thumbnail .caption{
295 padding:9px;
296 color:#333333;
297 }
298 .thumbnail .caption a{
299 text-decoration:none!important;
300 }
301 .thumbnail .caption p{
302 float:none!important;
303 margin:15px 0 0!important;
304 width:100%!important;
305 }
306
307 .element-item {
308 position: relative;
309 float: left;
310 width: calc(33% - 30px);
311 height: 600px;
312 margin: 5px;
313 padding: 10px;
314
315 }
316
317 .element-item > * {
318 margin: 0;
319 padding: 0;
320 }
321 #load-more{
322 float:right;
323 margin:5px;
324 }
325 .hidden{visibility:hidden;
326 width:0px!important;
327 height:0px!important;
328 margin:0px!important;
329 padding:0px!important;
330 }
331 </style>
332 <?php return $output;
333 } 176 }
...\ No newline at end of file ...\ No newline at end of file
334
335
336 add_shortcode('course-list', 'course_list');
...\ No newline at end of file ...\ 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.
1 import jQuery from 'jquery';
2 import jQueryBridget from 'jquery-bridget';
3 import Isotope from "isotope-layout";
4
5
6
7 jQueryBridget( 'isotope', Isotope, $ );
8
9 jQuery( document ).ready(function($) {
10
11 // quick search regex
12 var qsRegex;
13
14 // init Isotope
15 var $grid = $('.grid').isotope({
16 itemSelector: '.element-item',
17 layoutMode: 'fitRows',
18 filter: function() {
19 return qsRegex ? $(this).text().match( qsRegex ) : true;
20 }
21 });
22
23
24 var filterFns = {
25 // show if number is greater than 50
26 numberGreaterThan50: function() {
27 var number = $(this).find('.number').text();
28 return parseInt( number, 10 ) > 50;
29 },
30 // show if name ends with -ium
31 ium: function() {
32 var name = $(this).find('.name').text();
33 return name.match( /ium$/ );
34 }
35 };
36
37 // use value of search field to filter
38 var $quicksearch = $('.quicksearch').keyup( debounce( function() {
39 qsRegex = new RegExp( $quicksearch.val(), 'gi' );
40 $grid.isotope();
41 }, 200 ) );
42
43 // debounce so filtering doesn't happen every millisecond
44 function debounce( fn, threshold ) {
45 var timeout;
46 threshold = threshold || 100;
47 return function debounced() {
48 clearTimeout( timeout );
49 var args = arguments;
50 var _this = this;
51 function delayed() {
52 fn.apply( _this, args );
53 }
54 timeout = setTimeout( delayed, threshold );
55 };
56 }
57
58
59
60 // bind filter button click
61 $('.filters-button-group').on( 'click', 'button', function() {
62 var filterValue = $( this ).attr('data-filter');
63 // use filterFn if matches value
64 filterValue = filterFns[ filterValue ] || filterValue;
65 $grid.isotope({ filter: filterValue });
66 });
67
68 // change is-checked class on buttons
69 $('.button-group').each( function( i, buttonGroup ) {
70 var $buttonGroup = $( buttonGroup );
71 $buttonGroup.on( 'click', 'button', function() {
72 $buttonGroup.find('.is-checked').removeClass('is-checked');
73 $( this ).addClass('is-checked');
74 });
75 });
76
77
78
79 //****************************
80 // Isotope Load more button
81 //****************************
82
83 var initShow = 3; //number of images loaded on init & onclick load more button
84 var counter = initShow; //counter for load more button
85 var iso = $grid.data('isotope'); // get Isotope instance
86 console.log('iso');
87 console.log(iso);
88 console.log(iso.elemCount);
89
90 loadMore(initShow); //execute function onload
91
92 function loadMore(toShow) {
93
94 $grid.find(".hidden").removeClass("hidden");
95
96 var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
97 console.log('hiddenElem');
98 console.log(item.element);
99 return item.element;
100 });
101 $(hiddenElems).addClass('hidden');
102 $grid.isotope('layout');
103
104 //when no more to load, hide show more button
105 if (hiddenElems.length == 0) {
106 $("#load-more").hide();
107 }
108 else {
109 $("#load-more").show();
110 };
111
112 }
113
114
115 //append load more button
116 $grid.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>');
117
118 //when load more button clicked
119 $(document).on("click", "#load-more", function(e) {
120 e.preventDefault();
121
122 if ($('#filters').data('clicked')) {
123 //when filter button clicked, set initial value for counter
124 counter = initShow;
125 j$('#filters').data('clicked', false);
126 } else {
127 counter = counter;
128 };
129
130 counter = counter + initShow;
131
132 loadMore(counter);
133 });
134
135 });
1 import jQuery from 'jquery';
2 import jQueryBridget from 'jquery-bridget';
3 import Isotope from "isotope-layout";
4 1
5 2
6 // Add your custom JS here. 3 // Add your custom JS here.
7 import "./_carousels"; 4 import "./_carousels";
8 import "./jssocials.min"; 5 import "./jssocials.min";
9 6 import "./_course_list"
10 jQueryBridget( 'isotope', Isotope, $ );
11
12 jQuery( document ).ready(function($) {
13
14 // quick search regex
15 var qsRegex;
16
17 // init Isotope
18 var $grid = $('.grid').isotope({
19 itemSelector: '.element-item',
20 layoutMode: 'fitRows',
21 filter: function() {
22 return qsRegex ? $(this).text().match( qsRegex ) : true;
23 }
24 });
25
26
27 var filterFns = {
28 // show if number is greater than 50
29 numberGreaterThan50: function() {
30 var number = $(this).find('.number').text();
31 return parseInt( number, 10 ) > 50;
32 },
33 // show if name ends with -ium
34 ium: function() {
35 var name = $(this).find('.name').text();
36 return name.match( /ium$/ );
37 }
38 };
39
40 // use value of search field to filter
41 var $quicksearch = $('.quicksearch').keyup( debounce( function() {
42 qsRegex = new RegExp( $quicksearch.val(), 'gi' );
43 $grid.isotope();
44 }, 200 ) );
45
46 // debounce so filtering doesn't happen every millisecond
47 function debounce( fn, threshold ) {
48 var timeout;
49 threshold = threshold || 100;
50 return function debounced() {
51 clearTimeout( timeout );
52 var args = arguments;
53 var _this = this;
54 function delayed() {
55 fn.apply( _this, args );
56 }
57 timeout = setTimeout( delayed, threshold );
58 };
59 }
60
61
62
63 // bind filter button click
64 $('.filters-button-group').on( 'click', 'button', function() {
65 var filterValue = $( this ).attr('data-filter');
66 // use filterFn if matches value
67 filterValue = filterFns[ filterValue ] || filterValue;
68 $grid.isotope({ filter: filterValue });
69 });
70
71 // change is-checked class on buttons
72 $('.button-group').each( function( i, buttonGroup ) {
73 var $buttonGroup = $( buttonGroup );
74 $buttonGroup.on( 'click', 'button', function() {
75 $buttonGroup.find('.is-checked').removeClass('is-checked');
76 $( this ).addClass('is-checked');
77 });
78 });
79
80
81
82 //****************************
83 // Isotope Load more button
84 //****************************
85
86 var initShow = 3; //number of images loaded on init & onclick load more button
87 var counter = initShow; //counter for load more button
88 var iso = $grid.data('isotope'); // get Isotope instance
89 console.log('iso');
90 console.log(iso);
91 console.log(iso.elemCount);
92
93 loadMore(initShow); //execute function onload
94
95 function loadMore(toShow) {
96
97 $grid.find(".hidden").removeClass("hidden");
98
99 var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
100 console.log('hiddenElem');
101 console.log(item.element);
102 return item.element;
103 });
104 $(hiddenElems).addClass('hidden');
105 $grid.isotope('layout');
106
107 //when no more to load, hide show more button
108 if (hiddenElems.length == 0) {
109 $("#load-more").hide();
110 }
111 else {
112 $("#load-more").show();
113 };
114
115 }
116
117
118 //append load more button
119 $grid.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>');
120
121 //when load more button clicked
122 $(document).on("click", "#load-more", function(e) {
123 e.preventDefault();
124
125 if ($('#filters').data('clicked')) {
126 //when filter button clicked, set initial value for counter
127 counter = initShow;
128 j$('#filters').data('clicked', false);
129 } else {
130 counter = counter;
131 };
132
133 counter = counter + initShow;
134
135 loadMore(counter);
136 });
137
138 });
139 7
140 var a = document.querySelector('.blur-image'); 8 var a = document.querySelector('.blur-image');
141 9
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
14 @import "theme/carousel"; 14 @import "theme/carousel";
15 @import "theme/accordion"; 15 @import "theme/accordion";
16 @import "theme/sharethis"; 16 @import "theme/sharethis";
17 @import "theme/course_list";
17 18
18 19
19 @import "assets/understrap/theme/colors"; // <-------- This creates the necessary bootstrap color classes. 20 @import "assets/understrap/theme/colors"; // <-------- This creates the necessary bootstrap color classes.
......
1 .thumbnail{
2 line-height:1.428571429;
3 background-color:#ffffff;
4 border:1px solid #dddddd;
5 border-radius:4px;
6 -webkit-transition:all 0.2s ease-in-out;
7 transition:all 0.2s ease-in-out;
8 display:inline-block;
9 max-width:100%;
10 height:auto;
11 display:block;
12 position:relative;
13 padding:0;
14 margin:0;
15 }
16 .thumbnail .ribbon{
17 background:#5cb85c;
18 box-shadow:0 1px rgba(0,0,0,0.2);
19 -moz-box-shadow:0 1px rgba(0,0,0,0.2);
20 -webkit-box-shadow:0 1px rgba(0,0,0,0.2);
21 color:#fff;
22 text-shadow:0 1px rgba(0,0,0,0.3);
23 position:absolute;
24 font-size:14px;
25 left:-8px;
26 right: unset;
27 top:10px;
28 padding:3px 10px;
29 z-index:2;
30 border-radius: 0px;
31 font-weight:bold;
32 }
33 .thumbnail .ribbon.enrolled{
34 background:#428bca;
35 }
36 .thumbnail .ribbon:before{
37 border:4px solid transparent;
38 border-top:4px solid #348c34;
39 border-right:4px solid #348c34;
40 content:"";
41 position:absolute;
42 left:0;
43 right: unset;
44 border-radius: 0px;
45 bottom:-8px;
46 }
47 .thumbnail .ribbon.enrolled:before{
48 border-top:4px solid #357ebd;
49 border-right:4px solid #357ebd;
50 }
51 .entry-title{
52 margin:0!important;
53 }
54 .entry-content{
55 margin-bottom:10px;
56 padding:0;
57 }
58 .items-wrapper_button{
59 margin:5px 0!important;
60 width:100%;
61 }
62 .items-wrapper_button a{
63 text-decoration:none!important;
64 width:100%;
65 }
66 .thumbnail a.btn-primary{
67 color:white;
68 }
69 .btn{
70 display:inline-block;
71 padding:6px 12px;
72 margin-bottom:0;
73 font-size:14px;
74 font-weight:normal;
75 line-height:1.428571429;
76 text-align:center;
77 vertical-align:middle;
78 cursor:pointer;
79 border:1px solid transparent;
80 border-radius:4px;
81 white-space:nowrap;
82 -webkit-user-select:none;
83 -moz-user-select:none;
84 -ms-user-select:none;
85 -o-user-select:none;
86 user-select:none;
87 }
88 .btn:focus{
89 outline:thin dotted #333;
90 outline:5px auto -webkit-focus-ring-color;
91 outline-offset:-2px;
92 }
93 .btn:hover,.learndash-course-grid .btn:focus{
94 color:#333333;
95 text-decoration:none;
96 }
97 .btn:active{
98 outline:0;
99 background-image:none;
100 -webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
101 box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
102 }
103 .btn-primary{
104 color:#ffffff;
105 background-color:#428bca;
106 border-color:#357ebd;
107 }
108 .btn-primary:hover,.learndash-course-grid .btn-primary:focus,.learndash-course-grid .btn-primary:active{
109 color:#ffffff;
110 background-color:#3276b1;
111 border-color:#285e8e;
112 }
113 .btn-primary:active{
114 background-image:none;
115 }
116 .btn-primary{
117 color:white;
118 text-decoration:none;
119 }
120 .btn-primary:hover{
121 color:white;
122 }
123 .thumbnail img{
124 display:block;
125 max-width:100%;
126 width:100%;
127 height:auto;
128 margin-left:auto;
129 margin-right:auto;
130 box-shadow:none;
131 max-height: 400px;
132 }
133 .thumbnail a,.learndash-course-grid .thumbnail a:hover{
134 box-shadow:none;
135 }
136 .thumbnail .caption{
137 padding:9px;
138 color:#333333;
139 }
140 .thumbnail .caption a{
141 text-decoration:none!important;
142 }
143 .thumbnail .caption p{
144 float:none!important;
145 margin:15px 0 0!important;
146 width:100%!important;
147 }
148
149 .element-item {
150 position: relative;
151 float: left;
152 width: calc(33% - 30px);
153 height: 600px;
154 margin: 5px;
155 padding: 10px;
156
157 }
158
159 .element-item > * {
160 margin: 0;
161 padding: 0;
162 }
163 #load-more{
164 float:right;
165 margin:5px;
166 }
167 .hidden{
168 visibility:hidden;
169 width:0px!important;
170 height:0px!important;
171 margin:0px!important;
172 padding:0px!important;
173 display:none;
174 }
...\ No newline at end of file ...\ No newline at end of file