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 @@
});
}
});
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/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,
......
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