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 246 additions and 157 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 @@ ...@@ -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*/ /** GLOBAL SCROLL INTO VIEW CONTROLLER ENDS HERE*/
...@@ -80,25 +109,25 @@ ...@@ -80,25 +109,25 @@
/** MOBILE OFFCANVAS TOC START HERE */ /** MOBILE OFFCANVAS TOC START HERE */
$(function () { $(function () {
$(".blog-side-bar h6").on("click", function () { $(".toc h6").on("click", function () {
$(this).addClass("remove"); $(this).addClass("remove");
$(".category-list").addClass("active"); $(".category-list").addClass("active");
}); });
$(".category-list a").on("click", function () { $(".category-list a").on("click", function () {
$(".blog-side-bar h6").removeClass("remove"); $(".toc h6").removeClass("remove");
$(".category-list").removeClass("active"); $(".category-list").removeClass("active");
}); });
$(document).on("click", function (e) { $(document).on("click", function (e) {
if (!$(e.target).closest(".blog-side-bar").length) { if (!$(e.target).closest(".toc").length) {
$(".blog-side-bar h6").removeClass("remove"); $(".toc h6").removeClass("remove");
$(".category-list").removeClass("active"); $(".category-list").removeClass("active");
} }
}); });
$(window).on("scroll", function () { $(window).on("scroll", function () {
$(".blog-side-bar h6").removeClass("remove"); $(".toc h6").removeClass("remove");
$(".category-list").removeClass("active"); $(".category-list").removeClass("active");
}); });
...@@ -106,9 +135,9 @@ ...@@ -106,9 +135,9 @@
function (entries) { function (entries) {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
$(".blog-side-bar h6").show(); $(".toc h6").show();
} else { } else {
$(".blog-side-bar h6").hide(); $(".toc h6").hide();
} }
}); });
}, },
......
assets/js/style.js
...@@ -433,18 +433,27 @@ ...@@ -433,18 +433,27 @@
// }); // });
// }); // });
var lastScrollTop = 0; let lastScrollTop = 0;
$(window).scroll(function (event) { let scrollTimeout;
$(".menu-item-has-children").removeClass("show");
var thisValue = $(this).scrollTop(); $(window).on("scroll", function () {
if (thisValue == 0) { clearTimeout(scrollTimeout);
$(".navbar").removeClass("sticky-top");
} else if (thisValue > lastScrollTop) { const scrollTop = $(this).scrollTop();
$(".navbar").removeClass("sticky-top");
} else { scrollTimeout = setTimeout(() => {
$(".navbar").addClass("sticky-top"); $(".menu-item-has-children").removeClass("show");
}
lastScrollTop = thisValue; 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 () { $(".button-close").click(function () {
......
blocks/custom-banner-with-right-image.php
<?php if (get_field('enable_section')): ?> <?php if (get_field('enable_section')): ?>
<section class="background-dark pb-60 ABOUT TOP-BANNER-SECTION"> <section class="background-dark pb-60 ABOUT TOP-BANNER-SECTION">
<div class="container"> <div class="container">
<div class="inner-banner-wrapper"> <div class="inner-banner-wrapper">
<div class="row align-items-center justify-content-between"> <div class="row align-items-start justify-content-between">
<div class="col-lg-6 col-12"> <div class="col-lg-6 col-12">
<div class="position-relative left-text-wrapper"> <div class="position-relative left-text-wrapper">
<?php the_field('description'); ?> <?php the_field('description'); ?>
</div>
</div> </div>
<div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image"> </div>
<div class="image-wrapper"> <div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
<div class="image"> <div class="image-wrapper">
<?php <div class="image">
<?php
$image = get_field('image'); $image = get_field('image');
$size = 'full'; $size = 'full';
if ($image) { if ($image) {
echo wp_get_attachment_image($image, $size); echo wp_get_attachment_image($image, $size);
} ?> } ?>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </div>
</section>
<?php endif; ?> <?php endif; ?>
\ No newline at end of file
blocks/portfolio-banner.php
<section class="bg-primary pb-60 PD-TOP-SECTION makura-new"> <section class="bg-primary pb-60 PD-TOP-SECTION makura-new">
<div class="container"> <div class="container">
<div class="row justify-content-between"> <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"> <div class="portfolio-detail-content-box pb-40">
<?php the_field('description'); ?> <?php the_field('description'); ?>
</div> </div>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</a> </a>
<?php endif; ?> <?php endif; ?>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4 col-xl-3">
<div class="client-logo-wrapper d-none d-lg-block"> <div class="client-logo-wrapper d-none d-lg-block">
<?php if ($image = get_field('client_logo')): <?php if ($image = get_field('client_logo')):
echo wp_get_attachment_image($image, 'full'); echo wp_get_attachment_image($image, 'full');
......
blocks/resources/resource-listing.php
...@@ -7,43 +7,46 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc ...@@ -7,43 +7,46 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
$resources_items = $resources_listing['resources_items'] ?: []; $resources_items = $resources_listing['resources_items'] ?: [];
if (isset($resources_items) && is_array($resources_items) && !empty($resources_items)): if (isset($resources_items) && is_array($resources_items) && !empty($resources_items)):
?> ?>
<section class="resource-listing py-80 makura-new"> <section class="resource-listing py-80 makura-new">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="toc slide-up"> <div class="toc slide-up">
<div class="category-list"> <div class="toc-title">
<ul> <h6>Table of Content</h6>
<?php foreach ($resources_items as $ri => $res_item): </div>
<div class="category-list">
<ul>
<?php foreach ($resources_items as $ri => $res_item):
$title = $res_item['title'] ?: ''; $title = $res_item['title'] ?: '';
?> ?>
<li class="<?php echo ($ri === 0) ? 'active' : ''; ?>"><a href="#" class="sm-text" <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> data-target="<?php echo strtolower(str_replace(' ', '-', $title)); ?>"><?php echo esc_html($title); ?></a>
</li> </li>
<?php endforeach; ?> <?php endforeach; ?>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-8 col-xl-9"> <div class="col-lg-8 col-xl-9">
<div class="resource-wrapper"> <div class="resource-wrapper">
<?php foreach ($resources_items as $ri => $res_item): <?php foreach ($resources_items as $ri => $res_item):
$title = $res_item['title'] ?: ''; $title = $res_item['title'] ?: '';
$desc = $res_item['desc'] ?: ''; $desc = $res_item['desc'] ?: '';
$select_resources = $res_item['select_resources'] ?: []; $select_resources = $res_item['select_resources'] ?: [];
?> ?>
<div class="resource-block slide-up" id="<?php echo strtolower(str_replace(' ', '-', $title)); ?>"> <div class="resource-block slide-up" id="<?php echo strtolower(str_replace(' ', '-', $title)); ?>">
<div class="section-title"> <div class="section-title">
<?php if (!empty($title)): ?> <?php if (!empty($title)): ?>
<h2><?php echo $title; ?></h2><?php endif; ?> <h2><?php echo $title; ?></h2><?php endif; ?>
<?php if (!empty($desc)): <?php if (!empty($desc)):
echo $desc ?: ''; echo $desc ?: '';
endif; ?> endif; ?>
</div> </div>
<?php if (!empty($select_resources) && isset($select_resources) && is_array($select_resources)): ?> <?php if (!empty($select_resources) && isset($select_resources) && is_array($select_resources)): ?>
<div class="resources"> <div class="resources">
<div class="row"> <div class="row">
<?php foreach ($select_resources as $sel_res): <?php foreach ($select_resources as $sel_res):
if ($sel_res instanceof WP_Post) { if ($sel_res instanceof WP_Post) {
$post_id = $sel_res->ID; $post_id = $sel_res->ID;
$post_url = get_permalink($post_id); $post_url = get_permalink($post_id);
...@@ -55,24 +58,24 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc ...@@ -55,24 +58,24 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
$post_content = $sel_res->post_content; $post_content = $sel_res->post_content;
$post_excerpt = $sel_res->post_excerpt; $post_excerpt = $sel_res->post_excerpt;
?> ?>
<div class="col-sm-6"> <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-item d-sm-flex flex-sm-column flex-xl-row justify-content-xl-start slide-up">
<div class="resource-image"> <div class="resource-image">
<a href="<?php echo esc_url($post_url); ?>" class="d-block"> <a href="<?php echo esc_url($post_url); ?>" class="d-block">
<img src="<?php echo esc_url($post_thumbnail_url); ?>" <img src="<?php echo esc_url($post_thumbnail_url); ?>"
alt="<?php echo esc_attr($post_title); ?>" class="img-fluid"> alt="<?php echo esc_attr($post_title); ?>" class="img-fluid">
</a> </a>
</div> </div>
<div class="resource-content"> <div class="resource-content">
<div class="rc-detail"> <div class="rc-detail">
<h6><a href="<?php echo esc_url($post_url); ?>"> <h6><a href="<?php echo esc_url($post_url); ?>">
<?php echo esc_html($post_title); ?></a></h6> <?php echo esc_html($post_title); ?></a></h6>
<P class="sm-text"> <P class="sm-text">
<?php echo wp_trim_words($post_excerpt, 8, '...') ?: wp_trim_words($post_content, 8, '...'); ?> <?php echo wp_trim_words($post_excerpt, 8, '...') ?: wp_trim_words($post_content, 8, '...'); ?>
</P> </P>
</div> </div>
<div class="format-and-btn-wrapper d-flex justify-content-between"> <div class="format-and-btn-wrapper d-flex justify-content-between">
<?php <?php
$downloadable_resource = get_field('downloadable_resource', $post_id) ?: []; $downloadable_resource = get_field('downloadable_resource', $post_id) ?: [];
if (isset($downloadable_resource) && is_array($downloadable_resource) && !empty($downloadable_resource)): if (isset($downloadable_resource) && is_array($downloadable_resource) && !empty($downloadable_resource)):
$enable_downloadable_resources = $downloadable_resource['enable_downloadable_resources']; $enable_downloadable_resources = $downloadable_resource['enable_downloadable_resources'];
...@@ -105,24 +108,24 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc ...@@ -105,24 +108,24 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
endif; endif;
endif; endif;
?> ?>
<p class="sm-text">Format: <img src="<?php echo esc_url($icon_url); ?>" <p class="sm-text">Format: <img src="<?php echo esc_url($icon_url); ?>"
alt="<?php echo esc_attr($subtype); ?>"></p> alt="<?php echo esc_attr($subtype); ?>"></p>
<a href="<?php echo esc_url($post_url); ?>" class="mc-btn-underlined sm-text">View in <a href="<?php echo esc_url($post_url); ?>" class="mc-btn-underlined sm-text">View in
Detail</a> Detail</a>
</div>
</div>
</div>
</div>
<?php }endforeach; ?>
</div>
</div> </div>
<?php endif; ?> </div>
</div> </div>
<?php endforeach; ?> </div>
<?php }endforeach; ?>
</div> </div>
</div> </div>
<?php endif; ?>
</div> </div>
<?php endforeach; ?>
</div> </div>
</section> </div>
<?php endif; endif; endif; ?> </div>
</div>
</section>
<?php endif; endif; endif; ?>
<!-- !Resources - Resources Listing --> <!-- !Resources - Resources Listing -->
\ No newline at end of file
dev/sass/base/_base.scss
...@@ -1054,60 +1054,14 @@ ul { ...@@ -1054,60 +1054,14 @@ ul {
// transition: all 0.5s ease; // transition: all 0.5s ease;
// transform: translateY(100%); // 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 { .blog-filter-bar-close {
display: block; display: block;
} }
} }
} }
//blog-card-wrapper //blog-card-wrapper
.blog-card-wrapper { .blog-card-wrapper {
margin-bottom: 1.875rem; margin-bottom: 1.875rem;
......
dev/sass/base/_global.scss
...@@ -249,22 +249,78 @@ button { ...@@ -249,22 +249,78 @@ button {
.toc { .toc {
position: fixed !important; position: fixed !important;
display: block !important; display: block !important;
bottom: 0; // bottom: 0;
left: 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 { .category-list {
display: grid; position: fixed;
grid-template-rows: 0fr; top: 50%;
overflow: hidden; 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 { ul {
overflow: hidden; overflow: visible !important;
} }
}
&.active { &.active {
.category-list { opacity: 1;
grid-template-rows: 1fr; visibility: visible;
transform: translateX(0) translateY(-50%);
} }
} }
} }
......
dev/sass/pages/_responsive.scss
...@@ -375,6 +375,8 @@ ...@@ -375,6 +375,8 @@
} }
.TECHNOLOGY-USED-SECTION { .TECHNOLOGY-USED-SECTION {
padding-bottom: 4rem;
.col-6 { .col-6 {
width: 100%; width: 100%;
} }
......
dev/sass/pages/master-portfolio/_moment-gallery.scss
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
&.horizontal { &:nth-child(3) {
grid-row: span 2; grid-column: span 2;
} }
&:nth-child(n + 4) { &:nth-child(n + 4) {
display: none; display: none;
......
dev/sass/pages/master-portfolio/_sticky-tab.scss
...@@ -24,6 +24,10 @@ ...@@ -24,6 +24,10 @@
} }
} }
} }
&.sticky-with-header {
top: 66px;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
...@@ -51,5 +55,9 @@ ...@@ -51,5 +55,9 @@
} }
} }
} }
&.sticky-with-header {
top: 88px;
}
} }
} }
dev/sass/pages/resources/_resource-detail.scss
...@@ -9,7 +9,23 @@ ...@@ -9,7 +9,23 @@
margin-top: 32px; 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; padding-left: 8px;
li { li {
position: relative; position: relative;
...@@ -41,6 +57,7 @@ ...@@ -41,6 +57,7 @@
a { a {
font-size: 1.5rem; font-size: 1.5rem;
} }
strong { strong {
font-weight: 500; font-weight: 500;
} }
...@@ -76,6 +93,10 @@ ...@@ -76,6 +93,10 @@
} }
} }
} }
.faq-wrapper {
margin-top: 2rem;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
...@@ -90,6 +111,11 @@ ...@@ -90,6 +111,11 @@
} }
} }
} }
span.over-title {
margin-top: 48px;
}
li, li,
p, p,
strong, strong,
......
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