(feat): feeds

(chore): styles cleanup & minor refactor

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

@@ -24,13 +24,13 @@
  </div>
 
  <ng-container *ngIf="!collapseNavItems">
- <a [routerLink]="['/pro', channel.username, 'feed', 'top']" routerLinkActive="active" i18n>Feed</a>
- <a [routerLink]="['/pro', channel.username, 'videos', 'top']" routerLinkActive="active" i18n>Videos</a>
- <a [routerLink]="['/pro', channel.username, 'images', 'top']" routerLinkActive="active" i18n>Images</a>
- <a [routerLink]="['/pro', channel.username, 'articles', 'top']" routerLinkActive="active" i18n>Articles</a>
- <a [routerLink]="['/pro', channel.username, 'groups', 'top']" routerLinkActive="active" i18n>Groups</a>
- <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
- <a [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active" *ngIf="!currentUser">Signup / Login</a>
+ <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'feed', 'top']" routerLinkActive="active" i18n>Feed</a>
+ <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'videos', 'top']" routerLinkActive="active" i18n>Videos</a>
+ <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'images', 'top']" routerLinkActive="active" i18n>Images</a>
+ <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'articles', 'top']" routerLinkActive="active" i18n>Articles</a>
+ <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'groups', 'top']" routerLinkActive="active" i18n>Groups</a>
+ <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
+ <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active" *ngIf="!currentUser">Signup / Login</a>
  </ng-container>
 
  <ng-container *ngIf="currentUser">
@@ -49,4 +49,4 @@
 
 <div class="m-proChannel__footer">
  <m-pro--channel-footer></m-pro--channel-footer>
-</div>
\ No newline at end of file
+</div>

src/app/modules/pro/channel/channel.component.scss

@@ -77,7 +77,7 @@ m-pro--channel {
  }
  }
 
- a {
+ a.m-proChannelTopbar__navItem {
  text-decoration: none;
  padding: 16px;
  font-size: 18px;
@@ -108,7 +108,7 @@ m-pro--channel {
  color: var(--primary-color) !important;
  }
 
- a, h1, h2, h3, h4, h5, p, i {
+ a, h1, h2, h3, h4, h5, p {
  color: var(--text-color) !important;
  }
 }

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

@@ -25,7 +25,7 @@
 </div>
 
 <div class="m-proChannelList__content">
- <ul class="m-proChannelListContent__list">
+ <ul class="m-proChannelListContent__list" [class.m-proChannelListContent__normalList]="type === 'activities'">
  <li *ngFor="let entity of entities">
  <ng-container *ngIf="type === 'images' || type === 'videos' || type === 'blogs'">
  <m-pro--channel-tile
@@ -38,6 +38,13 @@
 
  </m-newsfeed__entity>
  </ng-container>
+
+ <ng-container *ngIf="type === 'activities'">
+ <minds-activity
+ [object]="entity">
+
+ </minds-activity>
+ </ng-container>
  <li
  class="m-proChannelListContentList__seeMore"
  *ngIf="entities.length != 0"

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

@@ -14,7 +14,7 @@ m-pro--channel-list {
  vertical-align: middle;
  margin-right: 8px;
  font-size: 18px;
- color: #444!important;
+ color: #444 !important;
  }
  }
 
@@ -63,7 +63,45 @@ m-pro--channel-list {
  list-style: none;
  padding: 0;
 
- li {
+ &.m-proChannelListContent__normalList {
+ grid-template-columns: 1fr;
+
+ & > li {
+ max-width: 680px;
+ min-width: 400px;
+ justify-self: center;
+
+ minds-activity {
+ min-width: 100%;
+ }
+ }
+ }
+
+ &:not(.m-proChannelListContent__normalList) {
+ & > li:nth-child(1), li:nth-child(2) {
+ & > video {
+ width: 500px;
+ //max-height: 250px;
+ }
+ }
+
+ & > li:nth-child(1) {
+ grid-column: span 2;
+ margin-bottom: $minds-padding * 4;
+ justify-content: flex-start;
+ }
+
+ & > li:nth-child(2) {
+ grid-column: 3 / span 2;
+ margin-bottom: $minds-padding * 4;
+
+ &:not(.m-proChannelListContentList__seeMore) {
+ justify-content: flex-end;
+ }
+ }
+ }
+
+ & > li {
  grid-column: span 1;
 
  //border: 1px solid blue;
@@ -92,28 +130,6 @@ m-pro--channel-list {
  }
  }
 
- &:nth-child(1), &:nth-child(2) {
- & > video {
- width: 500px;
- //max-height: 250px;
- }
- }
-
- &:nth-child(1) {
- grid-column: span 2;
- margin-bottom: $minds-padding * 4;
- justify-content: flex-start;
- }
-
- &:nth-child(2) {
- grid-column: 3 / span 2;
- margin-bottom: $minds-padding * 4;
-
- &:not(.m-proChannelListContentList__seeMore) {
- justify-content: flex-end;
- }
- }
-
  & > video {
  width: 250px;
  }
@@ -129,8 +145,8 @@ m-pro--channel-list {
  ul.m-proChannelListContent__list {
  grid-template-columns: 1fr;
 
- li {
- &:nth-child(1), &:nth-child(2) {
+ & > li {
+ &:not(.m-proChannelListContent__normalList):nth-child(1), &:not(.m-proChannelListContent__normalList):nth-child(2) {
  margin-bottom: 0;
  justify-content: center;
  grid-column: span 1;

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.html

 <div class="m-pro-user-menu m-dropdown">
  <a class="m-pro-user-menu__Anchor" (click)="toggleMenu()"><i class="material-icons">menu</i></a>
 
- <ul class="m-dropdown__list m-pro-user-menu__Dropdown mdl-shadow--3dp" [hidden]="!isOpen">
+ <ul class="m-dropdown__list m-pro-user-menu__dropdown mdl-shadow--3dp" [hidden]="!isOpen">
  <ng-container *ngIf="showNavItems">
  <li
- class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+ class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
  >
  <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>
  </li>
 
  <li
- class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+ class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
  >
  <a [routerLink]="['/pro', channel.username, 'videos']" routerLinkActive="active" i18n>Videos</a>
  </li>
 
  <li
- class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+ class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
  >
  <a [routerLink]="['/pro', channel.username, 'images']" routerLinkActive="active" i18n>Images</a>
  </li>
 
  <li
- class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+ class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
  >
  <a [routerLink]="['/pro', channel.username, 'articles']" routerLinkActive="active" i18n>Articles</a>
  </li>
 
  <li
- class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+ class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
  >
  <a [routerLink]="['/pro', channel.username, 'groups']" routerLinkActive="active" i18n>Groups</a>
  </li>
 
  <li
- class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+ class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
  >
  <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
  </li>
  </ng-container>
  <li
- class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+ class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
  >
  <a [routerLink]="['/', channelName]">
@@ -55,7 +55,7 @@
  </a>
  </li>
  <li
- class="m-dropdownList__item m-user-menuDropdown__Item"
+ class="m-dropdownList__item m-pro-user-menuDropdown__item"
  *ngIf="getCurrentUser()"
  (click)="closeMenu()"
  >

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.scss

@@ -4,29 +4,28 @@ m-pro-user-menu {
  cursor: pointer;
 }
 
-.m-pro-user-menu__Dropdown {
+.m-pro-user-menu__dropdown {
  list-style: none;
  margin: 34px 0 0;
- @include m-theme(){
+ @include m-theme() {
  background-color: themed('m-white');
  color: themed('m-grey-700');
  }
 
- li:hover {
- @include m-theme(){
- background-color: rgba(themed('m-grey-50'), 0.5);
+ li.m-pro-user-menuDropdown__item {
+ &:hover {
+ @include m-theme() {
+ background-color: rgba(themed('m-grey-50'), 0.5);
+ }
  }
- }
 
- a {
- font-size: 14px!important;
- padding: 0px!important;
- color: #555!important;
- 
- }
+ a {
+ color: #555 !important;
+ }
 
- i {
- color: #555!important;
+ i {
+ color: #555 !important;
+ }
  }
 
 }

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

@@ -16,6 +16,7 @@ import { NewsfeedModule } from "../newsfeed/newsfeed.module";
 import { ProSettingsComponent } from './settings/settings.component';
 import { ProUserMenuComponent } from "./channel/pro-user-menu/pro-user-menu.component";
 import { ProChannelFooterComponent } from './channel/footer/footer.component';
+import { LegacyModule } from "../legacy/legacy.module";
 
 const routes: Routes = [
  {
@@ -65,6 +66,7 @@ const routes: Routes = [
  RouterModule.forChild(routes),
  MindsFormsModule,
  NewsfeedModule,
+ LegacyModule,
  ],
  providers: [
  ProService,