ContentPage - ContentCards (Desktop)

Author: jsfrocha

src/app/screens/content/content.component.html

@@ -41,7 +41,10 @@
 
   </aside>
   <section class="t4e-content-items">
-
+    <t4e-content-card
+      *ngFor="let contentItem of contentItems"
+      [contentItem]="contentItem"
+    ></t4e-content-card>
   </section>
 </div>
 

src/app/screens/content/content.component.scss

@@ -8,6 +8,7 @@
   display: grid;
   grid-template-columns: 1fr 3fr;
   grid-template-areas: 'filters content-items';
+  grid-column-gap: 110px;
 
   .t4e-content-filters {
     grid-area: filters;
@@ -80,5 +81,13 @@
 
   .t4e-content-items {
     grid-area: content-items;
+
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: minmax(320px, 1fr);
+
+    grid-row-gap: 40px;
+    grid-column-gap: 24px;
+
   }
 }

src/app/screens/content/content.component.ts

@@ -33,7 +33,13 @@ const GET_CONTENT_ITEMS = gql`
       videoTime,
       imageUrl,
       createdAt,
-      updatedAt
+      updatedAt,
+      stakeholder {
+        code
+      }
+      provider {
+        code
+      }
     }
 
   }

src/app/shared/content-card/content-card.component.html

@@ -1 +1,19 @@
-<p>content-card works!</p>
+<div [class]="'content-card ' + contentItem.type.toLowerCase()"
+     [ngStyle]="{backgroundImage: getBackgroundImage()}"
+>
+  <div class="provider" *ngIf="contentItem.provider">
+    <img [class]="'provider-img ' + contentItem.provider.code.toLowerCase()" [src]="'../../../assets/card/' + getProviderImage()" alt="">
+  </div>
+  <div class="overlay"></div>
+  <div class="text-wrapper">
+    <div class="text-wrapper__title">{{contentItem.title}}</div>
+    <div class="text-wrapper__time" *ngIf="contentItem.videoTime">{{contentItem.videoTime}}min</div>
+  </div>
+  <div class="action">
+    <span>{{contentItem.type === 'CONTENT-TUTORIAL-VIDEO' ? 'VER VÍDEO' : 'VER ARTIGO '}}</span>
+    <svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M14.3 15L20 8L14.3 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M20 8H1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+  </div>
+</div>

src/app/shared/content-card/content-card.component.scss

@@ -0,0 +1,100 @@
+@import 'theme';
+
+.content-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  width: 315px;
+  height: 289px;
+
+
+  background-repeat: no-repeat;
+
+  mask: url(/assets/card/card-content-aluno.png);
+  mask-size: cover;
+
+  transition: 0.2s ease box-shadow, 0.2s ease transform;
+
+  cursor: pointer;
+
+  &.content-article {
+    background-position: 97% 35%;
+    background-size: 131%;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+
+    .overlay {
+      width: 100%;
+      height: 289px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(0deg, #5A98D0 0%, rgba(90, 152, 208, 0) 59.37%);
+      z-index: -1;
+    }
+  }
+
+  &:hover {
+    transform: scale(1.0225);
+  }
+
+  .provider {
+    width: 207px;
+    height: 207px;
+    position: absolute;
+    background-color: #FFF;
+    opacity: 0.9;
+    border-radius: 50%;
+    left: -17.95%;
+    right: 53.53%;
+    top: -29.29%;
+    bottom: 57.5%;
+
+    img {
+      position: absolute;
+
+      &.zoom {
+        top: 44%;
+        left: 33%;
+      }
+
+      &.teams {
+        top: 52%;
+        left: 41%;
+      }
+
+    }
+  }
+
+  .text-wrapper {
+    display: flex;
+    align-items: flex-end;
+    margin: auto 24px 8px;
+
+    &__title {
+      @include font('title3', 130%);
+      color: #FFF;
+      margin-right: 6px;
+    }
+
+    &__time {
+      @include font('bodyTextHighlight', 152%);
+      color: #FFF;
+    }
+  }
+
+  .action {
+    margin-left: 24px;
+    margin-bottom: 24px;
+    color: #FFF;
+    span {
+      @include font('button');
+      margin-right: 4px;
+    }
+    svg {
+      width: 15px;
+      height: 11px;
+    }
+  }
+}

src/app/shared/content-card/content-card.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {IContentItem} from '../../interfaces/content-item.interface';
 
 @Component({
   selector: 't4e-content-card',
@@ -7,9 +8,38 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ContentCardComponent implements OnInit {
 
+  @Input() contentItem: IContentItem = {};
+
   constructor() { }
 
   ngOnInit(): void {
+
+  }
+
+  getProviderImage() {
+    switch(this.contentItem.provider.code) {
+      case 'TEAMS':
+        return 'card-provider-teams.png';
+      case 'ZOOM':
+        return 'card-provider-zoom.png'
+      default:
+        return '';
+    }
+  }
+
+  getBackgroundImage() {
+    if (this.contentItem.imageUrl) {
+      return 'url('+ this.contentItem.imageUrl +')'
+    } else {
+      switch(this.contentItem.stakeholder.code) {
+        case 'PROFESSOR':
+          return 'url(/assets/card/card-content-professor.png)';
+        case 'ALUNO':
+          return 'url(/assets/card/card-content-aluno.png)';
+        case 'PAIS':
+          return 'url(/assets/card/card-content-ee.png)';
+      }
+    }
   }
 
 }

src/app/shared/filters/filters.component.scss

@@ -19,6 +19,8 @@
       background: #FFF;
       justify-content: flex-start;
 
+      cursor: pointer;
+
       transition:
         color 250ms ease,
         background 250ms ease

src/app/shared/shared.module.ts

@@ -32,7 +32,8 @@ import { ContentCardComponent } from './content-card/content-card.component';
     PageHeaderComponent,
     FooterComponent,
     BlogArticleCardComponent,
-    FiltersComponent
+    FiltersComponent,
+    ContentCardComponent
   ]
 })
 export class SharedModule { }