fixes cards

Author: SachaWildCode

src/app/components/card-asso/card-asso.component.html

@@ -1,19 +1,23 @@
 <div class="card">
   <div class="card-header">
     <h4>{{ association.name }}</h4>
+    <p class="rna">
+      <small>RNA: {{ association.idRna }}</small>
+    </p>
   </div>
   <div class="card-body">
-    <!-- <p>
-      <small>RNA: {{ association.idRna }}</small>
-    </p> -->
     <p class="description">{{ association.description }}</p>
-    <!-- <div class="address">
+    <div class="address">
       <p>
-        {{ association.addressOrganization.cplt1 }} {{ association.addressOrganization.cp }}
-        {{ association.addressOrganization.commune }}
+        <small
+          >{{ association.addressOrganization.cplt1 }} {{ association.addressOrganization.cp }}
+          {{ association.addressOrganization.commune }}</small
+        >
       </p>
-    </div> -->
-    <!-- <p><strong>Date de création :</strong> {{ association.creationDate | date: 'dd/MM/yyyy' }}</p> -->
+    </div>
+    <p>
+      <small><strong>Date de création :</strong> {{ association.creationDate | date: 'dd/MM/yyyy' }}</small>
+    </p>
   </div>
   <div class="card-footer">
     <p class="type" [style.background-color]="association.type.color">

src/app/components/card-asso/card-asso.component.scss

@@ -2,7 +2,7 @@
   height: 40%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-evenly;
   width: 100%;
 }
 
@@ -14,7 +14,7 @@
   box-shadow: var(--button-box-shadow);
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-around;
   min-width: 300px;
   height: 100%;
   flex: 1;
@@ -24,8 +24,8 @@
 .card-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
+  align-items: flex-start;
+  flex-direction: column;
 }
 
 .card-header h4 {
@@ -41,6 +41,9 @@
   -moz-hyphens: auto;
   hyphens: auto;
 }
+.rna {
+  align-self: flex-start;
+}
 
 .type {
   display: -webkit-box;
@@ -65,9 +68,6 @@
   justify-content: space-between;
   align-items: center;
 }
-.card-body p {
-  margin: 8px 0;
-}
 
 .address {
   display: -webkit-box;
@@ -80,6 +80,7 @@
   margin-bottom: 8px;
 }
 .description {
+  margin-bottom: 8px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;

src/app/components/carousel-card/carousel-card.component.scss

@@ -19,7 +19,7 @@ main {
   padding: 16px 0;
 
   & > * {
-    min-height: 220px;
+    min-height: 250px;
     flex: 1;
   }
 }

src/app/pages/asso-page/asso-page.component.scss

@@ -36,7 +36,7 @@ main {
     }
   }
   .asso-list-container > *:not(:last-child) {
-    min-height: 200px;
+    min-height: 260px;
     flex: 1;
     width: 50%;
     cursor: pointer;