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 392 additions and 23 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,6 +17633,7 @@
jQueryBridget('isotope', Isotope, $);
require$$0__default["default"](document).ready(function ($) {
if ($('.grid').length) {
// quick search regex
var qsRegex;
......@@ -17780,6 +17787,7 @@
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 {
......