From e6ffc853e379f1d130e83dc7e93df55c8017c766 Mon Sep 17 00:00:00 2001 From: Toni Melisma Date: Mon, 12 Oct 2020 00:20:22 +0300 Subject: [PATCH] Frontend mockup part-way done --- README.md | 5 +- web/gogallery.css | 114 ++++++++++++++++++++++++++++++++++++ web/index.html | 144 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 260 insertions(+), 3 deletions(-) create mode 100644 web/gogallery.css create mode 100644 web/index.html diff --git a/README.md b/README.md index 405d91b..e820637 100644 --- a/README.md +++ b/README.md @@ -27,9 +27,6 @@ Image and video format support will depend on the support compiled in these libr Before 0.1 Alpha release, still to do: - Convert thumbnail and full-size pictures - Add triangle overlay on video thumbnails to indicate video -- HTML templates -- CSS -- Rudimentary lightbox JS - Clean up half-finished thumbnail/fullsize/symlink if program is halted midway - Use all of thumb/full/symlink in detecting changes required @@ -39,6 +36,8 @@ Before 0.1 Beta release: - Create unit tests (blargh) - Packaging for Ubuntu - Set up Ubuntu repository (Github? PPA?) +- Finger swiping for web frontend +- Arrow key navigation for web frontend Other stuff on the roadmap: - Allow copying instead of symlinking originals diff --git a/web/gogallery.css b/web/gogallery.css new file mode 100644 index 0000000..0bcc46a --- /dev/null +++ b/web/gogallery.css @@ -0,0 +1,114 @@ +body { + background-color: black; +} + +#modal { + display: none; + justify-content: center; + align-items: center; + left: 0; + top: 0; + width: 100%; + height: 100%; + position: fixed; + z-index: 1; + background-color: rgba(0, 0, 0, 1); +} + + +/* TODO add nicer gray colors, dependency to thumbnail background color */ + +#modalPicture { + max-height: 100%; + max-width: 100%; + display: block; + margin: auto; +} + + +/* TODO add hover and click animations for modal buttons, cursor: pointer etc */ + +.modalClose { + position: absolute; + top: 0%; + right: 0%; + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; +} + +.modalPrev { + position: absolute; + top: 50%; + left: 0%; + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; +} + +.modalNext { + position: absolute; + top: 50%; + right: 0%; + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; +} + +.modalClose:hover, +.modalClose:focus, +.modalPrev:hover, +.modalPrev:focus, +.modalNext:hover, +.modalNext:focus { + background-color: rgba(0, 0, 0, 0.5); +} + +div.folder { + width: 125px; + height: 125px; + /*font-size: 0;*/ + display: inline-block; +} + +img.folder { + width: 50px; + height: 50px; +} + +div.image { + width: 125px; + height: 125px; + /*font-size: 0;*/ + display: inline-block; +} + +img.image { + width: 100px; + height: 100px; + display: block; + margin: auto; +} + +span.image { + display: block; + margin: auto; +} + + +/*img.preload { + display: none +}*/ + +span { + font-size: 0.8em; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} \ No newline at end of file diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..c9deded --- /dev/null +++ b/web/index.html @@ -0,0 +1,144 @@ + + + + + %%TITLE%% + + + + + + + +
+ + +
+ diipadaapa + diipadaapa + diipadaapa + diipadaapa + temp2 +
+ +
+ +
+
+ 2018-03-31 16.48.28.jpg + 2018-03-31 16.48.28.jpg +
+
+ 2018-03-31 16.48.28.jpg + 2018-07-16 17.28.12 -000.jpg +
+
+ 2018-11-10 16.48.28.jpg + 2018-07-16 17.28.12 -000.jpg +
+
+ + + + + + + + + \ No newline at end of file