publications-list

src/app/_modules/publications/list/item/publications-list-item.component.html

@@ -1,11 +1,25 @@
 <div class="menu" *ngIf="editMode">
-  <button type="button" class="edit" (click)="edit()"></button>
-  <button type="button" class="delete" (click)="delete()"></button>
-</div>
-<div class="name"><a [routerLink]="publication.link">{{publication.name}}</a></div>
-<div class="excerpt">{{publication.excerpt}}</div>
-<div class="posters">
-  <div class="item" *ngFor="let poster of posters">
-    <img [src]="poster.links?.full" />
+  <div class="block">
+    <a (click)="edit()">
+      <ico ico="edit_24"></ico>
+    </a>
+    <a (click)="delete()">
+      <ico ico="delete_24"></ico>
+    </a>
   </div>
 </div>
+<div class="name">
+  <a [routerLink]="publication.link">
+    <h3>{{publication.name}}</h3>
+  </a>
+</div>
+<div class="poster" *ngIf="currentPoster">
+  <img  [src]="currentPoster.links?.full" />
+</div>
+<div class="posters" *ngIf="posters.length>0">
+  <div class="item" *ngFor="let poster of posters">
+    <img [src]="poster.links?.thumb" (click)="currentPoster=poster"/>
+  </div>
+</div>
+<div class="excerpt">{{publication.excerpt}}</div>
+<a class="publication-read-more" >Читать далее <ico ico="chevron_right_24"></ico></a>

src/app/_modules/publications/list/item/publications-list-item.component.ts

@@ -10,6 +10,7 @@ import {PublicationsService} from "@app/_services/publications.service";
 export class PublicationsListItemComponent {
   @Input() publication: any;
   @Input() editMode: boolean;
+  currentPoster:any;
 
   constructor(private publicationsService: PublicationsService, private formsService: FormsService, private listsService: ListsService) {
   }
@@ -23,6 +24,7 @@ export class PublicationsListItemComponent {
   }
 
   ngOnInit() {
+    if (this.publication.posters) this.currentPoster = this.posters[0];
   }
 
 

src/app/_modules/publications/list/publications-list.component.html

@@ -1,5 +1,8 @@
 <div *ngIf="editMode" class="add">
-  <div class="toggle"><div class="button" (click)="add()">Добавить публикацию</div></div>
+  <a (click)="add()">
+    <ico ico="add_circle_24"></ico>
+    Добавить публикацию
+  </a>
 </div>
 <pagination></pagination>
 <div class="items">

src/app/_modules/publications/list/publications-list.component.scss

@@ -1,36 +0,0 @@
-.add {
-  .toggle {
-    .button {
-      display: inline-block;
-      font-size: 20px;
-      color: var(--prime);
-      vertical-align: 4px;
-      padding-left: 8px;
-      &:hover{
-        color: var(--prime-hov);
-        cursor: pointer;
-      }
-    };
-    &::before{
-      content: "";
-      display: inline-block;
-      width: 24px;
-      height: 24px;
-      background: url('~src/assets/images/icons/add_cirle_24dp.svg') center no-repeat;
-      cursor: pointer;
-    }
-    &:hover::before{
-      background: url('~src/assets/images/icons/add_cirle_hover_24dp.svg') center no-repeat;
-    }
-  }
-}
-
-.items {
-  margin: 24px 0;
-}
-
-
-publications-list-item {
-  display: block;
-  margin-bottom: 24px;
-}

src/app/_modules/publications/publications.module.ts

@@ -8,13 +8,15 @@ import {PaginationModule} from "@app/_modules/pagination/pagination.module";
 import {PublicationPageComponent} from "@app/_modules/publications/publication/publication-page.component";
 import {PageSectionsModule} from "@app/_modules/pages/sections/page-sections.module";
 import {RouterModule} from "@angular/router";
+import { WidjetModule } from '../widjet/widjet.module';
 
 @NgModule({
   imports: [
     CommonModule,
     RouterModule,
     PaginationModule,
-    PageSectionsModule
+    PageSectionsModule,
+    WidjetModule
   ],
   declarations: [
     PublicationsListComponent,

src/assets/css/_basics.scss

@@ -197,6 +197,7 @@ body {
   margin: 0;
   color: var(--second-act);
   background-color: var(--light);
+  font-size: 20px;
   .wrapper {
     width: 100%;
     min-height: 100vh;

src/assets/css/_pages-section.scss

@@ -294,4 +294,54 @@ images-section{
       }
     }
   }
+}
+
+publications-list{
+  .add a, .publication-read-more{
+    display: inline-flex;
+    gap: 8px;
+    align-items: flex-end;
+  }
+  
+  .items {
+    margin: 24px 0;
+  }  
+  
+  publications-list-item {
+    display: block;
+    margin-bottom: 24px;
+    .poster{
+      width: 665px;
+      max-width: calc( 100vw - 80px);
+      margin-bottom: 8px;
+      img{
+        border: 1px solid var(--second-dis);
+        width: 100%;
+        display: flex;
+      }
+    }
+    .posters{
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      gap: 8px;
+
+      .item{
+        width: 72px;
+        height: 52px;
+        border: 1px solid var(--prime);
+        cursor: pointer;
+        :hover{
+          border-color:  var(--prime-act);
+        }
+        img{
+          object-fit: cover;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+  }
+  
 }