fix info-card name & add to program news views

Author: Awakich

projects/social_platform/src/app/office/features/info-card/info-card.component.scss

@@ -118,7 +118,6 @@
   }
 
   &__name {
-    max-width: 120px;
     margin-bottom: 3px;
     overflow: hidden;
     color: var(--black);

projects/social_platform/src/app/office/program/detail/list/list.component.scss

@@ -31,7 +31,6 @@
 
   &__list {
     display: grid;
-    flex-grow: 1;
     grid-template-columns: 1fr;
     row-gap: 50px;
     column-gap: 20px;

projects/social_platform/src/app/office/program/detail/shared/news-card/news-card.component.html

@@ -5,7 +5,12 @@
       <img class="card__avatar" [src]="newsItem.imageAddress" [alt]="newsItem.name" />
       <div>
         <div class="card__top">
-          <div class="card__name text-body-10">{{ newsItem.name | truncate: 30 }}</div>
+          <div class="card__info" style="display: flex; flex-direction: column">
+            <div class="card__name text-body-10">{{ newsItem.name | truncate: 30 }}</div>
+            <div class="card__date text-body-10">
+              {{ newsItem.datetimeCreated | dayjs: "format":"DD.MM.YY" }}
+            </div>
+          </div>
           @if (newsItem.pin) {
           <i appIcon icon="pin" appSquare="12"></i>
           }
@@ -113,8 +118,9 @@
       </div>
     </div>
     <div class="footer__right">
-      <div class="card__date text-body-10">
-        {{ newsItem.datetimeCreated | dayjs: "format":"DD.MM.YY" }}
+      <div class="card__views text-body-10">
+        <i appIcon icon="eye" appSquare="12"></i>
+        {{ newsItem.viewsCount }}
       </div>
     </div>
   </div>

projects/social_platform/src/app/office/program/detail/shared/news-card/news-card.component.scss

@@ -76,6 +76,17 @@
     color: var(--dark-grey);
   }
 
+  &__views {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    color: var(--dark-grey);
+
+    i {
+      margin-bottom: 1px;
+    }
+  }
+
   /* stylelint-disable value-no-vendor-prefix */
   &__text {
     white-space: break-spaces;
@@ -173,6 +184,12 @@
     align-items: center;
   }
 
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
   &__item {
     display: flex;
     align-items: center;

projects/social_platform/src/app/office/projects/detail/info/info.component.scss

@@ -101,7 +101,7 @@
   &__directions {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    grid-gap: 20px;
+    grid-gap: 10px;
     align-items: center;
     margin-top: 24px;
   }