back button

2022-12-26 10:27:41 -07:00
parent c1f33f9df5
commit 3286aa9a32
5 changed files with 140 additions and 113 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
        "source-map-loader": "^0.2.4",
        "typescript": "^3.9.7",
        "webpack": "^5.66.0",
-        "webpack-cli": "^4.9.1",
+        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.7.3"
      }
    },
@@ -464,9 +464,9 @@
      }
    },
    "node_modules/@webpack-cli/configtest": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz",
-      "integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
+      "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
      "dev": true,
      "peerDependencies": {
        "webpack": "4.x.x || 5.x.x",
@@ -474,9 +474,9 @@
      }
    },
    "node_modules/@webpack-cli/info": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.0.tgz",
-      "integrity": "sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
+      "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
      "dev": true,
      "dependencies": {
        "envinfo": "^7.7.3"
@@ -486,9 +486,9 @@
      }
    },
    "node_modules/@webpack-cli/serve": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz",
-      "integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
+      "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
      "dev": true,
      "peerDependencies": {
        "webpack-cli": "4.x.x"
@@ -5708,18 +5708,18 @@
      }
    },
    "node_modules/webpack-cli": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz",
-      "integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
+      "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
      "dev": true,
      "dependencies": {
        "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.1.0",
-        "@webpack-cli/info": "^1.4.0",
-        "@webpack-cli/serve": "^1.6.0",
+        "@webpack-cli/configtest": "^1.2.0",
+        "@webpack-cli/info": "^1.5.0",
+        "@webpack-cli/serve": "^1.7.0",
        "colorette": "^2.0.14",
        "commander": "^7.0.0",
-        "execa": "^5.0.0",
+        "cross-spawn": "^7.0.3",
        "fastest-levenshtein": "^1.0.12",
        "import-local": "^3.0.2",
        "interpret": "^2.2.0",
@@ -5732,6 +5732,10 @@
      "engines": {
        "node": ">=10.13.0"
      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
      "peerDependencies": {
        "webpack": "4.x.x || 5.x.x"
      },
@@ -6499,25 +6503,25 @@
      }
    },
    "@webpack-cli/configtest": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz",
-      "integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
+      "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
      "dev": true,
      "requires": {}
    },
    "@webpack-cli/info": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.0.tgz",
-      "integrity": "sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
+      "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
      "dev": true,
      "requires": {
        "envinfo": "^7.7.3"
      }
    },
    "@webpack-cli/serve": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz",
-      "integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
+      "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
      "dev": true,
      "requires": {}
    },
@@ -10536,18 +10540,18 @@
      }
    },
    "webpack-cli": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz",
-      "integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
+      "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
      "dev": true,
      "requires": {
        "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.1.0",
-        "@webpack-cli/info": "^1.4.0",
-        "@webpack-cli/serve": "^1.6.0",
+        "@webpack-cli/configtest": "^1.2.0",
+        "@webpack-cli/info": "^1.5.0",
+        "@webpack-cli/serve": "^1.7.0",
        "colorette": "^2.0.14",
        "commander": "^7.0.0",
-        "execa": "^5.0.0",
+        "cross-spawn": "^7.0.3",
        "fastest-levenshtein": "^1.0.12",
        "import-local": "^3.0.2",
        "interpret": "^2.2.0",
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
    "source-map-loader": "^0.2.4",
    "typescript": "^3.9.7",
    "webpack": "^5.66.0",
-    "webpack-cli": "^4.9.1",
+    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.7.3"
  }
 }
--- a/site.css
+++ b/site.css
@@ -1,147 +1,165 @@
 html,
 body {
-	background-color: #fff;
-	color: #335;
-	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;
-	margin: 0;
-	padding: 0;
+    background-color: #fff;
+    color: #335;
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;
+    margin: 0;
+    padding: 0;
 }

 body {
-	overflow-x: hidden;
+    overflow-x: hidden;
 }

 body.no-scroll {
-	overflow: hidden;
+    overflow: hidden;
 }

 div {
-	box-sizing: border-box;
+    box-sizing: border-box;
 }

 h1 {
-	color: #69c;
-	cursor: pointer;
-	font-size: 45px;
-	font-weight: lighter;
-	line-height: 60px;
-	margin-bottom: 0;
-	margin-left: 30px;
-	margin-right: 30px;
-	margin-top: 30px;
+    color: #69c;
+    cursor: pointer;
+    font-size: 45px;
+    font-weight: lighter;
+    line-height: 60px;
+    margin-bottom: 0;
+    margin-left: 30px;
+    margin-right: 30px;
+    margin-top: 30px;
 }

 h2 {
-	color: #666;
-	font-size: 20px;
-	font-weight: normal;
-	line-height: 30px;
-	margin-bottom: 30px;
-	margin-left: 30px;
-	margin-right: 30px;
-	margin-top: 0px;
+    color: #666;
+    font-size: 20px;
+    font-weight: normal;
+    line-height: 30px;
+    margin-bottom: 30px;
+    margin-left: 30px;
+    margin-right: 30px;
+    margin-top: 0px;
+}
+
+a {
+    color: #69c;
+    font-size: 18px;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
 }

 .ImageSet h2 {
-	border-bottom: 1px solid #eef;
+    border-bottom: 1px solid #eef;
 }

 .Root-setCovers {
-	display: grid;
-	gap: 30px;
+    display: grid;
+    gap: 30px;
+    margin-top: 30px;
 }

 .SetCover {
-	align-items: center;
-	cursor: pointer;
-	display: flex;
-	flex-direction: column;
-	justify-content: end;
-	overflow: hidden;
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    overflow: hidden;
 }

 .ImageSet-location,
 .ImageSet-description,
 .SetCover-location,
 .SetCover-description {
-	white-space: nowrap;
+    white-space: nowrap;
 }

 .ImageSet-location:after,
 .SetCover-location:after {
-	content: " · ";
-	white-space: break-spaces;
+    content: " · ";
+    white-space: break-spaces;
 }

+.ImageSet-navigation {
+    display: flex;
+    justify-content: center;
+    margin: 30px 0;
+}
+
+
 .Grid {
-	margin-bottom: 45px;
+    margin-bottom: 45px;
 }

 .Grid-row {
-	margin: 0;
-	padding: 0;
+    margin: 0;
+    padding: 0;
 }

 .Grid img {
-	cursor: pointer;
+    cursor: pointer;
 }

 .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;
-	position: fixed;
-	right: 0;
-	top: 0;
-	z-index: 100;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.6);
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 100;
 }

 .BigPicture-footer {
-	align-self: center;
-	display: flex;
-	flex: 0 0 auto;
-	justify-content: space-between;
-	max-width: 200px;
-	width: 100%;
+    align-self: center;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: space-between;
+    max-width: 200px;
+    width: 100%;
 }

 .BigPicture-footerLink {
-	color: #69c;
-	cursor: pointer;
-	font-size: 18px;
-	text-decoration: none;
-	text-shadow: 0 0 18px rgba(0, 0, 0, .7);
+    color: #69c;
+    cursor: pointer;
+    font-size: 18px;
+    text-decoration: none;
+    text-shadow: 0 0 18px rgba(0, 0, 0, .7);
 }

 .BigPicture-footerLink:hover {
-	text-decoration: underline;
+    text-decoration: underline;
 }

@media (prefers-color-scheme: dark) {
-	html,
-	body {
-		background-color: #111;
-		color: #ccf;
-	}
+    html,
+    body {
+        background-color: #111;
+        color: #ccf;
+    }

-	.ImageSet h2 {
-		border-color: #335;
-		color: #bbb;
-	}
+    .ImageSet h2 {
+        border-color: #335;
+        color: #bbb;
+    }
 }

@media (min-width: 900px) {
-	.Root-setCovers {
-		grid-template-columns: 1fr 1fr;
-	}
+    .Root-setCovers {
+        grid-template-columns: 1fr 1fr;
+    }
 }

@media (min-width: 1400px) {
-	.Root-setCovers {
-		grid-template-columns: 1fr 1fr 1fr;
-	}
+    .Root-setCovers {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
 }
--- a/src/components/image_set.tsx
+++ b/src/components/image_set.tsx
@@ -6,6 +6,7 @@ import * as React from "react";
 export interface Props {
  imageSet: Model.ImageSet;
  onImageSelected: (img: Model.Image) => void;
+  onShowHome: () => void;
  setGridHeight: (height: number) => void;
  pageBottom: number;
  width: number;
@@ -35,6 +36,9 @@ export class ImageSet extends React.PureComponent<Props, {}> {
          width={this.props.width}
          height={this.props.height}
        />
+        <div className="ImageSet-navigation">
+          <a href="#" onClick={this.props.onShowHome}>Back</a>
+        </div>
      </div>
    );
  }
--- a/src/components/root.tsx
+++ b/src/components/root.tsx
@@ -75,6 +75,7 @@ export class Root extends React.PureComponent<Props, State> {
        pageBottom={this.state.pageBottom}
        setGridHeight={this._setGridHeight(0)}
        onImageSelected={this._onImageSelected}
+        onShowHome={this._onHomeSelected}
        width={this.state.width}
        height={this.state.height}
      />