Merge pull request #615 from GermanZero-de:612---diagramm-stadt

[#612] diagramm positionierung
GermanZero-de · Sep 26, 2024 · 8aab25c · 8aab25c
2 parents 9f776af + 0865376
commit 8aab25c
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 17 deletions.
diff --git a/frontend/app/(dashboard)/[city]/page.module.scss b/frontend/app/(dashboard)/[city]/page.module.scss
@@ -2,24 +2,50 @@
   flex: 1;
 }
 
-.mdContent{
+.mdContent {
   img {
     max-width: 100%;
   }
 }
 
-.checklistContainer{
+.checklistContainer {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
-  a{
+
+  a {
     flex: 1;
     max-width: 500px;
   }
 }
 
-.charts{
-  img{max-width: 100%;}
-  figure { display: table; margin-left:auto;margin-right: auto;max-width: 90%;margin-top:50px}
-  figcaption { display: table-caption; caption-side: bottom ; text-align: center;font-size: smaller;}
+.charts {
+  img {
+    float: left;
+    margin-right: 15px;
+    max-width: 60%;
+  }
+
+  figure {
+    margin-top: 3z0px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  figcaption {
+    flex: 1;
+    font-size: smaller;
+    /* Schriftgröße anpassen */
+    margin-top: 0;
+  }
+  @media screen and (max-width: 600px) {
+    img {
+      pointer-events: none;
+      max-width: 100%;
+    }
+    figcaption {
+      text-align:center;
+    }
+  }
 }
diff --git a/frontend/app/(dashboard)/[city]/page.tsx b/frontend/app/(dashboard)/[city]/page.tsx
@@ -11,6 +11,7 @@ import ImplementationIndicator from "@/app/components/ImplementationIndicator";
 import ChecklistIndicator from "@/app/components/ChecklistIndicator";
 import type { CheckItem, Chart } from "@/types";
 import rehypeRaw from "rehype-raw";
+import ImageModal from "@/app/components/ImageModal";
 
 interface CityDescriptionProps {
   teaser: string;
@@ -96,16 +97,16 @@ export default async function CityDashboard({ params }: { params: { city: string
     </NavigationTile>
   </Link> : <></>
 
-  const charts = Array.isArray(city.charts) ? city.charts.map((chart:Chart, key:number) => <figure key={key}>
-      <img className="d-block border"
-          title={chart.alt_description}
-          alt={chart.alt_description}
-          src={ chart.image }/>
-      <figcaption>
-      <Markdown rehypePlugins={[rehypeRaw]} className="mdContent">{chart.caption}</Markdown>
-        <span className="text-muted">Quelle: { chart.source } - Lizenz: { chart.license }</span>
-      </figcaption>
-    </figure>) :<></>
+  const charts = Array.isArray(city.charts) ? city.charts.map((chart:Chart, key:number) => <ImageModal title={chart.alt_description}
+  key={key}
+  alt={chart.alt_description}
+  src={ chart.image }
+  caption={ chart.caption }
+  source={ chart.source }
+  license={ chart.license }
+  >
+  </ImageModal>
+  ) :<></>
 
   const localgroup = city?.local_group?.description ? <LocalGroup
       localGroup={city.local_group}

diff --git a/frontend/app/components/ImageModal.tsx b/frontend/app/components/ImageModal.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Modal, CloseButton } from 'react-bootstrap';
+import Markdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface ImageModalProps {
+  src: string;
+  alt?: string;
+  title?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  modalTitle?: string;
+  caption?: string;
+  license?: string;
+  source?: string;
+}
+
+const ImageModal: React.FC<ImageModalProps> = ({
+  src,
+  alt = '',
+  title = '',
+  className = '',
+  license = '',
+  caption = '',
+  source = '',
+  style = {},
+}) => {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      {/* Clickable image */}
+      <figure>
+        <img className={`d-block border ${className}`}
+            title={title}
+            alt={title}
+            src={ src }
+            onClick={handleShow}
+
+            />
+        <figcaption>
+        <Markdown rehypePlugins={[rehypeRaw]} className="mdContent">{caption}</Markdown>
+            <span className="text-muted">Quelle: { source } - Lizenz: { license }</span>
+        </figcaption>
+     </figure>
+
+      {/* Modal for large image */}
+      <Modal show={show} onHide={handleClose} centered fullscreen>
+        <Modal.Body className='m-auto'>
+        <CloseButton onClick={handleClose} style={{position:"absolute",right:0, top:10}}/>
+        <figure className='h-100 m-auto text-center'>
+            <img className={`m-auto d-block border ${className}`}
+                title={title}
+                alt={title}
+                src={ src }
+                onClick={handleClose}
+                style={{maxHeight: "90%"}}
+                />
+            <figcaption>
+            <Markdown rehypePlugins={[rehypeRaw]} className="mdContent">{caption}</Markdown>
+                <span className="text-muted">Quelle: { source } - Lizenz: { license }</span>
+            </figcaption>
+        </figure>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default ImageModal;