fix size of info card to project all page

Author: Awakich

projects/social_platform/src/app/office/features/detail/detail.component.html

@@ -275,36 +275,37 @@ <h1 class="info__title text-body-12">
           </app-button>
           } }
 
+          <div class="info__divider"></div>
+
+          <app-button
+            [routerLink]="'/office/projects/' + info.id + '/team'"
+            [appearance]="isTeamPage ? 'inline' : 'outline'"
+            size="medium"
+            customTypographyClass="text-body-12"
+          >
+            команда
+          </app-button>
+
+          @if (isInProject) { @if (profile) { @if (profile.id === info.leader) {
           <a
             class="info__edit"
             [routerLink]="
               isEditDisable ? ['/office/projects', info.id] : ['/office/projects', info.id, 'edit']
             "
             [queryParams]="isEditDisable ? {} : { editingStep: 'main' }"
           >
-            @if (profile) { @if (profile.id === info.leader) {
             <app-button
               appearance="outline"
+              size="medium"
               customTypographyClass="text-body-12"
               (click)="onUnableEditingProject()"
               [ngStyle]="{ opacity: isEditDisable ? '0.5' : '1' }"
               [color]="isEditDisable ? 'grey' : 'primary'"
             >
               редактировать
             </app-button>
-            } }
           </a>
-
-          <app-button
-            [routerLink]="'/office/projects/' + info.id + '/team'"
-            [appearance]="isTeamPage ? 'inline' : 'outline'"
-            size="medium"
-            customTypographyClass="text-body-12"
-          >
-            команда
-          </app-button>
-
-          @if (isInProject) {
+          }@else {
           <app-button
             appearance="outline"
             color="red"
@@ -314,6 +315,7 @@ <h1 class="info__title text-body-12">
           >
             выйти из проекта
           </app-button>
+          } }
 
           <app-modal [(open)]="isLeaveProjectModalOpen">
             <div class="unsubscribe-modal">

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

@@ -16,20 +16,20 @@
     <div class="card__info">
       <div class="card__info--vacancies">
         <p class="text-body-6">12</p>
-        <i appIcon icon="suitcase" appSquare="4"></i>
+        <i appIcon icon="suitcase" appSquare="6"></i>
       </div>
       <div class="card__info--collaborators">
         <p class="text-body-6">12</p>
-        <i appIcon icon="team" appSquare="4"></i>
+        <i appIcon icon="team" appSquare="6"></i>
       </div>
     </div>
     } @if (shouldShowSubscriptionBadge()) {
     <div class="card__badge">
       <i
         appIcon
         [icon]="isSubscribed ? 'subscribe-badge' : 'unsubscribe-badge'"
-        appWidth="12"
-        appHeight="18"
+        appWidth="18"
+        appHeight="34"
         class="card__subscribe-badge"
         (click)="toggleSubscription($event)"
       ></i>
@@ -77,9 +77,11 @@
 </ng-template>
 
 <ng-template #regularCardHeader>
-  @if (type === 'projects') {
-  <p class="text-body-12 card__name">{{ info?.name }}</p>
-  @if (industryService.industries | async; as industries) {
+  @if (type === 'projects') { @if (info.name) { @if(info.name.length > 12) {
+  <p class="text-body-12 card__name">{{ info.name.slice(0, 12) }}...</p>
+  } @else {
+  <p class="text-body-12 card__name">{{ info.name }}</p>
+  } } @if (industryService.industries | async; as industries) {
   <p class="text-body-6 card__industry">
     @if (industryService.getIndustry(industries, info?.industry!); as industry) {
     <span>{{ industry?.name }}</span>
@@ -100,8 +102,7 @@
 <ng-template #cardDescription>
   <div
     class="card__description"
-    [style.max-height]="type === 'members' ? '50px' : '20px'"
-    [style.]
+    [style.max-height]="type === 'members' ? '50px' : '24px'"
     [class.invite-description]="type === 'invite'"
   >
     @if (type === 'invite') {

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

@@ -107,6 +107,7 @@
     align-items: center;
     overflow: hidden;
     color: var(--dark-grey);
+    width: 120px;
     text-align: center;
     word-break: break-word;