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

back button

Browse Source
This commit is contained in:
Aaron Gutierrez
2022-12-26 10:27:41 -07:00
parent c1f33f9df5
commit 3286aa9a32
5 changed files with 140 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
package-lock.json generated
View File

@@ -20,7 +20,7 @@
"source-map-loader": "^0.2.4", "source-map-loader": "^0.2.4",
"typescript": "^3.9.7", "typescript": "^3.9.7",
"webpack": "^5.66.0", "webpack": "^5.66.0",
"webpack-cli": "^4.9.1", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.7.3" "webpack-dev-server": "^4.7.3"
} }
}, },
@@ -464,9 +464,9 @@
} }
}, },
"node_modules/@webpack-cli/configtest": { "node_modules/@webpack-cli/configtest": {
"version": "1.1.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
"integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==", "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
"dev": true, "dev": true,
"peerDependencies": { "peerDependencies": {
"webpack": "4.x.x || 5.x.x", "webpack": "4.x.x || 5.x.x",
@@ -474,9 +474,9 @@
} }
}, },
"node_modules/@webpack-cli/info": { "node_modules/@webpack-cli/info": {
"version": "1.4.0", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.0.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
"integrity": "sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==", "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"envinfo": "^7.7.3" "envinfo": "^7.7.3"
@@ -486,9 +486,9 @@
} }
}, },
"node_modules/@webpack-cli/serve": { "node_modules/@webpack-cli/serve": {
"version": "1.6.0", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
"integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==", "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
"dev": true, "dev": true,
"peerDependencies": { "peerDependencies": {
"webpack-cli": "4.x.x" "webpack-cli": "4.x.x"
@@ -5708,18 +5708,18 @@
} }
}, },
"node_modules/webpack-cli": { "node_modules/webpack-cli": {
"version": "4.9.1", "version": "4.10.0",
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz", "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
"integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==", "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@discoveryjs/json-ext": "^0.5.0", "@discoveryjs/json-ext": "^0.5.0",
"@webpack-cli/configtest": "^1.1.0", "@webpack-cli/configtest": "^1.2.0",
"@webpack-cli/info": "^1.4.0", "@webpack-cli/info": "^1.5.0",
"@webpack-cli/serve": "^1.6.0", "@webpack-cli/serve": "^1.7.0",
"colorette": "^2.0.14", "colorette": "^2.0.14",
"commander": "^7.0.0", "commander": "^7.0.0",
"execa": "^5.0.0", "cross-spawn": "^7.0.3",
"fastest-levenshtein": "^1.0.12", "fastest-levenshtein": "^1.0.12",
"import-local": "^3.0.2", "import-local": "^3.0.2",
"interpret": "^2.2.0", "interpret": "^2.2.0",
@@ -5732,6 +5732,10 @@
"engines": { "engines": {
"node": ">=10.13.0" "node": ">=10.13.0"
}, },
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": { "peerDependencies": {
"webpack": "4.x.x || 5.x.x" "webpack": "4.x.x || 5.x.x"
}, },
@@ -6499,25 +6503,25 @@
} }
}, },
"@webpack-cli/configtest": { "@webpack-cli/configtest": {
"version": "1.1.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
"integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==", "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
"dev": true, "dev": true,
"requires": {} "requires": {}
}, },
"@webpack-cli/info": { "@webpack-cli/info": {
"version": "1.4.0", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.0.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
"integrity": "sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==", "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"envinfo": "^7.7.3" "envinfo": "^7.7.3"
} }
}, },
"@webpack-cli/serve": { "@webpack-cli/serve": {
"version": "1.6.0", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
"integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==", "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
"dev": true, "dev": true,
"requires": {} "requires": {}
}, },
@@ -10536,18 +10540,18 @@
} }
}, },
"webpack-cli": { "webpack-cli": {
"version": "4.9.1", "version": "4.10.0",
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz", "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
"integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==", "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
"dev": true, "dev": true,
"requires": { "requires": {
"@discoveryjs/json-ext": "^0.5.0", "@discoveryjs/json-ext": "^0.5.0",
"@webpack-cli/configtest": "^1.1.0", "@webpack-cli/configtest": "^1.2.0",
"@webpack-cli/info": "^1.4.0", "@webpack-cli/info": "^1.5.0",
"@webpack-cli/serve": "^1.6.0", "@webpack-cli/serve": "^1.7.0",
"colorette": "^2.0.14", "colorette": "^2.0.14",
"commander": "^7.0.0", "commander": "^7.0.0",
"execa": "^5.0.0", "cross-spawn": "^7.0.3",
"fastest-levenshtein": "^1.0.12", "fastest-levenshtein": "^1.0.12",
"import-local": "^3.0.2", "import-local": "^3.0.2",
"interpret": "^2.2.0", "interpret": "^2.2.0",

2
package.json
View File

@@ -26,7 +26,7 @@
"source-map-loader": "^0.2.4", "source-map-loader": "^0.2.4",
"typescript": "^3.9.7", "typescript": "^3.9.7",
"webpack": "^5.66.0", "webpack": "^5.66.0",
"webpack-cli": "^4.9.1", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.7.3" "webpack-dev-server": "^4.7.3"
} }
} }

176
site.css
View File

@@ -1,147 +1,165 @@
html, html,
body { body {
background-color: #fff; background-color: #fff;
color: #335; color: #335;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
overflow-x: hidden; overflow-x: hidden;
} }
body.no-scroll { body.no-scroll {
overflow: hidden; overflow: hidden;
} }
div { div {
box-sizing: border-box; box-sizing: border-box;
} }
h1 { h1 {
color: #69c; color: #69c;
cursor: pointer; cursor: pointer;
font-size: 45px; font-size: 45px;
font-weight: lighter; font-weight: lighter;
line-height: 60px; line-height: 60px;
margin-bottom: 0; margin-bottom: 0;
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
margin-top: 30px; margin-top: 30px;
} }
h2 { h2 {
color: #666; color: #666;
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
line-height: 30px; line-height: 30px;
margin-bottom: 30px; margin-bottom: 30px;
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
margin-top: 0px; margin-top: 0px;
}
a {
color: #69c;
font-size: 18px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
} }
.ImageSet h2 { .ImageSet h2 {
border-bottom: 1px solid #eef; border-bottom: 1px solid #eef;
} }
.Root-setCovers { .Root-setCovers {
display: grid; display: grid;
gap: 30px; gap: 30px;
margin-top: 30px;
} }
.SetCover { .SetCover {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: end; justify-content: end;
overflow: hidden; overflow: hidden;
} }
.ImageSet-location, .ImageSet-location,
.ImageSet-description, .ImageSet-description,
.SetCover-location, .SetCover-location,
.SetCover-description { .SetCover-description {
white-space: nowrap; white-space: nowrap;
} }
.ImageSet-location:after, .ImageSet-location:after,
.SetCover-location:after { .SetCover-location:after {
content: " · "; content: " · ";
white-space: break-spaces; white-space: break-spaces;
} }
.ImageSet-navigation {
display: flex;
justify-content: center;
margin: 30px 0;
}
.Grid { .Grid {
margin-bottom: 45px; margin-bottom: 45px;
} }
.Grid-row { .Grid-row {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.Grid img { .Grid img {
cursor: pointer; cursor: pointer;
} }
.BigPicture { .BigPicture {
align-items: center; align-items: center;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
bottom: 0; bottom: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 100; z-index: 100;
} }
.BigPicture-footer { .BigPicture-footer {
align-self: center; align-self: center;
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
justify-content: space-between; justify-content: space-between;
max-width: 200px; max-width: 200px;
width: 100%; width: 100%;
} }
.BigPicture-footerLink { .BigPicture-footerLink {
color: #69c; color: #69c;
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
text-decoration: none; text-decoration: none;
text-shadow: 0 0 18px rgba(0, 0, 0, .7); text-shadow: 0 0 18px rgba(0, 0, 0, .7);
} }
.BigPicture-footerLink:hover { .BigPicture-footerLink:hover {
text-decoration: underline; text-decoration: underline;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html, html,
body { body {
background-color: #111; background-color: #111;
color: #ccf; color: #ccf;
} }
.ImageSet h2 { .ImageSet h2 {
border-color: #335; border-color: #335;
color: #bbb; color: #bbb;
} }
} }
@media (min-width: 900px) { @media (min-width: 900px) {
.Root-setCovers { .Root-setCovers {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
.Root-setCovers { .Root-setCovers {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
} }

4
src/components/image_set.tsx
View File

@@ -6,6 +6,7 @@ import * as React from "react";
export interface Props { export interface Props {
imageSet: Model.ImageSet; imageSet: Model.ImageSet;
onImageSelected: (img: Model.Image) => void; onImageSelected: (img: Model.Image) => void;
onShowHome: () => void;
setGridHeight: (height: number) => void; setGridHeight: (height: number) => void;
pageBottom: number; pageBottom: number;
width: number; width: number;
@@ -35,6 +36,9 @@ export class ImageSet extends React.PureComponent<Props, {}> {
width={this.props.width} width={this.props.width}
height={this.props.height} height={this.props.height}
/> />
<div className="ImageSet-navigation">
<a href="#" onClick={this.props.onShowHome}>Back</a>
</div>
</div> </div>
); );
} }

1
src/components/root.tsx
View File

@@ -75,6 +75,7 @@ export class Root extends React.PureComponent<Props, State> {
pageBottom={this.state.pageBottom} pageBottom={this.state.pageBottom}
setGridHeight={this._setGridHeight(0)} setGridHeight={this._setGridHeight(0)}
onImageSelected={this._onImageSelected} onImageSelected={this._onImageSelected}
onShowHome={this._onHomeSelected}
width={this.state.width} width={this.state.width}
height={this.state.height} height={this.state.height}
/> />