Skip to content

Commit d96d63d

Browse files
aarongutaarongut
committed
Improvements
 - Use Picture component for focus view - remove hover animation - bigger rows - avoid dangling, too-tall images - update node modules
1 parent e8b14c5 commit d96d63d

11 files changed

+7230
-2506
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
</head>
99
<body>
1010
<div id="mount"><noscript>I don't like javascript, either.</noscript></div>
11-
<script type="text/javascript" src="dist/bundle.js"></script>
11+
<script type="text/javascript" src="bundle.js"></script>
1212
</body>
1313
</html>

‎package-lock.json

+7,162-2,469
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,11 @@
2222
},
2323
"devDependencies": {
2424
"awesome-typescript-loader": "^5.2.1",
25+
"esbuild": "^0.8.50",
2526
"source-map-loader": "^0.2.4",
2627
"typescript": "^3.9.7",
27-
"webpack": "^4.44.2",
28-
"webpack-cli": "^3.3.12",
29-
"webpack-dev-server": "^3.11.0"
28+
"webpack": "^5.66.0",
29+
"webpack-cli": "^4.9.1",
30+
"webpack-dev-server": "^4.7.3"
3031
}
3132
}

‎site.css

+12-17
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@ h2 {
3535
border-bottom: 1px solid #eef;
3636
}
3737

38+
.ImageSet-location,
39+
.ImageSet-description {
40+
white-space: nowrap;
41+
}
42+
43+
.ImageSet-location:after {
44+
content: " · ";
45+
white-space: break-spaces;
46+
}
47+
3848
.Grid {
3949
margin-bottom: 45px;
4050
}
@@ -46,42 +56,27 @@ h2 {
4656

4757
.Grid img {
4858
cursor: pointer;
49-
transition-duration: .05s;
50-
transition-property: transform, box-shadow;
51-
transition-timing-function: ease-out;
52-
}
53-
54-
.Grid img:hover {
55-
box-shadow: 1px 2px 5px rgba(0, 0, 0, .7);
56-
transform: scale(1.2);
5759
}
5860

5961
.BigPicture {
62+
align-items: center;
6063
background-color: rgba(0, 0, 0, 0.6);
6164
bottom: 0;
6265
display: flex;
6366
flex-direction: column;
67+
justify-content: space-evenly;
6468
left: 0;
65-
padding: 30px;
6669
position: fixed;
6770
right: 0;
6871
top: 0;
6972
z-index: 100;
7073
}
7174

72-
.BigPicture-image {
73-
background-position: center;
74-
background-repeat: no-repeat;
75-
background-size: contain;
76-
flex: 1 1 auto;
77-
}
78-
7975
.BigPicture-footer {
8076
align-self: center;
8177
display: flex;
8278
flex: 0 0 auto;
8379
justify-content: space-between;
84-
margin-top: 30px;
8580
max-width: 200px;
8681
width: 100%;
8782
}

‎src/components/big_picture.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import * as Model from "../model";
2+
import { Picture } from "./picture";
23

34
import * as React from "react";
45

56
export interface Props {
67
image: Model.Image;
78
onClose: () => void;
89
width: number;
10+
height: number;
911
}
1012

1113
export class BigPicture extends React.PureComponent<Props, {}> {
@@ -20,14 +22,17 @@ export class BigPicture extends React.PureComponent<Props, {}> {
2022
}
2123

2224
render() {
23-
const src = `img/1600/${this.props.image.src}`;
25+
const scaleWidth = this.props.image.width / this.props.width;
26+
const scaleHeight = this.props.image.height / (this.props.height - 80);
27+
const scale = Math.max(scaleWidth, scaleHeight);
28+
2429
return (
2530
<div className="BigPicture">
26-
<div
27-
className="BigPicture-image"
28-
style={{
29-
backgroundImage: `url(${src})`
30-
}}
31+
<Picture
32+
image={this.props.image}
33+
onClick={() => {}}
34+
height={this.props.image.height / scale}
35+
width={this.props.image.width / scale}
3136
/>
3237
<div className="BigPicture-footer">
3338
<a

‎src/components/grid.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ export interface Props {
88
onImageSelected: (image: Model.Image) => void;
99
pageBottom: number;
1010
width: number;
11+
height: number;
1112
}
1213

13-
export const ROW_HEIGHT = 200;
14-
export const MOBILE_ROW_HEIGHT = 100;
14+
export const ROW_HEIGHT = 250;
15+
export const MOBILE_ROW_HEIGHT = 150;
1516

1617
interface Row {
1718
images: Model.Image[];
@@ -53,14 +54,15 @@ export class Grid extends React.PureComponent<Props, {}> {
5354
});
5455

5556
const images = rows.map(row => {
56-
const height = this.props.width / row.width;
57+
const height = Math.min(this.props.height, this.props.width / row.width);
5758

5859
const pics = row.images.map(image => {
5960
return (
6061
<Picture
6162
image={image}
6263
onClick={() => this.props.onImageSelected(image)}
6364
key={image.src}
65+
height={height}
6466
width={(image.width / image.height) * height}
6567
defer={this.gridHeight > this.props.pageBottom}
6668
/>

‎src/components/image_set.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface Props {
99
setGridHeight: (height: number) => void;
1010
pageBottom: number;
1111
width: number;
12+
height: number;
1213
}
1314

1415
export class ImageSet extends React.PureComponent<Props, {}> {
@@ -20,13 +21,15 @@ export class ImageSet extends React.PureComponent<Props, {}> {
2021
return (
2122
<div className="ImageSet" ref={this.divRef}>
2223
<h2>
23-
{this.props.imageSet.location} · {this.props.imageSet.description}
24+
<span className="ImageSet-location">{this.props.imageSet.location}</span>
25+
<span className="ImageSet-description">{this.props.imageSet.description}</span>
2426
</h2>
2527
<Grid
2628
images={this.props.imageSet.images}
2729
onImageSelected={this.props.onImageSelected}
2830
pageBottom={this.props.pageBottom}
2931
width={this.props.width}
32+
height={this.props.height}
3033
/>
3134
</div>
3235
);

‎src/components/picture.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import * as React from "react";
55
export interface Props {
66
image: Model.Image;
77
onClick: () => void;
8+
height: number;
89
width: number;
910
defer?: boolean;
1011
}
@@ -47,8 +48,10 @@ export class Picture extends React.PureComponent<Props, State> {
4748
<source srcSet={srcSet.webp} type="image/webp" />
4849
<source srcSet={srcSet.jpeg} type="image/jpeg" />
4950
<img
51+
id={this.props.image.src}
5052
onClick={this.props.onClick}
5153
src={srcSet.bestSrc}
54+
height={this.props.height + "px"}
5255
width={this.props.width + "px"}
5356
/>
5457
</picture>

‎src/components/root.tsx

+20-3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export interface State {
1212
gridHeights: number[];
1313
pageBottom: number;
1414
width: number;
15+
height: number;
1516
}
1617

1718
export class Root extends React.PureComponent<Props, State> {
@@ -31,11 +32,24 @@ export class Root extends React.PureComponent<Props, State> {
3132
document.getElementById("mount")!.clientWidth
3233
);
3334
};
35+
private _viewHeight = (): number => {
36+
// iOS Safari does not set outerWidth/outerHeight
37+
if (!window.outerHeight) {
38+
return window.innerHeight;
39+
}
40+
41+
return Math.min(
42+
window.innerHeight,
43+
window.outerHeight,
44+
document.body.clientHeight
45+
);
46+
};
3447

3548
state: State = {
3649
gridHeights: [],
3750
pageBottom: window.innerHeight + window.pageYOffset,
38-
width: this._viewWidth()
51+
width: this._viewWidth(),
52+
height: this._viewHeight()
3953
};
4054

4155
componentDidMount() {
@@ -65,14 +79,15 @@ export class Root extends React.PureComponent<Props, State> {
6579
setGridHeight={this._setGridHeight(idx)}
6680
onImageSelected={this._onImageSelected}
6781
width={this.state.width}
82+
height={this.state.height}
6883
/>
6984
))
7085
: null;
7186

7287
return (
7388
<div className="Root">
7489
{this._bigPicture()}
75-
<h1>Ski</h1>
90+
<h1>Aaron's Ski Pictures</h1>
7691
{imageSets}
7792
</div>
7893
);
@@ -84,6 +99,7 @@ export class Root extends React.PureComponent<Props, State> {
8499
image={this.state.selectedImage}
85100
onClose={this._showGrid}
86101
width={this.state.width}
102+
height={this.state.height}
87103
/>
88104
) : null;
89105

@@ -108,7 +124,8 @@ export class Root extends React.PureComponent<Props, State> {
108124
private _onViewChange = () => {
109125
this.setState({
110126
pageBottom: window.innerHeight + window.pageYOffset,
111-
width: this._viewWidth()
127+
width: this._viewWidth(),
128+
height: this._viewHeight(),
112129
});
113130
};
114131

‎template.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en-US">
33
<head>
4-
<title>Skiing - Aaron Gutierrez</title>
4+
<title>Skiing – Aaron Gutierrez</title>
55
<link rel="stylesheet" href="{0}">
66
<meta charshet="utf-8">
77
<meta name="viewport" content="width=device-width, initial-scale=1">

‎webpack.config.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,21 @@ module.exports = (env) => {
77
entry: "./src/index.tsx",
88
output: {
99
filename: "bundle.js",
10-
path: __dirname + "/dist"
10+
path: path.join(__dirname, "dist")
1111
},
1212

1313
mode: mode,
1414

1515
// Enable sourcemaps for debugging webpack's output.
1616
devtool: "source-map",
17+
performance: {
18+
hints: false
19+
},
1720

1821
devServer: {
19-
publicPath: "/dist/",
22+
static: {
23+
directory: __dirname,
24+
},
2025
port: 8080
2126
},
2227

0 commit comments

Comments
 (0)