From 3e5921b71fd920ea217312381508cb615bfed4f3 Mon Sep 17 00:00:00 2001 From: Cedrik Hoffmann Date: Sun, 9 Jun 2024 18:02:50 +0200 Subject: [PATCH 01/11] ci: add deploy on pr --- .github/workflows/build-on-pr.yml | 2 +- .github/workflows/cleanup_pull_request.yaml | 30 ++++++++ .github/workflows/deploy_pull_request.yaml | 81 +++++++++++++++++++++ k8s/values/on-pr.yaml | 25 +++++++ 4 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/cleanup_pull_request.yaml create mode 100644 .github/workflows/deploy_pull_request.yaml create mode 100644 k8s/values/on-pr.yaml diff --git a/.github/workflows/build-on-pr.yml b/.github/workflows/build-on-pr.yml index aa0ac13..a4e3cf4 100644 --- a/.github/workflows/build-on-pr.yml +++ b/.github/workflows/build-on-pr.yml @@ -19,7 +19,7 @@ jobs: - name: Use Node.js uses: actions/setup-node@v4 with: - node-version-file: .node-version + node-version-file: .node-version - name: Install Yarn run: npm install -g yarn diff --git a/.github/workflows/cleanup_pull_request.yaml b/.github/workflows/cleanup_pull_request.yaml new file mode 100644 index 0000000..81a7b49 --- /dev/null +++ b/.github/workflows/cleanup_pull_request.yaml @@ -0,0 +1,30 @@ +name: 'Cleanup Pull Request' +on: + pull_request: + types: [closed] + +jobs: + cleanup-pr: + name: "Cleanup Pull Request" + runs-on: ubuntu-latest + continue-on-error: true + permissions: + contents: read + packages: write + actions: write + pull-requests: write + + steps: + - name: Kubernetes login + uses: actions-hub/kubectl@master + env: + KUBE_CONFIG: ${{ secrets.KUBE_CONFIG }} + + - name: Delete Helm Chart + run: | + helm delete project-website-pr-${{ github.event.number }} --namespace project-website-pr-${{ github.event.number }} + + - name: Delete Namespace + if: always() + run: | + kubectl delete namespace project-website-pr-${{ github.event.number }} diff --git a/.github/workflows/deploy_pull_request.yaml b/.github/workflows/deploy_pull_request.yaml new file mode 100644 index 0000000..f8b7738 --- /dev/null +++ b/.github/workflows/deploy_pull_request.yaml @@ -0,0 +1,81 @@ +name: "Deploy Pull Request" +on: + pull_request: + types: [labeled] + +jobs: + deploy_pr: + name: "Deploy Pull Request" + runs-on: ubuntu-latest + if: ${{ github.event.label.name == 'deploy' }} + permissions: + contents: read + packages: write + actions: write + pull-requests: write + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Set up QEMU + uses: docker/setup-qemu-action@v3 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + + - name: Login to Container Registry + uses: docker/login-action@v3 + with: + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: set lower case owner name + run: | + echo "REPO_LC=${REPO,,}" >>${GITHUB_ENV} + env: + REPO: "${{ github.repository }}" + + - name: Build and push + uses: docker/build-push-action@v5 + with: + context: . + file: ./.docker/Dockerfile.dev + platforms: linux/amd64,linux/arm64 + push: true + tags: ghcr.io/${{ env.REPO_LC }}-dev:pr-${{ github.event.number }} + + - name: "Setup yq" + uses: dcarbone/install-yq-action@v1.1.1 + with: + version: "v4.42.1" + force: true + + - name: Change values in on-pr.yaml + run: | + yq -i ' + .ingress.hosts[0].name = "pr-${{ github.event.number }}.website.dev.green-ecolution.de" | + .deployment.image.tag = "pr-${{ github.event.number }}" | + .deployment.name = "project-website-pr-${{ github.event.number }}" | + .deployment.namespace = "project-website-pr-${{ github.event.number }}" + ' ./k8s/values/on-pr.yaml + + - name: Install Helm Chart + env: + KUBECONFIG: ${{ secrets.KUBE_CONFIG }} | base64 -d + run: | + helm upgrade project-website-pr-${{ github.event.number }} ./k8s \ + --install \ + --namespace project-website-pr-${{ github.event.number }} \ + --create-namespace \ + --wait \ + --values ./k8s/values.yaml \ + --values ./k8s/values/on-pr.yaml \ + + - name: Post comment to Pull Request + uses: thollander/actions-comment-pull-request@v2 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + message: | + "Deployment of PR #${{ github.event.number }} successful :rocket: \br\br You can visit it at https://pr-${{ github.event.number }}.website.dev.green-ecolution.de" diff --git a/k8s/values/on-pr.yaml b/k8s/values/on-pr.yaml new file mode 100644 index 0000000..911396f --- /dev/null +++ b/k8s/values/on-pr.yaml @@ -0,0 +1,25 @@ +deployment: + namespace: project-website-pr + name: project-website-pr + replicaCount: 1 + image: + repository: ghcr.io/smartcityflensburg/project-website-dev + pullPolicy: Always + tag: "latest" +ingress: + enabled: true + className: "traefik" + annotations: + cert-manager.io/cluster-issuer: cert-manager + kubernetes.io/ingress.class: traefik + hosts: + - name: pr.website.dev.green-ecolution.de + paths: + - path: / + pathType: Prefix + backend: + serviceName: project-website + servicePort: 80 + tls: + enabled: true + secretName: dev-green-ecolution-de-tls From b9563129b9555ac263a3fb8d504eef64e5c2d10a Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Sun, 9 Jun 2024 23:34:30 +0000 Subject: [PATCH 02/11] Update dev image to commit 3e5921b --- k8s/values/develop.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/k8s/values/develop.yaml b/k8s/values/develop.yaml index 2ce9640..e12ea87 100644 --- a/k8s/values/develop.yaml +++ b/k8s/values/develop.yaml @@ -5,7 +5,7 @@ deployment: image: repository: ghcr.io/smartcityflensburg/project-website-dev pullPolicy: Always - tag: "513af1c" + tag: "3e5921b" ingress: enabled: true className: "traefik" From b29c81bff542178be41a06ce4f69db26b548c5d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Mon, 10 Jun 2024 17:22:16 +0200 Subject: [PATCH 03/11] feat: add process section (wip) --- src/tsx/App.tsx | 2 + src/tsx/components/cards/ProcessCard.tsx | 23 ++++++ src/tsx/components/sections/Process.tsx | 101 +++++++++++++++++++++++ 3 files changed, 126 insertions(+) create mode 100644 src/tsx/components/cards/ProcessCard.tsx create mode 100644 src/tsx/components/sections/Process.tsx diff --git a/src/tsx/App.tsx b/src/tsx/App.tsx index b7281af..7181d8f 100644 --- a/src/tsx/App.tsx +++ b/src/tsx/App.tsx @@ -1,11 +1,13 @@ import Faq from "./components/sections/Faq"; import Introduction from "./components/sections/Introduction"; +import Process from "./components/sections/Process"; import Stakeholder from "./components/sections/Stakeholder"; function App() { return (
+
diff --git a/src/tsx/components/cards/ProcessCard.tsx b/src/tsx/components/cards/ProcessCard.tsx new file mode 100644 index 0000000..e0a8a65 --- /dev/null +++ b/src/tsx/components/cards/ProcessCard.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +interface ProcessCardProps { + label: string; + shortName: string; + index: number; + description: string; + isCurrent?: boolean +} + +const ProcessCard: React.FC = ({ label, shortName, index, description, isCurrent = false }) => { + return ( +
+ + Schritt {index} von 5: {shortName} + +

{label}

+

{description}

+
+ ); +}; + +export default ProcessCard; diff --git a/src/tsx/components/sections/Process.tsx b/src/tsx/components/sections/Process.tsx new file mode 100644 index 0000000..f051272 --- /dev/null +++ b/src/tsx/components/sections/Process.tsx @@ -0,0 +1,101 @@ +import { useState, useEffect, useRef } from 'react'; +import { Splide, SplideSlide } from '@splidejs/react-splide'; +import { i18nTranslated } from '../../helper/sliderTranslations'; +import '@splidejs/react-splide/css'; +import ProcessCard from "../cards/ProcessCard"; + +function Process() { + const [currentSlide, setCurrentSlide] = useState(0); + const activeStep = 1; + const splideRef = useRef(null); + + const steps = [ + { + label: "Konzepterstellung & Ideenfindung", + shortName: "Konzept", + description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna." + }, + { + label: "MVP (Most Valid Product)", + shortName: "MVP", + description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna." + }, + { + label: "Produktvorstellung 01", + shortName: "Vorstellung 01", + description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna." + }, + ]; + + const breakpoints = { + 1280: { + destroy: true, + }, + }; + + useEffect(() => { + if (!splideRef.current) return; + + const splideInstance = splideRef.current.splide; + splideInstance.on('move', (newIndex: number) => { + setCurrentSlide(newIndex); + }); + }, []); + + return ( +
+
+

+ Der aktuelle Projektfortschritt +

+

+ Sit sint sit incididunt magna esse incididunt incididunt consectetur ex sit. + Ipsum labore dolor minim culpa Lorem incididunt nisi nulla culpa dolor. + Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. + Proident ut consequat consequat consectetur magna. +

+
+ + + {steps.map((step, index) => ( + + + + ))} + + +
    + {steps.map((step, index) => ( +
  • activeStep ? 'before:bg-grey-100 after:bg-grey-100' : ''}`} + > +
    + + {index < activeStep ? ( + + + + ) : ( + index + 1 + )} + +
    +
    • + ))} +
+
+ ); +} + +export default Process; From f02575d64adf72bf95387ae6fef162bbfa401e1b Mon Sep 17 00:00:00 2001 From: Cedrik Hoffmann Date: Sun, 9 Jun 2024 18:02:50 +0200 Subject: [PATCH 04/11] ci: add deploy on pr --- .github/workflows/build-on-pr.yml | 2 +- .github/workflows/cleanup_pull_request.yaml | 31 +++++++ .github/workflows/deploy_pull_request.yaml | 89 +++++++++++++++++++++ 3 files changed, 121 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/cleanup_pull_request.yaml create mode 100644 .github/workflows/deploy_pull_request.yaml diff --git a/.github/workflows/build-on-pr.yml b/.github/workflows/build-on-pr.yml index aa0ac13..a4e3cf4 100644 --- a/.github/workflows/build-on-pr.yml +++ b/.github/workflows/build-on-pr.yml @@ -19,7 +19,7 @@ jobs: - name: Use Node.js uses: actions/setup-node@v4 with: - node-version-file: .node-version + node-version-file: .node-version - name: Install Yarn run: npm install -g yarn diff --git a/.github/workflows/cleanup_pull_request.yaml b/.github/workflows/cleanup_pull_request.yaml new file mode 100644 index 0000000..cf31635 --- /dev/null +++ b/.github/workflows/cleanup_pull_request.yaml @@ -0,0 +1,31 @@ +name: 'Cleanup Pull Request' +on: + pull_request: + types: [closed] + +jobs: + cleanup-pr: + name: "Cleanup Pull Request" + runs-on: ubuntu-latest + continue-on-error: true + permissions: + contents: read + packages: write + actions: write + pull-requests: write + + steps: + - name: Kubernetes login + uses: azure/k8s-set-context@v4 + with: + method: kubeconfig + kubeconfig: ${{ secrets.KUBE_CONFIG }} + + - name: Delete Helm Chart + run: | + helm delete project-website-pr-${{ github.event.number }} --namespace project-website-pr-${{ github.event.number }} + + - name: Delete Namespace + if: always() + run: | + kubectl delete namespace project-website-pr-${{ github.event.number }} diff --git a/.github/workflows/deploy_pull_request.yaml b/.github/workflows/deploy_pull_request.yaml new file mode 100644 index 0000000..94b63a6 --- /dev/null +++ b/.github/workflows/deploy_pull_request.yaml @@ -0,0 +1,89 @@ +name: "Deploy Pull Request" +on: + pull_request: + types: [labeled] + +jobs: + deploy_pr: + name: "Deploy Pull Request" + runs-on: ubuntu-latest + if: ${{ github.event.label.name == 'deploy' }} + permissions: + contents: read + packages: write + actions: write + pull-requests: write + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Set up QEMU + uses: docker/setup-qemu-action@v3 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + + - name: Login to Container Registry + uses: docker/login-action@v3 + with: + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: set lower case owner name + run: | + echo "REPO_LC=${REPO,,}" >>${GITHUB_ENV} + env: + REPO: "${{ github.repository }}" + + - name: Build and push + uses: docker/build-push-action@v5 + with: + context: . + file: ./.docker/Dockerfile.dev + platforms: linux/amd64,linux/arm64 + push: true + tags: ghcr.io/${{ env.REPO_LC }}-dev:pr-${{ github.event.number }} + + - name: "Setup yq" + uses: dcarbone/install-yq-action@v1.1.1 + with: + version: "v4.42.1" + force: true + + - name: Change values in on-pr.yaml + run: | + yq -i ' + .ingress.hosts[0].name = "pr-${{ github.event.number }}.website.dev.green-ecolution.de" | + .deployment.image.tag = "pr-${{ github.event.number }}" | + .deployment.name = "project-website-pr-${{ github.event.number }}" | + .deployment.namespace = "project-website-pr-${{ github.event.number }}" + ' ./k8s/values/develop.yaml + + - name: Kubernetes login + uses: azure/k8s-set-context@v4 + with: + method: kubeconfig + kubeconfig: ${{ secrets.KUBE_CONFIG }} + + - name: Install Helm Chart + run: | + helm upgrade project-website-pr-${{ github.event.number }} ./k8s \ + --install \ + --namespace project-website-pr-${{ github.event.number }} \ + --create-namespace \ + --wait \ + --values ./k8s/values.yaml \ + --values ./k8s/values/on-pr.yaml \ + + - name: Post comment to Pull Request + uses: thollander/actions-comment-pull-request@v2 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + message: | + Deployment of PR #${{ github.event.number }} successful :rocket: + + You can access the deployment at [pr-${{ github.event.number }}.website.dev.green-ecolution.de](https://pr-${{ github.event.number }}.website.dev.green-ecolution.de) to review the changes :eyes: + + :warning: **Please note that this deployment is temporary and will be deleted after the PR is closed.** From fb154648ee0201d819b4cafe786f9505a2e27f1a Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Mon, 10 Jun 2024 16:37:26 +0000 Subject: [PATCH 05/11] Update dev image to commit f02575d --- k8s/values/develop.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/k8s/values/develop.yaml b/k8s/values/develop.yaml index 2ce9640..b63f0f7 100644 --- a/k8s/values/develop.yaml +++ b/k8s/values/develop.yaml @@ -5,7 +5,7 @@ deployment: image: repository: ghcr.io/smartcityflensburg/project-website-dev pullPolicy: Always - tag: "513af1c" + tag: "f02575d" ingress: enabled: true className: "traefik" From 306822a164f24ac9d622941d025a724cd91bf462 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Mon, 10 Jun 2024 18:53:50 +0200 Subject: [PATCH 06/11] fix: make process responsive for larger screens --- src/tsx/components/cards/ProcessCard.tsx | 51 +++++++++++++++--- src/tsx/components/sections/Process.tsx | 67 +++++++++--------------- 2 files changed, 69 insertions(+), 49 deletions(-) diff --git a/src/tsx/components/cards/ProcessCard.tsx b/src/tsx/components/cards/ProcessCard.tsx index e0a8a65..d1ee292 100644 --- a/src/tsx/components/cards/ProcessCard.tsx +++ b/src/tsx/components/cards/ProcessCard.tsx @@ -4,18 +4,53 @@ interface ProcessCardProps { label: string; shortName: string; index: number; + activeStep: number; + maxIndex: number; description: string; - isCurrent?: boolean + isCurrent?: boolean; + isCompleted?: boolean; } -const ProcessCard: React.FC = ({ label, shortName, index, description, isCurrent = false }) => { +const ProcessCard: React.FC = ({ label, shortName, index, activeStep, maxIndex, description, isCurrent = false, isCompleted = false }) => { return ( -
- - Schritt {index} von 5: {shortName} - -

{label}

-

{description}

+
+
+ + Schritt {index + 1} von {maxIndex}: {shortName} + +

{label}

+

{description}

+
+ +
activeStep ? 'before:bg-grey-100 after:bg-grey-100' : ''} + ${index % 2 === 0 ? 'xl:before:-right-10 xl:before:left-auto xl:before:top-0 xl:after:-right-10' : 'xl:before:-left-[2.6rem] xl:before:right-auto xl:before:top-0 xl:after:-left-[2.6rem]'}`} + > +
+ + {index < activeStep ? ( + + + + ) : ( + index + 1 + )} + +
+
); }; diff --git a/src/tsx/components/sections/Process.tsx b/src/tsx/components/sections/Process.tsx index f051272..0dd6e3d 100644 --- a/src/tsx/components/sections/Process.tsx +++ b/src/tsx/components/sections/Process.tsx @@ -1,17 +1,14 @@ -import { useState, useEffect, useRef } from 'react'; import { Splide, SplideSlide } from '@splidejs/react-splide'; import { i18nTranslated } from '../../helper/sliderTranslations'; import '@splidejs/react-splide/css'; import ProcessCard from "../cards/ProcessCard"; function Process() { - const [currentSlide, setCurrentSlide] = useState(0); const activeStep = 1; - const splideRef = useRef(null); const steps = [ { - label: "Konzepterstellung & Ideenfindung", + label: "Konzepterstellung", shortName: "Konzept", description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna." }, @@ -25,26 +22,33 @@ function Process() { shortName: "Vorstellung 01", description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna." }, + { + label: "Produktvorstellung 02", + shortName: "Vorstellung 02", + description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna." + }, + { + label: "Finale Vorstellung", + shortName: "Finalisierung", + description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna." + }, ]; const breakpoints = { + 640: { + padding: '20%' + }, + 1024: { + padding: '24%' + }, 1280: { destroy: true, }, }; - useEffect(() => { - if (!splideRef.current) return; - - const splideInstance = splideRef.current.splide; - splideInstance.on('move', (newIndex: number) => { - setCurrentSlide(newIndex); - }); - }, []); - return ( -
-
+
+

Der aktuelle Projektfortschritt

@@ -57,43 +61,24 @@ function Process() {
{steps.map((step, index) => ( - + ))} - -
    - {steps.map((step, index) => ( -
  • activeStep ? 'before:bg-grey-100 after:bg-grey-100' : ''}`} - > -
    - - {index < activeStep ? ( - - - - ) : ( - index + 1 - )} - -
    -
    • - ))} -
); } From 09f7ec0cd870b6fb72894751cc956eb078a3f937 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Mon, 10 Jun 2024 18:58:14 +0200 Subject: [PATCH 07/11] fix: update card width --- src/tsx/components/cards/ProcessCard.tsx | 3 ++- src/tsx/components/sections/Process.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/tsx/components/cards/ProcessCard.tsx b/src/tsx/components/cards/ProcessCard.tsx index d1ee292..ad7e331 100644 --- a/src/tsx/components/cards/ProcessCard.tsx +++ b/src/tsx/components/cards/ProcessCard.tsx @@ -14,10 +14,11 @@ interface ProcessCardProps { const ProcessCard: React.FC = ({ label, shortName, index, activeStep, maxIndex, description, isCurrent = false, isCompleted = false }) => { return (
-
diff --git a/src/tsx/components/sections/Process.tsx b/src/tsx/components/sections/Process.tsx index 0dd6e3d..2621e5f 100644 --- a/src/tsx/components/sections/Process.tsx +++ b/src/tsx/components/sections/Process.tsx @@ -48,7 +48,7 @@ function Process() { return (
-
+

Der aktuelle Projektfortschritt

From e62e57b561830f7bc657086fd4dce5d30339873e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Mon, 10 Jun 2024 19:00:14 +0200 Subject: [PATCH 08/11] chore: add padding to splide types --- src/types/splidejs__react-splide.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/types/splidejs__react-splide.d.ts b/src/types/splidejs__react-splide.d.ts index 9c9c339..15885e4 100644 --- a/src/types/splidejs__react-splide.d.ts +++ b/src/types/splidejs__react-splide.d.ts @@ -14,6 +14,7 @@ declare module '@splidejs/react-splide' { interval?: number; pauseOnHover?: boolean; pauseOnFocus?: boolean; + padding?: string; resetProgress?: boolean; keyboard?: boolean | 'global'; drag?: boolean; From f51e202f679dbcc6831ba6c944ed84dd5f44c32f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Mon, 10 Jun 2024 19:32:41 +0200 Subject: [PATCH 09/11] chore: delete not used file from merge --- k8s/values/on-pr.yaml | 25 ------------------------- 1 file changed, 25 deletions(-) delete mode 100644 k8s/values/on-pr.yaml diff --git a/k8s/values/on-pr.yaml b/k8s/values/on-pr.yaml deleted file mode 100644 index 911396f..0000000 --- a/k8s/values/on-pr.yaml +++ /dev/null @@ -1,25 +0,0 @@ -deployment: - namespace: project-website-pr - name: project-website-pr - replicaCount: 1 - image: - repository: ghcr.io/smartcityflensburg/project-website-dev - pullPolicy: Always - tag: "latest" -ingress: - enabled: true - className: "traefik" - annotations: - cert-manager.io/cluster-issuer: cert-manager - kubernetes.io/ingress.class: traefik - hosts: - - name: pr.website.dev.green-ecolution.de - paths: - - path: / - pathType: Prefix - backend: - serviceName: project-website - servicePort: 80 - tls: - enabled: true - secretName: dev-green-ecolution-de-tls From 3c4c08fab686efe53d5b534c8e3621308d4daee8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Mon, 10 Jun 2024 19:34:49 +0200 Subject: [PATCH 10/11] fix: update correct aria-label --- src/tsx/components/sections/Process.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tsx/components/sections/Process.tsx b/src/tsx/components/sections/Process.tsx index 2621e5f..db33468 100644 --- a/src/tsx/components/sections/Process.tsx +++ b/src/tsx/components/sections/Process.tsx @@ -62,7 +62,7 @@ function Process() { {steps.map((step, index) => ( From 7d85f7063adcd78680f3989ba95e8b6b091176e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Mon, 10 Jun 2024 19:45:56 +0200 Subject: [PATCH 11/11] fix: update max-screen width --- src/css/components/splide.css | 2 +- src/tsx/components/cards/ProcessCard.tsx | 12 ++++++------ src/tsx/components/sections/Introduction.tsx | 6 +++--- src/tsx/components/sections/Process.tsx | 7 ++----- src/tsx/layout/Footer.tsx | 4 ++-- src/tsx/layout/Header.tsx | 2 +- 6 files changed, 15 insertions(+), 18 deletions(-) diff --git a/src/css/components/splide.css b/src/css/components/splide.css index c400832..6256811 100644 --- a/src/css/components/splide.css +++ b/src/css/components/splide.css @@ -4,7 +4,7 @@ } .splide.splide--grid > .splide__track > .splide__list { - @apply xl:grid xl:grid-cols-2 xl:gap-x-6 xl:gap-y-8 !important; + @apply lg:grid lg:grid-cols-2 lg:gap-x-6 lg:gap-y-8 !important; } .splide__pagination { diff --git a/src/tsx/components/cards/ProcessCard.tsx b/src/tsx/components/cards/ProcessCard.tsx index ad7e331..9eca3b3 100644 --- a/src/tsx/components/cards/ProcessCard.tsx +++ b/src/tsx/components/cards/ProcessCard.tsx @@ -14,12 +14,12 @@ interface ProcessCardProps { const ProcessCard: React.FC = ({ label, shortName, index, activeStep, maxIndex, description, isCurrent = false, isCompleted = false }) => { return (
-
Schritt {index + 1} von {maxIndex}: {shortName} @@ -28,18 +28,18 @@ const ProcessCard: React.FC = ({ label, shortName, index, acti

{description}

-
activeStep ? 'before:bg-grey-100 after:bg-grey-100' : ''} - ${index % 2 === 0 ? 'xl:before:-right-10 xl:before:left-auto xl:before:top-0 xl:after:-right-10' : 'xl:before:-left-[2.6rem] xl:before:right-auto xl:before:top-0 xl:after:-left-[2.6rem]'}`} + ${index % 2 === 0 ? 'lg:before:-right-10 lg:before:left-auto lg:before:top-0 lg:after:-right-10' : 'lg:before:-left-[2.6rem] lg:before:right-auto lg:before:top-0 lg:after:-left-[2.6rem]'}`} > -
{index < activeStep ? ( diff --git a/src/tsx/components/sections/Introduction.tsx b/src/tsx/components/sections/Introduction.tsx index fc4806c..b3d710c 100644 --- a/src/tsx/components/sections/Introduction.tsx +++ b/src/tsx/components/sections/Introduction.tsx @@ -31,13 +31,13 @@ function Introduction() { 640: { perPage: 2, }, - 1280: { + 1024: { destroy: true, }, } return ( -
+

Was beinhaltet smartes Grünflächenmanagement alles? @@ -56,7 +56,7 @@ function Introduction() { className="splide--grid md:px-2" > {facts.map((fact, index) => ( - + {steps.map((step, index) => ( - + -
+