Skip to content

M
makura-2025
Commit 55812178 by jhukal9@gmail.com
Options

updated the bugfixes for makura theme including resource lisitng, resource… 

updated the bugfixes for makura theme including resource lisitng, resource detail and portfolio page
parent 40133119
Showing with 427 additions and 343 deletions
assets/css/style.css
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/js/script.js
......@@ -37,6 +37,35 @@
});
}
});
const observer = new IntersectionObserver(
function (entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const currentActive = entry.target.getAttribute("id");
console.log(currentActive);
$(".makura-new a[data-target]").each(function () {
if ($(this).data("target") === currentActive) {
$(this)
.parent()
.addClass("active")
.siblings()
.removeClass("active");
}
});
}
});
},
{
threshold: 0.2,
},
);
$(".portfolio-block").each(function () {
observer.observe(this);
});
});
/** GLOBAL SCROLL INTO VIEW CONTROLLER ENDS HERE*/
......@@ -80,25 +109,25 @@
/** MOBILE OFFCANVAS TOC START HERE */
$(function () {
$(".blog-side-bar h6").on("click", function () {
$(".toc h6").on("click", function () {
$(this).addClass("remove");
$(".category-list").addClass("active");
});
$(".category-list a").on("click", function () {
$(".blog-side-bar h6").removeClass("remove");
$(".toc h6").removeClass("remove");
$(".category-list").removeClass("active");
});
$(document).on("click", function (e) {
if (!$(e.target).closest(".blog-side-bar").length) {
$(".blog-side-bar h6").removeClass("remove");
if (!$(e.target).closest(".toc").length) {
$(".toc h6").removeClass("remove");
$(".category-list").removeClass("active");
}
});
$(window).on("scroll", function () {
$(".blog-side-bar h6").removeClass("remove");
$(".toc h6").removeClass("remove");
$(".category-list").removeClass("active");
});
......@@ -106,9 +135,9 @@
function (entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
$(".blog-side-bar h6").show();
$(".toc h6").show();
} else {
$(".blog-side-bar h6").hide();
$(".toc h6").hide();
}
});
},
......
assets/js/style.js
......@@ -433,18 +433,27 @@
// });
// });
var lastScrollTop = 0;
$(window).scroll(function (event) {
$(".menu-item-has-children").removeClass("show");
var thisValue = $(this).scrollTop();
if (thisValue == 0) {
$(".navbar").removeClass("sticky-top");
} else if (thisValue > lastScrollTop) {
$(".navbar").removeClass("sticky-top");
} else {
$(".navbar").addClass("sticky-top");
}
lastScrollTop = thisValue;
let lastScrollTop = 0;
let scrollTimeout;
$(window).on("scroll", function () {
clearTimeout(scrollTimeout);
const scrollTop = $(this).scrollTop();
scrollTimeout = setTimeout(() => {
$(".menu-item-has-children").removeClass("show");
if (scrollTop > 120 && scrollTop < lastScrollTop) {
$(".navbar").addClass("sticky-top");
$(".sticky-tab").addClass("sticky-with-header");
} else {
$(".navbar").removeClass("sticky-top");
$(".sticky-tab").removeClass("sticky-with-header");
}
lastScrollTop = scrollTop;
}, 100); // Small delay to prevent flickering
});
$(".button-close").click(function () {
......
blocks/custom-banner-with-right-image.php
<?php if (get_field('enable_section')): ?>
<section class="background-dark pb-60 ABOUT TOP-BANNER-SECTION">
<div class="container">
<div class="inner-banner-wrapper">
<div class="row align-items-center justify-content-between">
<div class="col-lg-6 col-12">
<div class="position-relative left-text-wrapper">
<?php the_field('description'); ?>
</div>
<section class="background-dark pb-60 ABOUT TOP-BANNER-SECTION">
<div class="container">
<div class="inner-banner-wrapper">
<div class="row align-items-start justify-content-between">
<div class="col-lg-6 col-12">
<div class="position-relative left-text-wrapper">
<?php the_field('description'); ?>
</div>
<div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
<div class="image-wrapper">
<div class="image">
<?php
</div>
<div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
<div class="image-wrapper">
<div class="image">
<?php
$image = get_field('image');
$size = 'full';
if ($image) {
echo wp_get_attachment_image($image, $size);
} ?>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
<?php endif; ?>
\ No newline at end of file
blocks/portfolio-banner.php
<section class="bg-primary pb-60 PD-TOP-SECTION makura-new">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-7 title-wrapper">
<div class="col-lg-7 title-wrapper">
<div class="portfolio-detail-content-box pb-40">
<?php the_field('description'); ?>
</div>
......@@ -17,7 +17,7 @@
</a>
<?php endif; ?>
</div>
<div class="col-lg-4">
<div class="col-lg-4 col-xl-3">
<div class="client-logo-wrapper d-none d-lg-block">
<?php if ($image = get_field('client_logo')):
echo wp_get_attachment_image($image, 'full');
......
blocks/portfolio-conclusion-section.php
......@@ -10,19 +10,19 @@
<div class="pc-content-box">
<?php echo get_field('description'); ?>
<?php if (have_rows('stats')): ?>
<div class="percentage-box">
<div class="row">
<?php while (have_rows('stats')):
<div class="percentage-box">
<div class="row">
<?php while (have_rows('stats')):
the_row(); ?>
<div class="col-sm-6 col-lg-5 col-xl-4">
<div class="inner-wrapper">
<span><?php the_sub_field('number'); ?></span>
<p><?php the_sub_field('title'); ?></p>
</div>
</div>
<?php endwhile; ?>
<div class="col-sm-6 col-lg-5 col-xl-4">
<div class="inner-wrapper">
<span><?php the_sub_field('number'); ?></span>
<p><?php the_sub_field('title'); ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
......@@ -37,70 +37,70 @@ if (isset($cmws) && is_array($cmws) && !empty($cmws)):
$cmws_desc = $cmws['cmws_desc'] ?: '';
$cmws_gal = $cmws['cmws_gal'] ?: [];
?>
<section class="moment-worth-sharing makura-new mb-100">
<div class="container">
<?php if (!empty($cmws_title) || !empty($cmws_desc)): ?>
<div class="section-title slide-up">
<?php if (!empty($cmws_title)): ?>
<h2><?php echo $cmws_title; ?></h2><?php endif; ?>
<?php echo $cmws_desc ?: ''; ?>
</div>
<?php endif; ?>
<?php if (!empty($cmws_gal) && is_array($cmws_gal)): ?>
<div class="gallery-grid slide-up">
<?php foreach ($cmws_gal as $i => $gallery_item):
<section class="moment-worth-sharing makura-new mb-100">
<div class="container">
<?php if (!empty($cmws_title) || !empty($cmws_desc)): ?>
<div class="section-title slide-up">
<?php if (!empty($cmws_title)): ?>
<h2><?php echo $cmws_title; ?></h2><?php endif; ?>
<?php echo $cmws_desc ?: ''; ?>
</div>
<?php endif; ?>
<?php if (!empty($cmws_gal) && is_array($cmws_gal)): ?>
<div class="gallery-grid slide-up">
<?php foreach ($cmws_gal as $i => $gallery_item):
$img = $gallery_item['img'] ?: '';
$layout = $gallery_item['layout'] ?: '';
$class_name = !empty($layout) ? explode(':', $layout[0]) : 'none';
$class_name = $class_name[0];
if (!empty($img)):
?>
<div class="gallery-item <?php echo $class_name; ?>">
<a data-src="<?php echo esc_url($img); ?>">
<img src="<?php echo esc_url($img); ?>"
alt="<?php echo esc_attr(get_post_meta(attachment_url_to_postid($img), '_wp_attachment_image_alt', true)) ?: get_the_title(attachment_url_to_postid($img)); ?>"
class="img-fluid">
<?php if ($i === (count($cmws_gal) - 1)): ?><span><svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.78477 6.63253C5.80499 6.63253 6.63205 5.80548 6.63205 4.78526C6.63205 3.76504 5.80499 2.93799 4.78477 2.93799C3.76455 2.93799 2.9375 3.76504 2.9375 4.78526C2.9375 5.80548 3.76455 6.63253 4.78477 6.63253Z"
fill="white" />
<path
d="M4.78477 13.0617C5.80499 13.0617 6.63205 12.2347 6.63205 11.2145C6.63205 10.1942 5.80499 9.36719 4.78477 9.36719C3.76455 9.36719 2.9375 10.1942 2.9375 11.2145C2.9375 12.2347 3.76455 13.0617 4.78477 13.0617Z"
fill="white" />
<path
d="M11.2145 6.63253C12.2347 6.63253 13.0617 5.80548 13.0617 4.78526C13.0617 3.76504 12.2347 2.93799 11.2145 2.93799C10.1942 2.93799 9.36719 3.76504 9.36719 4.78526C9.36719 5.80548 10.1942 6.63253 11.2145 6.63253Z"
fill="white" />
<path
d="M11.2145 13.0617C12.2347 13.0617 13.0617 12.2347 13.0617 11.2145C13.0617 10.1942 12.2347 9.36719 11.2145 9.36719C10.1942 9.36719 9.36719 10.1942 9.36719 11.2145C9.36719 12.2347 10.1942 13.0617 11.2145 13.0617Z"
fill="white" />
</svg> View All
</span><?php endif; ?>
</a>
</div>
<?php endif; endforeach; ?>
</div>
<?php endif; ?>
<div class="gallery-item <?php echo $class_name; ?>">
<a data-src="<?php echo esc_url($img); ?>">
<img src="<?php echo esc_url($img); ?>"
alt="<?php echo esc_attr(get_post_meta(attachment_url_to_postid($img), '_wp_attachment_image_alt', true)) ?: get_the_title(attachment_url_to_postid($img)); ?>"
class="img-fluid">
<?php if ($i === (count($cmws_gal) - 1)): ?><span><svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.78477 6.63253C5.80499 6.63253 6.63205 5.80548 6.63205 4.78526C6.63205 3.76504 5.80499 2.93799 4.78477 2.93799C3.76455 2.93799 2.9375 3.76504 2.9375 4.78526C2.9375 5.80548 3.76455 6.63253 4.78477 6.63253Z"
fill="white" />
<path
d="M4.78477 13.0617C5.80499 13.0617 6.63205 12.2347 6.63205 11.2145C6.63205 10.1942 5.80499 9.36719 4.78477 9.36719C3.76455 9.36719 2.9375 10.1942 2.9375 11.2145C2.9375 12.2347 3.76455 13.0617 4.78477 13.0617Z"
fill="white" />
<path
d="M11.2145 6.63253C12.2347 6.63253 13.0617 5.80548 13.0617 4.78526C13.0617 3.76504 12.2347 2.93799 11.2145 2.93799C10.1942 2.93799 9.36719 3.76504 9.36719 4.78526C9.36719 5.80548 10.1942 6.63253 11.2145 6.63253Z"
fill="white" />
<path
d="M11.2145 13.0617C12.2347 13.0617 13.0617 12.2347 13.0617 11.2145C13.0617 10.1942 12.2347 9.36719 11.2145 9.36719C10.1942 9.36719 9.36719 10.1942 9.36719 11.2145C9.36719 12.2347 10.1942 13.0617 11.2145 13.0617Z"
fill="white" />
</svg> View All
</span><?php endif; ?>
</a>
</div>
</section>
<?php endif; endif; ?>
<?php endif; endforeach; ?>
</div>
<?php endif; ?>
</div>
</section>
<?php endif; endif; ?>
<?php if ($quote_text = get_field('quote_text')): ?>
<section class="quote PROJECT-CONCLUSION">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8 mx-auto">
<div class="position-relative pt-40 pb-100 quote-text">
<div class="icon-wrapper">
<svg width="136" height="114" viewBox="0 0 136 114" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.16"
d="M136 0V26.0755H127.977C121.514 26.0755 116.388 27.0784 112.599 29.0842C108.81 31.09 106.024 34.5444 104.241 39.4475C102.458 44.1277 101.567 50.4795 101.567 58.5027V83.241L91.8723 64.5201C93.4323 63.4058 95.661 62.5143 98.5583 61.8457C101.456 60.9542 104.464 60.5085 107.584 60.5085C114.939 60.5085 121.068 62.8486 125.971 67.5288C130.874 71.9862 133.326 78.2264 133.326 86.2497C133.326 93.8272 130.985 100.29 126.305 105.639C121.625 110.765 114.939 113.328 106.247 113.328C100.676 113.328 95.4381 112.102 90.5351 109.651C85.8548 106.976 82.0661 102.519 79.1688 96.2787C76.2715 89.8155 74.8229 81.0123 74.8229 69.8689V64.1858C74.8229 48.3622 76.9402 35.7702 81.1746 26.4098C85.632 17.0494 91.9837 10.3633 100.23 6.35172C108.476 2.11724 118.505 0 130.317 0H136ZM62.1195 0V26.0755H54.0962C47.6331 26.0755 42.5071 27.0784 38.7184 29.0842C34.9297 31.09 32.1438 34.5444 30.3609 39.4475C28.5779 44.1277 27.6865 50.4795 27.6865 58.5027V83.241L17.9917 64.5201C19.5518 63.4058 21.7805 62.5143 24.6778 61.8457C27.575 60.9542 30.5837 60.5085 33.7039 60.5085C41.0585 60.5085 47.1874 62.8486 52.0904 67.5288C56.9935 71.9862 59.4451 78.2264 59.4451 86.2497C59.4451 93.8272 57.105 100.29 52.4247 105.639C47.7445 110.765 41.0585 113.328 32.3667 113.328C26.795 113.328 21.5576 112.102 16.6545 109.651C11.9743 106.976 8.18557 102.519 5.2883 96.2787C2.39102 89.8155 0.942383 81.0123 0.942383 69.8689V64.1858C0.942383 48.3622 3.05962 35.7702 7.2941 26.4098C11.7514 17.0494 18.1032 10.3633 26.3493 6.35172C34.5954 2.11724 44.6244 0 56.4364 0H62.1195Z"
fill="#005AFF" />
</svg>
</div>
<?php echo $quote_text; ?>
<section class="quote PROJECT-CONCLUSION">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8 mx-auto">
<div class="position-relative pt-40 pb-100 quote-text">
<div class="icon-wrapper">
<svg width="136" height="114" viewBox="0 0 136 114" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.16"
d="M136 0V26.0755H127.977C121.514 26.0755 116.388 27.0784 112.599 29.0842C108.81 31.09 106.024 34.5444 104.241 39.4475C102.458 44.1277 101.567 50.4795 101.567 58.5027V83.241L91.8723 64.5201C93.4323 63.4058 95.661 62.5143 98.5583 61.8457C101.456 60.9542 104.464 60.5085 107.584 60.5085C114.939 60.5085 121.068 62.8486 125.971 67.5288C130.874 71.9862 133.326 78.2264 133.326 86.2497C133.326 93.8272 130.985 100.29 126.305 105.639C121.625 110.765 114.939 113.328 106.247 113.328C100.676 113.328 95.4381 112.102 90.5351 109.651C85.8548 106.976 82.0661 102.519 79.1688 96.2787C76.2715 89.8155 74.8229 81.0123 74.8229 69.8689V64.1858C74.8229 48.3622 76.9402 35.7702 81.1746 26.4098C85.632 17.0494 91.9837 10.3633 100.23 6.35172C108.476 2.11724 118.505 0 130.317 0H136ZM62.1195 0V26.0755H54.0962C47.6331 26.0755 42.5071 27.0784 38.7184 29.0842C34.9297 31.09 32.1438 34.5444 30.3609 39.4475C28.5779 44.1277 27.6865 50.4795 27.6865 58.5027V83.241L17.9917 64.5201C19.5518 63.4058 21.7805 62.5143 24.6778 61.8457C27.575 60.9542 30.5837 60.5085 33.7039 60.5085C41.0585 60.5085 47.1874 62.8486 52.0904 67.5288C56.9935 71.9862 59.4451 78.2264 59.4451 86.2497C59.4451 93.8272 57.105 100.29 52.4247 105.639C47.7445 110.765 41.0585 113.328 32.3667 113.328C26.795 113.328 21.5576 112.102 16.6545 109.651C11.9743 106.976 8.18557 102.519 5.2883 96.2787C2.39102 89.8155 0.942383 81.0123 0.942383 69.8689V64.1858C0.942383 48.3622 3.05962 35.7702 7.2941 26.4098C11.7514 17.0494 18.1032 10.3633 26.3493 6.35172C34.5954 2.11724 44.6244 0 56.4364 0H62.1195Z"
fill="#005AFF" />
</svg>
</div>
<?php echo $quote_text; ?>
</div>
</div>
</div>
</section>
</div>
</section>
<?php endif; ?>
\ No newline at end of file
blocks/resources/resource-listing.php
......@@ -7,43 +7,46 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
$resources_items = $resources_listing['resources_items'] ?: [];
if (isset($resources_items) && is_array($resources_items) && !empty($resources_items)):
?>
<section class="resource-listing py-80 makura-new">
<div class="container">
<div class="row">
<div class="col-lg-4 col-xl-3">
<div class="toc slide-up">
<div class="category-list">
<ul>
<?php foreach ($resources_items as $ri => $res_item):
<section class="resource-listing py-80 makura-new">
<div class="container">
<div class="row">
<div class="col-lg-4 col-xl-3">
<div class="toc slide-up">
<div class="toc-title">
<h6>Table of Content</h6>
</div>
<div class="category-list">
<ul>
<?php foreach ($resources_items as $ri => $res_item):
$title = $res_item['title'] ?: '';
?>
<li class="<?php echo ($ri === 0) ? 'active' : ''; ?>"><a href="#" class="sm-text"
data-target="<?php echo strtolower(str_replace(' ', '-', $title)); ?>"><?php echo esc_html($title); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
<div class="col-lg-8 col-xl-9">
<div class="resource-wrapper">
<?php foreach ($resources_items as $ri => $res_item):
<li class="<?php echo ($ri === 0) ? 'active' : ''; ?>"><a href="#" class="sm-text"
data-target="<?php echo strtolower(str_replace(' ', '-', $title)); ?>"><?php echo esc_html($title); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
<div class="col-lg-8 col-xl-9">
<div class="resource-wrapper">
<?php foreach ($resources_items as $ri => $res_item):
$title = $res_item['title'] ?: '';
$desc = $res_item['desc'] ?: '';
$select_resources = $res_item['select_resources'] ?: [];
?>
<div class="resource-block slide-up" id="<?php echo strtolower(str_replace(' ', '-', $title)); ?>">
<div class="section-title">
<?php if (!empty($title)): ?>
<h2><?php echo $title; ?></h2><?php endif; ?>
<?php if (!empty($desc)):
<div class="resource-block slide-up" id="<?php echo strtolower(str_replace(' ', '-', $title)); ?>">
<div class="section-title">
<?php if (!empty($title)): ?>
<h2><?php echo $title; ?></h2><?php endif; ?>
<?php if (!empty($desc)):
echo $desc ?: '';
endif; ?>
</div>
<?php if (!empty($select_resources) && isset($select_resources) && is_array($select_resources)): ?>
<div class="resources">
<div class="row">
<?php foreach ($select_resources as $sel_res):
</div>
<?php if (!empty($select_resources) && isset($select_resources) && is_array($select_resources)): ?>
<div class="resources">
<div class="row">
<?php foreach ($select_resources as $sel_res):
if ($sel_res instanceof WP_Post) {
$post_id = $sel_res->ID;
$post_url = get_permalink($post_id);
......@@ -55,24 +58,24 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
$post_content = $sel_res->post_content;
$post_excerpt = $sel_res->post_excerpt;
?>
<div class="col-sm-6">
<div class="resource-item d-sm-flex flex-sm-column flex-xl-row justify-content-xl-start slide-up">
<div class="resource-image">
<a href="<?php echo esc_url($post_url); ?>" class="d-block">
<img src="<?php echo esc_url($post_thumbnail_url); ?>"
alt="<?php echo esc_attr($post_title); ?>" class="img-fluid">
</a>
</div>
<div class="resource-content">
<div class="rc-detail">
<h6><a href="<?php echo esc_url($post_url); ?>">
<?php echo esc_html($post_title); ?></a></h6>
<P class="sm-text">
<?php echo wp_trim_words($post_excerpt, 8, '...') ?: wp_trim_words($post_content, 8, '...'); ?>
</P>
</div>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<?php
<div class="col-sm-6">
<div class="resource-item d-sm-flex flex-sm-column flex-xl-row justify-content-xl-start slide-up">
<div class="resource-image">
<a href="<?php echo esc_url($post_url); ?>" class="d-block">
<img src="<?php echo esc_url($post_thumbnail_url); ?>"
alt="<?php echo esc_attr($post_title); ?>" class="img-fluid">
</a>
</div>
<div class="resource-content">
<div class="rc-detail">
<h6><a href="<?php echo esc_url($post_url); ?>">
<?php echo esc_html($post_title); ?></a></h6>
<P class="sm-text">
<?php echo wp_trim_words($post_excerpt, 8, '...') ?: wp_trim_words($post_content, 8, '...'); ?>
</P>
</div>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<?php
$downloadable_resource = get_field('downloadable_resource', $post_id) ?: [];
if (isset($downloadable_resource) && is_array($downloadable_resource) && !empty($downloadable_resource)):
$enable_downloadable_resources = $downloadable_resource['enable_downloadable_resources'];
......@@ -105,24 +108,24 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
endif;
endif;
?>
<p class="sm-text">Format: <img src="<?php echo esc_url($icon_url); ?>"
alt="<?php echo esc_attr($subtype); ?>"></p>
<a href="<?php echo esc_url($post_url); ?>" class="mc-btn-underlined sm-text">View in
Detail</a>
</div>
</div>
</div>
</div>
<?php }endforeach; ?>
</div>
<p class="sm-text">Format: <img src="<?php echo esc_url($icon_url); ?>"
alt="<?php echo esc_attr($subtype); ?>"></p>
<a href="<?php echo esc_url($post_url); ?>" class="mc-btn-underlined sm-text">View in
Detail</a>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php }endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</section>
<?php endif; endif; endif; ?>
</div>
</div>
</div>
</section>
<?php endif; endif; endif; ?>
<!-- !Resources - Resources Listing -->
\ No newline at end of file
dev/sass/base/_base.scss
......@@ -1054,60 +1054,14 @@ ul {
// transition: all 0.5s ease;
// transform: translateY(100%);
h6,
.category-list {
position: fixed;
top: 50vh;
left: 0;
z-index: 2;
}
h6 {
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 0 0;
padding: 8px 16px;
transform: rotate(90deg);
transform-origin: left bottom;
background-color: $primary;
color: $white !important;
font-size: 1rem !important;
word-spacing: 4px;
&.remove {
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
}
}
.category-list {
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
max-height: 240px;
overflow: auto !important;
background-color: $white;
max-width: 75%;
ul {
overflow: visible !important;
}
&.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
}
.blog-filter-bar-close {
display: block;
}
}
}
//blog-card-wrapper
.blog-card-wrapper {
margin-bottom: 1.875rem;
......
dev/sass/base/_global.scss
......@@ -249,22 +249,78 @@ button {
.toc {
position: fixed !important;
display: block !important;
bottom: 0;
// bottom: 0;
left: 0;
right: 0;
top: 50%;
transform: translate(-100%, -50%);
z-index: 2;
// .category-list {
// display: grid;
// grid-template-rows: 0fr;
// overflow: hidden;
// ul {
// overflow: hidden;
// }
// }
&.active {
.category-list {
transform: translate(0%, -50%);
// grid-template-rows: 1fr;
}
}
}
}
@media (max-width: 1023px) {
.toc {
h6,
.category-list {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 2;
}
h6 {
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 0 0;
padding: 8px 16px;
transform: translateY(-50%) rotate(90deg);
transform-origin: left bottom;
background-color: $primary;
color: $white !important;
font-size: 1rem !important;
word-spacing: 4px;
text-wrap: nowrap;
&.remove {
opacity: 0;
visibility: hidden;
transform: translateX(-100%) translateY(-50%);
}
}
.category-list {
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateX(-100%) translateY(-50%);
max-height: 240px;
overflow: auto !important;
background-color: $white;
width: 24rem;
ul {
overflow: hidden;
overflow: visible !important;
}
}
&.active {
.category-list {
grid-template-rows: 1fr;
&.active {
opacity: 1;
visibility: visible;
transform: translateX(0) translateY(-50%);
}
}
}
......
dev/sass/pages/_responsive.scss
......@@ -375,6 +375,8 @@
}
.TECHNOLOGY-USED-SECTION {
padding-bottom: 4rem;
.col-6 {
width: 100%;
}
......
dev/sass/pages/master-portfolio/_moment-gallery.scss
......@@ -21,8 +21,8 @@
height: 100%;
object-fit: cover;
}
&.horizontal {
grid-row: span 2;
&:nth-child(3) {
grid-column: span 2;
}
&:nth-child(n + 4) {
display: none;
......
dev/sass/pages/master-portfolio/_sticky-tab.scss
......@@ -24,6 +24,10 @@
}
}
}
&.sticky-with-header {
top: 66px;
}
}
@media (min-width: 768px) {
......@@ -51,5 +55,9 @@
}
}
}
&.sticky-with-header {
top: 88px;
}
}
}
dev/sass/pages/resources/_resource-detail.scss
......@@ -9,7 +9,23 @@
margin-top: 32px;
}
}
ul {
span.over-title {
display: block;
margin-top: 32px;
margin-bottom: 8px;
color: $primary;
+ h2,
+ h3,
+ h4,
+ h5 {
margin-top: 0;
}
}
ul,
ol {
padding-left: 8px;
li {
position: relative;
......@@ -41,6 +57,7 @@
a {
font-size: 1.5rem;
}
strong {
font-weight: 500;
}
......@@ -76,6 +93,10 @@
}
}
}
.faq-wrapper {
margin-top: 2rem;
}
}
@media (min-width: 768px) {
......@@ -90,6 +111,11 @@
}
}
}
span.over-title {
margin-top: 48px;
}
li,
p,
strong,
......
single-resource.php
......@@ -38,143 +38,136 @@ if (isset($downloadable_resource) && is_array($downloadable_resource) && !empty(
endif;
?>
<div class="container-fluid py-40 background-dark blog-breadcrumb-background-dark breadcrumb-background-dark py-40">
<div class="container">
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?php echo site_url('/'); ?>">Home</a></li>
<li class="breadcrumb-item"><a
href="<?php echo get_permalink(get_page_by_path('downloadable-resources')); ?>">Downloadable
Resources</a></li>
<li class="breadcrumb-item active" aria-current="page"><?php the_title(); ?></li>
</ol>
</nav>
</div>
<div class="container">
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?php echo site_url('/'); ?>">Home</a></li>
<li class="breadcrumb-item"><a
href="<?php echo get_permalink(get_page_by_path('downloadable-resources')); ?>">Downloadable
Resources</a></li>
<li class="breadcrumb-item active" aria-current="page"><?php the_title(); ?></li>
</ol>
</nav>
</div>
</div>
</div>
<section class="background-dark pb-60 ABOUT TOP-BANNER-SECTION inner-banner-absolute-image">
<div class="container">
<div class="inner-banner-wrapper">
<div class="row align-items-center justify-content-between">
<div class="col-lg-6 col-12">
<div class="position-relative left-text-wrapper">
<h1><?php echo get_the_title(); ?></h1>
<p><?php echo get_the_excerpt() ?: wp_trim_words(get_the_content(), 8, ' [...]'); ?>
</p>
<a href="<?php echo esc_url($url); ?>" target="_blank"
class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit"
download>Download
Now [<?php echo $icon; ?>]</a>
</div>
</div>
<div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
<div class="image-wrapper">
<div class="image">
<img src="<?php echo esc_url($post_thumbnail_url); ?>"
alt="<?php echo esc_attr(the_title()); ?>">
</div>
</div>
</div>
<div class="container">
<div class="inner-banner-wrapper">
<div class="row align-items-center justify-content-between">
<div class="col-lg-6 col-12">
<div class="position-relative left-text-wrapper">
<h1><?php echo get_the_title(); ?></h1>
<p><?php echo get_the_excerpt() ?: wp_trim_words(get_the_content(), 8, ' [...]'); ?>
</p>
<a href="<?php echo esc_url($url); ?>" target="_blank"
class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit"
download>Download
Now [<?php echo $icon; ?>]</a>
</div>
</div>
<div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
<div class="image-wrapper">
<div class="image">
<img src="<?php echo esc_url($post_thumbnail_url); ?>" alt="<?php echo esc_attr(the_title()); ?>">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="resource-detail py-80 makura-new">
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-8">
<div class="rd-content">
<?php echo the_content(); ?>
<!-- faqs -->
<?php if (get_field('enable_section')): ?>
<span><?php the_field('subtitle'); ?></span>
<h3><?php the_field('title'); ?></h3>
<?php the_field('description'); ?>
<?php $faqs = get_field('faqs');
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-8">
<div class="rd-content">
<?php echo the_content(); ?>
<!-- faqs -->
<?php if (get_field('enable_section')): ?>
<span class="over-title"><?php the_field('subtitle'); ?></span>
<h3><?php the_field('title'); ?></h3>
<?php the_field('description'); ?>
<?php $faqs = get_field('faqs');
if ($faqs): ?>
<div class="faq-wrapper">
<?php foreach ($faqs as $key => $faq): ?>
<div class="faq-item">
<div class="faq-title">
<strong><?php echo get_the_title($faq); ?></strong>
</div>
<div class="faq-content-box">
<div class="faq-content">
<?php echo get_the_content(null, false, $faq); ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php endif; ?>
<!-- faqs -->
<div class="faq-wrapper">
<?php foreach ($faqs as $key => $faq): ?>
<div class="faq-item">
<div class="faq-title">
<strong><?php echo get_the_title($faq); ?></strong>
</div>
<div class="faq-content-box">
<div class="faq-content">
<?php echo get_the_content(null, false, $faq); ?>
</div>
<div class="rd-footer-action-group">
<div class="row">
<div class="col-md-6 col-lg-4 order-md-2">
<a href="<?php echo esc_url($url); ?>" target="_blank"
class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit"
download>Download
Now [<?php echo $icon; ?>]</a>
</div>
<div class="col-md-6 col-lg-8 order-md-1">
<div class="rd-socials d-lg-flex align-items-lg-center ">
<strong>Share this Template: </strong>
<ul class="d-flex align-items-center justify-content-start">
<!-- Facebook Share -->
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>"
target="_blank">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5"
stroke="#878787" />
<path
d="M19.7188 17H17.375V24H14.25V17H11.6875V14.125H14.25V11.9062C14.25 9.40625 15.75 8 18.0312 8C19.125 8 20.2812 8.21875 20.2812 8.21875V10.6875H19C17.75 10.6875 17.375 11.4375 17.375 12.25V14.125H20.1562L19.7188 17Z"
fill="#878787" />
</svg>
</a>
</li>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<!-- Twitter Share -->
<li>
<a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&text=Check%20this%20out!"
target="_blank">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5"
stroke="#878787" />
<path
d="M22.3438 12.75C22.3438 12.9062 22.3438 13.0312 22.3438 13.1875C22.3438 17.5312 19.0625 22.5 13.0312 22.5C11.1562 22.5 9.4375 21.9688 8 21.0312C8.25 21.0625 8.5 21.0938 8.78125 21.0938C10.3125 21.0938 11.7188 20.5625 12.8438 19.6875C11.4062 19.6562 10.1875 18.7188 9.78125 17.4062C10 17.4375 10.1875 17.4688 10.4062 17.4688C10.6875 17.4688 11 17.4062 11.25 17.3438C9.75 17.0312 8.625 15.7188 8.625 14.125V14.0938C9.0625 14.3438 9.59375 14.4688 10.125 14.5C9.21875 13.9062 8.65625 12.9062 8.65625 11.7812C8.65625 11.1562 8.8125 10.5938 9.09375 10.125C10.7188 12.0938 13.1562 13.4062 15.875 13.5625C15.8125 13.3125 15.7812 13.0625 15.7812 12.8125C15.7812 11 17.25 9.53125 19.0625 9.53125C20 9.53125 20.8438 9.90625 21.4688 10.5625C22.1875 10.4062 22.9062 10.125 23.5312 9.75C23.2812 10.5312 22.7812 11.1562 22.0938 11.5625C22.75 11.5 23.4062 11.3125 23.9688 11.0625C23.5312 11.7188 22.9688 12.2812 22.3438 12.75Z"
fill="#878787" />
</svg>
</a>
</li>
<?php endif; ?>
<!-- faqs -->
</div>
<div class="rd-footer-action-group">
<div class="row">
<div class="col-md-6 col-lg-4 order-md-2">
<a href="<?php echo esc_url($url); ?>" target="_blank"
class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit"
download>Download
Now [<?php echo $icon; ?>]</a>
</div>
<div class="col-md-6 col-lg-8 order-md-1">
<div class="rd-socials d-lg-flex align-items-lg-center ">
<strong>Share this Template: </strong>
<ul class="d-flex align-items-center justify-content-start">
<!-- Facebook Share -->
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>"
target="_blank">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#878787" />
<path
d="M19.7188 17H17.375V24H14.25V17H11.6875V14.125H14.25V11.9062C14.25 9.40625 15.75 8 18.0312 8C19.125 8 20.2812 8.21875 20.2812 8.21875V10.6875H19C17.75 10.6875 17.375 11.4375 17.375 12.25V14.125H20.1562L19.7188 17Z"
fill="#878787" />
</svg>
</a>
</li>
<!-- LinkedIn Share -->
<li>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode(get_permalink()); ?>&title=Check%20this%20template"
target="_blank">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5"
stroke="#878787" />
<path
d="M12.125 22H9.21875V12.6562H12.125V22ZM10.6562 11.4062C9.75 11.4062 9 10.625 9 9.6875C9 8.78125 9.75 8.03125 10.6562 8.03125C11.5938 8.03125 12.3438 8.78125 12.3438 9.6875C12.3438 10.625 11.5938 11.4062 10.6562 11.4062ZM22.9688 22H20.0938V17.4688C20.0938 16.375 20.0625 15 18.5625 15C17.0625 15 16.8438 16.1562 16.8438 17.375V22H13.9375V12.6562H16.7188V13.9375H16.75C17.1562 13.2188 18.0938 12.4375 19.5 12.4375C22.4375 12.4375 23 14.375 23 16.875V22H22.9688Z"
fill="#878787" />
</svg>
</a>
</li>
</ul>
<!-- Twitter Share -->
<li>
<a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&text=Check%20this%20out!"
target="_blank">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#878787" />
<path
d="M22.3438 12.75C22.3438 12.9062 22.3438 13.0312 22.3438 13.1875C22.3438 17.5312 19.0625 22.5 13.0312 22.5C11.1562 22.5 9.4375 21.9688 8 21.0312C8.25 21.0625 8.5 21.0938 8.78125 21.0938C10.3125 21.0938 11.7188 20.5625 12.8438 19.6875C11.4062 19.6562 10.1875 18.7188 9.78125 17.4062C10 17.4375 10.1875 17.4688 10.4062 17.4688C10.6875 17.4688 11 17.4062 11.25 17.3438C9.75 17.0312 8.625 15.7188 8.625 14.125V14.0938C9.0625 14.3438 9.59375 14.4688 10.125 14.5C9.21875 13.9062 8.65625 12.9062 8.65625 11.7812C8.65625 11.1562 8.8125 10.5938 9.09375 10.125C10.7188 12.0938 13.1562 13.4062 15.875 13.5625C15.8125 13.3125 15.7812 13.0625 15.7812 12.8125C15.7812 11 17.25 9.53125 19.0625 9.53125C20 9.53125 20.8438 9.90625 21.4688 10.5625C22.1875 10.4062 22.9062 10.125 23.5312 9.75C23.2812 10.5312 22.7812 11.1562 22.0938 11.5625C22.75 11.5 23.4062 11.3125 23.9688 11.0625C23.5312 11.7188 22.9688 12.2812 22.3438 12.75Z"
fill="#878787" />
</svg>
</a>
</li>
</div>
</div>
</div>
</div>
<!-- LinkedIn Share -->
<li>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode(get_permalink()); ?>&title=Check%20this%20template"
target="_blank">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#878787" />
<path
d="M12.125 22H9.21875V12.6562H12.125V22ZM10.6562 11.4062C9.75 11.4062 9 10.625 9 9.6875C9 8.78125 9.75 8.03125 10.6562 8.03125C11.5938 8.03125 12.3438 8.78125 12.3438 9.6875C12.3438 10.625 11.5938 11.4062 10.6562 11.4062ZM22.9688 22H20.0938V17.4688C20.0938 16.375 20.0625 15 18.5625 15C17.0625 15 16.8438 16.1562 16.8438 17.375V22H13.9375V12.6562H16.7188V13.9375H16.75C17.1562 13.2188 18.0938 12.4375 19.5 12.4375C22.4375 12.4375 23 14.375 23 16.875V22H22.9688Z"
fill="#878787" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment