#32 #52 added format kompakt

RRZE-Webteam · Sep 10, 2024 · 13fff99 · 13fff99
1 parent f0906f9
commit 13fff99
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/assets/css/rrze-faudir.css b/assets/css/rrze-faudir.css
diff --git a/includes/shortcodes/fau_dir_shortcode.php b/includes/shortcodes/fau_dir_shortcode.php
@@ -47,9 +47,11 @@ function fetch_fau_data($atts) {
         $output .= '</tr></thead><tbody>';
     } elseif ($atts['format'] === 'list')  {
         $output .= '<ul class="fau-contacts-list-custom">';
+    }elseif ($atts['format'] === 'card') {
+        $output .= '<div class="shortcode-contacts-wrapper">';
     }
     else {
-        $output .= '<div class="shortcode-contacts-wrapper">';
+        $output .= '<div>';
     }
 
     // Fetch data based on identifier, category, or all if neither is provided
@@ -146,11 +148,24 @@ function format_person_data($person, $show_fields, $hide_fields, $format) {
         if (in_array('organization', $show_fields) && !in_array('organization', $hide_fields)) $output .= 'Organization: ' . $organization_name . '<br />';
         if (in_array('function', $show_fields) && !in_array('function', $hide_fields)) $output .= 'Function: ' . $function;
         $output .= '</li>';
-    }else{
+    }elseif($format ==='card'){
         $output .= '<div class="shortcode-contact-card">';
-        $output .= '<img src="/wp-content/uploads/2024/09/image.jpg">';
+        $output .= '<img src="/wp-content/uploads/2024/09/V20210305LJ-0043-cropped-e1725968539245.webp">';
+        if (in_array('name', $show_fields) && !in_array('name', $hide_fields)) $output .=  '<h2>' . $fullName . ' </h2>';
+        if (in_array('function', $show_fields) && !in_array('function', $hide_fields)) $output .= '<h3>' . $function. '</h3>';
+        $output .= '</div>';
+    }
+    else{
+        $output .= '<div  class="shortcode-contact-kompakt">';
+        $output .= '<img src="/wp-content/uploads/2024/09/V20210305LJ-0043-cropped.webp">';
+        $output .= '<div style="flex-grow: 1;">'; 
         if (in_array('name', $show_fields) && !in_array('name', $hide_fields)) $output .=  '<h2>' . $fullName . ' </h2>';
         if (in_array('function', $show_fields) && !in_array('function', $hide_fields)) $output .= '<h3>' . $function. '</h3>';
+        if (in_array('organization', $show_fields) && !in_array('organization', $hide_fields)) $output .= '<p>Organization: ' . $organization_name . '</p>';
+        if (in_array('email', $show_fields) && !in_array('email', $hide_fields)) $output .= '<p>Email: ' . $email . '</p>';
+        if (in_array('phone', $show_fields) && !in_array('phone', $hide_fields)) $output .= '<p>Phone: ' . $phone . '</p>';
+        $output .= '<button>More</button>';
+        $output .= '</div>';
         $output .= '</div>';
     }
     return $output;

diff --git a/src/scss/rrze-faudir.scss b/src/scss/rrze-faudir.scss
@@ -78,6 +78,28 @@ body {
     font-size: 16px; 
     color: #666;
  }
+ .shortcode-contact-kompakt {
+    display: flex; 
+    align-items: center; 
+    gap: 20px; padding: 20px; 
+    background-color: #fff; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
+    margin-bottom: 20px; border-radius: 8px;
+}
+ .shortcode-contact-kompakt img{
+   width: 20%; 
+   object-fit: cover;
+ }
+ .shortcode-contact-kompakt h2{
+    display: block; 
+    font-size: 18px; 
+    margin-bottom: 0px;
+}
+.shortcode-contact-kompakt  h3{
+    display: block;
+    font-size: 16px; 
+    color: #000;
+ }
 
 // Responsive styles
 @media (max-width: 768px) {