Skip to content

Jeff Balicki / st_joseph

Go to a project
Toggle navigation
Toggle navigation pinning
2566d956 by Jeff Balicki
Options

course page done 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 2b0f5b2c
Inline Side-by-side
Showing 18 changed files with 531 additions and 162 deletions
......@@ -86,9 +86,9 @@ error_log($carousel_style );
<?php $image = get_sub_field('image'); ?>
<div class="row">
<div class="col col-sm-4" style=background-image:url(<?php echo $image['url'];?>); >
<div class="col-lg-4 col-md-1" style=background-image:url(<?php echo $image['url'];?>); >
</div>
<div class="col col-sm-8">
<div class="col-lg-8 col-md-1">
<div class="testimonial-text"><p><?php the_sub_field('text'); ?></p></div></div>
</div>
......
......@@ -14469,6 +14469,17 @@ body {
font-family: "Open Sans", sans-serif;
}
@media only screen and (max-width: 600px) {
.site {
overflow-x: hidden;
}
#full-width-page-wrapper {
overflow-x: hidden;
}
#content {
overflow-x: hidden;
}
}
h1, .h1 {
font-size: 58px;
line-height: 72px;
......@@ -14913,6 +14924,12 @@ input[type=checkbox] {
padding-inline-start: 20px;
background-color: transparent !important;
}
@media only screen and (max-width: 600px) {
.carousel-items {
-webkit-padding-start: 0px;
padding-inline-start: 0px;
}
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
pointer-events: all !important;
......@@ -14928,12 +14945,23 @@ input[type=checkbox] {
left: 0 !important;
min-height: 340px !important;
}
@media only screen and (max-width: 600px) {
.carousel {
width: 95%;
margin-left: 0px;
}
}
.carousel .swiper-button-next {
right: 8px !important;
}
.carousel .swiper-button-prev {
left: 7px !important;
}
@media only screen and (max-width: 600px) {
.carousel .swiper-button-prev {
left: -5px !important;
}
}
.carousel .swiper-pagination {
bottom: -20px !important;
}
......@@ -14944,24 +14972,50 @@ input[type=checkbox] {
gap: 1rem;
}
@media only screen and (max-width: 600px) {
.testimonials-carousel {
margin-left: 0px !important;
}
}
.testimonials-carousel .swiper-slide {
width: 890px !important;
}
@media only screen and (max-width: 600px) {
.testimonials-carousel .swiper-slide {
width: 98% !important;
}
}
.testimonials-carousel .swiper-slide .testimonials {
width: 890px;
background: #E5F2F8;
border-radius: 25px 25px 0px 0px;
margin-right: 20px;
}
@media only screen and (max-width: 600px) {
.testimonials-carousel .swiper-slide .testimonials {
width: 98%;
margin-right: 0px;
}
}
.testimonials-carousel .swiper-slide .testimonials .row {
margin-right: 0rem !important;
border-bottom: 20px solid #FFA300;
margin-left: -15px !important;
min-height: 316px !important;
}
.testimonials-carousel .swiper-slide .testimonials .col {
@media only screen and (max-width: 600px) {
.testimonials-carousel .swiper-slide .testimonials .row {
margin-left: 0px !important;
}
}
.testimonials-carousel .swiper-slide .testimonials .col-md-1 {
background-size: cover;
}
@media only screen and (max-width: 600px) {
.testimonials-carousel .swiper-slide .testimonials .col-md-1 {
padding-left: 0px;
}
}
.testimonials-carousel .swiper-slide .testimonials .testimonial-text {
padding: 30px 50px;
}
......@@ -15102,13 +15156,17 @@ input[type=checkbox] {
.custom-addtoany {
background-color: #0484B8;
position: fixed;
top: 217px;
top: 185px;
z-index: 999;
right: 0px;
width: 48px;
padding: 8px 10px;
}
.admin-bar .custom-addtoany {
top: 217px;
}
.jssocials-share-logo {
width: 1em;
vertical-align: top;
......@@ -15431,6 +15489,81 @@ label[for=quicksearch] {
display: none;
}
.type-sfwd-courses {
margin-top: 30px;
}
.program-info {
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
max-width: 531px;
}
.program-info #program-info .nav-item {
width: 50%;
border: 0px solid #ccc;
}
.program-info #program-info .nav-item .nav-link {
width: 100%;
border-radius: 0px;
background-color: #0081BC;
color: #FFFFFF;
border: 0px solid #ccc;
font-size: 18px;
padding: 20px 20px;
font-family: "Poppins", sans-serif;
}
.program-info #program-info .nav-item .nav-link.active {
background-color: #FFFFFF;
color: #0081BC;
}
.program-info #program-info-content {
padding: 20px 40px 40px 40px;
}
.program-info #program-info-content table {
width: 100%;
}
.program-info #program-info-content table tr th {
width: 33%;
font-size: 18px;
color: #0081BC;
font-family: "Poppins", sans-serif;
}
.program-info #program-info-content table tr:not(.not) {
border-bottom: 1px solid #FFA300;
}
.program-info #program-info-content table tr:not(.not) td {
font-size: 16px;
padding: 10px 0px;
}
.outcomes {
margin: 70px 0px;
}
.outcomes .outcome {
width: 100%;
min-height: 227px;
background-color: #E2F2F9;
padding: 25px 25px 25px 15px;
border-radius: 25px 25px 0px 0px;
border-bottom: 22px solid #FFA300;
font-size: 16px;
line-height: 24px;
}
@media only screen and (max-width: 600px) {
.outcomes .col-out {
margin-top: 20px;
}
}
.outcomes .col-out:nth-of-type(2) .outcome {
border-bottom: 22px solid #3F9C35;
}
.outcomes .col-out:nth-of-type(3) .outcome {
border-bottom: 22px solid #0484B8;
}
.outcomes .col-out:nth-of-type(4) .outcome {
border-bottom: 22px solid #E04E39;
}
.has-blue-color,
.has-blue-color:visited {
color: #0d6efd;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -13787,6 +13787,12 @@
offsetAfter = 0;
_id = jQuery(this).attr('id');
}
if ($(window).width() < 600) {
offset = 0;
PerView = 1;
space = 0;
offsetAfter = 0;
}
var swiper_params = {
modules: [Navigation, Pagination, A11y, Keyboard],
slidesPerView: PerView,
......@@ -17627,159 +17633,161 @@
jQueryBridget('isotope', Isotope, $);
require$$0__default["default"](document).ready(function ($) {
// quick search regex
var qsRegex;
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
coursename: '.name',
date: '[data-ticks]'
},
filter: function () {
var $this = $(this);
var filterText = qsRegex ? $(this).text().match(qsRegex) : true;
var buttonResult = filterValue ? $this.is(filterValue) : true;
return filterText && buttonResult;
if ($('.grid').length) {
// quick search regex
var qsRegex;
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
coursename: '.name',
date: '[data-ticks]'
},
filter: function () {
var $this = $(this);
var filterText = qsRegex ? $(this).text().match(qsRegex) : true;
var buttonResult = filterValue ? $this.is(filterValue) : true;
return filterText && buttonResult;
}
});
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup(debounce(function () {
console.log($quicksearch.val());
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);
};
}
});
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup(debounce(function () {
console.log($quicksearch.val());
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);
};
}
// filter with selects and checkboxes
var $checkboxes = $('.category-filter input');
var filterValue;
$checkboxes.change(function () {
// map input values to an array
var inclusives = [];
// inclusive filters from checkboxes
$checkboxes.each(function (i, elem) {
// if checkbox, use value if checked
if (elem.checked) {
inclusives.push(elem.value);
}
});
// filter with selects and checkboxes
var $checkboxes = $('.category-filter input');
var filterValue;
$checkboxes.change(function () {
// map input values to an array
var inclusives = [];
// inclusive filters from checkboxes
$checkboxes.each(function (i, elem) {
// if checkbox, use value if checked
if (elem.checked) {
inclusives.push(elem.value);
}
// combine inclusive filters
filterValue = inclusives.length ? inclusives.join(', ') : '*';
$grid.isotope();
updateFilterCounts();
});
// combine inclusive filters
filterValue = inclusives.length ? inclusives.join(', ') : '*';
$grid.isotope();
updateFilterCounts();
});
$('.sort-button-group').on('click', 'button', function () {
var sortValue = $(this).attr('data-sort-value');
var direction = $(this).attr('data-sort-direction');
var isAscending = direction == 'asc';
var newDirection = isAscending ? 'desc' : 'asc';
$grid.isotope({
sortBy: sortValue,
sortAscending: isAscending
$('.sort-button-group').on('click', 'button', function () {
var sortValue = $(this).attr('data-sort-value');
var direction = $(this).attr('data-sort-direction');
var isAscending = direction == 'asc';
var newDirection = isAscending ? 'desc' : 'asc';
$grid.isotope({
sortBy: sortValue,
sortAscending: isAscending
});
$(this).attr('data-sort-direction', newDirection);
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
$(this).attr('data-sort-direction', newDirection);
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
function updateFilterCounts() {
var itemElems = $grid.isotope('getFilteredItemElements');
var count_items = $(itemElems).length;
if (count_items > counter) {
$("#load-more").hide();
} else {
$("#load-more").show();
}
if ($('.element-item').hasClass('hidden')) {
$('.element-item').removeClass('hidden');
}
var index = 0;
$(itemElems).each(function () {
if (index >= counter) {
$(this).addClass('hidden');
function updateFilterCounts() {
var itemElems = $grid.isotope('getFilteredItemElements');
var count_items = $(itemElems).length;
if (count_items > counter) {
$("#load-more").hide();
} else {
$("#load-more").show();
}
index++;
});
console.log('updateFilterCounts');
console.log(index);
if (index === 0) {
$("#load-more").hide();
} else {
$("#load-more").show();
if ($('.element-item').hasClass('hidden')) {
$('.element-item').removeClass('hidden');
}
var index = 0;
$(itemElems).each(function () {
if (index >= counter) {
$(this).addClass('hidden');
}
index++;
});
console.log('updateFilterCounts');
console.log(index);
if (index === 0) {
$("#load-more").hide();
} else {
$("#load-more").show();
}
$grid.isotope('layout');
}
$grid.isotope('layout');
}
//****************************
// Isotope Load more button
//****************************
//****************************
// Isotope Load more button
//****************************
var initShow = 3; //number of images loaded on init & onclick load more button
var counter = initShow; //counter for load more button
var iso = $grid.data('isotope'); // get Isotope instance
console.log('iso');
console.log(iso);
console.log(iso.elemCount);
loadMore(initShow); //execute function onload
var initShow = 3; //number of images loaded on init & onclick load more button
var counter = initShow; //counter for load more button
var iso = $grid.data('isotope'); // get Isotope instance
console.log('iso');
console.log(iso);
console.log(iso.elemCount);
loadMore(initShow); //execute function onload
function loadMore(toShow) {
$grid.find(".hidden").removeClass("hidden");
var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function (item) {
console.log('hiddenElem');
console.log(item.element);
return item.element;
});
$(hiddenElems).addClass('hidden');
$grid.isotope('layout');
function loadMore(toShow) {
$grid.find(".hidden").removeClass("hidden");
var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function (item) {
console.log('hiddenElem');
console.log(item.element);
return item.element;
});
$(hiddenElems).addClass('hidden');
$grid.isotope('layout');
//when no more to load, hide show more button
if (hiddenElems.length == 0) {
$("#load-more").hide();
} else {
$("#load-more").show();
//when no more to load, hide show more button
if (hiddenElems.length == 0) {
$("#load-more").hide();
} else {
$("#load-more").show();
}
}
}
//append load more button
$grid.after('<div class="view-plan"><a class="btn" href="#" id="load-more">LOAD MORE programs</a></div>');
//append load more button
$grid.after('<div class="view-plan"><a class="btn" href="#" id="load-more">LOAD MORE programs</a></div>');
//when load more button clicked
$(document).on("click", "#load-more", function (e) {
e.preventDefault();
if ($('#filters').data('clicked')) {
//when filter button clicked, set initial value for counter
counter = initShow;
j$('#filters').data('clicked', false);
} else {
counter = counter;
}
counter = counter + initShow;
loadMore(counter);
});
$(document).on("click", "#filter-more", function (e) {
e.preventDefault();
$('.filter-group').toggleClass('open');
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
//when load more button clicked
$(document).on("click", "#load-more", function (e) {
e.preventDefault();
if ($('#filters').data('clicked')) {
//when filter button clicked, set initial value for counter
counter = initShow;
j$('#filters').data('clicked', false);
} else {
counter = counter;
}
counter = counter + initShow;
loadMore(counter);
});
$(document).on("click", "#filter-more", function (e) {
e.preventDefault();
$('.filter-group').toggleClass('open');
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
}
});
// 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.
This diff could not be displayed because it is too large.
<?php
/**
* Partial template for content in page.php
*
* @package Understrap
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
$program_info = get_field('program_info');
?>
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<div class="entry-content">
<div class="row align-items-start">
<div class="col-lg-6 col-md-1">
<?php
the_content();
?>
</div>
<div class="col-lg-6 col-md-1">
<div class="program-info">
<ul class="nav nav-tabs" id="program-info" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#who" type="button" role="tab" aria-controls="who" aria-selected="true">Who is this for?</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#costs" type="button" role="tab" aria-controls="costs" aria-selected="false">Cost & Date(s)</button>
</li>
</ul>
<div class="tab-content" id="program-info-content">
<div class="tab-pane fade show active" id="who" role="tabpanel" aria-labelledby="who-tab" tabindex="0">
<?php echo $program_info['who_is_this_for']; ?>
</div>
<div class="tab-pane fade" id="costs" role="tabpanel" aria-labelledby="costs-tab" tabindex="0">
<?php if(is_array($program_info['cost_&_dates'])): ?>
<table>
<tr class="not"><th>Cost</th><th>Duration</th><th>Date</th></tr>
<tr><td>PUBLIC | STAFF</td><td></td><td></td></tr>
<?php foreach ( $program_info['cost_&_dates'] as $cost_dates){
echo "<tr><td>".$cost_dates['cost']."</td><td>".$cost_dates['duration']."</td><td>".$cost_dates['date']."</td></tr>";
};?>
</table>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<?php if( have_rows('outcomes') ): ?>
<div class="outcomes">
<h2>Outcomes</h2>
<p>By the end of this workshop, participants will be able to:<p>
<div class="row">
<?php while( the_repeater_field('outcomes') ): ?>
<div class="col-out col-lg-3 col-md-1">
<div class="outcome">
<?php the_sub_field('content'); ?>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
<?php if( have_rows('testimonials_items') ): ?>
<div id="<?php echo esc_attr($id); ?>" class="carousel">
<div class="testimonials-carousel carousel-items <?php echo $size; ?>">
<div class='swiper-wrapper'>
<?php while( the_repeater_field('testimonials_items') ): ?>
<div class="swiper-slide">
<div id="<?php echo esc_attr($id); ?>" class=" testimonials">
<?php $image = get_sub_field('image'); ?>
<div class="row">
<div class="col-lg-4 col-md-1" style=background-image:url(<?php echo $image['url'];?>); ></div>
<div class="col-lg-8 col-md-1">
<div class="testimonial-text"><p><?php the_sub_field('text'); ?></p></div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
</div>
</div>
<?php endif; ?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php understrap_edit_post_link(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->
......@@ -3,11 +3,6 @@
*
*/
global $user_ID;
get_currentuserinfo();
if (!$user_ID) {
auth_redirect();
}
get_header();
$container = get_theme_mod( 'understrap_container_type' );
......@@ -17,7 +12,7 @@ if ( is_front_page() ) {
}
$wrapper_id = 'full-width-page-wrapper';
$id = get_the_id();
?>
<div class="hero-container header-section blur-image" data-src="<?php echo the_post_thumbnail_url(); ?>" style="--med-image: url(<?php echo the_post_thumbnail_url('medium'); ?>);">
<div class="full-image">
......@@ -46,14 +41,13 @@ $wrapper_id = 'full-width-page-wrapper';
<?php
while ( have_posts() ) {
the_post();
get_template_part( 'loop-templates/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
}
$call_out_block = get_field('call_out_block');
get_template_part( 'loop-templates/content', 'course' );
}?>
<?php $call_out_block = get_field('call_out_block');
if($call_out_block['text_content'] !=""){ ?>
<div class='call-out-block'>
<div class='content'>
......
......@@ -26,6 +26,13 @@ jQuery(document).ready(function($) {
_id = jQuery(this).attr('id');
}
if ($(window).width() < 600) {
offset = 0;
PerView = 1;
space = 0;
offsetAfter = 0;
}
var swiper_params = {
......
......@@ -6,6 +6,10 @@ jQueryBridget( 'isotope', Isotope, $ );
jQuery( document ).ready(function($) {
if($('.grid').length){
// quick search regex
var qsRegex;
......@@ -186,5 +190,5 @@ function updateFilterCounts() {
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
}
});
......
......@@ -15,6 +15,7 @@
@import "theme/accordion";
@import "theme/sharethis";
@import "theme/course_list";
@import "theme/course";
@import "assets/understrap/theme/colors"; // <-------- This creates the necessary bootstrap color classes.
......
......@@ -30,6 +30,9 @@
margin-inline-end: 0px;
padding-inline-start: 20px;
background-color: transparent !important;
@media only screen and (max-width: 600px) {
padding-inline-start: 0px;
}
}
......@@ -45,6 +48,10 @@
.carousel {
width:100vw;
margin-left:calc((100% - 100vw) / 2);
@media only screen and (max-width: 600px) {
width:95%;
margin-left:0px;
}
left:0 !important;
min-height: 340px!important;
.swiper-button-next {
......@@ -52,6 +59,9 @@
}
.swiper-button-prev {
left:7px !important;
@media only screen and (max-width: 600px) {
left:-5px !important;
}
}
.swiper-pagination{
bottom: -20px !important;
......@@ -66,23 +76,39 @@
// testimonials carousel css
.testimonials-carousel{
@media only screen and (max-width: 600px) {
margin-left: 0px !important;
}
.swiper-slide{
width:890px !important;
@media only screen and (max-width: 600px) {
width:98% !important;
}
.testimonials{
width:890px;
background:#E5F2F8;
border-radius: 25px 25px 0px 0px;
margin-right: 20px;
@media only screen and (max-width: 600px) {
width:98%;
margin-right: 0px;
}
.row{
margin-right: 0rem !important;
border-bottom:20px solid #FFA300;
margin-left: -15px !important;
min-height:316px !important;
@media only screen and (max-width: 600px) {
margin-left: 0px !important;
}
}
.col {
.col-md-1 {
background-size: cover;
@media only screen and (max-width: 600px) {
padding-left: 0px;
}
}
.testimonial-text{
padding: 30px 50px;
......
......@@ -2,6 +2,18 @@
body{
font-family: 'Open Sans', sans-serif;
}
@media only screen and (max-width: 600px) {
.site{
overflow-x: hidden;
}
#full-width-page-wrapper{
overflow-x: hidden;
}
#content{
overflow-x: hidden;
}
}
h1{
font-size: 58px;
......
.type-sfwd-courses{
margin-top: 30px;
}
.program-info{
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
max-width: 531px;
#program-info{
.nav-item{
width: 50%;
border: 0px solid #ccc;
.nav-link{
width: 100%;
border-radius: 0px;
background-color: #0081BC;
color: #FFFFFF;
border: 0px solid #ccc;
font-size: 18px;
padding: 20px 20px;
font-family: 'Poppins', sans-serif;
}
.nav-link.active{
background-color:#FFFFFF;
color: #0081BC;
}
}
}
#program-info-content{
padding:20px 40px 40px 40px;
table{
width: 100%;
tr{
th{
width: 33%;
font-size: 18px;
color: #0081BC;
font-family: 'Poppins', sans-serif;
}
}
tr:not(.not){
border-bottom:1px solid #FFA300;
td{
font-size: 16px;
padding: 10px 0px;
}
}
}
}
}
.outcomes{
margin: 70px 0px;
.outcome{
width: 100%;
min-height: 227px;
background-color: #E2F2F9;
padding:25px 25px 25px 15px;
border-radius: 25px 25px 0px 0px;
border-bottom: 22px solid #FFA300;
font-size: 16px;
line-height: 24px;
}
.col-out{
@media only screen and (max-width: 600px) {
margin-top: 20px;
}
}
.col-out:nth-of-type(2) .outcome{
border-bottom: 22px solid #3F9C35;
}
.col-out:nth-of-type(3) .outcome{
border-bottom: 22px solid #0484B8;
}
.col-out:nth-of-type(4) .outcome{
border-bottom: 22px solid #E04E39;
}
}
.custom-addtoany{
background-color: #0484B8;
position: fixed;
top: 217px;
top: 185px;
z-index: 999;
right: 0px;
width: 48px;
padding:8px 10px;
}
.admin-bar .custom-addtoany{
top: 217px;
}
.jssocials-share-logo {
......