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 186 additions and 103 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) {
let lastScrollTop = 0;
let scrollTimeout;
$(window).on("scroll", function () {
clearTimeout(scrollTimeout);
const scrollTop = $(this).scrollTop();
scrollTimeout = setTimeout(() => {
$(".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 {
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 = thisValue;
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">
<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="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'); ?>
......@@ -23,5 +23,5 @@
</div>
</div>
</div>
</section>
</section>
<?php endif; ?>
\ No newline at end of file
blocks/portfolio-banner.php
......@@ -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
......@@ -37,7 +37,7 @@ 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">
<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">
......@@ -82,10 +82,10 @@ if (isset($cmws) && is_array($cmws) && !empty($cmws)):
</div>
<?php endif; ?>
</div>
</section>
<?php endif; endif; ?>
</section>
<?php endif; endif; ?>
<?php if ($quote_text = get_field('quote_text')): ?>
<section class="quote PROJECT-CONCLUSION">
<section class="quote PROJECT-CONCLUSION">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8 mx-auto">
......@@ -102,5 +102,5 @@ if (isset($cmws) && is_array($cmws) && !empty($cmws)):
</div>
</div>
</div>
</section>
</section>
<?php endif; ?>
\ No newline at end of file
blocks/resources/resource-listing.php
......@@ -7,11 +7,14 @@ 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">
<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):
......@@ -123,6 +126,6 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
</div>
</div>
</div>
</section>
<?php endif; endif; endif; ?>
</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;
ul {
overflow: hidden;
&.remove {
opacity: 0;
visibility: hidden;
transform: translateX(-100%) translateY(-50%);
}
}
&.active {
.category-list {
grid-template-rows: 1fr;
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: visible !important;
}
&.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
......@@ -70,8 +70,7 @@ endif;
<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()); ?>">
<img src="<?php echo esc_url($post_thumbnail_url); ?>" alt="<?php echo esc_attr(the_title()); ?>">
</div>
</div>
</div>
......@@ -87,7 +86,7 @@ endif;
<?php echo the_content(); ?>
<!-- faqs -->
<?php if (get_field('enable_section')): ?>
<span><?php the_field('subtitle'); ?></span>
<span class="over-title"><?php the_field('subtitle'); ?></span>
<h3><?php the_field('title'); ?></h3>
<?php the_field('description'); ?>
<?php $faqs = get_field('faqs');
......@@ -127,10 +126,8 @@ endif;
<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" />
<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" />
......@@ -142,10 +139,8 @@ endif;
<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" />
<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" />
......@@ -157,10 +152,8 @@ endif;
<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" />
<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" />
......
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