Center "Could not load metadata" message on the screen

Added a new CSS class to center an error message vertically and horizontally using Flexbox in the main component. Updated the HTML template to display the "Could not load metadata" message using this new styling. This enhances the user experience by making error messages more noticeable.
nfdi4plants · Dec 2, 2024 · 58ed523 · 58ed523
1 parent 5d4dd25
commit 58ed523
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/archigator/src/app/main/main.component.css b/archigator/src/app/main/main.component.css
@@ -57,6 +57,15 @@
   }
 }
 
+.center-message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /* or a specific height */
+  font-size: 1.5em;
+  color: gray;
+}
+
 
 /*@media all and (max-width: 900px) {*/
 /*    .checkout-side {*/

diff --git a/archigator/src/app/main/main.component.html b/archigator/src/app/main/main.component.html
@@ -33,3 +33,9 @@
     </div>
 
 </div>
+
+<ng-template #noMetadata>
+    <div class="center-message">
+        Could not load metadata
+    </div>
+</ng-template>