(feat): footer

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

@@ -86,8 +86,8 @@
  <div class="m-proChannel__body">
  <router-outlet></router-outlet>
  </div>
-</div>
 
-<div class="m-proChannel__footer">
- <m-pro--channel-footer></m-pro--channel-footer>
+ <div class="m-proChannel__footer">
+ <m-pro--channel-footer></m-pro--channel-footer>
+ </div>
 </div>

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

@@ -12,7 +12,7 @@ m-pro--channel {
  max-width: 1296px;
  margin: 0 auto;
  display: grid;
- grid-template-rows: repeat(2, 100px) 1fr;
+ grid-template-rows: repeat(2, 100px) 1fr 100px;
  grid-template-columns: repeat(12, 1fr);
  min-height: 100%;
 
@@ -100,6 +100,11 @@ m-pro--channel {
  padding: 0 32px;
  }
 
+ .m-proChannel__footer {
+ grid-row: 4 / span 1;
+ grid-column: 2 / span 10;
+ }
+
  m-pro--channel h1 {
  font-size: 70px;
  font-weight: bold;
@@ -131,8 +136,3 @@ 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
+<a [href]="link.href" *ngFor="let link of footerLinks">{{link.title}}</a>

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

 m-pro--channel-footer {
- max-width: 1296px;
- margin-right: auto;
- margin-left: auto;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ height: 100px;
 
- .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;
- }
- }
- }
+ a {
+ text-decoration: none;
  }
 }

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

 import { Component } from '@angular/core';
+import { ProChannelService } from "../channel.service";
 
 @Component({
  selector: 'm-pro--channel-footer',
@@ -7,74 +8,13 @@ import { Component } from '@angular/core';
 
 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();
+ get footerLinks() {
+ return this.channelService.currentChannel.pro_settings.footer_links;
  }
 
- /**
- * 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++;
- }
+ constructor(
+ private channelService: ProChannelService,
+ ) {
 
- this.rowCount = rowCount;
  }
 }