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 354 additions and 47 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 + * { ...@@ -388,10 +388,6 @@ legend + * {
388 padding: 0; 388 padding: 0;
389 } 389 }
390 390
391 ::-webkit-file-upload-button {
392 font: inherit;
393 }
394
395 ::file-selector-button { 391 ::file-selector-button {
396 font: inherit; 392 font: inherit;
397 } 393 }
...@@ -1047,41 +1043,41 @@ body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-cont ...@@ -1047,41 +1043,41 @@ body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-cont
1047 } 1043 }
1048 @media (min-width: 576px) { 1044 @media (min-width: 576px) {
1049 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container, 1045 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
1050 body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container, 1046 body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
1051 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container, 1047 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
1052 body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container { 1048 body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
1053 max-width: 540px; 1049 max-width: 540px;
1054 } 1050 }
1055 } 1051 }
1056 @media (min-width: 768px) { 1052 @media (min-width: 768px) {
1057 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container, 1053 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
1058 body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container, 1054 body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
1059 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container, 1055 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
1060 body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container { 1056 body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
1061 max-width: 720px; 1057 max-width: 720px;
1062 } 1058 }
1063 } 1059 }
1064 @media (min-width: 992px) { 1060 @media (min-width: 992px) {
1065 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container, 1061 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
1066 body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container, 1062 body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
1067 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container, 1063 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
1068 body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container { 1064 body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
1069 max-width: 960px; 1065 max-width: 960px;
1070 } 1066 }
1071 } 1067 }
1072 @media (min-width: 1200px) { 1068 @media (min-width: 1200px) {
1073 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container, 1069 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
1074 body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container, 1070 body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
1075 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container, 1071 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
1076 body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container { 1072 body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
1077 max-width: 1140px; 1073 max-width: 1140px;
1078 } 1074 }
1079 } 1075 }
1080 @media (min-width: 1400px) { 1076 @media (min-width: 1400px) {
1081 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container, 1077 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
1082 body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container, 1078 body.understrap-no-sidebar .alignfull .wp-block-cover__inner-container,
1083 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container, 1079 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container,
1084 body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container { 1080 body.understrap-no-sidebar .wp-block-cover.alignfull .wp-block-cover__inner-container {
1085 max-width: 1320px; 1081 max-width: 1320px;
1086 } 1082 }
1087 } 1083 }
...@@ -1101,37 +1097,37 @@ body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-cont ...@@ -1101,37 +1097,37 @@ body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-cont
1101 } 1097 }
1102 @media (min-width: 576px) { 1098 @media (min-width: 576px) {
1103 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container, 1099 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
1104 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container { 1100 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
1105 max-width: 540px; 1101 max-width: 540px;
1106 } 1102 }
1107 } 1103 }
1108 @media (min-width: 768px) { 1104 @media (min-width: 768px) {
1109 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container, 1105 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
1110 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container { 1106 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
1111 max-width: 720px; 1107 max-width: 720px;
1112 } 1108 }
1113 } 1109 }
1114 @media (min-width: 992px) { 1110 @media (min-width: 992px) {
1115 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container, 1111 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
1116 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container { 1112 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
1117 max-width: 960px; 1113 max-width: 960px;
1118 } 1114 }
1119 } 1115 }
1120 @media (min-width: 1200px) { 1116 @media (min-width: 1200px) {
1121 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container, 1117 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
1122 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container { 1118 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
1123 max-width: 1140px; 1119 max-width: 1140px;
1124 } 1120 }
1125 } 1121 }
1126 @media (min-width: 1400px) { 1122 @media (min-width: 1400px) {
1127 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container, 1123 body.understrap-no-sidebar .alignwide .wp-block-cover__inner-container,
1128 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container { 1124 body.understrap-no-sidebar .wp-block-cover.alignwide .wp-block-cover__inner-container {
1129 max-width: 1320px; 1125 max-width: 1320px;
1130 } 1126 }
1131 } 1127 }
1132 @media (max-width: 920px) { 1128 @media (max-width: 920px) {
1133 body.understrap-no-sidebar .alignwide, 1129 body.understrap-no-sidebar .alignwide,
1134 body.understrap-no-sidebar .wp-block-cover.alignwide { 1130 body.understrap-no-sidebar .wp-block-cover.alignwide {
1135 margin: 0px calc(50% - 48vw); 1131 margin: 0px calc(50% - 48vw);
1136 max-width: 96vw; 1132 max-width: 96vw;
1137 width: 100vw; 1133 width: 100vw;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -90,4 +90,237 @@ function share_this($atts) ...@@ -90,4 +90,237 @@ function share_this($atts)
90 return ob_get_clean(); 90 return ob_get_clean();
91 } 91 }
92 92
93 add_shortcode('share-this', 'share_this');
...\ No newline at end of file ...\ No newline at end of file
93 add_shortcode('share-this', 'share_this');
94
95
96
97
98 function course_list()
99 {
100 $custom_args = array(
101 'post_type' => 'sfwd-courses',
102 'posts_per_page' => -1,
103 'paged' => 1,
104 );
105 $custom_query = new \WP_Query($custom_args);
106
107 ob_start();
108 $uniqid = uniqid();
109 if ($custom_query->have_posts()):?>
110 <p><input type="text" class="quicksearch" placeholder="Search" /></p>
111
112 <div class="button-group filters-button-group">
113 <button class="button is-checked" data-filter="*">Clear</button>
114 <button class="button" data-filter=".resilience-and-well-being">Resilience and Well-Being</button>
115 <button class="button" data-filter=".leadership-and-teamwork">Leadership and Teamwork</button>
116 <button class="button" data-filter=".clinical-skills">Clinical Skills</button>
117 <button class="button" data-filter=".coaching-and-mentoring">Coaching and Mentoring</button>
118
119 </div>
120 <div class="grid">
121 <?php while ($custom_query->have_posts()): $custom_query->the_post();
122 $id = get_the_ID();
123 $post = get_post($id);
124 $link = get_permalink($id);
125 $text = 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 );
129 $text = wp_trim_words( $text, $excerpt_length, ' ...' );
130 $categories = get_the_terms( $id, 'ld_course_category' );
131 $cat ="";
132 foreach( $categories as $category ) { $cat .= " ".$category->slug; };
133 ?>
134 <div class="element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>">
135
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>
138 <div class="image">
139 <a href="<?php echo $link; ?>" rel="bookmark">
140 <?php echo get_the_post_thumbnail($id, 'full' ); ?>
141 </a>
142 </div>
143 </div>
144 <div class="content">
145 <h3 class="entry-title"><a href="<?php echo $link; ?>"><?php echo $post->post_title; ?></a></h3>
146 <div class="entry-content">
147 <p><?php echo $text; ?></p>
148 </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>
150 </div>
151 </article>
152 </div>
153 <?php endwhile; ?>
154 </div>
155 <?php endif; ?>
156 <?php wp_reset_query(); ?>
157 <?php $output = ob_get_clean(); ?>
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 </style>
322 <?php return $output;
323 }
324
325
326 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.
This diff could not be displayed because it is too large.
...@@ -42,36 +42,39 @@ ...@@ -42,36 +42,39 @@
42 }, 42 },
43 "homepage": "https://understrap.com", 43 "homepage": "https://understrap.com",
44 "dependencies": { 44 "dependencies": {
45 "isotope": "^1.0.0-alpha.3",
46 "isotope-layout": "^3.0.6",
47 "jquery-bridget": "^3.0.1",
45 "jssocials": "^1.5.0", 48 "jssocials": "^1.5.0",
46 "rollup-plugin-postcss": "^4.0.2", 49 "rollup-plugin-postcss": "^4.0.2",
47 "swiper": "^8.4.6" 50 "swiper": "^8.4.7"
48 }, 51 },
49 "devDependencies": { 52 "devDependencies": {
50 "@babel/core": "^7.16.0", 53 "@babel/core": "^7.20.12",
51 "@babel/preset-env": "^7.16.4", 54 "@babel/preset-env": "^7.20.2",
52 "@popperjs/core": "^2.11.0", 55 "@popperjs/core": "^2.11.6",
53 "@rollup/plugin-babel": "^5.3.0", 56 "@rollup/plugin-babel": "^5.3.1",
54 "@rollup/plugin-commonjs": "^21.0.0", 57 "@rollup/plugin-commonjs": "^21.1.0",
55 "@rollup/plugin-multi-entry": "^4.1.0", 58 "@rollup/plugin-multi-entry": "^4.1.0",
56 "@rollup/plugin-node-resolve": "^13.0.6", 59 "@rollup/plugin-node-resolve": "^13.3.0",
57 "@rollup/plugin-replace": "^3.0.0", 60 "@rollup/plugin-replace": "^3.1.0",
58 "autoprefixer": "^10.4.0", 61 "autoprefixer": "^10.4.13",
59 "bootstrap": "^5.1.3", 62 "bootstrap": "^5.2.3",
60 "browser-sync": "^2.27.7", 63 "browser-sync": "^2.27.11",
61 "browserslist": "^4.18.1", 64 "browserslist": "^4.21.5",
62 "caniuse-lite": "^1.0.30001283", 65 "caniuse-lite": "^1.0.30001449",
63 "clean-css-cli": "^5.4.2", 66 "clean-css-cli": "^5.6.2",
64 "del": "^6.0.0", 67 "del": "^6.1.1",
65 "font-awesome": "^4.7.0", 68 "font-awesome": "^4.7.0",
66 "nodemon": "^2.0.15", 69 "nodemon": "^2.0.20",
67 "npm-run-all": "^4.1.5", 70 "npm-run-all": "^4.1.5",
68 "popper.js": "^1.16.1", 71 "popper.js": "^1.16.1",
69 "postcss": "^8.4.4", 72 "postcss": "^8.4.21",
70 "postcss-cli": "^9.0.2", 73 "postcss-cli": "^9.1.0",
71 "postcss-understrap-palette-generator": "git+https://github.com/understrap/postcss-understrap-palette-generator.git", 74 "postcss-understrap-palette-generator": "git+https://github.com/understrap/postcss-understrap-palette-generator.git",
72 "rollup": "^2.60.2", 75 "rollup": "^2.79.1",
73 "sass": "^1.44.0", 76 "sass": "^1.58.0",
74 "terser": "^5.10.0", 77 "terser": "^5.16.2",
75 "understrap": "github:understrap/understrap#develop" 78 "understrap": "github:understrap/understrap#develop"
76 } 79 }
77 } 80 }
......
1 import jQuery from 'jquery';
2 import jQueryBridget from 'jquery-bridget';
3 import Isotope from "isotope-layout";
4
5
1 // Add your custom JS here. 6 // Add your custom JS here.
2 import "./_carousels"; 7 import "./_carousels";
3 import "./jssocials.min"; 8 import "./jssocials.min";
4 9
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 var filterFns = {
27 // show if number is greater than 50
28 numberGreaterThan50: function() {
29 var number = $(this).find('.number').text();
30 return parseInt( number, 10 ) > 50;
31 },
32 // show if name ends with -ium
33 ium: function() {
34 var name = $(this).find('.name').text();
35 return name.match( /ium$/ );
36 }
37 };
38
39 // use value of search field to filter
40 var $quicksearch = $('.quicksearch').keyup( debounce( function() {
41 qsRegex = new RegExp( $quicksearch.val(), 'gi' );
42 $grid.isotope();
43 }, 200 ) );
44
45 // debounce so filtering doesn't happen every millisecond
46 function debounce( fn, threshold ) {
47 var timeout;
48 threshold = threshold || 100;
49 return function debounced() {
50 clearTimeout( timeout );
51 var args = arguments;
52 var _this = this;
53 function delayed() {
54 fn.apply( _this, args );
55 }
56 timeout = setTimeout( delayed, threshold );
57 };
58 }
59
60
61
62 // bind filter button click
63 $('.filters-button-group').on( 'click', 'button', function() {
64 var filterValue = $( this ).attr('data-filter');
65 // use filterFn if matches value
66 filterValue = filterFns[ filterValue ] || filterValue;
67 $grid.isotope({ filter: filterValue });
68 });
69
70 // change is-checked class on buttons
71 $('.button-group').each( function( i, buttonGroup ) {
72 var $buttonGroup = $( buttonGroup );
73 $buttonGroup.on( 'click', 'button', function() {
74 $buttonGroup.find('.is-checked').removeClass('is-checked');
75 $( this ).addClass('is-checked');
76 });
77 });
78
79 });
5 80
6 var a = document.querySelector('.blur-image'); 81 var a = document.querySelector('.blur-image');
7 82
......