Skip to content

Commit

Permalink
#6 added side nav
Browse files Browse the repository at this point in the history
  • Loading branch information
timofeysie committed Sep 1, 2021
1 parent d11792d commit 9842c44
Show file tree
Hide file tree
Showing 13 changed files with 126 additions and 147 deletions.
134 changes: 7 additions & 127 deletions apps/trendy/src/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -1,130 +1,10 @@
/*
* Remove template code below
*/
:host {
display: block;
font-family: sans-serif;
body::-webkit-scrollbar {
display: none;
}

.gutter-left {
margin-left: 9px;
}

.col-span-2 {
grid-column: span 2;
}

.flex {
display: flex;
align-items: center;
justify-content: center;
}

header {
background-color: #143055;
color: white;
padding: 5px;
border-radius: 3px;
}

main {
padding: 0 36px;
}

p {
text-align: center;
}

h1 {
text-align: center;
margin-left: 18px;
font-size: 24px;
}

h2 {
text-align: center;
font-size: 20px;
margin: 40px 0 10px 0;
}

.resources {
text-align: center;
list-style: none;
padding: 0;
display: grid;
grid-gap: 9px;
grid-template-columns: 1fr 1fr;
}

.resource {
color: #0094ba;
height: 36px;
background-color: rgba(0, 0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
padding: 3px 9px;
text-decoration: none;
}

.resource:hover {
background-color: rgba(68, 138, 255, 0.04);
}

pre {
padding: 9px;
border-radius: 4px;
background-color: black;
color: #eee;
}

details {
border-radius: 4px;
color: #333;
background-color: rgba(0, 0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 3px 9px;
margin-bottom: 9px;
}

summary {
cursor: pointer;
outline: none;
height: 36px;
line-height: 36px;
}

.github-star-container {
margin-top: 12px;
line-height: 20px;
}

.github-star-container a {
display: flex;
align-items: center;
text-decoration: none;
color: #333;
}

.github-star-badge {
color: #24292e;
display: flex;
align-items: center;
font-size: 12px;
padding: 3px 10px;
border: 1px solid rgba(27, 31, 35, 0.2);
border-radius: 3px;
background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
margin-left: 4px;
font-weight: 600;
}

.github-star-badge:hover {
background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
border-color: rgba(27, 31, 35, 0.35);
background-position: -0.5em;
}
.github-star-badge .material-icons {
height: 16px;
width: 16px;
margin-right: 4px;
/* Hide scrollbar for IE, Edge and Firefox */
body {
overflow: hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 37 additions & 1 deletion docs/trendy-client-layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,42 @@ nx g @nrwl/angular:component containers/pictures/trends/mike-richards/transitio

Using this layout immediately creates a problem. We need only one card, and the container should pass down properties into one picture card.

First, I will create a layout.
But will this still be OK for SEO? If JavaScript is turned off, will the sever side rendered pages still work for a search crawler to read the content? We need to compare the two methods before jumping into the usual DRY/SOLID programming approach.

## The layout

https://zoaibkhan.com/blog/create-a-responsive-card-grid-in-angular-using-flex-layout-part-1/

Next, the side nav?

https://zoaibkhan.com/blog/create-a-responsive-sidebar-menu-with-angular-material/

https://material.angular.io/components/sidenav/examples

I don't think side nav is the answer. Have to fight against it.
Just add our own panel on the right and use that.

In mobile view, the panel should disappear and the footer should appear (or grow).


## Git issue

Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
apps/trendy/src/app/app.component.scss
docs/trendy-client-layout.md
libs/material/src/lib/material.module.ts
libs/pictures/src/lib/containers/pictures/trends/mike-richards/mike-richards.component.html
libs/pictures/src/lib/containers/pictures/trends/mike-richards/mike-richards.component.scss
libs/pictures/src/lib/containers/pictures/trends/mike-richards/toonify/toonify-mike-richards/toonify-mike-richards.component.html
libs/pictures/src/lib/containers/pictures/trends/mike-richards/toonify/toonify-mike-richards/toonify-mike-richards.component.scss
libs/pictures/src/lib/containers/pictures/trends/mike-richards/transitioncat/transitioncat-mike-richards/transitioncat-mike-richards.component.html
libs/pictures/src/lib/containers/pictures/trends/mike-richards/transitioncat/transitioncat-mike-richards/transitioncat-mike-richards.component.scss
libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.html
libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.scss
libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.ts

Untracked files:
(use "git add <file>..." to include in what will be committed)
apps/trendy/src/assets/pictures/mike-richards/transitioncat-mike-richards-452-316.jpg
2 changes: 2 additions & 0 deletions libs/material/src/lib/material.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatTableModule } from '@angular/material/table';
import { MatSelectModule } from '@angular/material/select';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatDividerModule } from '@angular/material/divider';

@NgModule({
imports: [
Expand All @@ -28,6 +29,7 @@ import { MatGridListModule } from '@angular/material/grid-list';
MatTableModule,
MatSelectModule,
MatGridListModule,
MatDividerModule,
],
exports: [
FlexLayoutModule,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="content">
<article class="content">
<div fxLayout="row wrap" fxLayoutGap="16px grid">
<div fxFlex="50%" fxFlex.xs="100%" fxFlex.sm="50%">
<demo-app-toonify-mike-richards></demo-app-toonify-mike-richards>
Expand All @@ -7,4 +7,13 @@
<demo-app-transitioncat-mike-richards></demo-app-transitioncat-mike-richards>
</div>
</div>
</div>
<p class="info">
On August 11, 2021, it was announced that Richards would succeed Trebek as
host of the daily show, with Jeopardy! guest host Mayim Bialik hosting
future prime-time specials and spinoffs. But on August 20, it was
announced that he would step down after offensive comments he had made in
the past emerged. The five episodes Richards filmed the previous day,
the show's first day of production on the new season, are still expected
to air in September 2021. - <a href="https://en.wikipedia.org/wiki/Mike_Richards_(television_personality)">Wikipedia</a>
</p>
</article>
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
.content {
padding: 16px;
overflow: hidden;
}

.info {
margin-top: 5px;
font-size: small;
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<mat-card class="mat-elevation-z4">
<mat-card-header>
<mat-card-title>Toonify Himalayan Peaks</mat-card-title>
<mat-card-title>Toonify</mat-card-title>
</mat-card-header>
<img mat-card-image
src="./../assets/pictures/mike-richards/toonify-mike-richards.jpg">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +0,0 @@
mat-card {
width: 90%;
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<mat-card class="mat-elevation-z4">
<mat-card-header>
<mat-card-title>Transition Cat Himalayan Peaks</mat-card-title>
<mat-card-title>Transition Cat</mat-card-title>
</mat-card-header>
<img mat-card-image src="./../assets/pictures/mike-richards/transitioncat-mike-richards-452.jpg">
<img mat-card-image src="./../assets/pictures/mike-richards/transitioncat-mike-richards-452-316.jpg">
<mat-card-content>
<p>
Everyone is a potential milk duck these days.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +0,0 @@
mat-card {
width: 90%;
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,22 @@
<mat-toolbar color="primary" fxLayout="row">
<span>BREAKING ART</span>
<div class="right-nav">
Paintings
</div>
<h1>BREAKING ART</h1>
<div class="right-nav">Paintings</div>
</mat-toolbar>
<ng-content></ng-content>
<mat-sidenav-container>
<mat-sidenav
class="mat-elevation-z8"
mode="side"
position="end"
[opened]="(isHandset$ | async) === (false)"
md-theme="default"
>
<button mat-button class="menu-button">
<mat-icon>home</mat-icon>
<span>Home</span>
</button>
</mat-sidenav>
<mat-sidenav-content class="content mat-elevation-z8"
[ngClass]="{'nav-open': (isHandset$ | async) === (false)}">
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
Original file line number Diff line number Diff line change
@@ -1,3 +1,23 @@

.right-nav {
margin-left: auto;
}
overflow: hidden;
}

mat-sidenav {
margin: 16px;
width: 200px;
border-right: none;
border-radius: 4px;
padding: 16px;
text-align: center;
}

.nav-open {
margin-right: 216px !important;
}

.content {
box-shadow: none;
font-size: 2rem;
}
Original file line number Diff line number Diff line change
@@ -1,10 +1,27 @@
import { Component } from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import {
BreakpointObserver,
Breakpoints,
BreakpointState,
} from '@angular/cdk/layout';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Component({
selector: 'demo-app-trendy-layout',
templateUrl: './trendy-layout.component.html',
styleUrls: ['./trendy-layout.component.scss']
styleUrls: ['./trendy-layout.component.scss'],
})
export class TrendyLayoutComponent {
@ViewChild('drawer') drawer: any;
public isHandset$: Observable<boolean> = this.breakpointObserver
.observe(Breakpoints.Handset)
.pipe(map((result: BreakpointState) => result.matches));
constructor(private breakpointObserver: BreakpointObserver) {}

closeSideNav() {
if (this.drawer._mode == 'over') {
this.drawer.close();
}
}
}

0 comments on commit 9842c44

Please sign in to comment.