(feat) implement footer

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

@@ -46,3 +46,7 @@
  <router-outlet></router-outlet>
  </div>
 </div>
+
+<div class="m-proChannel__footer">
+ <m-pro--channel-footer></m-pro--channel-footer>
+</div>
\ No newline at end of file

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

@@ -120,3 +120,8 @@ m-pro--channel {
  }
 
 }
+
+.m-proChannel__footer {
+ background-color: var(--plain-background-color) !important;
+ height: fit-content;
+}

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

+<div class="m-proChannelFooter__content">
+ <ul class="m-proChannelFooterContent__list">
+ <li *ngFor="let row of links">
+ <div *ngFor="let link of row">
+ <a src="link.src">{{link.text}}</a>
+ </div>
+ </li>
+ </ul>
+</div>
\ No newline at end of file

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

+m-pro--channel-footer {
+ max-width: 1296px;
+ margin-right: auto;
+ margin-left: auto;
+
+ .m-proChannelFooter__content {
+
+ .m-proChannelFooterContent__list {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ grid-auto-rows: minmax(200px, auto);
+ grid-gap: 24px 24px;
+ list-style: none;
+ padding: 0;
+
+ li {
+ display: grid;
+ justify-content: center;
+ align-items: center;
+ }
+
+ &:nth-child(1) {
+ grid-column: span 2;
+ margin-bottom: $minds-padding * 2;
+ justify-content: flex-start;
+ }
+
+ &:nth-child(2) {
+ grid-column: 3 / span 2;
+ margin-bottom: $minds-padding * 2;
+
+ &:not(.m-proChannelListContentList__seeMore) {
+ justify-content: flex-end;
+ }
+ }
+ }
+ }
+}

src/app/modules/pro/channel/footer/footer.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'm-pro--channel-footer',
+ templateUrl: 'footer.component.html'
+})
+
+export class ProChannelFooterComponent {
+
+ links:any;
+ rowCount: number;
+
+ constructor(){
+ this.links = [
+ {
+ text: 'What we are',
+ src: ''
+ },
+ {
+ text: 'Core Values',
+ src: ''
+ },
+ {
+ text: 'Subscribe',
+ src: ''
+ },
+ {
+ text: 'Support',
+ src: ''
+ },
+ {
+ text: 'Careers',
+ src: ''
+ },
+ {
+ text: 'Events',
+ src: ''
+ },
+ {
+ text: 'Contact',
+ src: ''
+ },
+ {
+ text: 'Contribute',
+ src: ''
+ },
+ {
+ text: 'Investors',
+ src: ''
+ }
+ ];
+
+ this.setLinksToRows();
+ }
+
+ /**
+ * Distribute links in cols and rows
+ */
+ setLinksToRows() {
+ this.getRowsCount();
+ const links = this.links;
+ this.links = [];
+ let i,j, chunk = this.rowCount;
+ for (i=0,j=links.length; i<j; i+=chunk) {
+ this.links.push(links.slice(i,i+chunk));
+ }
+ }
+
+ getRowsCount() {
+ const linksCount = this.links.length;
+ let rowMultiplier = 6
+ let rowCount = 1;
+
+ while (((rowMultiplier * rowCount) % linksCount) > 0) {
+ rowCount++;
+ }
+
+ this.rowCount = rowCount;
+ }
+}

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

@@ -15,6 +15,7 @@ import { ProTileComponent } from "./channel/tile/tile.component";
 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';
 
 const routes: Routes = [
  {
@@ -77,7 +78,8 @@ const routes: Routes = [
  ProChannelSignupComponent,
  ProChannelListComponent,
  ProChannelDonateComponent,
- ProUserMenuComponent
+ ProUserMenuComponent,
+ ProChannelFooterComponent
  ],
  exports: [],
  entryComponents: [