(feat): revamped group tiles

src/app/modules/pro/channel/list/list.component.html

@@ -23,7 +23,7 @@
 
 <div class="m-proChannelList__content">
  <ul class="m-proChannelListContent__list" [class.m-proChannelListContent__normalList]="type === 'activities'">
- <li *ngFor="let entity of entities">
+ <li *ngFor="let entity of entities; let i = index">
  <ng-container *ngIf="type === 'images' || type === 'videos' || type === 'blogs'">
  <m-pro--channel-tile
  [entity]="entity"
@@ -31,10 +31,10 @@
  ></m-pro--channel-tile>
  </ng-container>
  <ng-container *ngIf="type === 'groups'">
- <m-newsfeed__entity
- [entity]="entity">
-
- </m-newsfeed__entity>
+ <m-pro--channel--group-tile
+ [entity]="entity"
+ [class.big]="i === 0 || i === 1"
+ ></m-pro--channel--group-tile>
  </ng-container>
 
  <ng-container *ngIf="type === 'activities'">

src/app/modules/pro/channel/tile/group/group-tile.component.scss

+m-pro--channel--group-tile {
+ cursor: pointer;
+ position: relative;
+ width: 100%;
+ height: 220px;
+ background-color: var(--transparent-background-color);
+ color: var(--text-color);
+
+ &.big {
+ height: 320px;
+
+ .banner {
+ height: 150px;
+ position: absolute;
+ z-index: 1;
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .m-proChannelGroupTile__content {
+ margin-top: 75px;
+
+ img {
+ border: 1px solid #e8e8e8;
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ }
+ }
+ }
+
+ .banner {
+ height: 100px;
+ position: absolute;
+ z-index: 1;
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+
+ .m-proChannelGroupTile__content {
+ margin-top: 50px;
+ position: relative;
+ z-index: 2;
+ display: block;
+ text-align: center;
+ text-decoration: none;
+
+ //padding: 16px 16px 0;
+ //font-size: 20px;
+ //width: 100%;
+ //box-sizing: border-box;
+
+ img {
+ border: 1px solid #e8e8e8;
+ width: 75px;
+ height: 75px;
+ border-radius: 50%;
+ }
+
+ .body {
+ margin-top: 16px;
+ }
+
+ h2, p {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ h2 {
+ font-size: 20px;
+ line-height: 20px;
+ overflow: visible;
+ color: var(--text-color) !important;
+ margin: 0;
+ font-weight: 700;
+ }
+
+ p {
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ font-size: 13px;
+ text-overflow: ellipsis;
+ text-rendering: auto;
+ white-space: pre-wrap;
+ overflow: hidden;
+ max-height: 48px;
+ margin: 8px 0;
+ padding: 0;
+ line-height: 1.25;
+ color: var(--text-color) !important;
+ }
+ }
+}

src/app/modules/pro/channel/tile/group/group-tile.component.ts

+import { Component, HostListener, Input } from '@angular/core';
+
+@Component({
+ selector: 'm-pro--channel--group-tile',
+ template: `
+ <div class="banner">
+ <img [src]="getBanner()">
+ </div>
+ <div class="m-proChannelGroupTile__content">
+ <div class="avatar">
+ <img [src]="getAvatar()">
+ </div>
+ <div class="body">
+ <h2>{{this.entity.name}}</h2>
+ <p i18n>Subscribers: <span>{{this.entity['members:count']}}</span></p>
+ </div>
+ </div>
+ `
+})
+
+export class ProGroupTileComponent {
+ @Input() entity: any;
+
+ minds = window.Minds;
+
+ getBanner() {
+ return `/fs/v1/banners/${this.entity.guid}/${this.entity.banner_position}/'${this.entity.banner}`;
+ }
+
+ getAvatar() {
+ return `${this.minds.cdn_url}fs/v1/avatars/${this.entity.guid}/large/${this.entity.icontime}`;
+ }
+
+ @HostListener('click') onClick() {
+ window.open(`${window.Minds.site_url}groups/profile/${this.entity.guid}`, '_blank');
+ }
+}

src/app/modules/pro/pro.module.ts

@@ -22,6 +22,7 @@ import { ProContentModalComponent } from "./channel/content-modal/modal.componen
 import { VideoModule } from "../media/components/video/video.module";
 import { ProChannelListModal } from './channel/list-modal/list-modal.component';
 import { ProChannelHomeComponent } from './channel/home/home.component';
+import { ProGroupTileComponent } from "./channel/tile/group/group-tile.component";
 import { ProUnsubscribeModalComponent } from './channel/unsubscribe-modal/modal.component';
 
 const routes: Routes = [
@@ -92,6 +93,7 @@ const routes: Routes = [
  ProChannelDonateComponent,
  ProUserMenuComponent,
  ProChannelFooterComponent,
+ ProGroupTileComponent,
  ProUnsubscribeModalComponent
  ],
  exports: [],