From 6031fa73894869c483ae73f337a9b442c7974f6c Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 27 Sep 2024 00:08:23 +0200
Subject: [PATCH] hp

---
 src/App/Timelines.css                 | 62 ++++++++++++++++++++++-----
 src/components/HorizontalTimeline.tsx | 36 +++++++++-------
 2 files changed, 71 insertions(+), 27 deletions(-)

diff --git a/src/App/Timelines.css b/src/App/Timelines.css
index 23d5eddb..ce615cca 100644
--- a/src/App/Timelines.css
+++ b/src/App/Timelines.css
@@ -53,7 +53,7 @@ left: 8px !important;
 border-color:  transparent transparent transparent #f6faf6 !important;
 }
 .timeline ol li:nth-child(2n) .moretop{
-top: 30px !important;   
+top: 50px !important;   
 }
 .timeline ol li:nth-child(even) .timeline-item {
     box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
@@ -133,7 +133,7 @@ border-color: transparent transparent transparent white;
   
 /* Layout for meta timeline cards */
 .time-meta{
-    background-color: #f6faf6 !important;
+    
     border-radius: 10px;
 }
 
@@ -213,14 +213,14 @@ button.tabbutton:nth-child(1){
   
 /* Cards */
 .timeline-item {
-    min-width: 100px;
-   /*  display: flex; */
-    justify-content: flex-end;
-    padding-right: 30px;
-    position: relative;
-    margin: 10px 0;
-    width: 50%;
-  }
+  display: flex;
+  flex-direction: column; /* Vertikale Anordnung der Inhalte */
+  height: 250px; /* Höhe des Timeline-Items */
+  position: relative;
+  padding: 15px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  background: white;
+}
   .timeline-item-content {
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     border-radius: 5px;
@@ -392,4 +392,44 @@ z-index: 100;
   width: 100%;
   max-height: 400px;
 }  
-  */
\ No newline at end of file
+  */
+
+
+  .hpbuttonrow {
+    display: flex; /* Flex-Layout für die untere Reihe */
+    margin-top: auto; /* Schiebt diese Reihe nach unten */
+    align-items: center; /* Vertikale Zentrierung */
+}
+
+.fillup {
+  flex: 1; /* Nimmt den verfügbaren Platz ein */
+    height: auto; /* Passt die Höhe automatisch an den Inhalt an */
+    overflow: hidden; 
+}
+
+  .timeline-item .row:first-child {
+    flex: 1; /* Füllt den verbleibenden Raum aus */
+    display: flex; /* Flex-Layout aktivieren */
+    align-items: center; /* Vertikale Zentrierung */
+}
+
+/* Untere Reihe */
+.timeline-item .row:last-child {
+    margin-top: auto; /* Schiebt die letzte Reihe nach unten */
+}
+
+.timeline-item {
+  background: rgba(255, 0, 0, 0.1); /* Leicht rötlicher Hintergrund für Debugging */
+}
+
+.fillup {
+  border: 1px solid blue; /* Blauer Rahmen um die Reihen */
+}
+
+.hpbuttonrow {
+  background: rgba(0, 255, 0, 0.1); /* Leicht grüner Hintergrund für Debugging */
+}
+
+.fillup-wrapper{
+  display: flex;
+}
\ No newline at end of file
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index 7cd76f97..ec334623 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -10,15 +10,17 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
                 {tag}
             </div>
             
-            <div className="row align-items-center">
-              <div className="col" >
-              <img className="img-round" src={pic}/>
-              </div>
-              <div className="col" >
-                  {title}
+            <div className="fillup-wrapper">
+            <div className="row align-items-center fillup">
+                <div className="col" >
+                <img className="img-round" src={pic} />
+                </div>
+                <div className="col" >
+                    {title}
+                </div>
               </div>
-            </div>
-            <div className="row align-items-center">
+           </div>
+            <div className="row align-items-center hpbuttonrow">
               <div className="col">
                 <p style={{marginTop: "10px"}}>{author}</p>
               </div>
@@ -45,15 +47,17 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
                 {tag}
             </div>
             
-            <div className="row align-items-center">
-              <div className="col" >
-               <img className="img-cube" src={pic} />
-              </div>
-              <div className="col" >
-                  {title}
+           <div className="fillup-wrapper">
+            <div className="row align-items-center fillup">
+                <div className="col" >
+                <img className="img-cube" src={pic} />
+                </div>
+                <div className="col" >
+                    {title}
+                </div>
               </div>
-            </div>
-            <div className="row align-items-center">
+           </div>
+            <div className="row align-items-center hpbuttonrow">
               <div className="col">
                 <p style={{marginTop: "10px"}}>{author}</p>
               </div>
-- 
GitLab