aaron/ski
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improvements

Browse Source 
- Use Picture component for focus view
	- remove hover animation
	- bigger rows
	- avoid dangling, too-tall images
	- update node modules
This commit is contained in:
Aaron Gutierrez
2022-01-19 18:32:40 -07:00
parent e8b14c52c9
commit d96d63da8e
11 changed files with 7216 additions and 2492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -8,6 +8,6 @@
</head>
<body>
<div id="mount"><noscript>I don't like javascript, either.</noscript></div>
<script type="text/javascript" src="dist/bundle.js"></script>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

9603
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -22,10 +22,11 @@
},
"devDependencies": {
"awesome-typescript-loader": "^5.2.1",
"esbuild": "^0.8.50",
"source-map-loader": "^0.2.4",
"typescript": "^3.9.7",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
"webpack": "^5.66.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.3"
}
}

29
site.css
View File

@@ -35,6 +35,16 @@ h2 {
border-bottom: 1px solid #eef;
}
.ImageSet-location,
.ImageSet-description {
white-space: nowrap;
}
.ImageSet-location:after {
content: " · ";
white-space: break-spaces;
}
.Grid {
margin-bottom: 45px;
}
@@ -46,42 +56,27 @@ h2 {
.Grid img {
cursor: pointer;
transition-duration: .05s;
transition-property: transform, box-shadow;
transition-timing-function: ease-out;
}
.Grid img:hover {
box-shadow: 1px 2px 5px rgba(0, 0, 0, .7);
transform: scale(1.2);
}
.BigPicture {
align-items: center;
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
left: 0;
padding: 30px;
position: fixed;
right: 0;
top: 0;
z-index: 100;
}
.BigPicture-image {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
flex: 1 1 auto;
}
.BigPicture-footer {
align-self: center;
display: flex;
flex: 0 0 auto;
justify-content: space-between;
margin-top: 30px;
max-width: 200px;
width: 100%;
}

17
src/components/big_picture.tsx
View File

@@ -1,4 +1,5 @@
import * as Model from "../model";
import { Picture } from "./picture";
import * as React from "react";
@@ -6,6 +7,7 @@ export interface Props {
image: Model.Image;
onClose: () => void;
width: number;
height: number;
}
export class BigPicture extends React.PureComponent<Props, {}> {
@@ -20,14 +22,17 @@ export class BigPicture extends React.PureComponent<Props, {}> {
}
render() {
const src = `img/1600/${this.props.image.src}`;
const scaleWidth = this.props.image.width / this.props.width;
const scaleHeight = this.props.image.height / (this.props.height - 80);
const scale = Math.max(scaleWidth, scaleHeight);
return (
<div className="BigPicture">
<div
className="BigPicture-image"
style={{
backgroundImage: `url(${src})`
}}
<Picture
image={this.props.image}
onClick={() => {}}
height={this.props.image.height / scale}
width={this.props.image.width / scale}
/>
<div className="BigPicture-footer">
<a

8
src/components/grid.tsx
View File

@@ -8,10 +8,11 @@ export interface Props {
onImageSelected: (image: Model.Image) => void;
pageBottom: number;
width: number;
height: number;
}
export const ROW_HEIGHT = 200;
export const MOBILE_ROW_HEIGHT = 100;
export const ROW_HEIGHT = 250;
export const MOBILE_ROW_HEIGHT = 150;
interface Row {
images: Model.Image[];
@@ -53,7 +54,7 @@ export class Grid extends React.PureComponent<Props, {}> {
});
const images = rows.map(row => {
const height = this.props.width / row.width;
const height = Math.min(this.props.height, this.props.width / row.width);
const pics = row.images.map(image => {
return (
@@ -61,6 +62,7 @@ export class Grid extends React.PureComponent<Props, {}> {
image={image}
onClick={() => this.props.onImageSelected(image)}
key={image.src}
height={height}
width={(image.width / image.height) * height}
defer={this.gridHeight > this.props.pageBottom}
/>

5
src/components/image_set.tsx
View File

@@ -9,6 +9,7 @@ export interface Props {
setGridHeight: (height: number) => void;
pageBottom: number;
width: number;
height: number;
}
export class ImageSet extends React.PureComponent<Props, {}> {
@@ -20,13 +21,15 @@ export class ImageSet extends React.PureComponent<Props, {}> {
return (
<div className="ImageSet" ref={this.divRef}>
<h2>
{this.props.imageSet.location} · {this.props.imageSet.description}
<span className="ImageSet-location">{this.props.imageSet.location}</span>
<span className="ImageSet-description">{this.props.imageSet.description}</span>
</h2>
<Grid
images={this.props.imageSet.images}
onImageSelected={this.props.onImageSelected}
pageBottom={this.props.pageBottom}
width={this.props.width}
height={this.props.height}
/>
</div>
);

3
src/components/picture.tsx
View File

@@ -5,6 +5,7 @@ import * as React from "react";
export interface Props {
image: Model.Image;
onClick: () => void;
height: number;
width: number;
defer?: boolean;
}
@@ -47,8 +48,10 @@ export class Picture extends React.PureComponent<Props, State> {
<source srcSet={srcSet.webp} type="image/webp" />
<source srcSet={srcSet.jpeg} type="image/jpeg" />
<img
id={this.props.image.src}
onClick={this.props.onClick}
src={srcSet.bestSrc}
height={this.props.height + "px"}
width={this.props.width + "px"}
/>
</picture>

23
src/components/root.tsx
View File

@@ -12,6 +12,7 @@ export interface State {
gridHeights: number[];
pageBottom: number;
width: number;
height: number;
}
export class Root extends React.PureComponent<Props, State> {
@@ -31,11 +32,24 @@ export class Root extends React.PureComponent<Props, State> {
document.getElementById("mount")!.clientWidth
);
};
private _viewHeight = (): number => {
// iOS Safari does not set outerWidth/outerHeight
if (!window.outerHeight) {
return window.innerHeight;
}
return Math.min(
window.innerHeight,
window.outerHeight,
document.body.clientHeight
);
};
state: State = {
gridHeights: [],
pageBottom: window.innerHeight + window.pageYOffset,
width: this._viewWidth()
width: this._viewWidth(),
height: this._viewHeight()
};
componentDidMount() {
@@ -65,6 +79,7 @@ export class Root extends React.PureComponent<Props, State> {
setGridHeight={this._setGridHeight(idx)}
onImageSelected={this._onImageSelected}
width={this.state.width}
height={this.state.height}
/>
))
: null;
@@ -72,7 +87,7 @@ export class Root extends React.PureComponent<Props, State> {
return (
<div className="Root">
{this._bigPicture()}
<h1>Ski</h1>
<h1>Aaron's Ski Pictures</h1>
{imageSets}
</div>
);
@@ -84,6 +99,7 @@ export class Root extends React.PureComponent<Props, State> {
image={this.state.selectedImage}
onClose={this._showGrid}
width={this.state.width}
height={this.state.height}
/>
) : null;
@@ -108,7 +124,8 @@ export class Root extends React.PureComponent<Props, State> {
private _onViewChange = () => {
this.setState({
pageBottom: window.innerHeight + window.pageYOffset,
width: this._viewWidth()
width: this._viewWidth(),
height: this._viewHeight(),
});
};

2
template.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Skiing - Aaron Gutierrez</title>
<title>Skiing – Aaron Gutierrez</title>
<link rel="stylesheet" href="{0}">
<meta charshet="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

9
webpack.config.js
View File

@@ -7,16 +7,21 @@ module.exports = (env) => {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
path: path.join(__dirname, "dist")
},
mode: mode,
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
performance: {
hints: false
},
devServer: {
publicPath: "/dist/",
static: {
directory: __dirname,
},
port: 8080
},