sartography
/
sartography-website
mirror of https://github.com/sartography/sartography-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Connects items in each column vertically with a line

This commit is contained in:
Aaron Louie 2019-10-16 11:38:50 -04:00
parent c52da09b68
commit e6d9b724e5
3 changed files with 90 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/app/about-us/about-us.component.html
View File

@ -1,29 +1,42 @@
<div class="about-us" fxLayout="row" [@scrollAnimation]="state" fxLayoutAlign="center start"> <div class="about-us" gdColumns="1fr 2fr" [@scrollAnimation]="state" gdAlignRows="start stretch" gdAlignColumns="start stretch">
<div fxFlex="33.33%" class="title"> <div class="title">
<h1 class="mat-display-1">About Us</h1> <h1 class="mat-display-1">About Us</h1>
<h2 class="mat-display-3">What We Do</h2> <h2 class="mat-display-3">What We Do</h2>
</div> </div>
<div fxFlex="67.67%" fxLayout="column" class="capabilities"> <div class="capabilities">
<div <div
*ngFor="let c of capabilities; let i = index" *ngFor="let c of capabilities; let i = index"
[fxLayout]="i % 2 === 0 ? 'row' : 'row-reverse'" gdColumns="3fr 1fr 1fr 3fr"
[ngClass]="i % 2 === 0 ? 'even' : 'odd'" [ngClass]="isEven(i, 'even', 'odd')"
fxLayoutAlign="start start"
> >
<div class="details" fxFlex="37.5%"> <div class="details-left">
<h3>{{c.title}}</h3> <ng-container *ngIf="isEven(i)">
<p>{{c.description}}</p> <h3>{{c.title}}</h3>
<p>{{c.description}}</p>
</ng-container>
</div> </div>
<div class="icon" fxFlex="12.5%"> <div class="icon-left">
<span <span
*ngIf="isEven(i)"
[inlineSVG]="c.icon_url" [inlineSVG]="c.icon_url"
class="capability-icon" class="capability-icon"
></span> ></span>
</div> </div>
<div class="icon-spacer" fxFlex="12.5%"></div> <div class="icon-right">
<div class="details-spacer" fxFlex="37.5%"></div> <span
*ngIf="!isEven(i)"
[inlineSVG]="c.icon_url"
class="capability-icon"
></span>
</div>
<div class="details-right">
<ng-container *ngIf="!isEven(i)">
<h3>{{c.title}}</h3>
<p>{{c.description}}</p>
</ng-container>
</div>
</div> </div>
</div> </div>
</div> </div>

75
src/app/about-us/about-us.component.scss
View File

@ -21,6 +21,7 @@
.capabilities { .capabilities {
margin-top: 300px; margin-top: 300px;
margin-left: 80px;
margin-right: 80px; margin-right: 80px;
::ng-deep .capability-icon svg { ::ng-deep .capability-icon svg {
@ -28,45 +29,81 @@
width: 128px; width: 128px;
height: 128px; height: 128px;
} }
.icon-left,
.icon-right {
position: relative;
background-color: transparent;
&:after {
position: absolute;
left: 50%;
content: '';
width: 2px;
}
}
} }
.even { .even {
text-align: right; text-align: right;
.details { .details-left {
background-color: transparent; background-color: transparent;
h3 { color: $brand-primary-dark-1; } h3 { color: $brand-primary-dark-1; }
} }
.icon { .icon-left {
background-color: transparent;
::ng-deep .capability-icon svg path { fill: $brand-primary; } ::ng-deep .capability-icon svg path { fill: $brand-primary; }
}
.icon-spacer {
background-color: $brand-gray;
&::after { &:after {
content: ''; bottom: 0;
width: 1px; height: calc(100% - 64px);
height: 100%; background-color: $brand-gray-light-3;
background-color: $brand-gray-light-4;
} }
} }
.details-spacer { background-color: $brand-gray; } .icon-right {
&:after {
top: 0;
height: calc(100% - 40px);
background-color: $brand-gray-light-1;
}
}
.details-right { background-color: transparent; }
&:first-of-type .icon-right:after { background-color: transparent; }
&:last-of-type,
&:nth-last-of-type(2) {
.icon-left:after { background-color: transparent; }
}
} }
.odd { .odd {
text-align: left; text-align: left;
.details-spacer { background-color: transparent; } .details-left { background-color: transparent; }
.icon-spacer { background-color: transparent; } .icon-left {
.icon { &:after {
background-color: $brand-gray; top: 0;
::ng-deep .capability-icon svg path { fill: $brand-primary-light-1; } height: calc(100% - 40px);
background-color: $brand-gray-light-3;
}
} }
.details { .icon-right {
background-color: $brand-gray; ::ng-deep .capability-icon svg path { fill: $brand-primary-light-1; }
&:after {
bottom: 0;
height: calc(100% - 64px);
background-color: $brand-gray-light-1;
}
}
.details-right {
background-color: transparent;
color: white; color: white;
h3 { color: $brand-primary-light-2; } h3 { color: $brand-primary-light-2; }
} }
&:last-of-type .icon-right:after { background-color: transparent; }
&:last-of-type .icon-left:after { background-color: transparent; }
} }
} }

9
src/app/about-us/about-us.component.ts
View File

@ -51,4 +51,13 @@ export class AboutUsComponent implements OnInit {
const scrollPosition = window.pageYOffset + hOffset; const scrollPosition = window.pageYOffset + hOffset;
this.state = scrollPosition >= componentPosition ? 'show' : 'hide'; this.state = scrollPosition >= componentPosition ? 'show' : 'hide';
} }
isEven(i: number, ifTrue?: string, ifFalse?: string): string | boolean {
const test = i % 2 === 0;
if (ifTrue && ifFalse) {
return test ? ifTrue : ifFalse;
} else {
return test;
}
}
} }