Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor box model #1562

Merged
merged 32 commits into from
Nov 26, 2022
Merged

Refactor box model #1562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
e365dc7
Added missing localization and settings for WUI, synced frontend.
nagmat84 Sep 18, 2022
2e2cd0f
Fixed NSFW banner
nagmat84 Sep 18, 2022
1861261
Enable redirection to #frame
nagmat84 Sep 18, 2022
4e2c3f8
Fixed spelling of frame settings
nagmat84 Sep 19, 2022
7632d6f
Preliminary cleanup of backend
nagmat84 Sep 19, 2022
5f0db18
Fix broken tests
nagmat84 Sep 20, 2022
fc39740
Removed browser identification from backend
nagmat84 Sep 21, 2022
b754182
Cleaning up Blade templates
nagmat84 Sep 21, 2022
b673025
Removed Larapass from Landing Page
nagmat84 Sep 27, 2022
d99f6bc
Synced frontend
nagmat84 Oct 21, 2022
d57cdd0
Merge branch 'master' into merge_modes
nagmat84 Oct 21, 2022
92a3b97
Also work when Lychee is not at the root URL
kamil4 Oct 21, 2022
6b8f27f
Make NSFW customizable
nagmat84 Oct 22, 2022
368ee0e
Moved compiled frontend.html to dist-folder
nagmat84 Oct 22, 2022
7c92d41
Merge branch 'master' into merge_modes
nagmat84 Oct 23, 2022
40a0842
Added RSS feeds
nagmat84 Oct 23, 2022
f3f2f6c
Pre-render HTML header on server-side
nagmat84 Oct 23, 2022
ab899cf
Synced frontend
nagmat84 Oct 27, 2022
c1d3e7e
Fixed path error in tests and synced frontend
nagmat84 Oct 27, 2022
5cd1741
Synced frontend
nagmat84 Oct 27, 2022
98d3dc1
Synced frontend
nagmat84 Oct 27, 2022
7ffbe0e
Add visibility tweak again
nagmat84 Oct 28, 2022
6cadacb
Synced frontend
nagmat84 Nov 1, 2022
fa63da5
Merge branch 'master' into merge_modes
nagmat84 Nov 6, 2022
5451795
sync front
ildyria Nov 21, 2022
4baa505
Merge branch 'master' into merge_modes
ildyria Nov 21, 2022
daa6104
fix phpstan & formatting
ildyria Nov 21, 2022
29e6560
Adopted Blade template for frontend to flex containers
nagmat84 Oct 23, 2022
a714bbe
Synced frontend
nagmat84 Oct 28, 2022
ffc85f9
sync front
ildyria Nov 21, 2022
44f6698
merge master
ildyria Nov 26, 2022
384d663
sync front
ildyria Nov 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/Lychee-front
Open in desktop
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 −156 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 −6 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 −7 styles/main/main.scss
2 changes: 1 addition & 1 deletion public/dist/frontend.css
View file
Open in desktop

Large diffs are not rendered by default.

287 changes: 178 additions & 109 deletions public/dist/frontend.html
View file
Open in desktop
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