Merge pull request #86 from MfN-Berlin/testing-drupal-integration

v0.1.5
MfN-Berlin · Dec 28, 2024 · f15d133 · f15d133
2 parents 9fc2c6b + d2f1c20
commit f15d133
Show file tree

Hide file tree

Showing 27 changed files with 58,254 additions and 1,475 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -7,7 +7,7 @@
 import './src/styles/global.css'
 
 // Version logging
-const VERSION = 'v0.1.4'
+const VERSION = 'v0.1.5'
 
 export const onClientEntry = () => {
     // Temporär Prefetching deaktivieren

diff --git a/src/components/elements/Button.js b/src/components/elements/Button.js
@@ -1,7 +1,9 @@
 import React from 'react';
 
-const Button = ({ text, children, variant = 'primary', url, onClick, className = '', ...props }) => {
-  const baseClasses = 'inline-flex justify-center items-center gap-2.5 transition-colors duration-200 ease-in-out focus:outline-none';
+const Button = ({ text, children, variant = 'primary', url, onClick, className = '', inheritAlignment = true, ...props }) => {
+  const baseClasses = `inline-flex items-center whitespace-normal ${
+    inheritAlignment ? "" : "justify-center"
+  } transition-colors duration-200 ease-in-out focus:outline-none`;
 
   const styleClasses = {
     primary: 'h-[34px] px-4 pt-1.5 pb-2 bg-Green-500 text-White-White hover:bg-Green-600 focus:bg-Green-500 focus:border-2 focus:border-Black-900 typography-button',

diff --git a/src/components/elements/Card.js b/src/components/elements/Card.js
@@ -2,14 +2,17 @@ import React from 'react';
 import { Link } from 'gatsby';
 import ContentImage from './ContentImage';
 import CardText from './CardText';
+import Button from './Button';
 
 const Card = ({ 
   variant = 'classic', 
   alignment = 'left',
   imageProps, 
   textProps, 
   url,
-  className = ''
+  className = '',
+  imageRatio = '56.25',
+  buttons
 }) => {
   const getVariantStyles = () => {
     switch(variant) {
@@ -26,7 +29,7 @@ const Card = ({
   const cardContent = (
     <>
       {imageProps && (
-        <div className="relative w-full pt-[56.25%]">
+        <div className="relative w-full" style={{ paddingTop: `${imageRatio}%` }}>
           <div className="absolute top-0 left-0 w-full h-full">
             <ContentImage {...imageProps} className="h-full" />
           </div>
@@ -54,6 +57,16 @@ const Card = ({
           {cardContent}
         </div>
       )}
+      <div className={`flex flex-col ${alignment === 'left' ? 'items-start' : 'items-center'}`}>
+        {buttons?.map((button, index) => (
+          <Button
+            key={index}
+            {...button}
+            className={`w-full ${alignment === 'left' ? 'text-left' : 'text-center'}`}
+            inheritAlignment={true}
+          />
+        ))}
+      </div>
     </Link>
   );
 };

diff --git a/src/components/layouts/Accordion.js b/src/components/layouts/Accordion.js
@@ -39,10 +39,10 @@ export const AccordionItem = ({ children, title, index }) => {
   const headingId = `accordion-heading-${index}`;
 
   return (
-    <div className={`mb-4 ${bgColor === 'green' ? 'bg-Green-100' : 'bg-white'}`}>
+    <div className="mb-4">
       <h3 id={headingId}>
         <button
-          className="w-full p-4 flex justify-between items-center text-left gap-8"
+          className={`w-full p-4 flex justify-between items-center text-left gap-8 ${bgColor === 'green' ? 'bg-Green-100' : 'bg-white'} hover:bg-Green-200 transition-colors duration-300`}
           onClick={toggleItem}
           aria-expanded={isOpen}
           aria-controls={itemId}
@@ -62,10 +62,11 @@ export const AccordionItem = ({ children, title, index }) => {
             ? 'grid-rows-[1fr] opacity-100' 
             : 'grid-rows-[0fr] opacity-0'
           }
+          ${bgColor === 'green' ? 'bg-Green-100' : 'bg-white'}
         `}
       >
         <div className="overflow-hidden">
-          <div className="p-0">
+          <div className="p-4">
             {children}
           </div>
         </div>

diff --git a/src/components/layouts/SlideContent.js b/src/components/layouts/SlideContent.js
@@ -1,46 +1,46 @@
 import React from 'react';
+import { Link } from 'gatsby';
 import ContentImage from '../elements/ContentImage';
 import CardText from '../elements/CardText';
-import { Link } from 'gatsby';
-
-const SlideContent = ({ imageName, imageMap, title, kicker, text, link, altText, paginationDots }) => {
-  if (!imageMap || !imageName) return null;
 
-  const content = (
-    <div className="flex flex-col h-full">
-      <div className="relative w-full">
-        <ContentImage
-          imageName={imageName}
-          alt={altText || title}
-          imageMap={imageMap}
-          className="relative top-0 left-0 w-full h-full object-cover"
-        />
-        {paginationDots && (
-          <div className="absolute left-0 right-0 bottom-4 flex justify-center">
-            <div className="flex gap-2 rounded-[20px] p-1.5 bg-black/50">
-              {paginationDots}
-            </div>
-          </div>
-        )}
+const SlideContent = ({ imageName, altText, kicker, title, text, link, imageMap }) => {
+  const slideContent = (
+    <div className="w-full h-full flex flex-col">
+      <div className="relative w-full" style={{ paddingTop: '56.25%' }}>
+        <div className="absolute inset-0">
+          <ContentImage 
+            imageName={imageName}
+            alt={altText}
+            imageMap={imageMap}
+            className="w-full h-full object-cover"
+          />
+        </div>
       </div>
-      <div className="bg-white p-8 text-center">
+      <div className="bg-Green-100 p-8 group-hover:bg-Green-200 transition-colors duration-300">
         <CardText
           kicker={kicker}
           headline={title}
           body={text}
           headlineStyle="h3"
           spacing="wide"
-          alignment="center"
+          alignment="left"
         />
       </div>
     </div>
   );
 
-  return link ? (
-    <Link to={link} className="block h-full">
-      {content}
-    </Link>
-  ) : content;
+  if (link) {
+    return (
+      <Link 
+        to={link}
+        className="group w-full p-3 rounded-[10px] inline-flex flex-col items-start gap-2.5 hover:bg-Green-200 focus:border-2 focus:border-[#729800]"
+      >
+        {slideContent}
+      </Link>
+    );
+  }
+
+  return slideContent;
 };
 
 export default SlideContent;
diff --git a/src/components/layouts/Slideshow.js b/src/components/layouts/Slideshow.js
@@ -74,7 +74,7 @@ const Slideshow = ({ children, imageMap }) => {
 
         {/* Navigation Buttons */}
         <button 
-          className="absolute left-4 top-[48%] -translate-y-1/2 w-8 h-8 rounded-full bg-white flex items-center justify-center rotate-180 hover:bg-gray-50"
+          className="absolute left-8 top-[48%] -translate-y-1/2 w-8 h-8 rounded-full bg-white flex items-center justify-center rotate-180 hover:bg-gray-50"
           onClick={scrollPrev}
           aria-label="Previous slide"
         >
@@ -84,7 +84,7 @@ const Slideshow = ({ children, imageMap }) => {
           </svg>
         </button>
         <button 
-          className="absolute right-4 top-[48%] -translate-y-1/2 w-8 h-8 rounded-full bg-white flex items-center justify-center hover:bg-gray-50"
+          className="absolute right-8 top-[48%] -translate-y-1/2 w-8 h-8 rounded-full bg-white flex items-center justify-center hover:bg-gray-50"
           onClick={scrollNext}
           aria-label="Next slide"
         >

diff --git a/src/data/navigationDataEn.js b/src/data/navigationDataEn.js
@@ -177,7 +177,7 @@ export const mainNavDataEn = {
         column: 3,
         items: [
           {
-            to: "/en/science/research/team-projects",
+            to: "/en/research/team-projects",
             label: "Team & Projects",
             order: 1
           },