Skip to content

Commit

Permalink
Synced frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
@nagmat84 @ildyria
nagmat84 authored and ildyria committed Nov 21, 2022
1 parent 1009b0e commit 8a7c2dc
Show file tree
Hide file tree
Showing 4 changed files with 455 additions and 468 deletions.
2 changes: 1 addition & 1 deletion public/Lychee-front
Submodule Lychee-front updated 34 files
+0 −1 gulpfile.js
+178 −109 html/frontend.html
+0 −11 package-lock.json
+0 −1 package.json
+17 −49 scripts/main/frame.js
+119 −158 scripts/main/header.js
+11 −16 scripts/main/init.js
+6 −15 scripts/main/leftMenu.js
+10 −35 scripts/main/loadingBar.js
+16 −44 scripts/main/lychee.js
+16 −5 scripts/main/mapview.js
+2 −2 scripts/main/multiselect.js
+0 −21 scripts/main/photo.js
+3 −3 scripts/main/search.js
+1 −6 scripts/main/sidebar.js
+57 −37 scripts/main/view.js
+10 −10 scripts/main/visible.js
+17 −0 styles/main/_application_container.scss
+142 −0 styles/main/_container.scss
+387 −417 styles/main/_content.scss
+8 −13 styles/main/_footer.scss
+17 −22 styles/main/_frame.scss
+43 −60 styles/main/_header.scss
+4 −76 styles/main/_imageview.scss
+8 −17 styles/main/_justified_layout.scss
+34 −25 styles/main/_leftMenu.scss
+10 −13 styles/main/_loading.scss
+2 −25 styles/main/_mapview.scss
+90 −84 styles/main/_sidebar.scss
+4 −4 styles/main/_tv.scss
+14 −0 styles/main/_view_container.scss
+3 −5 styles/main/_warning.scss
+15 −0 styles/main/_workbench_container.scss
+7 −14 styles/main/main.scss
2 changes: 1 addition & 1 deletion public/dist/frontend.css
View file

Large diffs are not rendered by default.

287 changes: 178 additions & 109 deletions public/dist/frontend.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,117 +240,186 @@

<!-- endinject -->

<!-- DIV for the loading indicator -->
<div id="loading"></div>

<!-- TODO: Header is invisible for "frame" mode, but visible for "view" and "gallery" -->
<header class="header">
<div class="header__toolbar header__toolbar--public">
<a class="button" id="button_signin"><svg class="iconic"><use xlink:href="#account-login" /></svg></a>
<a class="header__title"></a>
<div class="header__search__field">
<input class="header__search" type="text" name="search">
<a class="header__clear">&times;</a>
</div>
<a class="button button--map-albums"><svg class="iconic"><use xlink:href="#map" /></svg></a>
</div>
<div class="header__toolbar header__toolbar--albums">
<a class="button" id="button_settings"><svg class="iconic"><use xlink:href="#cog" /></svg></a>
<a class="header__title"></a>
<div class="header__search__field">
<input class="header__search" type="text" name="search">
<a class="header__clear">&times;</a>
</div>
<a class="header__divider"></a>
<a class="button button--map-albums"><svg class="iconic"><use xlink:href="#map" /></svg></a>
<a class="button button_add"><svg class="iconic"><use xlink:href="#plus" /></svg></a>
</div>
<div class="header__toolbar header__toolbar--album">
<a class="button" id="button_back_home"><svg class="iconic"><use xlink:href="#chevron-left" /></svg></a>
<a class="header__title"></a>
<a class="button button--eye" id="button_visibility_album"><svg class="iconic iconic--eye"><use xlink:href="#eye" /></svg></a>
<a class="button" id="button_sharing_album_users"><svg class="iconic"><use xlink:href="#people" /></svg></a>
<a class="button button--nsfw" id="button_nsfw_album"><svg class="iconic"><use xlink:href="#warning" /></svg></a>
<a class="button button--share" id="button_share_album"><svg class="iconic ionicons"><use xlink:href="#share-ion" /></svg></a>
<a class="button" id="button_archive"><svg class="iconic"><use xlink:href="#cloud-download" /></svg></a>
<a class="button button--info" id="button_info_album"><svg class="iconic"><use xlink:href="#info" /></svg></a>
<a class="button button--map" id="button_map_album"><svg class="iconic"><use xlink:href="#map" /></svg></a>
<a class="button" id="button_move_album"><svg class="iconic"><use xlink:href="#folder" /></svg></a>
<a class="button" id="button_trash_album"><svg class="iconic"><use xlink:href="#trash" /></svg></a>
<a class="button" id="button_fs_album_enter"><svg class="iconic"><use xlink:href="#fullscreen-enter" /></svg></a>
<a class="button" id="button_fs_album_exit"><svg class="iconic"><use xlink:href="#fullscreen-exit" /></svg></a>
<a class="header__divider"></a>
<a class="button button_add"><svg class="iconic"><use xlink:href="#plus" /></svg></a>
</div>
<div class="header__toolbar header__toolbar--photo">
<a class="button" id="button_back"><svg class="iconic"><use xlink:href="#chevron-left" /></svg></a>
<a class="header__title"></a>
<a class="button button--star" id="button_star"><svg class="iconic"><use xlink:href="#star" /></svg></a>
<a class="button button--eye" id="button_visibility"><svg class="iconic"><use xlink:href="#eye" /></svg></a>
<a class="button button--rotate" id="button_rotate_ccwise"><svg class="iconic"><use xlink:href="#counterclockwise" /></svg></a>
<a class="button button--rotate" id="button_rotate_cwise"><svg class="iconic"><use xlink:href="#clockwise" /></svg></a>
<a class="button button--share" id="button_share"><svg class="iconic ionicons"><use xlink:href="#share-ion" /></svg></a>
<a class="button button--info" id="button_info"><svg class="iconic"><use xlink:href="#info" /></svg></a>
<a class="button button--map" id="button_map"><svg class="iconic"><use xlink:href="#map" /></svg></a>
<a class="button" id="button_move"><svg class="iconic"><use xlink:href="#folder" /></svg></a>
<a class="button" id="button_trash"><svg class="iconic"><use xlink:href="#trash" /></svg></a>
<a class="button" id="button_fs_enter"><svg class="iconic"><use xlink:href="#fullscreen-enter" /></svg></a>
<a class="button" id="button_fs_exit"><svg class="iconic"><use xlink:href="#fullscreen-exit" /></svg></a>
<a class="header__divider"></a>
<a class="button" id="button_more"><svg class="iconic"><use xlink:href="#ellipses" /></svg></a>
</div>
<div class="header__toolbar header__toolbar--map">
<a class="button" id="button_back_map"><svg class="iconic"><use xlink:href="#chevron-left" /></svg></a>
<a class="header__title"></a>
</div>
<div class="header__toolbar header__toolbar--config">
<a class="button" id="button_close_config"><svg class="iconic"><use xlink:href="#plus" /></svg></a>
<a class="header__title"></a>
</div>
</header>

<div id="container">
<!-- loading indicator -->
<div id="lychee_loading" class="vflex-item-rigid"></div>
<!--
The application container vertically shares space with the loading indicator.
If fills the remaining vertical space not taken by the loading indicator.
The application container contains the left menu and the workbench.
The application container is also that part which is shaded by the
background of the modal dialog while the loading indicator and (potential)
error message is not shaded.
-->
<div id="lychee_application_container" class="vflex-item-stretch hflex-container">
<!-- leftMenu -->
<div class="leftMenu"></div>

<!-- Content -->
<div class="content"></div>

<!-- MapView -->
<div id="mapview">
<div id="leaflet_map_full"></div>
<div id="lychee_left_menu_container" class="hflex-item-rigid">
<div id="lychee_left_menu"></div>
</div>

<!-- ImageView -->
<div id="imageview"></div>

<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar__header"><h1></h1></div>
<div class="sidebar__wrapper"></div>
</div>

<!-- Warning -->
<div id="sensitive_warning" style="display: none;"><h1></h1><p></p><p></p></div>

<!-- Upload TODO: Figure out how this works -->
<div id="upload">
<input id="upload_files" type="file" name="fileElem[]" multiple accept="image/*,video/*,.mov">
<input id="upload_track_file" type="file" name="fileElem" accept="application/x-gpx+xml">
<!--
This container horizontally shares space with the left menu.
It fills the remaining horizontal space not covered by the left menu.
-->
<div class="hflex-item-stretch vflex-container">
<!-- toolbar -->
<header id="lychee_toolbar_container" class="vflex-item-rigid">
<div id="lychee_toolbar_public" class="toolbar">
<a class="button" id="button_signin"><svg class="iconic"><use xlink:href="#account-login" /></svg></a>
<a class="header__title"></a>
<div class="header__search__field">
<input class="header__search" type="text" name="search">
<a class="header__clear">&times;</a>
</div>
<a class="button button--map-albums"><svg class="iconic"><use xlink:href="#map" /></svg></a>
</div>
<div id="lychee_toolbar_albums" class="toolbar">
<a class="button" id="button_settings"><svg class="iconic"><use xlink:href="#cog" /></svg></a>
<a class="header__title"></a>
<div class="header__search__field">
<input class="header__search" type="text" name="search">
<a class="header__clear">&times;</a>
</div>
<a class="header__divider"></a>
<a class="button button--map-albums"><svg class="iconic"><use xlink:href="#map" /></svg></a>
<a class="button button_add"><svg class="iconic"><use xlink:href="#plus" /></svg></a>
</div>
<div id="lychee_toolbar_album" class="toolbar">
<a class="button" id="button_back_home"><svg class="iconic"><use xlink:href="#chevron-left" /></svg></a>
<a class="header__title"></a>
<a class="button button--eye" id="button_visibility_album"><svg class="iconic iconic--eye"><use xlink:href="#eye" /></svg></a>
<a class="button" id="button_sharing_album_users"><svg class="iconic"><use xlink:href="#people" /></svg></a>
<a class="button button--nsfw" id="button_nsfw_album"><svg class="iconic"><use xlink:href="#warning" /></svg></a>
<a class="button button--share" id="button_share_album"><svg class="iconic ionicons"><use xlink:href="#share-ion" /></svg></a>
<a class="button" id="button_archive"><svg class="iconic"><use xlink:href="#cloud-download" /></svg></a>
<a class="button button--info" id="button_info_album"><svg class="iconic"><use xlink:href="#info" /></svg></a>
<a class="button button--map" id="button_map_album"><svg class="iconic"><use xlink:href="#map" /></svg></a>
<a class="button" id="button_move_album"><svg class="iconic"><use xlink:href="#folder" /></svg></a>
<a class="button" id="button_trash_album"><svg class="iconic"><use xlink:href="#trash" /></svg></a>
<a class="button" id="button_fs_album_enter"><svg class="iconic"><use xlink:href="#fullscreen-enter" /></svg></a>
<a class="button" id="button_fs_album_exit"><svg class="iconic"><use xlink:href="#fullscreen-exit" /></svg></a>
<a class="header__divider"></a>
<a class="button button_add"><svg class="iconic"><use xlink:href="#plus" /></svg></a>
</div>
<div id="lychee_toolbar_photo" class="toolbar">
<a class="button" id="button_back"><svg class="iconic"><use xlink:href="#chevron-left" /></svg></a>
<a class="header__title"></a>
<a class="button button--star" id="button_star"><svg class="iconic"><use xlink:href="#star" /></svg></a>
<a class="button button--eye" id="button_visibility"><svg class="iconic"><use xlink:href="#eye" /></svg></a>
<a class="button button--rotate" id="button_rotate_ccwise"><svg class="iconic"><use xlink:href="#counterclockwise" /></svg></a>
<a class="button button--rotate" id="button_rotate_cwise"><svg class="iconic"><use xlink:href="#clockwise" /></svg></a>
<a class="button button--share" id="button_share"><svg class="iconic ionicons"><use xlink:href="#share-ion" /></svg></a>
<a class="button button--info" id="button_info"><svg class="iconic"><use xlink:href="#info" /></svg></a>
<a class="button button--map" id="button_map"><svg class="iconic"><use xlink:href="#map" /></svg></a>
<a class="button" id="button_move"><svg class="iconic"><use xlink:href="#folder" /></svg></a>
<a class="button" id="button_trash"><svg class="iconic"><use xlink:href="#trash" /></svg></a>
<a class="button" id="button_fs_enter"><svg class="iconic"><use xlink:href="#fullscreen-enter" /></svg></a>
<a class="button" id="button_fs_exit"><svg class="iconic"><use xlink:href="#fullscreen-exit" /></svg></a>
<a class="header__divider"></a>
<a class="button" id="button_more"><svg class="iconic"><use xlink:href="#ellipses" /></svg></a>
</div>
<div id="lychee_toolbar_map" class="toolbar">
<a class="button" id="button_back_map"><svg class="iconic"><use xlink:href="#chevron-left" /></svg></a>
<a class="header__title"></a>
</div>
<div id="lychee_toolbar_config" class="toolbar">
<a class="button" id="button_close_config"><svg class="iconic"><use xlink:href="#plus" /></svg></a>
<a class="header__title"></a>
</div>
</header>
<!--
This container vertically shares space with the toolbar.
It fills the remaining vertical space not taken by the toolbar.
It contains the right sidebar and the workbench.
-->
<div class="vflex-item-stretch hflex-container">
<!--
The workbench horizontally share space with the right
sidebar.
It fills the remaining horizontal space not taken be the
sidebar.
-->
<div id="lychee_workbench_container" class="hflex-item-stretch">
<!--
The view container covers the entire workbench and
contains the content and the footer.
It provides a vertical scroll bar if the content
grows too large.
Opposed to the map view and image view the view container
holds views which are scrollable (e.g. settings,
album listings, etc.)
-->
<div id="lychee_view_container" class="vflex-container">
<!--
Content
Vertically shares space with the footer.
The minimum height is set such the footer is positioned
at the bottom even if the content is smaller.
-->
<div id="lychee_view_content" class="vflex-item-stretch"></div>
<!--
Footer
Vertically shares space with the content.
The height of the footer is always the natural height
of its child elements
-->
<div id="lychee_footer" class="vflex-item-rigid animate animate-up hide_footer">
<div id="home_socials" class="animate animate-up"><a class="socialicons" id="facebook" target="_blank" rel="noopener"></a><a class="socialicons" id="flickr" target="_blank" rel="noopener"></a><a class="socialicons" id="twitter" target="_blank" rel="noopener"></a><a class="socialicons" id="instagram" target="_blank" rel="noopener"></a><a class="socialicons" id="youtube" target="_blank" rel="noopener"></a></div>
<p class="home_copyright"></p>
<p class="personal_text"></p>
<p class="hosted_by"><a rel="noopener noreferrer" target="_blank" href="https://LycheeOrg.github.io" tabindex="-1"></a></p>
</div>
</div>
<!--
Map View
Does not participate in the flex layout of the
workbench and does not use the scrolling mechanism of
the workbench, but overlays the content of the workbench
and is always as big as the workbench.
-->
<div id="lychee_map_container" class="overlay-container"></div>
<!--
Image View
See comment on map view.
Moreover, the image view may have a transparent background
(e.g. on TVs) such that the map view or album shines through.
-->
<div id="imageview" class="overlay-container"></div>
<!-- NSFW Warning -->
<div id="sensitive_warning" class="overlay-container"><h1></h1><p></p><p></p></div>
<!-- Upload TODO: Figure out how this works -->
<div id="upload">
<input id="upload_files" type="file" name="fileElem[]" multiple accept="image/*,video/*,.mov">
<input id="upload_track_file" type="file" name="fileElem" accept="application/x-gpx+xml">
</div>
</div>
<!--
Right sidebar
We must nest the sidebar into an extra container to avoid
a re-layout of the sidebar when it comes into or leaves
view.
The actual sidebar (`lychee_sidebar`) always has a fixed width,
but the container shrinks and expands.
-->
<div id="lychee_sidebar_container" class="hflex-item-rigid">
<div id="lychee_sidebar" class="vflex-container">
<div id="lychee_sidebar_header" class="vflex-item-rigid"><h1></h1></div>
<!--
The sidebar wrapper provides a vertical scrolling bar,
if the information shown inside doesn't fit.
-->
<div id="lychee_sidebar_content" class="vflex-item-stretch"></div>
</div>
</div>
</div>
</div>
</div>

<div id="frame">
<img id="background" alt="image background" src=""/>
<canvas id="background_canvas"></canvas>
<div id="noise"></div>
<div class="image_container"><img id="picture" alt="Random Image" src=""/></div>
<div id="frame-shutter"></div>
</div>

<div id="footer" class="animate animate-up hide_footer">
<div id="home_socials" class="animate animate-up"><a class="socialicons" id="facebook" target="_blank" rel="noopener"></a><a class="socialicons" id="flickr" target="_blank" rel="noopener"></a><a class="socialicons" id="twitter" target="_blank" rel="noopener"></a><a class="socialicons" id="instagram" target="_blank" rel="noopener"></a><a class="socialicons" id="youtube" target="_blank" rel="noopener"></a></div>
<p class="home_copyright"></p>
<p class="personal_text"></p>
<p class="hosted_by"><a rel="noopener noreferrer" target="_blank" href="https://LycheeOrg.github.io" tabindex="-1"></a></p>
<!--
The frame container vertically shares space with the loading indicator.
If fills the remaining vertical space not taken by the loading indicator.
-->
<div id="lychee_frame_container" class="vflex-item-stretch">
<img id="lychee_frame_bg_image" alt="image background" src=""/>
<canvas id="lychee_frame_bg_canvas"></canvas>
<div id="lychee_frame_noise_layer"></div>
<div id="lychee_frame_image_container"><img id="lychee_frame_image" alt="Random Image" src=""/></div>
<div id="lychee_frame_shutter"></div>
</div>
Loading

0 comments on commit 8a7c2dc

Please sign in to comment.