diff --git a/packages/gallery/README.md b/packages/gallery/README.md index b021765..e5ab4b4 100644 --- a/packages/gallery/README.md +++ b/packages/gallery/README.md @@ -1 +1,32 @@ # Gallery + +This photo gallery originally stemmed from my personal desire to have and host my own memories for +myself and to share with friends and family. Along the way it became a learning tool as well. + +## Development Philosophy + +Currently this is a browser-only application. I have an idealistic attraction to the +[unhosted](https://unhosted.org/) movement and have dreams of this gallery becoming a popular photo +gallery for anyone who wishes to escape the social media silos. + +## Technology + +This would not be possible without the giants who have laid the foundation: + +* [Webpack](http://webpack.js.org/) +* [DOMVM](http://leeoniya.github.io/domvm/) +* [PouchDB](https://pouchdb.com/) + +There are many more dependencies. You can find them in the [package.json](./package.json) file. + +## Plan + +In the future, I plan to add: + +* CORS-based storage (to s3 or Google Cloud) +* Sandstorm support +* client-side encryption +* albums +* tags +* sharable links +* video support diff --git a/packages/gallery/package.json b/packages/gallery/package.json index 3c9f422..7f238af 100644 --- a/packages/gallery/package.json +++ b/packages/gallery/package.json @@ -8,7 +8,6 @@ "author": "Timothy Farrell (https://github.com/explorigin)", "license": "Apache-2.0", "scripts": { - "start": "webpack --config webpack.config.js", "dev": "webpack-dev-server" }, "dependencies": { diff --git a/packages/gallery/src/app.css b/packages/gallery/src/app.css index 023aa9c..43c7f97 100644 --- a/packages/gallery/src/app.css +++ b/packages/gallery/src/app.css @@ -12,3 +12,29 @@ body { display: flex; flex-direction: column; } + +/* http://tholman.com/github-corners/ */ +.github-corner:hover .octo-arm{ + animation:octocat-wave 560ms ease-in-out +} + +@keyframes octocat-wave{ + 0%,100% { + transform:rotate(0) + } + 20%,60% { + transform:rotate(-25deg) + } + 40%,80% { + transform:rotate(10deg) + } +} + +@media (max-width:500px){ + .github-corner:hover .octo-arm{ + animation:none + } + .github-corner .octo-arm{ + animation:octocat-wave 560ms ease-in-out + } +} diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js index 9d56c46..b9c5220 100644 --- a/packages/gallery/src/interface/allImages.js +++ b/packages/gallery/src/interface/allImages.js @@ -15,6 +15,7 @@ import { ImageType } from '../data/image.js'; import { pouchDocArrayHash, pouchDocHash, hashSet, extractID } from '../utils/conversion.js'; import { SectionView } from './sectionView.js'; import { Icon } from './components/icon.js'; +import { GithubCorner } from './components/githubCorner.js'; import { AppBar } from './components/appbar.js'; import { Overlay } from './components/overlay.js'; import { injectStyle, styled } from '../services/style.js'; @@ -41,6 +42,8 @@ export function AllImagesView(vm, params) { const appBarTitle = computed(s => (s.size > 0 ? `${s.size} selected` : 'Photos'), [selectedIds]); const appBarStyle = computed( t => ({ + width: 'inherit', + marginRight: '40px', boxShadow: t === 0 ? 'none' : `0px 3px 3px rgba(0, 0, 0, .2)` }), [containerScrollTop] @@ -244,7 +247,8 @@ export function AllImagesView(vm, params) { ] ) ] - ) + ), + GithubCorner('https://github.com/explorigin/portfolio/tree/master/packages/gallery') ] ); }; diff --git a/packages/gallery/src/interface/components/githubCorner.js b/packages/gallery/src/interface/components/githubCorner.js new file mode 100644 index 0000000..998df34 --- /dev/null +++ b/packages/gallery/src/interface/components/githubCorner.js @@ -0,0 +1,54 @@ +import { defineElement as el, defineSvgElement as sv } from '../../utils/domvm.js'; + +export function GithubCorner(href) { + return el( + 'a.github-corner', + { + href, + 'aria-label': 'View source on Github' + }, + [ + sv( + 'svg', + { + width: 80, + height: 80, + viewBox: '0 0 250 250', + style: { + fill: '#151513', + color: '#fff', + position: 'absolute', + top: 0, + border: 0, + right: 0, + transform: 'scale(0.7, 0.7)', + marginTop: '-13px', + marginRight: '-13px' + }, + ariaHidden: true + }, + [ + sv('path', { + d: 'M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z' + }), + sv('path.octo-arm', { + d: + 'M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2', + fill: 'currentColor', + style: { + transformOrigin: '130px 106px' + } + }), + sv('path.octo-body', { + d: + 'M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z', + fill: 'currentColor', + style: { + transformOrigin: '130px 106px' + } + }) + ] + ) + ] + ); +}