diff --git a/frontend/src/Photos/Overview.scss b/frontend/src/Photos/Overview.scss index bdcbe6c..c6e9490 100644 --- a/frontend/src/Photos/Overview.scss +++ b/frontend/src/Photos/Overview.scss @@ -14,7 +14,12 @@ display: flex; align-items: center; justify-content: center; - box-shadow: $pt-elevation-shadow-4; + + img { + box-shadow: $pt-elevation-shadow-4; + } + + transition: transform 0.3s; } #photoOverlayDrawer { @@ -29,7 +34,7 @@ padding: 1rem; background-color: $light-gray5; box-shadow: $pt-elevation-shadow-4; - transition: transform 0.5s; + transition: transform 0.3s; } } @@ -37,6 +42,10 @@ .bp3-overlay-appear { opacity: 0; + #photo { + transform: scale(0.95, 0.95); + } + #photoOverlayDrawer { transform: translate(10rem); } @@ -46,6 +55,10 @@ .bp3-overlay-appear-active { opacity: 1; + #photo { + transform: scale(1, 1); + } + #photoOverlayDrawer { transform: translate(0rem); } @@ -55,6 +68,10 @@ .bp3-overlay-exit { opacity: 1; + #photo { + transform: scale(1, 1); + } + #photoOverlayDrawer { transform: translate(0rem); } @@ -63,9 +80,12 @@ .bp3-overlay-exit-active { opacity: 0; + #photo { + transform: scale(0.95, 0.95); + } + #photoOverlayDrawer { transform: translate(10rem); - } } diff --git a/frontend/src/Photos/Overview.tsx b/frontend/src/Photos/Overview.tsx index b172882..b5b4f5f 100644 --- a/frontend/src/Photos/Overview.tsx +++ b/frontend/src/Photos/Overview.tsx @@ -10,6 +10,7 @@ import { PhotoCard } from "./PhotoCard"; import { Button, Classes, Overlay, Spinner } from "@blueprintjs/core"; import { UploadButton } from "./UploadButton"; import { Photo } from "./Photo"; +import { getPhotoThumbPath } from "~redux/api/photos"; export interface IOverviewComponentProps { photos: IPhotoReqJSON[]; @@ -71,7 +72,7 @@ export const OverviewComponent: React.FunctionComponent onClose={() => { setOverlayOpen(false); }} - transitionDuration={500} + transitionDuration={300} lazy >
diff --git a/frontend/src/Photos/PhotoCard.tsx b/frontend/src/Photos/PhotoCard.tsx index d520967..86f3cb5 100644 --- a/frontend/src/Photos/PhotoCard.tsx +++ b/frontend/src/Photos/PhotoCard.tsx @@ -45,6 +45,12 @@ export class PhotoCardComponent extends React.PureComponent< */ public render(): JSX.Element { const fileExists = this.props.photo.uploaded; + + const preloadImage = (url: string) => { + const img = new Image(); + img.src = url; + }; + return ( + preloadImage( + getPhotoThumbPath(this.props.photo, 2048), + ) + } > ) : (