Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: complete mobile carousel and social updates

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 18:00:32 -05:00
parent f8d60a63a4
commit a360b8192a
14 changed files with 248 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
footer.php
+1 -1
View File
@@ -110,7 +110,7 @@ $footerNav = ! empty( $locations['footer_navigation'] )
?>
</div>
<div class="copyright font-light text-cwc-blue-03/60 text-right py-3 text-12px">
<div class="copyright font-light text-white/70 text-right py-3 text-12px">
<?php
if ( $copyright ) {
echo wp_kses_post( $copyright );
static/img/social-facebook.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 12.0301C24 5.38947 18.624 0 12 0C5.376 0 0 5.38947 0 12.0301C0 17.8526 4.128 22.7008 9.6 23.8195V15.6391H7.2V12.0301H9.6V9.02256C9.6 6.70075 11.484 4.81203 13.8 4.81203H16.8V8.42105H14.4C13.74 8.42105 13.2 8.96241 13.2 9.62406V12.0301H16.8V15.6391H13.2V24C19.26 23.3985 24 18.2737 24 12.0301Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 425 B

static/img/social-linkedin.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0C5.3725 0 0 5.3725 0 12C0 18.6275 5.3725 24 12 24C18.6275 24 24 18.6275 24 12C24 5.3725 18.6275 0 12 0ZM9.0625 16.9738H6.6325V9.15375H9.0625V16.9738ZM7.8325 8.19375C7.065 8.19375 6.56875 7.65 6.56875 6.9775C6.56875 6.29125 7.08 5.76375 7.86375 5.76375C8.6475 5.76375 9.1275 6.29125 9.1425 6.9775C9.1425 7.65 8.6475 8.19375 7.8325 8.19375ZM17.9375 16.9738H15.5075V12.64C15.5075 11.6313 15.155 10.9462 14.2763 10.9462C13.605 10.9462 13.2063 11.41 13.03 11.8563C12.965 12.015 12.9488 12.24 12.9488 12.4638V16.9725H10.5175V11.6475C10.5175 10.6713 10.4862 9.855 10.4537 9.1525H12.565L12.6763 10.2388H12.725C13.045 9.72875 13.8288 8.97625 15.14 8.97625C16.7388 8.97625 17.9375 10.0475 17.9375 12.35V16.9738Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 835 B

static/img/social-youtube.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0037 11.7913L11.1963 10.4813C10.9513 10.3675 10.75 10.495 10.75 10.7662V13.2338C10.75 13.505 10.9513 13.6325 11.1963 13.5188L14.0025 12.2087C14.2488 12.0938 14.2487 11.9063 14.0037 11.7913ZM12 0C5.3725 0 0 5.3725 0 12C0 18.6275 5.3725 24 12 24C18.6275 24 24 18.6275 24 12C24 5.3725 18.6275 0 12 0ZM12 16.875C5.8575 16.875 5.75 16.3213 5.75 12C5.75 7.67875 5.8575 7.125 12 7.125C18.1425 7.125 18.25 7.67875 18.25 12C18.25 16.3213 18.1425 16.875 12 16.875Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 587 B

static/js/modules/RecentPostsCarousel.js
+48
View File
@@ -0,0 +1,48 @@
const mobileViewport = window.matchMedia("(max-width: 640px)");
const initializeCarousel = (carousel) => {
const cards = Array.from(carousel.querySelectorAll(".recent-posts__card"));
const dots = Array.from(carousel.querySelectorAll(".recent-posts__dot"));
const previous = carousel.querySelector(".recent-posts__control--previous");
const next = carousel.querySelector(".recent-posts__control--next");
if (cards.length < 2 || !previous || !next) {
return;
}
let activeIndex = 0;
const render = () => {
cards.forEach((card, index) => {
const isActive = index === activeIndex;
card.classList.toggle("is-active", isActive);
card.hidden = mobileViewport.matches && !isActive;
});
dots.forEach((dot, index) => {
const isActive = index === activeIndex;
dot.classList.toggle("is-active", isActive);
dot.toggleAttribute("aria-current", isActive);
});
};
const showArticle = (index) => {
activeIndex = (index + cards.length) % cards.length;
render();
};
previous.addEventListener("click", () => showArticle(activeIndex - 1));
next.addEventListener("click", () => showArticle(activeIndex + 1));
dots.forEach((dot, index) =>
dot.addEventListener("click", () => showArticle(index)),
);
mobileViewport.addEventListener("change", render);
render();
};
const initRecentPostsCarousels = () => {
document.querySelectorAll(".recent-posts").forEach(initializeCarousel);
};
export default initRecentPostsCarousels;
static/js/theme.js
+4
View File
@@ -7,6 +7,7 @@ import { registerBackToTopButton } from './components/backToTop.js';
import GetHeaderHeight from './modules/GetHeaderHeight.js';
import tagExternalLinks from './modules/TagExternalLinks.js';
import Navigation from './modules/Navigation.js';
import initRecentPostsCarousels from './modules/RecentPostsCarousel.js';
// Add passive event listeners
! function (e) {
@@ -68,6 +69,9 @@ document.addEventListener('DOMContentLoaded', () => {
// Initialize Header Height
GetHeaderHeight();
// Initialize mobile Recent Insights carousels.
initRecentPostsCarousels();
// Add Back to Top button to body
// const backToTop = document.createElement('x-back-to-top');
// document.body.appendChild(backToTop);
styles/base/colors.css
+1
View File
@@ -24,6 +24,7 @@
--color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
--color-secondary: var(--color-cwc-orange-01);
--color-secondary-accessible: #c43c2b;
--color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
--color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
--color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
styles/blocks/buttons.css
+3 -3
View File
@@ -143,10 +143,10 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
* like the ones below and changing the color values.
*/
.btn[data-button-color="secondary"], .button[data-button-color="secondary"] {
--button-bg: var(--color-secondary);
--button-bg: var(--color-secondary-accessible);
--button-color: var(--color-white);
--button-border-color: var(--color-secondary);
--button-outline-color: var(--color-secondary);
--button-border-color: var(--color-secondary-accessible);
--button-outline-color: var(--color-secondary-accessible);
--button-hover-bg: color-mix(in oklch, var(--color-secondary) 74%);
--button-hover-border-color: color-mix(in oklch, var(--color-secondary) 74%);
--button-hover-color: var(--color-white);
tests/site-a11y.spec.js
+47 -19
View File
@@ -1,58 +1,86 @@
const { test, expect } = require('@playwright/test');
const AxeBuilder = require('@axe-core/playwright').default;
const { test, expect } = require("@playwright/test");
const AxeBuilder = require("@axe-core/playwright").default;
const domain = 'http://domain.local/';
const domain =
process.env.TEST_BASE_URL || "http://community-works-collaborative.test/";
test.use({
viewport: { width: 1920, height: 1080 },
});
test.describe('site-test', () => {
test('Homepage Test', async ({ page }, testInfo) => {
test.describe("site-test", () => {
test("Homepage Test", async ({ page }, testInfo) => {
await page.goto(domain);
await page.screenshot({ path: 'test-results/homepage.png', fullPage: true });
await page.screenshot({
path: "test-results/homepage.png",
fullPage: true,
});
const accessibilityScanResults = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22a', 'wcag22aa'])
.withTags([
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa",
])
.analyze();
await testInfo.attach('accessibility-scan-results', {
await testInfo.attach("accessibility-scan-results", {
body: JSON.stringify(accessibilityScanResults, null, 2),
contentType: 'application/json'
contentType: "application/json",
});
expect(accessibilityScanResults.violations).toEqual([]);
});
test('Blog Index Page Test', async ({ page }, testInfo) => {
test("Blog Index Page Test", async ({ page }, testInfo) => {
await page.goto(`${domain}news/`);
await page.screenshot({ path: 'test-results/blog-index.png', fullPage: true });
await page.screenshot({
path: "test-results/blog-index.png",
fullPage: true,
});
const accessibilityScanResults = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22a', 'wcag22aa'])
.withTags([
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa",
])
.analyze();
await testInfo.attach('accessibility-scan-results', {
await testInfo.attach("accessibility-scan-results", {
body: JSON.stringify(accessibilityScanResults, null, 2),
contentType: 'application/json'
contentType: "application/json",
});
expect(accessibilityScanResults.violations).toEqual([]);
});
test('404 Page Test', async ({ page }, testInfo) => {
test("404 Page Test", async ({ page }, testInfo) => {
await page.goto(`${domain}yaya/`);
await page.screenshot({ path: 'test-results/404.png', fullPage: true });
await page.screenshot({ path: "test-results/404.png", fullPage: true });
const accessibilityScanResults = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22a', 'wcag22aa'])
.withTags([
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa",
])
.analyze();
await testInfo.attach('accessibility-scan-results', {
await testInfo.attach("accessibility-scan-results", {
body: JSON.stringify(accessibilityScanResults, null, 2),
contentType: 'application/json'
contentType: "application/json",
});
expect(accessibilityScanResults.violations).toEqual([]);
views/blocks/recent-posts/recent-posts.css
+81 -8
View File
@@ -75,6 +75,11 @@
position: relative;
}
.recent-posts__controls,
.recent-posts__pagination {
display: none;
}
.recent-posts__grid::before {
background: var(--color-cwc-blue-03);
content: "";
@@ -273,10 +278,57 @@
top: min(184px, calc(100cqw * 250 / 397));
}
.recent-posts__card:nth-child(n + 2) {
.recent-posts__card {
display: none;
}
.recent-posts__card.is-active {
display: flex;
}
.recent-posts__controls {
display: block;
}
.recent-posts__control {
align-items: center;
background: var(--color-secondary);
border: 0;
border-radius: 50%;
color: var(--color-white);
display: flex;
height: 3rem;
justify-content: center;
padding: 0;
position: absolute;
top: 10rem;
width: 3rem;
z-index: 3;
}
.recent-posts__control:hover,
.recent-posts__control:focus-visible {
background: var(--color-secondary-800);
}
.recent-posts__control svg {
fill: none;
height: 1.75rem;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.5;
width: 1.75rem;
}
.recent-posts__control--previous {
left: -1.5rem;
}
.recent-posts__control--next {
right: -1.5rem;
}
.recent-posts__image-link {
border-radius: 0.5rem 0.5rem 0 0;
}
@@ -303,17 +355,38 @@
.recent-posts__footer {
align-items: center;
flex-direction: column;
gap: 1.25rem;
margin-top: 1.4rem;
margin-top: 1.25rem;
}
.recent-posts__footer::before {
background:
radial-gradient(circle, var(--color-cwc-blue-01) 0 0.2rem, transparent 0.22rem) left center / 0.75rem 0.5rem repeat-x;
.recent-posts__pagination {
display: flex;
gap: 0.75rem;
justify-content: center;
margin-top: 1.5rem;
}
.recent-posts__dot {
align-items: center;
background: transparent;
border: 0;
display: flex;
height: 1.5rem;
justify-content: center;
padding: 0;
width: 1.5rem;
}
.recent-posts__dot::before {
background: var(--color-cwc-blue-01);
border-radius: 50%;
content: "";
display: block;
height: 0.5rem;
width: 2.25rem;
opacity: 0.45;
width: 0.5rem;
}
.recent-posts__dot.is-active::before {
opacity: 1;
}
.recent-posts__blog-link.button {
views/blocks/recent-posts/recent-posts.php
+31 -2
View File
@@ -56,13 +56,15 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
<?php if ( $recent_posts->have_posts() ) : ?>
<div class="recent-posts__grid">
<?php
$post_index = 0;
while ( $recent_posts->have_posts() ) :
$recent_posts->the_post();
$post_title = get_the_title();
$post_permalink = get_permalink();
$active_class = 0 === $post_index ? ' is-active' : '';
?>
<article class="recent-posts__card">
<article class="recent-posts__card<?php echo esc_attr( $active_class ); ?>">
<?php /* translators: %s: Post title. */ ?>
<a class="recent-posts__image-link" href="<?php echo esc_url( $post_permalink ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Continue reading %s', 'cwc' ), $post_title ) ); ?>">
<?php if ( has_post_thumbnail() ) : ?>
@@ -96,7 +98,34 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
</a>
</div>
</article>
<?php endwhile; ?>
<?php
++$post_index;
endwhile;
?>
<div class="recent-posts__controls">
<button class="recent-posts__control recent-posts__control--previous" type="button" aria-label="<?php echo esc_attr__( 'Previous article', 'cwc' ); ?>">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M15 5 8 12l7 7" />
</svg>
</button>
<button class="recent-posts__control recent-posts__control--next" type="button" aria-label="<?php echo esc_attr__( 'Next article', 'cwc' ); ?>">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="m9 5 7 7-7 7" />
</svg>
</button>
</div>
</div>
<div class="recent-posts__pagination" aria-label="<?php echo esc_attr__( 'Choose an article', 'cwc' ); ?>">
<?php for ( $dot_index = 0; $dot_index < $recent_posts->post_count; ++$dot_index ) : ?>
<button
class="recent-posts__dot<?php echo 0 === $dot_index ? ' is-active' : ''; ?>"
type="button"
aria-label="<?php echo esc_attr( sprintf( /* translators: %d: Article number. */ __( 'Show article %d', 'cwc' ), $dot_index + 1 ) ); ?>"
<?php echo 0 === $dot_index ? ' aria-current="true"' : ''; ?>
></button>
<?php endfor; ?>
</div>
<?php wp_reset_postdata(); ?>
views/icons/facebook.php
+1 -1
View File
@@ -1 +1 @@
<i class="icon-facebook"></i>
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-facebook.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" />
views/icons/linkedin.php
+1 -1
View File
@@ -1 +1 @@
<i class="icon-linkedin"></i>
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-linkedin.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" />
views/icons/youtube.php
+1 -1
View File
@@ -1 +1 @@
<i class="icon-youtube"></i>
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-youtube.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" />