Skip to content

Commit fa0b11c

Browse files
davidshen84davidshen84
committed
fix: styles
1 parent ef1da22 commit fa0b11c

9 files changed

+107
-82
lines changed

Diff for: ‎src/app/canvas-showcase/canvas-showcase.component.html

+21-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
1-
<div>
2-
<div class="markdown-container">
3-
<app-remarkable src="assets/blogs/how-to-compute-coordinates-in-a-canvas-element.md"></app-remarkable>
4-
</div>
5-
6-
<div>
7-
<div>Drag & Drop in this box.</div>
8-
<canvas #canvas></canvas>
9-
</div>
10-
11-
<ul>
12-
<li *ngFor="let p of _points.slice().reverse()">{{ p | json }}</li>
13-
</ul>
14-
</div>
1+
<mat-grid-list cols="2" rowHeight="2:1">
2+
<mat-grid-tile colspan="2">
3+
4+
<app-remarkable class="markdown-container"
5+
src="assets/blogs/how-to-compute-coordinates-in-a-canvas-element.md"></app-remarkable>
6+
7+
</mat-grid-tile>
8+
9+
<mat-grid-tile>
10+
<div>
11+
Drag & Drop in this box.<br>
12+
<canvas #canvas></canvas>
13+
</div>
14+
</mat-grid-tile>
15+
16+
<mat-grid-tile>
17+
<ol>
18+
<li *ngFor="let p of _points().slice().reverse()">{{ p | json }}</li>
19+
</ol>
20+
</mat-grid-tile>
21+
</mat-grid-list>

Diff for: ‎src/app/canvas-showcase/canvas-showcase.component.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use "../app.component";
22

33
canvas {
4-
width: 200px;
5-
height: 200px;
4+
width: 400px;
5+
height: 400px;
66
border: solid black;
77
}

Diff for: ‎src/app/canvas-showcase/canvas-showcase.component.ts

+8-12
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
ElementRef,
55
OnDestroy,
66
OnInit,
7+
signal,
78
ViewChild,
89
} from '@angular/core';
910
import { fromEvent, Subscription } from 'rxjs';
@@ -12,22 +13,23 @@ import { TitleService } from '../title.service';
1213
import { CanvasDrawService } from './canvas-draw.service';
1314
import { BaseComponent } from '../base-component';
1415
import { GaService } from '../ga.service';
15-
import { NgFor, JsonPipe } from '@angular/common';
16+
import { JsonPipe, NgFor } from '@angular/common';
1617
import { RemarkableComponent } from '../remarkable/remarkable.component';
18+
import { MatGridList, MatGridTile } from '@angular/material/grid-list';
1719

1820
@Component({
1921
selector: 'app-canvas-showcase',
2022
templateUrl: './canvas-showcase.component.html',
2123
styleUrls: ['./canvas-showcase.component.scss'],
2224
providers: [GaService],
2325
changeDetection: ChangeDetectionStrategy.OnPush,
24-
imports: [RemarkableComponent, NgFor, JsonPipe],
26+
imports: [RemarkableComponent, NgFor, JsonPipe, MatGridList, MatGridTile],
2527
})
2628
export class CanvasShowcaseComponent
2729
extends BaseComponent
2830
implements OnInit, OnDestroy
2931
{
30-
public _points: Array<{ x: number; y: number }> = [];
32+
public _points = signal(<Array<{ x: number; y: number }>>[]);
3133
@ViewChild('canvas', { static: true })
3234
private _canvasRef!: ElementRef;
3335
private _canvas!: HTMLCanvasElement;
@@ -62,15 +64,10 @@ export class CanvasShowcaseComponent
6264
recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_ALL }]],
6365
});
6466

65-
// todo define a custom event source wrapper
66-
// @ts-ignore
6767
const _dragDrop$ = fromEvent(target, 'panstart').pipe(
68-
// @ts-ignore
6968
switchMap(() =>
70-
// @ts-ignore
7169
fromEvent(target, 'panmove').pipe(
7270
throttleTime(500),
73-
// @ts-ignore
7471
takeUntil(fromEvent(target, 'panend')),
7572
),
7673
),
@@ -79,10 +76,9 @@ export class CanvasShowcaseComponent
7976

8077
this._dragDropSubscription = _dragDrop$.subscribe(
8178
({ offsetX: x, offsetY: y }: PointerEvent) => {
82-
if (this._points.length > 10) {
83-
this._points = this._points.slice(1, this._points.length);
84-
}
85-
this._points.push({ x: Math.floor(x), y: Math.floor(y) });
79+
const points = this._points().slice(-9);
80+
points.push({ x: Math.floor(x), y: Math.floor(y) });
81+
this._points.set(points);
8682
this.canvasDraw.setPointOnCanvas(x, y, 255, 0, 0, 255);
8783
},
8884
);

Diff for: ‎src/app/pomodoro/pomodoro.component.html

+45-35
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,48 @@
1-
<mat-card #message class='center'>
2-
<mat-card-content>
3-
<div class='clock'>{{ (this.clock$ | async)! | pomodoroTime }}</div>
4-
<div class='note'>{{ (this.note$ | async) || '🍅' }}</div>
5-
</mat-card-content>
6-
</mat-card>
7-
<mat-card>
8-
<mat-card-title>Choose your 🍅 style</mat-card-title>
9-
<mat-card-content class='input-panel'>
10-
<div class='group'>
11-
<mat-button-toggle-group #pomodoroSequence (change)='pomodoroSequenceChanged.next($event.value)' value='five'>
12-
<mat-button-toggle value='five'>5 minutes</mat-button-toggle>
13-
<mat-button-toggle value='fib'>Fibonacci</mat-button-toggle>
14-
<mat-button-toggle value='prime'>Prime</mat-button-toggle>
15-
</mat-button-toggle-group>
16-
</div>
1+
<mat-grid-list [cols]="(isHandset$ | async) ? 1 : 2" rowHeight="400px">
172

18-
<div [class.fill-width]="(isHandset$ | async) === true" [class.narrow]="(isHandset$ | async) === false"
19-
class='group'>
20-
<mat-form-field>
21-
<mat-label>Note:</mat-label>
22-
<input #note matInput placeholder='🍅' type='text'>
23-
</mat-form-field>
24-
</div>
3+
<mat-grid-tile>
4+
<mat-card>
5+
<mat-card-content #message class="center">
6+
<div class='clock'>{{ (this.clock$ | async)! | pomodoroTime }}</div>
7+
<div class='note'>{{ (this.note$ | async) || '🍅' }}</div>
8+
</mat-card-content>
9+
</mat-card>
10+
</mat-grid-tile>
11+
12+
<mat-grid-tile>
13+
<mat-card>
14+
<mat-card-title>
15+
Choose your 🍅 style
16+
</mat-card-title>
17+
<mat-card-content class='input-panel'>
18+
<div class='group'>
19+
<mat-button-toggle-group #pomodoroSequence (change)='pomodoroSequenceChanged.next($event.value)' value='five'>
20+
<mat-button-toggle value='five'>5 minutes</mat-button-toggle>
21+
<mat-button-toggle value='fib'>Fibonacci</mat-button-toggle>
22+
<mat-button-toggle value='prime'>Prime</mat-button-toggle>
23+
</mat-button-toggle-group>
24+
</div>
2525

26-
<div class='pomodoro-picker group'>
27-
<span (click)='addPomodoro(p,note.value)'
28-
*ngFor='let p of this.selectedPomodoroSequence$ | async;'
29-
[matTooltip]="p + ' minutes'"
30-
[ngStyle]="{'font-size': (this.calcPomodoroFontSize(p)) + 'em' }">
31-
🍅
32-
</span>
33-
</div>
34-
</mat-card-content>
35-
</mat-card>
26+
<div [class.fill-width]="(isHandset$ | async) === true" [class.narrow]="(isHandset$ | async) === false"
27+
class='group'>
28+
<mat-form-field>
29+
<mat-label>Note:</mat-label>
30+
<input #note matInput placeholder='🍅' type='text'>
31+
</mat-form-field>
32+
</div>
33+
34+
<div class='pomodoro-picker group'>
35+
<span (click)='addPomodoro(p,note.value)'
36+
*ngFor='let p of this.selectedPomodoroSequence$ | async;'
37+
[matTooltip]="p + ' minutes'"
38+
[ngStyle]="{'font-size': (this.calcPomodoroFontSize(p)) + 'em' }">
39+
🍅
40+
</span>
41+
</div>
42+
</mat-card-content>
43+
</mat-card>
44+
</mat-grid-tile>
3645

37-
<mat-grid-list cols='2' rowHeight='3:1'>
3846
<mat-grid-tile>
3947
<mat-card class='pomodoro-list'>
4048
<mat-card-header>
@@ -59,7 +67,8 @@
5967
<mat-card class='pomodoro-list'>
6068
<mat-card-title>Rotten 🍅</mat-card-title>
6169
<mat-card-content>
62-
<mat-list-item *ngFor='let p of this.rottenPomodoroBasket(); first as h' class='pomodoro-list-item' role='list'>
70+
<mat-list-item *ngFor='let p of this.rottenPomodoroBasket(); first as h' class='pomodoro-list-item'
71+
role='list'>
6372
<span matLine>🍅
6473
{{ p.seconds | pomodoroTime }} -- {{ p.note }}
6574
</span>
@@ -71,4 +80,5 @@
7180
</mat-card-footer>
7281
</mat-card>
7382
</mat-grid-tile>
83+
7484
</mat-grid-list>

Diff for: ‎src/app/pomodoro/pomodoro.component.scss

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
mat-card {
2+
width: 100%;
3+
height: 100%;
4+
}
5+
16
.big-pomodoro {
27
font-size: large;
38
}
@@ -7,7 +12,6 @@
712
}
813

914
.center {
10-
//width: 50%;
1115
margin: auto;
1216

1317
.clock {
@@ -21,7 +25,6 @@
2125
}
2226
}
2327

24-
2528
.input-panel {
2629
.group {
2730
margin-top: 2em;

Diff for: ‎src/app/pomodoro/pomodoro.component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,8 @@ export class PomodoroComponent implements OnInit, OnDestroy {
155155
this.pomodoroFinishedSubscription = this.rottenPomodoro$.subscribe((p) => {
156156
this.rottenPomodoroBasket.update((value) => [p, ...value]);
157157

158-
if (this.notificationPermission === 'granted') {
158+
if (this.notificationPermission === 'granted' || true) {
159+
// todo fix this
159160
new Notification('Pomodoro Finished', {
160161
body: p.note,
161162
});

Diff for: ‎src/app/tfjs/linear-regression/tf-linear-regression.component.html

+22-12
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
1-
<div class='markdown-container'>
2-
<app-remarkable src='assets/blogs/tf-linear-regression.md'></app-remarkable>
3-
</div>
1+
<mat-grid-list cols="2" rowHeight="500px">
42

5-
<div>
6-
<app-remarkable>
7-
<pre #content>
3+
<mat-grid-tile colspan="2">
4+
<div class="markdown-container">
5+
<app-remarkable src='assets/blogs/tf-linear-regression.md'></app-remarkable>
6+
</div>
7+
8+
</mat-grid-tile>
9+
10+
<mat-grid-tile>
11+
<div>
12+
<app-remarkable>
13+
<pre #content>
814
$model: {{ model$ | async }}$
915
$cost = {{ cost$ | async }}$
10-
</pre>
11-
</app-remarkable>
12-
</div>
13-
<div>
14-
<canvas #canvas (click)='onMouseClick($event)'></canvas>
15-
</div>
16+
</pre>
17+
</app-remarkable>
18+
</div>
19+
</mat-grid-tile>
20+
21+
<mat-grid-tile>
22+
<canvas #canvas (click)='onMouseClick($event)'></canvas>
23+
</mat-grid-tile>
24+
25+
</mat-grid-list>

Diff for: ‎src/app/tfjs/linear-regression/tf-linear-regression.component.scss

-3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,3 @@ canvas {
66
border: black solid;
77
}
88

9-
div.fixed-height {
10-
height: 25px;
11-
}

Diff for: ‎src/app/tfjs/linear-regression/tf-linear-regression.component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { GaService } from '../../ga.service';
1414
import { BaseComponent } from '../../base-component';
1515
import { AsyncPipe } from '@angular/common';
1616
import { RemarkableComponent } from '../../remarkable/remarkable.component';
17+
import { MatGridList, MatGridTile } from '@angular/material/grid-list';
1718

1819
/**
1920
* Maps @param {n} within range @param {in_min} to @param {in_max} to another number in the range @param {out_min} to @param {out_max}.
@@ -39,7 +40,7 @@ const normalize = (
3940
styleUrls: ['./tf-linear-regression.component.scss'],
4041
providers: [GaService],
4142
changeDetection: ChangeDetectionStrategy.OnPush,
42-
imports: [RemarkableComponent, AsyncPipe],
43+
imports: [RemarkableComponent, AsyncPipe, MatGridList, MatGridTile],
4344
})
4445
export class TfLinearRegressionComponent
4546
extends BaseComponent

0 commit comments

Comments
 (0)