Improvements

madgik · Dec 3, 2024 · cb5cd0e · cb5cd0e
1 parent 8b584af
commit cb5cd0e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/frontend/src/app/pages/federations-page/federation-card/federation-card.component.html b/frontend/src/app/pages/federations-page/federation-card/federation-card.component.html
@@ -2,7 +2,7 @@
   <img [src]="'assets/' + federation.code + '.png'" alt="{{ federation.title }}" class="federation-image">
   <div class="federation-content">
     <h3>{{ federation.title }}</h3>
-    @if (federation.institutions !== '0') {
+    @if (federation.institutions != '0') {
       <p>Data Records: {{ federation.records }} | Institutions: {{ federation.institutions }}</p>
     } @else {
       <p>Data Records: {{ federation.records }}</p>

diff --git a/frontend/src/app/pages/landing-page/landing-page.component.css b/frontend/src/app/pages/landing-page/landing-page.component.css
@@ -30,19 +30,18 @@ h2, h3 {
 .image-gallery {
   width: 65%; /* Wider gallery to emphasize visual content */
 }
-
 .image-container {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Auto-fit for better responsiveness */
-  gap: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Wider columns */
+  gap: 20px; /* Space between items */
 }
 
 .image-item {
-  width: 100%;
-  height: 400px; /* Set specific height */
+  width: 100%; /* Full width of the grid cell */
+  height: 220px; /* Reduced height to emphasize width */
   position: relative;
   cursor: pointer;
-  border-radius: 15px;
+  border-radius: 12px; /* Slightly rounded corners */
   overflow: hidden;
   transition: transform 0.3s ease;
   background-color: #f0f0f0; /* Fallback background */
@@ -51,10 +50,23 @@ h2, h3 {
 .image-item img {
   width: 100%;
   height: 100%;
-  object-fit: cover; /* Ensures image covers the set size */
-  border-radius: 15px;
+  object-fit: cover; /* Ensures the image fully fills the container */
+  border-radius: 12px;
 }
 
+@media (max-width: 768px) {
+  .image-item {
+    height: 250px; /* Slightly smaller height for mobile devices */
+  }
+}
+
+@media (max-width: 480px) {
+  .image-item {
+    height: 200px; /* Further reduced height for very small screens */
+  }
+}
+
+
 .image-item:hover {
   transform: scale(1.1); /* Subtle zoom on hover */
 }

diff --git a/frontend/src/app/pages/landing-page/landing-page.component.html b/frontend/src/app/pages/landing-page/landing-page.component.html
@@ -16,7 +16,12 @@
           <div class="image-caption">
             <h3>{{ federation.title }}</h3>
             <p>
-              Institutions: {{ federation.institutions }} | Data Records:
+              @if (federation.institutions != '0'){
+                <span>
+              Institutions: {{ federation.institutions }} |
+              </span>
+              }
+              Data Records:
               {{ federation.records }}
             </p>
           </div>