Improvements

- Use Picture component for focus view
	- remove hover animation
	- bigger rows
	- avoid dangling, too-tall images
	- update node modules

src/components/big_picture.tsx

@@ -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

src/components/grid.tsx

@@ -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}
           />

src/components/image_set.tsx

@@ -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>
     );

src/components/picture.tsx

@@ -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>

src/components/root.tsx

@@ -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(),
     });
   };