rschneider/yogastic
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

[yoga-15] improve service list rendering

Browse Source
This commit is contained in:
Schneider Roland 2025-09-10 22:38:04 +02:00
parent 8fc0f924b8
commit 1e553380e2
8 changed files with 59 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
yoga-app/src/components/block.with.image.component.tsx
View File

@ -5,7 +5,7 @@ import BlockWithLeftImage from "@/components/block.with.left.image.component";
export interface BlockWithImageComponentProps {
id: number;
id?: string;
title?: string;
header?: string;
block: BlocksContent;

9
yoga-app/src/components/block.with.left.image.component.module.css Normal file
View File

@ -0,0 +1,9 @@
.leftImage {
border-top-left-radius: 200px;
border-bottom-right-radius: 200px;
margin: -150px 12px 12px 0;
}
.blockLeftVisionContent {
padding-left: 0;
}

22
yoga-app/src/components/block.with.left.image.component.tsx
View File

@ -1,27 +1,31 @@
import YogaImageComponent from "@/components/yoga.image.component";
import NextBlocksRenderer from "@/components/next.blocks.renderer";
import {BlockWithImageComponentProps} from "@/components/block.with.image.component";
import styles from './block.with.left.image.component.module.css';
import clsx from "clsx";
export default function BlockWithLeftImage ( {
title,header,image,block,button
id,title,header, image: {
url,
},block,button
} : BlockWithImageComponentProps){
return (
<section className="vision_section">
<section className="vision_section" id={id}>
<div className="container">
<div className="vision_box">
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div className="vision_image">
<figure className="mb-0"><YogaImageComponent src={image.url} alt="" className="img-fluid" /></figure>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12" data-aos="fade-up">
<div className="vision_content">
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
<div className={ clsx("vision_content",styles.blockLeftVisionContent)}>
{url && <div className="vision_image">
<figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-left", styles.leftImage)}/></figure>
</div>
}
<h5>{title}</h5>
<h2>{header}</h2>
<NextBlocksRenderer content={ block } />

10
yoga-app/src/components/block.with.right.image.component.module.css
View File

@ -1,5 +1,9 @@
.rightImage {
border-top-left-radius: 60px;
border-bottom-right-radius: 60px;
margin: -150px 0 12px 12px;
border-top-left-radius: 200px;
border-bottom-right-radius: 200px;
margin: -150px 0 12px 12px;
}
.blockRightMissionContent {
padding-right: 0;
}

30
yoga-app/src/components/block.with.right.image.component.tsx
View File

@ -4,35 +4,41 @@ import NextBlocksRenderer from "@/components/next.blocks.renderer";
import styles from './block.with.right.image.component.module.css';
import clsx from "clsx";
export default function BlockWithRightImage ({
title,header, block,button, image: {
export default function BlockWithRightImage({
id, title, header, block, button, image: {
url,
} ,
}: BlockWithImageComponentProps){
},
}: BlockWithImageComponentProps) {
return (
<section className="mission_section">
<section className="mission_section" id={id}>
<div className="container">
<div className="mission_box">
<div className="row">
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
<div className="mission_content">
<div className="mission_image">
<figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-right", styles.rightImage)} /></figure>
</div>
<div className={ clsx("mission_content",styles.blockRightMissionContent)}>
{
url && <div className="mission_image">
<figure className="mb-0">
<YogaImageComponent src={url} alt=""
className={clsx("img-fluid", "float-right", styles.rightImage)}/>
</figure>
</div>
}
{title && <h5>{title}</h5>}
{header && <h2>{header}</h2>}
<NextBlocksRenderer content={ block } />
<NextBlocksRenderer content={block}/>
<div className="btn_wrapper">
{button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>}
{button && <a href={button.link}
className="text-decoration-none read_more_btn">{button.label}</a>}
</div>
</div>
</div>
</div>
</div>
<figure className="mission_right_shape right_shape mb-0">
<YogaImageComponent src="./assets/images/our_mission_shape.png" alt="" className="img-fluid" />
<YogaImageComponent src="./assets/images/our_mission_shape.png" alt="" className="img-fluid"/>
</figure>
</div>
</section>

15
yoga-app/src/components/single.service.component.tsx
View File

@ -10,17 +10,20 @@ export interface Props {
index: number
}
const SingleService = ({config,index}: Props) => {
if (!config || !config.article || !config.articleImage) {
const SingleService = ({config, index}: Props) => {
if (!config || !config.article) {
return null; // or some fallback UI
}
const {article, articleImage, id, header } = config;
const strapiFile = articleImage as StrapiFile;
const imageUrl = strapiApi.getImageUrl(strapiFile?.url);
const {article, articleImage, id, header} = config;
let imageUrl: string | undefined = undefined;
const strapiFile = articleImage as StrapiFile;
imageUrl = strapiApi.getImageUrl(strapiFile?.url);
return (
<BlockWithImageComponent id={id} block={article} image={{ position: index %2 ? ImagePosition.Left : ImagePosition.Right, url:imageUrl}} header={header} />
<BlockWithImageComponent id={id} block={article}
image={{position: index % 2 ? ImagePosition.Left : ImagePosition.Right, url: imageUrl}}
header={header}/>
);
}

2
yoga-app/src/types/types.ts
View File

@ -21,7 +21,7 @@ export interface ButtonConfig{
export interface ImageConfig{
position: ImagePosition,
url: string,
url?: string,
alt?: string,
width?: number,
height?: number,

2
yoga-app/src/util/sorting.ts
View File

@ -3,5 +3,5 @@ import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/y
export function sortServicesByPriority(a: YogaSingleService_Plain, b: YogaSingleService_Plain) {
const priorityA = a.priority ?? 0;
const priorityB = b.priority ?? 0;
return priorityA - priorityB;
return priorityB - priorityA;
}