Skip to content

Jeff Balicki / st_joseph

Go to a project
Toggle navigation
Toggle navigation pinning
0b177f92 by Jeff Balicki
Options

learning-opportunities done 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent a2bd643b
Expand all
Inline Side-by-side
Showing 12 changed files with 423 additions and 223 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.
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
4 add_shortcode( 'promos', 'promos' ); 4 add_shortcode( 'promos', 'promos' );
5 5
6 6
7 function promos() 7 function promos(){
8 { 8
9 $custom_args = array( 9 $custom_args = array(
10 'post_type' => 'promo', 10 'post_type' => 'promo',
11 'posts_per_page' => 3, 11 'posts_per_page' => 3,
...@@ -16,6 +16,7 @@ function promos() ...@@ -16,6 +16,7 @@ function promos()
16 ob_start(); 16 ob_start();
17 $uniqid = uniqid(); 17 $uniqid = uniqid();
18 if ($custom_query->have_posts()):?> 18 if ($custom_query->have_posts()):?>
19
19 <div class="carousel"> 20 <div class="carousel">
20 <div id="<?php echo $uniqid; ?>" class="promo-carousel carousel-items"> 21 <div id="<?php echo $uniqid; ?>" class="promo-carousel carousel-items">
21 <div class='swiper-wrapper'> 22 <div class='swiper-wrapper'>
...@@ -28,15 +29,15 @@ function promos() ...@@ -28,15 +29,15 @@ function promos()
28 <div class="swiper-button-next" data-id="<?= $uniqid; ?>"></div> 29 <div class="swiper-button-next" data-id="<?= $uniqid; ?>"></div>
29 </div> 30 </div>
30 </div> 31 </div>
31 <?php endif; ?>
32 <?php wp_reset_query(); ?>
33 <?php $output = ob_get_clean();
34 32
33 <?php endif;
34 wp_reset_query();
35 $output = ob_get_clean();
35 return $output; 36 return $output;
36 } 37 }
37 38
38 function promos_slides($id) 39 function promos_slides($id){
39 { 40
40 ob_start(); 41 ob_start();
41 $post = get_post($id); 42 $post = get_post($id);
42 $link = get_permalink($id); 43 $link = get_permalink($id);
...@@ -49,8 +50,8 @@ function promos_slides($id) ...@@ -49,8 +50,8 @@ function promos_slides($id)
49 } 50 }
50 $text = str_replace(']]>', ']]&gt;', apply_filters( 'the_content', strip_shortcodes($post->post_content))); 51 $text = str_replace(']]>', ']]&gt;', apply_filters( 'the_content', strip_shortcodes($post->post_content)));
51 $excerpt_length = apply_filters( 'excerpt_length', 40 ); 52 $excerpt_length = apply_filters( 'excerpt_length', 40 );
52 $text = wp_trim_words( $text, $excerpt_length, ' ...' ); 53 $text = wp_trim_words( $text, $excerpt_length, ' ...' );?>
53 ?> 54
54 <div class="swiper-slide container"> 55 <div class="swiper-slide container">
55 <div class="promo row align-items-center"> 56 <div class="promo row align-items-center">
56 <div class="col-lg-4 col-md-12"> 57 <div class="col-lg-4 col-md-12">
...@@ -75,8 +76,8 @@ return $output; ...@@ -75,8 +76,8 @@ return $output;
75 add_shortcode('share-this', 'share_this'); 76 add_shortcode('share-this', 'share_this');
76 77
77 78
78 function share_this($atts) 79 function share_this($atts){
79 { 80
80 $atts = shortcode_atts(array( 81 $atts = shortcode_atts(array(
81 'post_id' => '', 82 'post_id' => '',
82 ), $atts, 'current-cover-articles'); 83 ), $atts, 'current-cover-articles');
...@@ -107,8 +108,8 @@ return ob_get_clean(); ...@@ -107,8 +108,8 @@ return ob_get_clean();
107 add_shortcode('course-list', 'course_list'); 108 add_shortcode('course-list', 'course_list');
108 109
109 110
110 function course_list() 111 function course_list(){
111 { 112
112 $custom_args = array( 113 $custom_args = array(
113 'post_type' => 'sfwd-courses', 114 'post_type' => 'sfwd-courses',
114 'posts_per_page' => -1, 115 'posts_per_page' => -1,
...@@ -119,20 +120,29 @@ function course_list() ...@@ -119,20 +120,29 @@ function course_list()
119 ob_start(); 120 ob_start();
120 $uniqid = uniqid(); 121 $uniqid = uniqid();
121 if ($custom_query->have_posts()):?> 122 if ($custom_query->have_posts()):?>
122 <p><input type="text" class="quicksearch" placeholder="Search" /></p> 123 <div class="course-list">
123 124 <label for="quicksearch">Search programs:</label><input type="text" id="quicksearch" placeholder="" />
124 <div class="button-group filters-button-group"> 125 <div class="filters">
125 <button class="button is-checked" data-filter="*">Clear</button> 126 <a href="#" id="filter-more">FILTERS <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></a>
126 <button class="button" data-filter=".resilience-and-well-being">Resilience and Well-Being</button> 127 <div class="filter-group">
127 <button class="button" data-filter=".leadership-and-teamwork">Leadership and Teamwork</button> 128 <div class="category-filter-group">
128 <button class="button" data-filter=".clinical-skills">Clinical Skills</button> 129 <?php $terms = get_terms( array( 'taxonomy' => 'ld_course_category' ,'parent' => 0) );
129 <button class="button" data-filter=".coaching-and-mentoring">Coaching and Mentoring</button> 130 foreach($terms as $term){ ?>
131 <div class="category-filter"> <input id="<?php echo $term->slug ; ?>" value=".<?php echo $term->slug ; ?>" type="checkbox" class="sr-only"><label for="<?php echo $term->slug ; ?>"><?php echo $term->name ; ?></label></div>
132 <?php }; ?>
133 </div>
134 <div class="btn-group sort-button-group align-self-end">
135 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursename" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
136 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursedate" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
137 </div>
138 </div>
130 </div> 139 </div>
131 <div class="grid"> 140 <div class="grid">
132 <?php while ($custom_query->have_posts()): $custom_query->the_post(); 141 <?php while ($custom_query->have_posts()): $custom_query->the_post();
133 echo course_card(get_the_ID()); 142 echo course_card(get_the_ID());
134 endwhile; ?> 143 endwhile; ?>
135 </div> 144 </div>
145 </div>
136 <?php endif; 146 <?php endif;
137 wp_reset_query(); 147 wp_reset_query();
138 $output = ob_get_clean(); 148 $output = ob_get_clean();
...@@ -141,36 +151,37 @@ function course_list() ...@@ -141,36 +151,37 @@ function course_list()
141 151
142 152
143 153
144 function course_card($id) 154 function course_card($id){
145 { 155
146 ob_start(); 156 ob_start();
147 $post = get_post($id); 157 $post = get_post($id);
148 $link = get_permalink($id);
149 $text = str_replace(']]>', ']]&gt;', apply_filters( 'the_content', strip_shortcodes($post->post_content))); 158 $text = str_replace(']]>', ']]&gt;', apply_filters( 'the_content', strip_shortcodes($post->post_content)));
150 $excerpt_length = apply_filters( 'excerpt_length', 40 ); 159 $excerpt_length = apply_filters( 'excerpt_length', 20 );
151 $text = wp_trim_words( $text, $excerpt_length, ' ...' ); 160 $text = wp_trim_words( $text, $excerpt_length, ' ...' );
152 $categories = get_the_terms( $id, 'ld_course_category' ); 161 $categories = get_the_terms( $id, 'ld_course_category' );
153 $cat =""; 162 $cat =""; foreach( $categories as $category ) { $cat .= " ".$category->slug; }; ?>
154 foreach( $categories as $category ) { $cat .= " ".$category->slug; }; ?> 163
155 <div class="element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>"> 164 <div class="element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>">
156 <article id="post-<?php echo $id; ?>" class="post post-<?php echo $id; ?> sfwd-courses type-sfwd-courses"> 165 <article id="post-<?php echo $id; ?>" class="post post-<?php echo $id; ?> sfwd-courses type-sfwd-courses">
166 <div class="card">
157 <div class="thumbnail"><div class="ribbon"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_ribbon_text', true);?></div> 167 <div class="thumbnail"><div class="ribbon"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_ribbon_text', true);?></div>
158 <div class="image"> 168 <div class="image">
159 <a href="<?php echo $link; ?>" rel="bookmark"> <?php echo get_the_post_thumbnail($id, 'full' ); ?></a> 169 <?php echo get_the_post_thumbnail($id, 'full' ); ?>
160 </div> 170 </div>
161 </div> 171 </div>
162 <div class="content"> 172 <div class="content">
163 <h3 class="entry-title"><a href="<?php echo $link; ?>"><?php echo $post->post_title; ?></a></h3> 173 <h3 class="entry-title"><?php echo $post->post_title; ?></h3>
164 <div class="entry-content"> 174 <div class="entry-content">
165 <p><?php echo $text; ?></p> 175 <p><?php echo $text; ?></p>
166 </div> 176 </div>
167 <div class="button"> 177 <a class="btn" role="button" href="<?php echo get_permalink($id); ?>" rel="bookmark">LEARN MORE</a>
168 <a role="button" href="<?php echo $link; ?>" rel="bookmark"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_button_text', true);?></a> 178
169 </div> 179 </div>
170 </div> 180 </div>
171 </article> 181 </article>
172 </div> 182 </div>
183
173 <?php 184 <?php
174 $output = ob_get_clean(); 185 $output = ob_get_clean();
175 return $output; 186 return $output;
176 } 187 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -17634,25 +17634,21 @@ ...@@ -17634,25 +17634,21 @@
17634 var $grid = $('.grid').isotope({ 17634 var $grid = $('.grid').isotope({
17635 itemSelector: '.element-item', 17635 itemSelector: '.element-item',
17636 layoutMode: 'fitRows', 17636 layoutMode: 'fitRows',
17637 getSortData: {
17638 coursename: '.name',
17639 date: '[data-ticks]'
17640 },
17637 filter: function () { 17641 filter: function () {
17638 return qsRegex ? $(this).text().match(qsRegex) : true; 17642 var $this = $(this);
17643 var filterText = qsRegex ? $(this).text().match(qsRegex) : true;
17644 var buttonResult = filterValue ? $this.is(filterValue) : true;
17645 return filterText && buttonResult;
17639 } 17646 }
17640 }); 17647 });
17641 var filterFns = {
17642 // show if number is greater than 50
17643 numberGreaterThan50: function () {
17644 var number = $(this).find('.number').text();
17645 return parseInt(number, 10) > 50;
17646 },
17647 // show if name ends with -ium
17648 ium: function () {
17649 var name = $(this).find('.name').text();
17650 return name.match(/ium$/);
17651 }
17652 };
17653 17648
17654 // use value of search field to filter 17649 // use value of search field to filter
17655 var $quicksearch = $('.quicksearch').keyup(debounce(function () { 17650 var $quicksearch = $('#quicksearch').keyup(debounce(function () {
17651 console.log($quicksearch.val());
17656 qsRegex = new RegExp($quicksearch.val(), 'gi'); 17652 qsRegex = new RegExp($quicksearch.val(), 'gi');
17657 $grid.isotope(); 17653 $grid.isotope();
17658 }, 200)); 17654 }, 200));
...@@ -17672,24 +17668,65 @@ ...@@ -17672,24 +17668,65 @@
17672 }; 17668 };
17673 } 17669 }
17674 17670
17675 // bind filter button click 17671 // filter with selects and checkboxes
17676 $('.filters-button-group').on('click', 'button', function () { 17672 var $checkboxes = $('.category-filter input');
17677 var filterValue = $(this).attr('data-filter'); 17673 var filterValue;
17678 // use filterFn if matches value 17674 $checkboxes.change(function () {
17679 filterValue = filterFns[filterValue] || filterValue; 17675 // map input values to an array
17680 $grid.isotope({ 17676 var inclusives = [];
17681 filter: filterValue 17677 // inclusive filters from checkboxes
17682 }); 17678 $checkboxes.each(function (i, elem) {
17679 // if checkbox, use value if checked
17680 if (elem.checked) {
17681 inclusives.push(elem.value);
17682 }
17683 }); 17683 });
17684 17684
17685 // change is-checked class on buttons 17685 // combine inclusive filters
17686 $('.button-group').each(function (i, buttonGroup) { 17686 filterValue = inclusives.length ? inclusives.join(', ') : '*';
17687 var $buttonGroup = $(buttonGroup); 17687 $grid.isotope();
17688 $buttonGroup.on('click', 'button', function () { 17688 updateFilterCounts();
17689 $buttonGroup.find('.is-checked').removeClass('is-checked'); 17689 });
17690 $(this).addClass('is-checked'); 17690 $('.sort-button-group').on('click', 'button', function () {
17691 var sortValue = $(this).attr('data-sort-value');
17692 var direction = $(this).attr('data-sort-direction');
17693 var isAscending = direction == 'asc';
17694 var newDirection = isAscending ? 'desc' : 'asc';
17695 $grid.isotope({
17696 sortBy: sortValue,
17697 sortAscending: isAscending
17691 }); 17698 });
17699 $(this).attr('data-sort-direction', newDirection);
17700 var span = $(this).find('.glyphicon');
17701 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
17692 }); 17702 });
17703 function updateFilterCounts() {
17704 var itemElems = $grid.isotope('getFilteredItemElements');
17705 var count_items = $(itemElems).length;
17706 if (count_items > counter) {
17707 $("#load-more").hide();
17708 } else {
17709 $("#load-more").show();
17710 }
17711 if ($('.element-item').hasClass('hidden')) {
17712 $('.element-item').removeClass('hidden');
17713 }
17714 var index = 0;
17715 $(itemElems).each(function () {
17716 if (index >= counter) {
17717 $(this).addClass('hidden');
17718 }
17719 index++;
17720 });
17721 console.log('updateFilterCounts');
17722 console.log(index);
17723 if (index === 0) {
17724 $("#load-more").hide();
17725 } else {
17726 $("#load-more").show();
17727 }
17728 $grid.isotope('layout');
17729 }
17693 17730
17694 //**************************** 17731 //****************************
17695 // Isotope Load more button 17732 // Isotope Load more button
...@@ -17722,7 +17759,7 @@ ...@@ -17722,7 +17759,7 @@
17722 } 17759 }
17723 17760
17724 //append load more button 17761 //append load more button
17725 $grid.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>'); 17762 $grid.after('<div class="view-plan"><a class="btn" href="#" id="load-more">LOAD MORE programs</a></div>');
17726 17763
17727 //when load more button clicked 17764 //when load more button clicked
17728 $(document).on("click", "#load-more", function (e) { 17765 $(document).on("click", "#load-more", function (e) {
...@@ -17737,6 +17774,12 @@ ...@@ -17737,6 +17774,12 @@
17737 counter = counter + initShow; 17774 counter = counter + initShow;
17738 loadMore(counter); 17775 loadMore(counter);
17739 }); 17776 });
17777 $(document).on("click", "#filter-more", function (e) {
17778 e.preventDefault();
17779 $('.filter-group').toggleClass('open');
17780 var span = $(this).find('.glyphicon');
17781 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
17782 });
17740 }); 17783 });
17741 17784
17742 // Add your custom JS here. 17785 // Add your custom JS here.
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -2,8 +2,6 @@ import jQuery from 'jquery'; ...@@ -2,8 +2,6 @@ import jQuery from 'jquery';
2 import jQueryBridget from 'jquery-bridget'; 2 import jQueryBridget from 'jquery-bridget';
3 import Isotope from "isotope-layout"; 3 import Isotope from "isotope-layout";
4 4
5
6
7 jQueryBridget( 'isotope', Isotope, $ ); 5 jQueryBridget( 'isotope', Isotope, $ );
8 6
9 jQuery( document ).ready(function($) { 7 jQuery( document ).ready(function($) {
...@@ -15,27 +13,23 @@ var qsRegex; ...@@ -15,27 +13,23 @@ var qsRegex;
15 var $grid = $('.grid').isotope({ 13 var $grid = $('.grid').isotope({
16 itemSelector: '.element-item', 14 itemSelector: '.element-item',
17 layoutMode: 'fitRows', 15 layoutMode: 'fitRows',
16 getSortData: {
17 coursename: '.name',
18 date: '[data-ticks]',
19 },
18 filter: function() { 20 filter: function() {
19 return qsRegex ? $(this).text().match( qsRegex ) : true; 21 var $this = $(this);
22 var filterText = qsRegex ? $(this).text().match( qsRegex ) : true;
23 var buttonResult = filterValue ? $this.is( filterValue ) : true;
24 return filterText && buttonResult;
20 } 25 }
21 }); 26 });
22 27
23 28
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 29
37 // use value of search field to filter 30 // use value of search field to filter
38 var $quicksearch = $('.quicksearch').keyup( debounce( function() { 31 var $quicksearch = $('#quicksearch').keyup( debounce( function() {
32 console.log($quicksearch.val());
39 qsRegex = new RegExp( $quicksearch.val(), 'gi' ); 33 qsRegex = new RegExp( $quicksearch.val(), 'gi' );
40 $grid.isotope(); 34 $grid.isotope();
41 }, 200 ) ); 35 }, 200 ) );
...@@ -56,26 +50,80 @@ function debounce( fn, threshold ) { ...@@ -56,26 +50,80 @@ function debounce( fn, threshold ) {
56 } 50 }
57 51
58 52
53 // filter with selects and checkboxes
54 var $checkboxes = $('.category-filter input');
55 var filterValue;
59 56
60 // bind filter button click 57 $checkboxes.change( function() {
61 $('.filters-button-group').on( 'click', 'button', function() { 58 // map input values to an array
62 var filterValue = $( this ).attr('data-filter'); 59 var inclusives = [];
63 // use filterFn if matches value 60 // inclusive filters from checkboxes
64 filterValue = filterFns[ filterValue ] || filterValue; 61 $checkboxes.each( function( i, elem ) {
65 $grid.isotope({ filter: filterValue }); 62 // if checkbox, use value if checked
63 if ( elem.checked ) {
64 inclusives.push( elem.value );
65 }
66 });
67
68 // combine inclusive filters
69 filterValue = inclusives.length ? inclusives.join(', ') : '*';
70 $grid.isotope();
71 updateFilterCounts();
66 }); 72 });
67 73
68 // change is-checked class on buttons 74
69 $('.button-group').each( function( i, buttonGroup ) { 75 $('.sort-button-group').on( 'click', 'button', function() {
70 var $buttonGroup = $( buttonGroup ); 76 var sortValue = $(this).attr('data-sort-value');
71 $buttonGroup.on( 'click', 'button', function() { 77 var direction = $(this).attr('data-sort-direction');
72 $buttonGroup.find('.is-checked').removeClass('is-checked'); 78 var isAscending = (direction == 'asc');
73 $( this ).addClass('is-checked'); 79 var newDirection = (isAscending) ? 'desc' : 'asc';
74 }); 80 $grid.isotope({ sortBy: sortValue, sortAscending: isAscending });
81 $(this).attr('data-sort-direction', newDirection);
82 var span = $(this).find('.glyphicon');
83 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
75 }); 84 });
76 85
77 86
78 87
88 function updateFilterCounts() {
89
90 var itemElems = $grid.isotope('getFilteredItemElements');
91 var count_items = $(itemElems).length;
92
93 if (count_items > counter) {
94 $("#load-more").hide();
95
96 }else {
97 $("#load-more").show();
98 }
99 if ($('.element-item').hasClass('hidden')) {
100 $('.element-item').removeClass('hidden');
101 }
102 var index = 0;
103
104 $(itemElems).each(function () {
105 if (index >= counter) {
106 $(this).addClass('hidden');
107 }
108 index++;
109 });
110 console.log('updateFilterCounts');
111 console.log(index);
112 if(index === 0){
113
114 $("#load-more").hide();
115
116 }else{
117 $("#load-more").show();
118
119 }
120 $grid.isotope('layout');
121
122 }
123
124
125
126
79 //**************************** 127 //****************************
80 // Isotope Load more button 128 // Isotope Load more button
81 //**************************** 129 //****************************
...@@ -104,8 +152,7 @@ $('.button-group').each( function( i, buttonGroup ) { ...@@ -104,8 +152,7 @@ $('.button-group').each( function( i, buttonGroup ) {
104 //when no more to load, hide show more button 152 //when no more to load, hide show more button
105 if (hiddenElems.length == 0) { 153 if (hiddenElems.length == 0) {
106 $("#load-more").hide(); 154 $("#load-more").hide();
107 } 155 } else {
108 else {
109 $("#load-more").show(); 156 $("#load-more").show();
110 }; 157 };
111 158
...@@ -113,7 +160,7 @@ $('.button-group').each( function( i, buttonGroup ) { ...@@ -113,7 +160,7 @@ $('.button-group').each( function( i, buttonGroup ) {
113 160
114 161
115 //append load more button 162 //append load more button
116 $grid.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>'); 163 $grid.after('<div class="view-plan"><a class="btn" href="#" id="load-more">LOAD MORE programs</a></div>');
117 164
118 //when load more button clicked 165 //when load more button clicked
119 $(document).on("click", "#load-more", function(e) { 166 $(document).on("click", "#load-more", function(e) {
...@@ -132,4 +179,12 @@ $('.button-group').each( function( i, buttonGroup ) { ...@@ -132,4 +179,12 @@ $('.button-group').each( function( i, buttonGroup ) {
132 loadMore(counter); 179 loadMore(counter);
133 }); 180 });
134 181
182 $(document).on("click", "#filter-more", function(e) {
183 e.preventDefault();
184 $('.filter-group').toggleClass('open');
185 var span = $(this).find('.glyphicon');
186 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
187 });
188
189
135 }); 190 });
......
...@@ -108,6 +108,9 @@ max-width: 100% !important; ...@@ -108,6 +108,9 @@ max-width: 100% !important;
108 font-size: 18px; 108 font-size: 18px;
109 109
110 } 110 }
111 input[type=submit]:hover{
112 background-color: #2C2C2C;
113 }
111 } 114 }
112 } 115 }
113 116
......
1 .thumbnail{ 1 label[for=quicksearch]{
2 font-size: 18px;
3 line-height: 24px;
4 color: #0484B8;
5 text-transform: uppercase;
6 }
7 #quicksearch{
8 width: 600px;
9 border-bottom:1px solid #8E908F !important;
10 }
11 .filters{
12 border-bottom:1px solid #FFA300 !important;
13 border-top:1px solid #FFA300 !important;
14 padding: 10px 0px 10px 0px;
15 .glyphicon-chevron-up::after{
16 content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.432' height='11.567' viewBox='0 0 19.432 11.567'%3E%3Cpath id='Path_1875' data-name='Path 1875' d='M395.235 274.525a1.19 1.19 0 0 0 1.681.063l9.188-8.526a1.19 1.19 0 0 0 0-1.744l-9.187-8.526a1.19 1.19 0 1 0-1.619 1.744l8.248 7.654-8.248 7.654a1.19 1.19 0 0 0-.063 1.681Z' transform='translate(274.905 -394.917) rotate(90)' fill='%230484b8'/%3E%3C/svg%3E");
17 }
18 .glyphicon-chevron-down::after{
19 content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.631' height='11.905' viewBox='0 0 19.631 11.905'%3E%3Cpath id='Path_1875' data-name='Path 1875' d='M395.235 274.525a1.19 1.19 0 0 0 1.681.063l9.188-8.526a1.19 1.19 0 0 0 0-1.744l-9.187-8.526a1.19 1.19 0 1 0-1.619 1.744l8.248 7.654-8.248 7.654a1.19 1.19 0 0 0-.063 1.681Z' transform='matrix(-0.017 -1 1 -0.017 -248.34 411.22)' fill='%230484b8'/%3E%3C/svg%3E");
20 }
21 #filter-more{
22 font-size: 18px;
23 line-height: 24px;
24 color: #0484B8;
25 text-transform: uppercase;
26 text-decoration: none;
27 padding: 10px 0px;
28 display: block;
29 }
30 .filter-group{
31 display:none;
32 flex-direction: row ;
33 justify-content: space-between;
34 margin-bottom: 20px;
35 .sort-button-group {
36 .btn{
37 border:1px solid #0081BC;
38
39 }
40
41 }
42 }
43 .filter-group.open{
44 display:flex;
45 }
46 }
47 .category-filter-group{
48 display:flex;
49 flex-direction: row ;
50 }
51 .category-filter{
52 display:flex;
53 flex-direction: row ;
54 font-size:18px;
55 font-size:1.125rem;
56 color:#515151;
57 margin:.25rem 0;
58 margin-right:1rem;
59 label{
60 padding-left:30px;
61 padding-right:10px;
62 white-space:nowrap;
63 cursor:pointer;
64 color: #2C2C2C;
65 }
66 input[type=checkbox]{
67 display:inline-block;
68 margin-left:30px;
69 margin-left:0;
70 }
71 input[type=checkbox]:focus+label{
72 outline:-webkit-focus-ring-color auto 1px;
73 }
74 label:before{
75 content:'';
76 cursor:pointer;
77 height:25px;
78 width:25px;
79 padding:2.5px;
80 display:inline-block;
81 position:absolute;
82 background:#FFF;
83 margin-left:-30px;
84 border:2px solid #0081BC;
85 border-radius: 4px;
86 }
87 input:checked+label:before{
88 background:#0081BC !important;
89 border:2px solid #0081BC;
90 content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.078' height='18.352' viewBox='0 0 15.078 18.352'%3E%3Cpath id='Path_1871' data-name='Path 1871' d='M137.622 43.1l1.28 2.211 6.924-11.987a1.837 1.837 0 0 1 3.2 1.8l-8.5 14.722a1.931 1.931 0 0 1-3.259 0L134.48 44.9a1.812 1.812 0 1 1 3.142-1.8Z' transform='translate(-134.203 -32.392)' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
91 height:25px;
92 width:25px;
93 padding: 2px 4px;
94 background-position:4px;
95 background-size:22px;
96 background-repeat:no-repeat;
97 position:absolute;
98 cursor:pointer;
99 }
100 input[type=checkbox]{
101 background-color:initial;
102 cursor:default;
103 -webkit-appearance:auto;
104 -moz-appearance:auto;
105 appearance:auto;
106 -webkit-box-sizing:border-box;
107 box-sizing:border-box;
108 margin:3px 3px 3px 4px;
109 padding:initial;
110 border:initial;
111 position:relative;
112 }
113 .sr-only{
114 position: absolute !important;
115 clip:rect(1px,1px,1px,1px);
116 padding:0;
117 border:0;
118 height:1px;
119 width:1px;
120 overflow:hidden;
121 }
122 }
123
124
125
126 .card{
127 background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
128 background: #FFFFFF 0% 0% no-repeat padding-box;
129 box-shadow: 0px 3px 6px #00000029;
130 border-radius: 0px;
131 border-width: 0px;
132 min-height: 526px;
133 .thumbnail{
2 line-height:1.428571429; 134 line-height:1.428571429;
3 background-color:#ffffff; 135 background-color:#ffffff;
4 border:1px solid #dddddd; 136 border:1px solid #dddddd;
5 border-radius:4px;
6 -webkit-transition:all 0.2s ease-in-out; 137 -webkit-transition:all 0.2s ease-in-out;
7 transition:all 0.2s ease-in-out; 138 transition:all 0.2s ease-in-out;
8 display:inline-block; 139 display:inline-block;
...@@ -12,14 +143,15 @@ ...@@ -12,14 +143,15 @@
12 position:relative; 143 position:relative;
13 padding:0; 144 padding:0;
14 margin:0; 145 margin:0;
15 } 146
16 .thumbnail .ribbon{ 147 .ribbon{
17 background:#5cb85c; 148 background:#E8D44B;
18 box-shadow:0 1px rgba(0,0,0,0.2); 149 box-shadow:0 1px rgba(0,0,0,0.2);
19 -moz-box-shadow:0 1px rgba(0,0,0,0.2); 150 -moz-box-shadow:0 1px rgba(0,0,0,0.2);
20 -webkit-box-shadow:0 1px rgba(0,0,0,0.2); 151 -webkit-box-shadow:0 1px rgba(0,0,0,0.2);
21 color:#fff; 152 color:#2C2C2C;
22 text-shadow:0 1px rgba(0,0,0,0.3); 153 text-transform: uppercase;
154
23 position:absolute; 155 position:absolute;
24 font-size:14px; 156 font-size:14px;
25 left:-8px; 157 left:-8px;
...@@ -27,100 +159,21 @@ ...@@ -27,100 +159,21 @@
27 top:10px; 159 top:10px;
28 padding:3px 10px; 160 padding:3px 10px;
29 z-index:2; 161 z-index:2;
30 border-radius: 0px; 162 border-radius: 0px;
31 font-weight:bold; 163
32 } 164 }
33 .thumbnail .ribbon.enrolled{ 165 .ribbon:before{
34 background:#428bca;
35 }
36 .thumbnail .ribbon:before{
37 border:4px solid transparent; 166 border:4px solid transparent;
38 border-top:4px solid #348c34; 167 border-top:4px solid #C3B241;
39 border-right:4px solid #348c34; 168 border-right:4px solid #C3B241;
40 content:""; 169 content:"";
41 position:absolute; 170 position:absolute;
42 left:0; 171 left:0;
43 right: unset; 172 right: unset;
44 border-radius: 0px; 173 border-radius: 0px;
45 bottom:-8px; 174 bottom:-8px;
46 } 175 }
47 .thumbnail .ribbon.enrolled:before{ 176 img{
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; 177 display:block;
125 max-width:100%; 178 max-width:100%;
126 width:100%; 179 width:100%;
...@@ -129,46 +182,81 @@ border-radius: 0px; ...@@ -129,46 +182,81 @@ border-radius: 0px;
129 margin-right:auto; 182 margin-right:auto;
130 box-shadow:none; 183 box-shadow:none;
131 max-height: 400px; 184 max-height: 400px;
132 } 185 }
133 .thumbnail a,.learndash-course-grid .thumbnail a:hover{ 186 }
134 box-shadow:none; 187 .content{
135 } 188 padding: 15px;
136 .thumbnail .caption{ 189 display: flex;
137 padding:9px; 190 flex-direction: column;
138 color:#333333; 191 flex: 1;
139 } 192 .entry-title{
140 .thumbnail .caption a{ 193 margin-top: 0px;
141 text-decoration:none!important; 194 text-transform: uppercase;
142 } 195 text-align: center;
143 .thumbnail .caption p{ 196 font-size: 18px;
144 float:none!important; 197 line-height: 24px;
145 margin:15px 0 0!important; 198 }
146 width:100%!important; 199 .entry-content{
147 } 200 text-align: center;
201 font-size: 16px;
202 line-height: 24px;
203 }
148 204
149 .element-item { 205 .btn{
150 position: relative; 206 display: flex;
151 float: left; 207 align-self:center;
152 width: calc(33% - 30px); 208 background-color: #0484B8;
153 height: 600px; 209 color: #fff;
154 margin: 5px; 210 border-radius: 0px;
155 padding: 10px; 211 font-size: 18px;
212 margin-top: auto;
213 margin-bottom: 20px;
214 }
215 .btn:hover{
216 background-color: #2C2C2C;
217 }
156 218
219 }
157 } 220 }
158 221
159 .element-item > * { 222
160 margin: 0; 223
161 padding: 0; 224
225
226 .course-list{
227 .element-item {
228 position: relative;
229 float: left;
230 width: calc(33.33% - 30px);
231 height: 600px;
232 margin: 15px;
233 padding: 10px;
234 }
162 } 235 }
163 #load-more{ 236
164 float:right; 237
165 margin:5px; 238 .view-plan{
239 width: 100%;
240 text-align: center;
241 #load-more{
242 margin: auto;
243 background-color: #0484B8;
244 color: #fff;
245 border-radius: 0px;
246 font-size: 18px;
247 margin-top: auto;
248 margin-bottom: 20px;
249 text-transform: uppercase;
250 }
251 #load-more:hover{
252 background-color: #2C2C2C;
253 }
166 } 254 }
167 .hidden{ 255 .hidden{
168 visibility:hidden; 256 visibility:hidden;
169 width:0px!important; 257 width:0px!important;
170 height:0px!important; 258 height:0px!important;
171 margin:0px!important; 259 margin:0px!important;
172 padding:0px!important; 260 padding:0px!important;
173 display:none; 261 display:none;
174 } 262 }
...\ No newline at end of file ...\ No newline at end of file
......