Style using Stack & Collapse

GeoWerkstatt · Nov 20, 2023 · 36c5192 · 36c5192
1 parent 79e5397
commit 36c5192
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 29 deletions.
diff --git a/src/GeoCop.Frontend/src/Protokoll.jsx b/src/GeoCop.Frontend/src/Protokoll.jsx
@@ -2,7 +2,7 @@ import "./app.css";
 import { ValidatorResult } from "./ValidatorResult";
 import { useState, useRef, useEffect } from "react";
 import DayJS from "dayjs";
-import { Card, Container } from "react-bootstrap";
+import { Card, Collapse, Container } from "react-bootstrap";
 
 export const Protokoll = ({ log, statusData, fileName, validationRunning }) => {
   const [indicateWaiting, setIndicateWaiting] = useState(false);
@@ -27,32 +27,34 @@ export const Protokoll = ({ log, statusData, fileName, validationRunning }) => {
   });
 
   return (
-    <Container>
-      {log.length > 0 && (
-        <Card className="protokoll-card">
-          <Card.Body>
-            <div className="protokoll">
-              {log.map((logEntry, index) => (
-                <div key={index}>
-                  {logEntry}
-                  {indicateWaiting && index === log.length - 1 && "."}
-                </div>
-              ))}
-              <div ref={logEndRef} />
-            </div>
-            {statusData &&
-              Object.entries(statusData.validatorResults).map(([validatorName, result]) => (
-                <ValidatorResult
-                  key={validatorName}
-                  jobId={statusData.jobId}
-                  protokollFileName={protokollFileName}
-                  validatorName={validatorName}
-                  result={result}
-                />
-              ))}
-          </Card.Body>
-        </Card>
-      )}
-    </Container>
+    <Collapse in={log.length > 0}>
+      <Container>
+        {log.length > 0 && (
+          <Card className="protokoll-card">
+            <Card.Body>
+              <div className="protokoll">
+                {log.map((logEntry, index) => (
+                  <div key={index}>
+                    {logEntry}
+                    {indicateWaiting && index === log.length - 1 && "."}
+                  </div>
+                ))}
+                <div ref={logEndRef} />
+              </div>
+              {statusData &&
+                Object.entries(statusData.validatorResults).map(([validatorName, result]) => (
+                  <ValidatorResult
+                    key={validatorName}
+                    jobId={statusData.jobId}
+                    protokollFileName={protokollFileName}
+                    validatorName={validatorName}
+                    result={result}
+                  />
+                ))}
+            </Card.Body>
+          </Card>
+        )}
+      </Container>
+    </Collapse>
   );
 };
diff --git a/src/GeoCop.Frontend/src/app.css b/src/GeoCop.Frontend/src/app.css
@@ -72,7 +72,6 @@ header {
 
 .protokoll-card {
   color: black;
-  margin-top: 30px;
   max-width: 95vw;
   min-height: 150px;
 }