Tobias Reich
commit
d56e34f8f5
31
Dockerfile
31
Dockerfile
@ -1,31 +0,0 @@
|
||||
FROM ubuntu:14.04
|
||||
|
||||
# Install packages
|
||||
RUN apt-get update
|
||||
RUN apt-get -y install git
|
||||
RUN apt-get -y install apache2 mysql-server libapache2-mod-php5 imagemagick php5-mysql php5-gd php5-curl php5-imagick
|
||||
|
||||
# Modify php.ini to contain the following settings:
|
||||
# max_execution_time = 200
|
||||
# post_max_size = 100M
|
||||
# upload_max_size = 100M
|
||||
# upload_max_filesize = 20M
|
||||
# memory_limit = 256M
|
||||
RUN sed -i -e "s/^max_execution_time\s*=.*/max_execution_time = 200/" \
|
||||
-e "s/^post_max_size\s*=.*/post_max_size = 100M/" \
|
||||
-e "s/^upload_max_filesize\s*=.*/upload_max_filesize = 20M\nupload_max_size = 100M/" \
|
||||
-e "s/^memory_limit\s*=.*/memory_limit = 256M/" /etc/php5/apache2/php.ini
|
||||
|
||||
# Link /var/www to /app directory
|
||||
RUN mkdir -p /app && rm -fr /var/www/html && ln -s /app /var/www/html
|
||||
WORKDIR /app
|
||||
|
||||
# Clone lychee
|
||||
RUN git clone https://github.com/electerious/Lychee.git .
|
||||
|
||||
# Set file permissions
|
||||
RUN chown -R www-data:www-data /app
|
||||
RUN chmod -R 777 uploads/ data/
|
||||
|
||||
EXPOSE 80
|
||||
CMD src/commands/start
|
||||
@ -43,6 +43,10 @@ Lychee supports [Twitter Cards](https://dev.twitter.com/docs/cards) and [Open Gr
|
||||
|
||||
Lychee uses [Imagick](http://www.imagemagick.org) when installed on your server. In this case you will benefit from a faster processing of your uploads, better looking thumbnails and intermediate sized images for small screen devices. You can disable the usage of [Imagick](http://www.imagemagick.org) in [the settings](docs/Settings.md).
|
||||
|
||||
### Docker
|
||||
|
||||
Browse the [Docker Hub Registry](https://hub.docker.com/r/kdelfour/lychee-docker/) for various automated Lychee-Docker builds. We recommed to use [lychee-docker](https://hub.docker.com/r/kdelfour/lychee-docker/) by [kdelfour](https://github.com/kdelfour).
|
||||
|
||||
### Plugins and Extensions
|
||||
|
||||
The plugin-system of Lychee allows you to execute scripts, when a certain action fires. Plugins are hooks, which are injected directly into Lychee. [Plugin documentation »](docs/Plugins.md)
|
||||
|
||||
BIN
dist/main.css
vendored
BIN
dist/main.css
vendored
Binary file not shown.
BIN
dist/main.js
vendored
BIN
dist/main.js
vendored
Binary file not shown.
BIN
dist/view.js
vendored
BIN
dist/view.js
vendored
Binary file not shown.
@ -1,3 +1,11 @@
|
||||
## v3.0.7
|
||||
|
||||
Released November 15, 2015
|
||||
|
||||
- Internal changes and updated dependencies
|
||||
- `New` PHP-version-check now requires PHP >= 5.5
|
||||
- `New` Preloading of big photos (#185)
|
||||
|
||||
## v3.0.6
|
||||
|
||||
Released September 13, 2015
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
### 1. Requirements
|
||||
Everything you need is a web-server with PHP 5.3 or later and a MySQL-Database.
|
||||
Everything you need is a web-server with PHP 5.5 or later and a MySQL-Database.
|
||||
|
||||
The following PHP extensions must be activated:
|
||||
|
||||
|
||||
125
index.html
125
index.html
@ -9,7 +9,6 @@
|
||||
<meta name="keywords" content="">
|
||||
<meta name="description" content="">
|
||||
|
||||
<!-- CSS -->
|
||||
<link type="text/css" rel="stylesheet" href="dist/main.css">
|
||||
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
@ -33,88 +32,106 @@
|
||||
<div id="loading"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<header class="header">
|
||||
|
||||
<!-- Title -->
|
||||
<a id="title"></a>
|
||||
<div class="header__toolbar header__toolbar--public">
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="toolbar" id="tools_albums">
|
||||
<a class="button button--left" id="button_settings" title="Settings">
|
||||
<svg class="iconic"><use xlink:href="#cog"></use></svg>
|
||||
</a>
|
||||
<a class="button button--left" id="button_signin" title="Sign In">
|
||||
<a class="button" id="button_signin" title="Sign In">
|
||||
<svg class="iconic"><use xlink:href="#account-login"></use></svg>
|
||||
</a>
|
||||
<a id="hostedwith">Hosted with Lychee</a>
|
||||
<a class="button button--right button_add" title="Add">
|
||||
|
||||
<a class="header__title"></a>
|
||||
|
||||
<a class="header__hostedwith">Hosted with Lychee</a>
|
||||
|
||||
</div>
|
||||
<div class="header__toolbar header__toolbar--albums">
|
||||
|
||||
<a class="button" id="button_settings" title="Settings">
|
||||
<svg class="iconic"><use xlink:href="#cog"></use></svg>
|
||||
</a>
|
||||
|
||||
<a class="header__title"></a>
|
||||
|
||||
<input class="header__search" type="text" name="search" placeholder="Search …">
|
||||
<a class="header__clear">×</a>
|
||||
<a class="header__divider"></a>
|
||||
<a class="button button_add" title="Add">
|
||||
<svg class="iconic"><use xlink:href="#plus"></use></svg>
|
||||
</a>
|
||||
<a class="button_divider"></a>
|
||||
<input id="search" type="text" name="search" placeholder="Search …">
|
||||
<a id="clearSearch">×</a>
|
||||
|
||||
</div>
|
||||
<div class="toolbar" id="tools_album">
|
||||
<a class="button button--left" id="button_back_home" title="Close Album">
|
||||
<div class="header__toolbar header__toolbar--album">
|
||||
|
||||
<a class="button" id="button_back_home" title="Close Album">
|
||||
<svg class="iconic"><use xlink:href="#chevron-left"></use></svg>
|
||||
</a>
|
||||
<a class="button button--right button_add" title="Add">
|
||||
<svg class="iconic"><use xlink:href="#plus"></use></svg>
|
||||
</a>
|
||||
<a class="button_divider"></a>
|
||||
<a class="button button--right" id="button_trash_album" title="Delete Album">
|
||||
<svg class="iconic"><use xlink:href="#trash"></use></svg>
|
||||
</a>
|
||||
<a class="button button--right button--info" id="button_info_album" title="About Album">
|
||||
<svg class="iconic"><use xlink:href="#info"></use></svg>
|
||||
</a>
|
||||
<a class="button button--right" id="button_archive" title="Download Album">
|
||||
<svg class="iconic"><use xlink:href="#cloud-download"></use></svg>
|
||||
</a>
|
||||
<a class="button button--right button--eye" id="button_share_album" title="Share Album">
|
||||
|
||||
<a class="header__title"></a>
|
||||
|
||||
<a class="button button--eye" id="button_share_album" title="Share Album">
|
||||
<svg class="iconic iconic--eye"><use xlink:href="#eye"></use></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar" id="tools_photo">
|
||||
<a class="button button--left" id="button_back" title="Close Photo">
|
||||
<svg class="iconic"><use xlink:href="#chevron-left"></use></svg>
|
||||
<a class="button" id="button_archive" title="Download Album">
|
||||
<svg class="iconic"><use xlink:href="#cloud-download"></use></svg>
|
||||
</a>
|
||||
<a class="button button--right" id="button_more" title="More">
|
||||
<svg class="iconic"><use xlink:href="#ellipses"></use></svg>
|
||||
</a>
|
||||
<a class="button_divider"></a>
|
||||
<a class="button button--right" id="button_trash" title="Delete">
|
||||
<svg class="iconic"><use xlink:href="#trash"></use></svg>
|
||||
</a>
|
||||
<a class="button button--right" id="button_move" title="Move">
|
||||
<svg class="iconic"><use xlink:href="#folder"></use></svg>
|
||||
</a>
|
||||
<a class="button button--right button--info" id="button_info" title="About Photo">
|
||||
<a class="button button--info" id="button_info_album" title="About Album">
|
||||
<svg class="iconic"><use xlink:href="#info"></use></svg>
|
||||
</a>
|
||||
<a class="button_divider"></a>
|
||||
<a class="button button--right button--eye" id="button_share" title="Share Photo">
|
||||
<svg class="iconic"><use xlink:href="#eye"></use></svg>
|
||||
<a class="button" id="button_trash_album" title="Delete Album">
|
||||
<svg class="iconic"><use xlink:href="#trash"></use></svg>
|
||||
</a>
|
||||
<a class="button button--right button--star" id="button_star" title="Star Photo">
|
||||
<a class="header__divider"></a>
|
||||
<a class="button button_add" title="Add">
|
||||
<svg class="iconic"><use xlink:href="#plus"></use></svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="header__toolbar header__toolbar--photo">
|
||||
|
||||
<a class="button" id="button_back" title="Close Photo">
|
||||
<svg class="iconic"><use xlink:href="#chevron-left"></use></svg>
|
||||
</a>
|
||||
|
||||
<a class="header__title"></a>
|
||||
|
||||
<a class="button button--star" id="button_star" title="Star Photo">
|
||||
<svg class="iconic"><use xlink:href="#star"></use></svg>
|
||||
</a>
|
||||
<a class="button button--eye" id="button_share" title="Share Photo">
|
||||
<svg class="iconic"><use xlink:href="#eye"></use></svg>
|
||||
</a>
|
||||
<a class="header__divider"></a>
|
||||
<a class="button button--info" id="button_info" title="About Photo">
|
||||
<svg class="iconic"><use xlink:href="#info"></use></svg>
|
||||
</a>
|
||||
<a class="button" id="button_move" title="Move">
|
||||
<svg class="iconic"><use xlink:href="#folder"></use></svg>
|
||||
</a>
|
||||
<a class="button" id="button_trash" title="Delete">
|
||||
<svg class="iconic"><use xlink:href="#trash"></use></svg>
|
||||
</a>
|
||||
<a class="header__divider"></a>
|
||||
<a class="button" id="button_more" title="More">
|
||||
<svg class="iconic"><use xlink:href="#ellipses"></use></svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div id="content"></div>
|
||||
<div class="content"></div>
|
||||
|
||||
<!-- ImageView -->
|
||||
<div id="imageview"></div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div id="sidebar">
|
||||
<div class='header'>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar__header">
|
||||
<h1>About</h1>
|
||||
</div>
|
||||
<div class='wrapper'></div>
|
||||
<div class="sidebar__wrapper"></div>
|
||||
</div>
|
||||
|
||||
<!-- Upload -->
|
||||
|
||||
@ -5,12 +5,6 @@
|
||||
# @copyright 2015 by Tobias Reich
|
||||
###
|
||||
|
||||
@ini_set('max_execution_time', '200');
|
||||
@ini_set('post_max_size', '200M');
|
||||
@ini_set('upload_max_size', '200M');
|
||||
@ini_set('upload_max_filesize', '20M');
|
||||
@ini_set('max_file_uploads', '100');
|
||||
|
||||
if (!empty($_POST['function'])||!empty($_GET['function'])) {
|
||||
|
||||
session_start();
|
||||
@ -96,4 +90,4 @@ if (!empty($_POST['function'])||!empty($_GET['function'])) {
|
||||
|
||||
}
|
||||
|
||||
?>
|
||||
?>
|
||||
|
||||
@ -26,7 +26,7 @@ echo('Diagnostics' . PHP_EOL);
|
||||
echo('-----------' . PHP_EOL);
|
||||
|
||||
# PHP Version
|
||||
if (floatval(phpversion())<5.3) $error .= ('Error: Upgrade to PHP 5.3 or higher' . PHP_EOL);
|
||||
if (floatval(phpversion())<5.5) $error .= ('Error: Upgrade to PHP 5.5 or higher' . PHP_EOL);
|
||||
|
||||
# Extensions
|
||||
if (!extension_loaded('session')) $error .= ('Error: PHP session extension not activated' . PHP_EOL);
|
||||
@ -89,6 +89,12 @@ if (!ini_get('allow_url_fopen')) echo('Warning: You may experience problems with
|
||||
# Check mysql version
|
||||
if ($database->server_version<50500) echo('Warning: Lychee uses the GBK charset to avoid sql injections on your MySQL version. Please update to MySQL 5.5 or higher to enable UTF-8 support.' . PHP_EOL);
|
||||
|
||||
# About GD
|
||||
$gdVersion = gd_info();
|
||||
if (!$gdVersion['JPEG Support']) $error .= ('Error: PHP gd extension without jpeg support' . PHP_EOL);
|
||||
if (!$gdVersion['PNG Support']) $error .= ('Error: PHP gd extension without png support' . PHP_EOL);
|
||||
if (!$gdVersion['GIF Read Support'] || !$gdVersion['GIF Create Support']) $error .= ('Error: PHP gd extension without full gif support' . PHP_EOL);
|
||||
|
||||
# Output
|
||||
if ($error==='') echo('No critical problems found. Lychee should work without problems!' . PHP_EOL);
|
||||
else echo $error;
|
||||
@ -108,9 +114,6 @@ else $imagick = '-';
|
||||
if (!isset($imagickVersion, $imagickVersion['versionNumber'])||$imagickVersion==='') $imagickVersion = '-';
|
||||
else $imagickVersion = $imagickVersion['versionNumber'];
|
||||
|
||||
# About GD
|
||||
$gdVersion = gd_info();
|
||||
|
||||
# Output system information
|
||||
echo('Lychee Version: ' . $json['version'] . PHP_EOL);
|
||||
echo('DB Version: ' . $settings['version'] . PHP_EOL);
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
#!/bin/bash
|
||||
# Run this script to start Apache and MySQL
|
||||
|
||||
# Start MySQL
|
||||
mysqld &
|
||||
|
||||
# Start Apache
|
||||
source /etc/apache2/envvars
|
||||
exec apache2 -D FOREGROUND
|
||||
@ -96,6 +96,7 @@ paths.main = {
|
||||
],
|
||||
styles: [
|
||||
'node_modules/basiccontext/src/styles/main.scss',
|
||||
'node_modules/basiccontext/src/styles/addons/popin.scss',
|
||||
'node_modules/basicmodal/src/styles/main.scss',
|
||||
'./styles/main.scss'
|
||||
],
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "Lychee",
|
||||
"version": "3.0.6",
|
||||
"version": "3.0.7",
|
||||
"description": "Self-hosted photo-management done right.",
|
||||
"authors": "Tobias Reich <tobias@electerious.com>",
|
||||
"license": "MIT",
|
||||
@ -10,18 +10,18 @@
|
||||
"url": "https://github.com/electerious/Lychee.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"basiccontext": "^3.3.1",
|
||||
"basicmodal": "^3.1.2",
|
||||
"basiccontext": "^3.5.0",
|
||||
"basicmodal": "^3.1.7",
|
||||
"gulp": "^3.9.0",
|
||||
"gulp-autoprefixer": "3.0.1",
|
||||
"gulp-babel": "^5.2.1",
|
||||
"gulp-autoprefixer": "3.1.0",
|
||||
"gulp-babel": "^5.3.0",
|
||||
"gulp-concat": "^2.6.0",
|
||||
"gulp-inject": "^1.5.0",
|
||||
"gulp-load-plugins": "^1.0.0-rc",
|
||||
"gulp-inject": "^3.0.0",
|
||||
"gulp-load-plugins": "^1.1.0",
|
||||
"gulp-minify-css": "^1.2.1",
|
||||
"gulp-rimraf": "^0.1.1",
|
||||
"gulp-sass": "^2.0.4",
|
||||
"gulp-uglify": "^1.4.1",
|
||||
"gulp-rimraf": "^0.2.0",
|
||||
"gulp-sass": "^2.1.0",
|
||||
"gulp-uglify": "^1.5.1",
|
||||
"jquery": "^2.1.4",
|
||||
"mousetrap": "^1.5.3"
|
||||
}
|
||||
|
||||
@ -30,11 +30,11 @@ album.getID = function() {
|
||||
|
||||
}
|
||||
|
||||
album.load = function(albumID, refresh) {
|
||||
album.load = function(albumID, refresh = false) {
|
||||
|
||||
password.get(albumID, function() {
|
||||
|
||||
if (!refresh) lychee.animate('#content', 'contentZoomOut')
|
||||
if (refresh===false) lychee.animate('.content', 'contentZoomOut')
|
||||
|
||||
let startTime = new Date().getTime()
|
||||
|
||||
@ -81,8 +81,8 @@ album.load = function(albumID, refresh) {
|
||||
|
||||
view.album.init()
|
||||
|
||||
if (!refresh) {
|
||||
lychee.animate('#content', 'contentZoomIn')
|
||||
if (refresh===false) {
|
||||
lychee.animate(lychee.content, 'contentZoomIn')
|
||||
header.setMode('album')
|
||||
}
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ albums.load = function() {
|
||||
|
||||
let startTime = new Date().getTime()
|
||||
|
||||
lychee.animate('#content', 'contentZoomOut')
|
||||
lychee.animate('.content', 'contentZoomOut')
|
||||
|
||||
if (albums.json===null) {
|
||||
|
||||
@ -38,7 +38,7 @@ albums.load = function() {
|
||||
setTimeout(() => {
|
||||
header.setMode('albums')
|
||||
view.albums.init()
|
||||
lychee.animate('#content', 'contentZoomIn')
|
||||
lychee.animate(lychee.content, 'contentZoomIn')
|
||||
}, waitTime)
|
||||
|
||||
})
|
||||
@ -48,7 +48,7 @@ albums.load = function() {
|
||||
setTimeout(() => {
|
||||
header.setMode('albums')
|
||||
view.albums.init()
|
||||
lychee.animate('#content', 'contentZoomIn')
|
||||
lychee.animate(lychee.content, 'contentZoomIn')
|
||||
}, 300)
|
||||
|
||||
}
|
||||
|
||||
@ -8,13 +8,13 @@ contextMenu = {}
|
||||
contextMenu.add = function(e) {
|
||||
|
||||
let items = [
|
||||
{ type: 'item', title: build.iconic('image') + 'Upload Photo', fn: () => $('#upload_files').click() },
|
||||
{ type: 'separator' },
|
||||
{ type: 'item', title: build.iconic('link-intact') + 'Import from Link', fn: upload.start.url },
|
||||
{ type: 'item', title: build.iconic('dropbox', 'ionicons') + 'Import from Dropbox', fn: upload.start.dropbox },
|
||||
{ type: 'item', title: build.iconic('terminal') + 'Import from Server', fn: upload.start.server },
|
||||
{ type: 'separator' },
|
||||
{ type: 'item', title: build.iconic('folder') + 'New Album', fn: album.add }
|
||||
{ title: build.iconic('image') + 'Upload Photo', fn: () => $('#upload_files').click() },
|
||||
{ },
|
||||
{ title: build.iconic('link-intact') + 'Import from Link', fn: upload.start.url },
|
||||
{ title: build.iconic('dropbox', 'ionicons') + 'Import from Dropbox', fn: upload.start.dropbox },
|
||||
{ title: build.iconic('terminal') + 'Import from Server', fn: upload.start.server },
|
||||
{ },
|
||||
{ title: build.iconic('folder') + 'New Album', fn: album.add }
|
||||
]
|
||||
|
||||
basicContext.show(items, e.originalEvent)
|
||||
@ -26,15 +26,15 @@ contextMenu.add = function(e) {
|
||||
contextMenu.settings = function(e) {
|
||||
|
||||
let items = [
|
||||
{ type: 'item', title: build.iconic('person') + 'Change Login', fn: settings.setLogin },
|
||||
{ type: 'item', title: build.iconic('sort-ascending') + 'Change Sorting', fn: settings.setSorting },
|
||||
{ type: 'item', title: build.iconic('dropbox', 'ionicons') + 'Set Dropbox', fn: settings.setDropboxKey },
|
||||
{ type: 'separator' },
|
||||
{ type: 'item', title: build.iconic('info') + 'About Lychee', fn: () => window.open(lychee.website) },
|
||||
{ type: 'item', title: build.iconic('wrench') + 'Diagnostics', fn: () => window.open('plugins/check/') },
|
||||
{ type: 'item', title: build.iconic('align-left') + 'Show Log', fn: () => window.open('plugins/displaylog/') },
|
||||
{ type: 'separator' },
|
||||
{ type: 'item', title: build.iconic('account-logout') + 'Sign Out', fn: lychee.logout }
|
||||
{ title: build.iconic('person') + 'Change Login', fn: settings.setLogin },
|
||||
{ title: build.iconic('sort-ascending') + 'Change Sorting', fn: settings.setSorting },
|
||||
{ title: build.iconic('dropbox', 'ionicons') + 'Set Dropbox', fn: settings.setDropboxKey },
|
||||
{ },
|
||||
{ title: build.iconic('info') + 'About Lychee', fn: () => window.open(lychee.website) },
|
||||
{ title: build.iconic('wrench') + 'Diagnostics', fn: () => window.open('plugins/check/') },
|
||||
{ title: build.iconic('align-left') + 'Show Log', fn: () => window.open('plugins/displaylog/') },
|
||||
{ },
|
||||
{ title: build.iconic('account-logout') + 'Sign Out', fn: lychee.logout }
|
||||
]
|
||||
|
||||
basicContext.show(items, e.originalEvent)
|
||||
@ -53,9 +53,9 @@ contextMenu.album = function(albumID, e) {
|
||||
let showMerge = (albums.json && albums.json.albums && Object.keys(albums.json.albums).length>1)
|
||||
|
||||
let items = [
|
||||
{ type: 'item', title: build.iconic('pencil') + 'Rename', fn: () => album.setTitle([albumID]) },
|
||||
{ type: 'item', title: build.iconic('collapse-left') + 'Merge', visible: showMerge, fn: () => { basicContext.close(); contextMenu.mergeAlbum(albumID, e) } },
|
||||
{ type: 'item', title: build.iconic('trash') + 'Delete', fn: () => album.delete([albumID]) }
|
||||
{ title: build.iconic('pencil') + 'Rename', fn: () => album.setTitle([albumID]) },
|
||||
{ title: build.iconic('collapse-left') + 'Merge', visible: showMerge, fn: () => { basicContext.close(); contextMenu.mergeAlbum(albumID, e) } },
|
||||
{ title: build.iconic('trash') + 'Delete', fn: () => album.delete([albumID]) }
|
||||
]
|
||||
|
||||
$('.album[data-id="' + albumID + '"]').addClass('active')
|
||||
@ -76,10 +76,10 @@ contextMenu.albumMulti = function(albumIDs, e) {
|
||||
let showMerge = (albums.json && albums.json.albums && Object.keys(albums.json.albums).length>1)
|
||||
|
||||
let items = [
|
||||
{ type: 'item', title: build.iconic('pencil') + 'Rename All', fn: () => album.setTitle(albumIDs) },
|
||||
{ type: 'item', title: build.iconic('collapse-left') + 'Merge All', visible: showMerge && autoMerge, fn: () => album.merge(albumIDs) },
|
||||
{ type: 'item', title: build.iconic('collapse-left') + 'Merge', visible: showMerge && !autoMerge, fn: () => { basicContext.close(); contextMenu.mergeAlbum(albumIDs[0], e) } },
|
||||
{ type: 'item', title: build.iconic('trash') + 'Delete All', fn: () => album.delete(albumIDs) }
|
||||
{ title: build.iconic('pencil') + 'Rename All', fn: () => album.setTitle(albumIDs) },
|
||||
{ title: build.iconic('collapse-left') + 'Merge All', visible: showMerge && autoMerge, fn: () => album.merge(albumIDs) },
|
||||
{ title: build.iconic('collapse-left') + 'Merge', visible: showMerge && !autoMerge, fn: () => { basicContext.close(); contextMenu.mergeAlbum(albumIDs[0], e) } },
|
||||
{ title: build.iconic('trash') + 'Delete All', fn: () => album.delete(albumIDs) }
|
||||
]
|
||||
|
||||
items.push()
|
||||
@ -103,15 +103,15 @@ contextMenu.albumTitle = function(albumID, e) {
|
||||
|
||||
let title = lychee.html`<img class='cover' width='16' height='16' src='$${ this.thumbs[0] }'><div class='title'>$${ this.title }</div>`
|
||||
|
||||
if (this.id!=albumID) items.push({ type: 'item', title, fn: () => lychee.goto(this.id) })
|
||||
if (this.id!=albumID) items.push({ title, fn: () => lychee.goto(this.id) })
|
||||
|
||||
})
|
||||
|
||||
items.unshift({ type: 'separator' })
|
||||
items.unshift({ })
|
||||
|
||||
}
|
||||
|
||||
items.unshift({ type: 'item', title: build.iconic('pencil') + 'Rename', fn: () => album.setTitle([albumID]) })
|
||||
items.unshift({ title: build.iconic('pencil') + 'Rename', fn: () => album.setTitle([albumID]) })
|
||||
|
||||
basicContext.show(items, e.originalEvent, contextMenu.close)
|
||||
|
||||
@ -133,7 +133,7 @@ contextMenu.mergeAlbum = function(albumID, e) {
|
||||
|
||||
let title = lychee.html`<img class='cover' width='16' height='16' src='$${ this.thumbs[0] }'><div class='title'>$${ this.title }</div>`
|
||||
|
||||
if (this.id!=albumID) items.push({ type: 'item', title, fn: () => album.merge([albumID, this.id]) })
|
||||
if (this.id!=albumID) items.push({ title, fn: () => album.merge([albumID, this.id]) })
|
||||
|
||||
})
|
||||
|
||||
@ -154,13 +154,13 @@ contextMenu.photo = function(photoID, e) {
|
||||
// in order to keep the selection
|
||||
|
||||
let items = [
|
||||
{ type: 'item', title: build.iconic('star') + 'Star', fn: () => photo.setStar([photoID]) },
|
||||
{ type: 'item', title: build.iconic('tag') + 'Tags', fn: () => photo.editTags([photoID]) },
|
||||
{ type: 'separator' },
|
||||
{ type: 'item', title: build.iconic('pencil') + 'Rename', fn: () => photo.setTitle([photoID]) },
|
||||
{ type: 'item', title: build.iconic('layers') + 'Duplicate', fn: () => photo.duplicate([photoID]) },
|
||||
{ type: 'item', title: build.iconic('folder') + 'Move', fn: () => { basicContext.close(); contextMenu.move([photoID], e) } },
|
||||
{ type: 'item', title: build.iconic('trash') + 'Delete', fn: () => photo.delete([photoID]) }
|
||||
{ title: build.iconic('star') + 'Star', fn: () => photo.setStar([photoID]) },
|
||||
{ title: build.iconic('tag') + 'Tags', fn: () => photo.editTags([photoID]) },
|
||||
{ },
|
||||
{ title: build.iconic('pencil') + 'Rename', fn: () => photo.setTitle([photoID]) },
|
||||
{ title: build.iconic('layers') + 'Duplicate', fn: () => photo.duplicate([photoID]) },
|
||||
{ title: build.iconic('folder') + 'Move', fn: () => { basicContext.close(); contextMenu.move([photoID], e) } },
|
||||
{ title: build.iconic('trash') + 'Delete', fn: () => photo.delete([photoID]) }
|
||||
]
|
||||
|
||||
$('.photo[data-id="' + photoID + '"]').addClass('active')
|
||||
@ -178,13 +178,13 @@ contextMenu.photoMulti = function(photoIDs, e) {
|
||||
multiselect.stopResize()
|
||||
|
||||
let items = [
|
||||
{ type: 'item', title: build.iconic('star') + 'Star All', fn: () => photo.setStar(photoIDs) },
|
||||
{ type: 'item', title: build.iconic('tag') + 'Tag All', fn: () => photo.editTags(photoIDs) },
|
||||
{ type: 'separator' },
|
||||
{ type: 'item', title: build.iconic('pencil') + 'Rename All', fn: () => photo.setTitle(photoIDs) },
|
||||
{ type: 'item', title: build.iconic('layers') + 'Duplicate All', fn: () => photo.duplicate(photoIDs) },
|
||||
{ type: 'item', title: build.iconic('folder') + 'Move All', fn: () => { basicContext.close(); contextMenu.move(photoIDs, e) } },
|
||||
{ type: 'item', title: build.iconic('trash') + 'Delete All', fn: () => photo.delete(photoIDs) }
|
||||
{ title: build.iconic('star') + 'Star All', fn: () => photo.setStar(photoIDs) },
|
||||
{ title: build.iconic('tag') + 'Tag All', fn: () => photo.editTags(photoIDs) },
|
||||
{ },
|
||||
{ title: build.iconic('pencil') + 'Rename All', fn: () => photo.setTitle(photoIDs) },
|
||||
{ title: build.iconic('layers') + 'Duplicate All', fn: () => photo.duplicate(photoIDs) },
|
||||
{ title: build.iconic('folder') + 'Move All', fn: () => { basicContext.close(); contextMenu.move(photoIDs, e) } },
|
||||
{ title: build.iconic('trash') + 'Delete All', fn: () => photo.delete(photoIDs) }
|
||||
]
|
||||
|
||||
basicContext.show(items, e.originalEvent, contextMenu.close)
|
||||
@ -194,21 +194,21 @@ contextMenu.photoMulti = function(photoIDs, e) {
|
||||
contextMenu.photoTitle = function(albumID, photoID, e) {
|
||||
|
||||
let items = [
|
||||
{ type: 'item', title: build.iconic('pencil') + 'Rename', fn: () => photo.setTitle([photoID]) }
|
||||
{ title: build.iconic('pencil') + 'Rename', fn: () => photo.setTitle([photoID]) }
|
||||
]
|
||||
|
||||
let data = album.json
|
||||
|
||||
if (data.content!==false && data.num>1) {
|
||||
|
||||
items.push({ type: 'separator' })
|
||||
items.push({ })
|
||||
|
||||
// Generate list of albums
|
||||
$.each(data.content, function(index) {
|
||||
|
||||
let title = lychee.html`<img class='cover' width='16' height='16' src='$${ this.thumbUrl }'><div class='title'>$${ this.title }</div>`
|
||||
|
||||
if (this.id!=photoID) items.push({ type: 'item', title, fn: () => lychee.goto(albumID + '/' + this.id) })
|
||||
if (this.id!=photoID) items.push({ title, fn: () => lychee.goto(albumID + '/' + this.id) })
|
||||
|
||||
})
|
||||
|
||||
@ -226,8 +226,8 @@ contextMenu.photoMore = function(photoID, e) {
|
||||
let showDownload = lychee.publicMode===false || ((album.json && album.json.downloadable && album.json.downloadable==='1') && lychee.publicMode===true)
|
||||
|
||||
let items = [
|
||||
{ type: 'item', title: build.iconic('fullscreen-enter') + 'Full Photo', fn: () => window.open(photo.getDirectLink()) },
|
||||
{ type: 'item', title: build.iconic('cloud-download') + 'Download', visible: showDownload, fn: () => photo.getArchive(photoID) }
|
||||
{ title: build.iconic('fullscreen-enter') + 'Full Photo', fn: () => window.open(photo.getDirectLink()) },
|
||||
{ title: build.iconic('cloud-download') + 'Download', visible: showDownload, fn: () => photo.getArchive(photoID) }
|
||||
]
|
||||
|
||||
basicContext.show(items, e.originalEvent)
|
||||
@ -244,7 +244,7 @@ contextMenu.move = function(photoIDs, e) {
|
||||
|
||||
// Show only 'Add album' when no album available
|
||||
items = [
|
||||
{ type: 'item', title: 'New Album', fn: album.add }
|
||||
{ title: 'New Album', fn: album.add }
|
||||
]
|
||||
|
||||
} else {
|
||||
@ -256,15 +256,15 @@ contextMenu.move = function(photoIDs, e) {
|
||||
|
||||
let title = lychee.html`<img class='cover' width='16' height='16' src='$${ this.thumbs[0] }'><div class='title'>$${ this.title }</div>`
|
||||
|
||||
if (this.id!=album.getID()) items.push({ type: 'item', title, fn: () => photo.setAlbum(photoIDs, this.id) })
|
||||
if (this.id!=album.getID()) items.push({ title, fn: () => photo.setAlbum(photoIDs, this.id) })
|
||||
|
||||
})
|
||||
|
||||
// Show Unsorted when unsorted is not the current album
|
||||
if (album.getID()!=='0') {
|
||||
|
||||
items.unshift({ type: 'separator' })
|
||||
items.unshift({ type: 'item', title: 'Unsorted', fn: () => photo.setAlbum(photoIDs, 0) })
|
||||
items.unshift({ })
|
||||
items.unshift({ title: 'Unsorted', fn: () => photo.setAlbum(photoIDs, 0) })
|
||||
|
||||
}
|
||||
|
||||
@ -282,15 +282,15 @@ contextMenu.sharePhoto = function(photoID, e) {
|
||||
iconClass = 'ionicons'
|
||||
|
||||
let items = [
|
||||
{ type: 'item', title: `<input readonly id="link" value="${ link }">`, fn: () => {}, class: 'noHover' },
|
||||
{ type: 'separator' },
|
||||
{ type: 'item', title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => photo.share(photoID, 'twitter') },
|
||||
{ type: 'item', title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => photo.share(photoID, 'facebook') },
|
||||
{ type: 'item', title: build.iconic('envelope-closed') + 'Mail', fn: () => photo.share(photoID, 'mail') },
|
||||
{ type: 'item', title: build.iconic('dropbox', iconClass) + 'Dropbox', fn: () => photo.share(photoID, 'dropbox') },
|
||||
{ type: 'item', title: build.iconic('link-intact') + 'Direct Link', fn: () => window.open(photo.getDirectLink()) },
|
||||
{ type: 'separator' },
|
||||
{ type: 'item', title: build.iconic('ban') + 'Make Private', fn: () => photo.setPublic(photoID) }
|
||||
{ title: `<input readonly id="link" value="${ link }">`, fn: () => {}, class: 'basicContext__item--noHover' },
|
||||
{ },
|
||||
{ title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => photo.share(photoID, 'twitter') },
|
||||
{ title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => photo.share(photoID, 'facebook') },
|
||||
{ title: build.iconic('envelope-closed') + 'Mail', fn: () => photo.share(photoID, 'mail') },
|
||||
{ title: build.iconic('dropbox', iconClass) + 'Dropbox', fn: () => photo.share(photoID, 'dropbox') },
|
||||
{ title: build.iconic('link-intact') + 'Direct Link', fn: () => window.open(photo.getDirectLink()) },
|
||||
{ },
|
||||
{ title: build.iconic('ban') + 'Make Private', fn: () => photo.setPublic(photoID) }
|
||||
]
|
||||
|
||||
basicContext.show(items, e.originalEvent)
|
||||
@ -303,14 +303,14 @@ contextMenu.shareAlbum = function(albumID, e) {
|
||||
let iconClass = 'ionicons'
|
||||
|
||||
let items = [
|
||||
{ type: 'item', title: `<input readonly id="link" value="${ location.href }">`, fn: () => {}, class: 'noHover' },
|
||||
{ type: 'separator' },
|
||||
{ type: 'item', title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => album.share('twitter') },
|
||||
{ type: 'item', title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => album.share('facebook') },
|
||||
{ type: 'item', title: build.iconic('envelope-closed') + 'Mail', fn: () => album.share('mail') },
|
||||
{ type: 'separator' },
|
||||
{ type: 'item', title: build.iconic('pencil') + 'Edit Sharing', fn: () => album.setPublic(albumID, true, e) },
|
||||
{ type: 'item', title: build.iconic('ban') + 'Make Private', fn: () => album.setPublic(albumID, false) }
|
||||
{ title: `<input readonly id="link" value="${ location.href }">`, fn: () => {}, class: 'basicContext__item--noHover' },
|
||||
{ },
|
||||
{ title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => album.share('twitter') },
|
||||
{ title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => album.share('facebook') },
|
||||
{ title: build.iconic('envelope-closed') + 'Mail', fn: () => album.share('mail') },
|
||||
{ },
|
||||
{ title: build.iconic('pencil') + 'Edit Sharing', fn: () => album.setPublic(albumID, true, e) },
|
||||
{ title: build.iconic('ban') + 'Make Private', fn: () => album.setPublic(albumID, false) }
|
||||
]
|
||||
|
||||
basicContext.show(items, e.originalEvent)
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
header = {
|
||||
|
||||
_dom: $('header')
|
||||
_dom: $('.header')
|
||||
|
||||
}
|
||||
|
||||
@ -21,20 +21,25 @@ header.bind = function() {
|
||||
// Event Name
|
||||
let eventName = lychee.getEventName()
|
||||
|
||||
/* Buttons */
|
||||
header.dom('#title').on(eventName, function(e) {
|
||||
if (!$(this).hasClass('editable')) return false
|
||||
if (visible.photo()) contextMenu.photoTitle(album.getID(), photo.getID(), e)
|
||||
else contextMenu.albumTitle(album.getID(), e)
|
||||
header.dom('.header__title').on(eventName, function(e) {
|
||||
|
||||
if ($(this).hasClass('header__title--editable')===false) return false
|
||||
|
||||
if (visible.photo()) contextMenu.photoTitle(album.getID(), photo.getID(), e)
|
||||
else contextMenu.albumTitle(album.getID(), e)
|
||||
|
||||
})
|
||||
|
||||
header.dom('#button_share').on(eventName, function(e) {
|
||||
if (photo.json.public==='1' || photo.json.public==='2') contextMenu.sharePhoto(photo.getID(), e)
|
||||
else photo.setPublic(photo.getID(), e)
|
||||
})
|
||||
|
||||
header.dom('#button_share_album').on(eventName, function(e) {
|
||||
if (album.json.public==='1') contextMenu.shareAlbum(album.getID(), e)
|
||||
else album.setPublic(album.getID(), true, e)
|
||||
})
|
||||
|
||||
header.dom('#button_signin') .on(eventName, lychee.loginDialog)
|
||||
header.dom('#button_settings') .on(eventName, contextMenu.settings)
|
||||
header.dom('#button_info_album') .on(eventName, sidebar.toggle)
|
||||
@ -42,7 +47,7 @@ header.bind = function() {
|
||||
header.dom('.button_add') .on(eventName, contextMenu.add)
|
||||
header.dom('#button_more') .on(eventName, function(e) { contextMenu.photoMore(photo.getID(), e) })
|
||||
header.dom('#button_move') .on(eventName, function(e) { contextMenu.move([photo.getID()], e) })
|
||||
header.dom('#hostedwith') .on(eventName, function() { window.open(lychee.website) })
|
||||
header.dom('.header__hostedwith') .on(eventName, function() { window.open(lychee.website) })
|
||||
header.dom('#button_trash_album') .on(eventName, function() { album.delete([album.getID()]) })
|
||||
header.dom('#button_trash') .on(eventName, function() { photo.delete([photo.getID()]) })
|
||||
header.dom('#button_archive') .on(eventName, function() { album.getArchive(album.getID()) })
|
||||
@ -50,10 +55,9 @@ header.bind = function() {
|
||||
header.dom('#button_back_home') .on(eventName, function() { lychee.goto('') })
|
||||
header.dom('#button_back') .on(eventName, function() { lychee.goto(album.getID()) })
|
||||
|
||||
/* Search */
|
||||
header.dom('#search').on('keyup click', function() { search.find($(this).val()) })
|
||||
header.dom('#clearSearch').on(eventName, function () {
|
||||
header.dom('#search').focus()
|
||||
header.dom('.header__search').on('keyup click', function() { search.find($(this).val()) })
|
||||
header.dom('.header__clear').on(eventName, function () {
|
||||
header.dom('.header__search').focus()
|
||||
search.reset()
|
||||
})
|
||||
|
||||
@ -68,7 +72,7 @@ header.show = function() {
|
||||
clearTimeout($(window).data('timeout'))
|
||||
|
||||
lychee.imageview.removeClass('full')
|
||||
header.dom().removeClass('hidden')
|
||||
header.dom().removeClass('header--hidden')
|
||||
|
||||
// Adjust position or size of photo
|
||||
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin)
|
||||
@ -89,7 +93,7 @@ header.hide = function(e, delay = 500) {
|
||||
let newMargin = (-1 * ($('#imageview #image').height()/2))
|
||||
|
||||
lychee.imageview.addClass('full')
|
||||
header.dom().addClass('hidden')
|
||||
header.dom().addClass('header--hidden')
|
||||
|
||||
// Adjust position or size of photo
|
||||
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin)
|
||||
@ -107,7 +111,7 @@ header.hide = function(e, delay = 500) {
|
||||
|
||||
header.setTitle = function(title = 'Untitled') {
|
||||
|
||||
let $title = header.dom('#title'),
|
||||
let $title = header.dom('.header__title'),
|
||||
html = lychee.html`$${ title }${ build.iconic('caret-bottom') }`
|
||||
|
||||
$title.html(html)
|
||||
@ -118,27 +122,39 @@ header.setTitle = function(title = 'Untitled') {
|
||||
|
||||
header.setMode = function(mode) {
|
||||
|
||||
let albumID = album.getID()
|
||||
if (mode==='albums' && lychee.publicMode===true) mode = 'public'
|
||||
|
||||
switch (mode) {
|
||||
|
||||
case 'public':
|
||||
|
||||
header.dom().removeClass('header--view')
|
||||
header.dom('.header__toolbar--albums, .header__toolbar--album, .header__toolbar--photo').removeClass('header__toolbar--visible')
|
||||
header.dom('.header__toolbar--public').addClass('header__toolbar--visible')
|
||||
|
||||
return true
|
||||
break
|
||||
|
||||
case 'albums':
|
||||
|
||||
header.dom().removeClass('view')
|
||||
$('#tools_album, #tools_photo').hide()
|
||||
$('#tools_albums').show()
|
||||
header.dom().removeClass('header--view')
|
||||
header.dom('.header__toolbar--public, .header__toolbar--album, .header__toolbar--photo').removeClass('header__toolbar--visible')
|
||||
header.dom('.header__toolbar--albums').addClass('header__toolbar--visible')
|
||||
|
||||
return true
|
||||
break
|
||||
|
||||
case 'album':
|
||||
|
||||
header.dom().removeClass('view')
|
||||
$('#tools_albums, #tools_photo').hide()
|
||||
$('#tools_album').show()
|
||||
let albumID = album.getID()
|
||||
|
||||
header.dom().removeClass('header--view')
|
||||
header.dom('.header__toolbar--public, .header__toolbar--albums, .header__toolbar--photo').removeClass('header__toolbar--visible')
|
||||
header.dom('.header__toolbar--album').addClass('header__toolbar--visible')
|
||||
|
||||
// Hide download button when album empty
|
||||
album.json.content === false ? $('#button_archive').hide() : $('#button_archive').show()
|
||||
if (album.json.content===false) $('#button_archive').hide()
|
||||
else $('#button_archive').show()
|
||||
|
||||
// Hide download button when not logged in and album not downloadable
|
||||
if (lychee.publicMode===true && album.json.downloadable==='0') $('#button_archive').hide()
|
||||
@ -157,9 +173,9 @@ header.setMode = function(mode) {
|
||||
|
||||
case 'photo':
|
||||
|
||||
header.dom().addClass('view')
|
||||
$('#tools_albums, #tools_album').hide()
|
||||
$('#tools_photo').show()
|
||||
header.dom().addClass('header--view')
|
||||
header.dom('.header__toolbar--public, .header__toolbar--albums, .header__toolbar--album').removeClass('header__toolbar--visible')
|
||||
header.dom('.header__toolbar--photo').addClass('header__toolbar--visible')
|
||||
|
||||
return true
|
||||
break
|
||||
@ -172,13 +188,13 @@ header.setMode = function(mode) {
|
||||
|
||||
header.setEditable = function(editable) {
|
||||
|
||||
let $title = header.dom('#title')
|
||||
let $title = header.dom('.header__title')
|
||||
|
||||
// Hide editable icon when not logged in
|
||||
if (lychee.publicMode===true) editable = false
|
||||
|
||||
if (editable) $title.addClass('editable')
|
||||
else $title.removeClass('editable')
|
||||
if (editable) $title.addClass('header__title--editable')
|
||||
else $title.removeClass('header__title--editable')
|
||||
|
||||
return true
|
||||
|
||||
|
||||
@ -35,7 +35,7 @@ $(document).ready(function() {
|
||||
})
|
||||
.bind(['s', 'f'], function() {
|
||||
if (visible.photo()) { header.dom('#button_star').click(); return false }
|
||||
else if (visible.albums()) { header.dom('#search').focus(); return false }
|
||||
else if (visible.albums()) { header.dom('.header__search').focus(); return false }
|
||||
})
|
||||
.bind('r', function() {
|
||||
if (visible.album()) { album.setTitle(album.getID()); return false }
|
||||
@ -65,11 +65,11 @@ $(document).ready(function() {
|
||||
})
|
||||
|
||||
Mousetrap.bindGlobal(['esc', 'command+up'], function() {
|
||||
if (basicModal.visible()===true) basicModal.cancel()
|
||||
else if (visible.contextMenu()) contextMenu.close()
|
||||
else if (visible.photo()) lychee.goto(album.getID())
|
||||
else if (visible.album()) lychee.goto('')
|
||||
else if (visible.albums() && $('#search').val().length!==0) search.reset()
|
||||
if (basicModal.visible()===true) basicModal.cancel()
|
||||
else if (visible.contextMenu()) contextMenu.close()
|
||||
else if (visible.photo()) lychee.goto(album.getID())
|
||||
else if (visible.album()) lychee.goto('')
|
||||
else if (visible.albums() && header.dom('.header__search').val().length!==0) search.reset()
|
||||
return false
|
||||
})
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ loadingBar.show = function(status, errorText) {
|
||||
if (!errorText) errorText = 'Whoops, it looks like something went wrong. Please reload the site and try again!'
|
||||
|
||||
// Move header down
|
||||
if (visible.header()) header.dom().addClass('error')
|
||||
if (visible.header()) header.dom().addClass('header__error')
|
||||
|
||||
// Modify loading
|
||||
loadingBar.dom()
|
||||
@ -56,7 +56,7 @@ loadingBar.show = function(status, errorText) {
|
||||
loadingBar._timeout = setTimeout(() => {
|
||||
|
||||
// Move header down
|
||||
if (visible.header()) header.dom().addClass('loading')
|
||||
if (visible.header()) header.dom().addClass('header__loading')
|
||||
|
||||
// Modify loading
|
||||
loadingBar.dom()
|
||||
@ -81,7 +81,7 @@ loadingBar.hide = function(force) {
|
||||
loadingBar.status = null
|
||||
|
||||
// Move header up
|
||||
header.dom().removeClass('error loading')
|
||||
header.dom().removeClass('header__error header__loading')
|
||||
|
||||
// Set timeout
|
||||
clearTimeout(loadingBar._timeout)
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
lychee = {
|
||||
|
||||
title : document.title,
|
||||
version : '3.0.6',
|
||||
version_code : '030006',
|
||||
version : '3.0.7',
|
||||
version_code : '030007',
|
||||
|
||||
update_path : 'http://lychee.electerious.com/version/index.php',
|
||||
updateURL : 'https://github.com/electerious/Lychee',
|
||||
@ -25,7 +25,7 @@ lychee = {
|
||||
dropbox : false,
|
||||
dropboxKey : '',
|
||||
|
||||
content : $('#content'),
|
||||
content : $('.content'),
|
||||
imageview : $('#imageview')
|
||||
|
||||
}
|
||||
@ -190,7 +190,7 @@ lychee.load = function() {
|
||||
photo.json = null
|
||||
|
||||
// Show Photo
|
||||
if (lychee.content.html()==='' || ($('#search').length && $('#search').val().length!==0)) {
|
||||
if (lychee.content.html()==='' || (header.dom('.header__search').length && header.dom('.header__search').val().length!==0)) {
|
||||
lychee.content.hide()
|
||||
album.load(albumID, true)
|
||||
}
|
||||
@ -201,9 +201,6 @@ lychee.load = function() {
|
||||
// Trash data
|
||||
photo.json = null
|
||||
|
||||
// Hide sidebar
|
||||
if (visible.sidebar()) sidebar.toggle()
|
||||
|
||||
// Show Album
|
||||
if (visible.photo()) view.photo.hide()
|
||||
if (album.json && albumID==album.json.id) view.album.title()
|
||||
@ -252,12 +249,12 @@ lychee.setTitle = function(title, editable) {
|
||||
|
||||
lychee.setMode = function(mode) {
|
||||
|
||||
$('#button_settings, #button_settings, #button_search, #search, #button_trash_album, #button_share_album, .button_add, .button_divider').remove()
|
||||
$('#button_settings, #button_trash_album, #button_share_album, .button_add, .header__divider').remove()
|
||||
$('#button_trash, #button_move, #button_share, #button_star').remove()
|
||||
|
||||
$(document)
|
||||
.off('click', '#title.editable')
|
||||
.off('touchend', '#title.editable')
|
||||
.off('click', '.header__title--editable')
|
||||
.off('touchend', '.header__title--editable')
|
||||
.off('contextmenu', '.photo')
|
||||
.off('contextmenu', '.album')
|
||||
.off('drop')
|
||||
@ -274,7 +271,6 @@ lychee.setMode = function(mode) {
|
||||
|
||||
if (mode==='public') {
|
||||
|
||||
header.dom('#button_signin, #hostedwith').show()
|
||||
lychee.publicMode = true
|
||||
|
||||
} else if (mode==='view') {
|
||||
|
||||
@ -16,7 +16,7 @@ multiselect.position = {
|
||||
|
||||
multiselect.bind = function() {
|
||||
|
||||
$('#content').on('mousedown', (e) => { if (e.which===1) multiselect.show(e) })
|
||||
$('.content').on('mousedown', (e) => { if (e.which===1) multiselect.show(e) })
|
||||
|
||||
return true
|
||||
|
||||
|
||||
@ -56,7 +56,7 @@ photo.load = function(photoID, albumID) {
|
||||
|
||||
setTimeout(() => {
|
||||
lychee.content.show()
|
||||
//photo.preloadNext(photoID, albumID);
|
||||
photo.preloadNext(photoID)
|
||||
}, 300)
|
||||
|
||||
})
|
||||
@ -66,21 +66,16 @@ photo.load = function(photoID, albumID) {
|
||||
// Preload the next photo for better response time
|
||||
photo.preloadNext = function(photoID) {
|
||||
|
||||
// Never preload on mobile devices with bare RAM and
|
||||
// mostly mobile internet
|
||||
// {{ code }}
|
||||
|
||||
if (album.json &&
|
||||
album.json.content &&
|
||||
album.json.content[photoID] &&
|
||||
album.json.content[photoID].nextPhoto!='') {
|
||||
album.json.content &&
|
||||
album.json.content[photoID] &&
|
||||
album.json.content[photoID].nextPhoto!='') {
|
||||
|
||||
let nextPhoto = album.json.content[photoID].nextPhoto,
|
||||
url = album.json.content[nextPhoto].url
|
||||
|
||||
photo.cache = new Image()
|
||||
photo.cache.src = url
|
||||
photo.cache.onload = () => photo.cache = null
|
||||
$('head [data-prefetch]').remove()
|
||||
$('head').append(`<link data-prefetch rel="prefetch" href="${ url }">`)
|
||||
|
||||
}
|
||||
|
||||
@ -95,9 +90,9 @@ photo.parse = function() {
|
||||
photo.previous = function(animate) {
|
||||
|
||||
if (photo.getID()!==false &&
|
||||
album.json &&
|
||||
album.json.content[photo.getID()] &&
|
||||
album.json.content[photo.getID()].previousPhoto!=='') {
|
||||
album.json &&
|
||||
album.json.content[photo.getID()] &&
|
||||
album.json.content[photo.getID()].previousPhoto!=='') {
|
||||
|
||||
let delay = 0
|
||||
|
||||
@ -126,9 +121,9 @@ photo.previous = function(animate) {
|
||||
photo.next = function(animate) {
|
||||
|
||||
if (photo.getID()!==false &&
|
||||
album.json &&
|
||||
album.json.content[photo.getID()] &&
|
||||
album.json.content[photo.getID()].nextPhoto!=='') {
|
||||
album.json &&
|
||||
album.json.content[photo.getID()] &&
|
||||
album.json.content[photo.getID()].nextPhoto!=='') {
|
||||
|
||||
let delay = 0
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ search.find = function(term) {
|
||||
|
||||
$(window).data('timeout', setTimeout(function() {
|
||||
|
||||
if ($('#search').val().length!==0) {
|
||||
if (header.dom('.header__search').val().length!==0) {
|
||||
|
||||
api.post('search', { term }, function(data) {
|
||||
|
||||
@ -54,7 +54,7 @@ search.find = function(term) {
|
||||
|
||||
$('.no_content').remove()
|
||||
|
||||
lychee.animate('#content', 'contentZoomOut')
|
||||
lychee.animate('.content', 'contentZoomOut')
|
||||
|
||||
search.hash = data.hash
|
||||
|
||||
@ -65,7 +65,7 @@ search.find = function(term) {
|
||||
$('body').append(build.no_content('magnifying-glass'))
|
||||
} else {
|
||||
lychee.content.html(html)
|
||||
lychee.animate('#content', 'contentZoomIn')
|
||||
lychee.animate(lychee.content, 'contentZoomIn')
|
||||
}
|
||||
|
||||
}, 300)
|
||||
@ -82,7 +82,7 @@ search.find = function(term) {
|
||||
|
||||
search.reset = function() {
|
||||
|
||||
$('#search').val('')
|
||||
header.dom('.header__search').val('')
|
||||
$('.no_content').remove()
|
||||
|
||||
if (search.hash!=null) {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
sidebar = {
|
||||
|
||||
_dom: $('#sidebar'),
|
||||
_dom: $('.sidebar'),
|
||||
types: {
|
||||
DEFAULT : 0,
|
||||
TAGS : 1
|
||||
@ -71,7 +71,7 @@ sidebar.toggle = function() {
|
||||
if (visible.sidebar() || visible.sidebarbutton()) {
|
||||
|
||||
header.dom('.button--info').toggleClass('active')
|
||||
lychee.content.toggleClass('sidebar')
|
||||
lychee.content.toggleClass('content--sidebar')
|
||||
sidebar.dom().toggleClass('active')
|
||||
|
||||
return true
|
||||
@ -329,7 +329,7 @@ sidebar.render = function(structure) {
|
||||
let _html = ''
|
||||
|
||||
_html += `
|
||||
<div class='divider'>
|
||||
<div class='sidebar__divider'>
|
||||
<h1>${ section.title }</h1>
|
||||
</div>
|
||||
<table>
|
||||
@ -374,7 +374,7 @@ sidebar.render = function(structure) {
|
||||
if (section.editable===true) editable = build.editIcon('edit_tags')
|
||||
|
||||
_html += lychee.html`
|
||||
<div class='divider'>
|
||||
<div class='sidebar__divider'>
|
||||
<h1>$${ section.title }</h1>
|
||||
</div>
|
||||
<div id='tags'>
|
||||
|
||||
@ -274,7 +274,7 @@ view.album = {
|
||||
let structure = sidebar.createStructure.album(album.json),
|
||||
html = sidebar.render(structure)
|
||||
|
||||
sidebar.dom('.wrapper').html(html)
|
||||
sidebar.dom('.sidebar__wrapper').html(html)
|
||||
sidebar.bind()
|
||||
|
||||
}
|
||||
@ -440,7 +440,7 @@ view.photo = {
|
||||
let structure = sidebar.createStructure.photo(photo.json),
|
||||
html = sidebar.render(structure)
|
||||
|
||||
sidebar.dom('.wrapper').html(html)
|
||||
sidebar.dom('.sidebar__wrapper').html(html)
|
||||
sidebar.bind()
|
||||
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
let lychee = {}
|
||||
|
||||
lychee.content = $('#content')
|
||||
lychee.content = $('.content')
|
||||
|
||||
lychee.getEventName = function() {
|
||||
|
||||
@ -155,7 +155,7 @@ const loadPhotoInfo = function(photoID) {
|
||||
// Set title
|
||||
if (!data.title) data.title = 'Untitled'
|
||||
document.title = 'Lychee - ' + data.title
|
||||
header.dom('#title').html(lychee.escapeHTML(data.title))
|
||||
header.dom('.header__title').html(lychee.escapeHTML(data.title))
|
||||
|
||||
let size = getPhotoSize(data)
|
||||
|
||||
@ -168,7 +168,7 @@ const loadPhotoInfo = function(photoID) {
|
||||
let structure = sidebar.createStructure.photo(data),
|
||||
html = sidebar.render(structure)
|
||||
|
||||
sidebar.dom('.wrapper').html(html)
|
||||
sidebar.dom('.sidebar__wrapper').html(html)
|
||||
sidebar.bind()
|
||||
|
||||
})
|
||||
|
||||
@ -6,12 +6,13 @@
|
||||
visible = {}
|
||||
|
||||
visible.albums = function() {
|
||||
if (header.dom('#tools_albums').css('display')==='block') return true
|
||||
if (header.dom('.header__toolbar--public').hasClass('header__toolbar--visible')) return true
|
||||
if (header.dom('.header__toolbar--albums').hasClass('header__toolbar--visible')) return true
|
||||
return false
|
||||
}
|
||||
|
||||
visible.album = function() {
|
||||
if (header.dom('#tools_album').css('display')==='block') return true
|
||||
if (header.dom('.header__toolbar--album').hasClass('header__toolbar--visible')) return true
|
||||
return false
|
||||
}
|
||||
|
||||
@ -37,7 +38,7 @@ visible.sidebarbutton = function() {
|
||||
}
|
||||
|
||||
visible.header = function() {
|
||||
if (header.dom().hasClass('hidden')===true) return false
|
||||
if (header.dom().hasClass('header--hidden')===true) return false
|
||||
return true
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,4 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
/* Animation Setter ------------------------------------------------*/
|
||||
// Animation Setter ---------------------------------------------------- //
|
||||
.fadeIn {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: .3s;
|
||||
@ -17,19 +13,7 @@
|
||||
animation-timing-function: $timing;
|
||||
}
|
||||
|
||||
/* moveUp ------------------------------------------------*/
|
||||
@keyframes moveUp {
|
||||
0% {
|
||||
transform: translateY(100px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* fadeIn ------------------------------------------------*/
|
||||
// Fade -------------------------------------------------------------- //
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@ -39,7 +23,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* fadeOut ------------------------------------------------*/
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
@ -49,7 +32,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* moveBackground ------------------------------------------------*/
|
||||
// Move -------------------------------------------------------------- //
|
||||
@keyframes moveBackground {
|
||||
0% {
|
||||
background-position-x: 0px;
|
||||
@ -59,7 +42,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* zoomIn ------------------------------------------------*/
|
||||
// Zoom -------------------------------------------------------------- //
|
||||
@keyframes zoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@ -71,7 +54,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* zoomOut ------------------------------------------------*/
|
||||
@keyframes zoomOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
@ -83,7 +65,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* popIn ------------------------------------------------*/
|
||||
// PopIn -------------------------------------------------------------- //
|
||||
@keyframes popIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@ -95,7 +77,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* pulse ------------------------------------------------*/
|
||||
// Pulse -------------------------------------------------------------- //
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
border-radius: 5px;
|
||||
border: 1px solid black(.7);
|
||||
border-bottom: 1px solid black(.8);
|
||||
transition: none;
|
||||
|
||||
&__item {
|
||||
margin-bottom: 2px;
|
||||
|
||||
@ -1,8 +1,4 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
/* Context ------------------------------------------------*/
|
||||
// Extended Theme -------------------------------------------------------------- //
|
||||
.basicContext {
|
||||
|
||||
&__data .cover {
|
||||
@ -31,7 +27,7 @@
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* Link ------------------------------------------------*/
|
||||
// Link -------------------------------------------------------------- //
|
||||
&__data input#link {
|
||||
margin: -2px 0;
|
||||
padding: 5px 7px 6px;
|
||||
@ -44,13 +40,13 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* No Hover ------------------------------------------------*/
|
||||
&__item.noHover &__data {
|
||||
// No hover -------------------------------------------------------------- //
|
||||
&__item--noHover &__data {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
&__item.noHover:hover &__data {
|
||||
background: none;
|
||||
&__item--noHover:hover &__data {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,8 +1,4 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
#content {
|
||||
.content {
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -17,43 +13,33 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-top: 1px solid white(.02);
|
||||
background: white(.02);
|
||||
}
|
||||
|
||||
&.sidebar { width: calc(100% - 300px); }
|
||||
&--sidebar {
|
||||
width: calc(100% - 300px);
|
||||
}
|
||||
|
||||
/* Animations ------------------------------------------------------------------- */
|
||||
// Animations -------------------------------------------------------------- //
|
||||
&.contentZoomIn .album,
|
||||
&.contentZoomIn .photo {
|
||||
animation-name: zoomIn;
|
||||
animation-duration: .2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: $timing;
|
||||
}
|
||||
|
||||
&.contentZoomIn .divider {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: .2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: $timing;
|
||||
}
|
||||
|
||||
&.contentZoomOut .album,
|
||||
&.contentZoomOut .photo {
|
||||
animation-name: zoomOut;
|
||||
animation-duration: .2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: $timing;
|
||||
}
|
||||
|
||||
&.contentZoomOut .divider {
|
||||
animation-name: fadeOut;
|
||||
animation-duration: .2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: $timing;
|
||||
}
|
||||
|
||||
/* Albums and Photos ------------------------------------------------*/
|
||||
// Albums and Photos ------------------------------------------------------ //
|
||||
.album,
|
||||
.photo {
|
||||
position: relative;
|
||||
@ -62,11 +48,15 @@
|
||||
margin: 30px 0 0 30px;
|
||||
cursor: default;
|
||||
|
||||
animation-duration: .2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: $timing;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: #222;
|
||||
background: #222;
|
||||
box-shadow: 0 2px 5px black(.5);
|
||||
border: 1px solid white(.5);
|
||||
transition: opacity .3s ease-out, transform .3s ease-out, border-color .3s ease-out;
|
||||
@ -84,7 +74,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Album ------------------------------------------------*/
|
||||
// Album -------------------------------------------------------------- //
|
||||
.album {
|
||||
img:first-child,
|
||||
img:nth-child(2) {
|
||||
@ -93,20 +83,25 @@
|
||||
}
|
||||
|
||||
&:hover img:nth-child(1),
|
||||
&:hover img:nth-child(2) { opacity: 1; }
|
||||
&:hover img:nth-child(2) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover img:nth-child(1) { transform: rotate(-2deg) translateY(10px) translateX(-12px); }
|
||||
&:hover img:nth-child(1) {
|
||||
transform: rotate(-2deg) translateY(10px) translateX(-12px);
|
||||
}
|
||||
|
||||
&:hover img:nth-child(2) { transform: rotate(5deg) translateY(-8px) translateX(12px); }
|
||||
&:hover img:nth-child(2) {
|
||||
transform: rotate(5deg) translateY(-8px) translateX(12px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Album/Photo Overlay ------------------------------------------------*/
|
||||
// Overlay -------------------------------------------------------------- //
|
||||
.album .overlay,
|
||||
.photo .overlay {
|
||||
position: absolute;
|
||||
margin: 0 1px;
|
||||
width: 200px;
|
||||
background: black(.6);
|
||||
background: linear-gradient(to bottom, black(0), black(.6));
|
||||
bottom: 1px;
|
||||
}
|
||||
@ -155,9 +150,11 @@
|
||||
}
|
||||
|
||||
.album img[data-overlay='false'] + .overlay h1,
|
||||
.album img[data-overlay='false'] + .overlay a { text-shadow: none; }
|
||||
.album img[data-overlay='false'] + .overlay a {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Badges ------------------------------------------------*/
|
||||
// Badge -------------------------------------------------------------- //
|
||||
.album .badges,
|
||||
.photo .badges {
|
||||
position: relative;
|
||||
@ -180,7 +177,9 @@
|
||||
text-shadow: 0 1px 0 black(.4);
|
||||
opacity: .9;
|
||||
|
||||
&--visible { display: inline-block; }
|
||||
&--visible {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.iconic {
|
||||
fill: #fff;
|
||||
@ -190,7 +189,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Divider ------------------------------------------------*/
|
||||
// Divider -------------------------------------------------------------- //
|
||||
.divider {
|
||||
margin: 50px 0 0;
|
||||
padding: 10px 0 0;
|
||||
@ -199,6 +198,10 @@
|
||||
border-top: 1px solid white(.02);
|
||||
box-shadow: $shadow;
|
||||
|
||||
animation-duration: .2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: $timing;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 10px;
|
||||
border-top: 0;
|
||||
@ -215,7 +218,7 @@
|
||||
|
||||
}
|
||||
|
||||
/* No Content ------------------------------------------------*/
|
||||
// No content -------------------------------------------------------------- //
|
||||
.no_content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
/* Functions ------------------------------------------------*/
|
||||
@function black($opacity) {
|
||||
@return rgba(0, 0, 0, $opacity);
|
||||
}
|
||||
|
||||
@function white($opacity) {
|
||||
@return rgba(255, 255, 255, $opacity);
|
||||
}
|
||||
|
||||
/* Vars ------------------------------------------------*/
|
||||
// Properties
|
||||
$shadowLight: 0 -1px 0 black(.1);
|
||||
$shadow: 0 -1px 0 black(.2);
|
||||
|
||||
// Colors
|
||||
$colorBlue: #2293EC;
|
||||
$colorRed: #d92c34;
|
||||
|
||||
// Animations
|
||||
$timing: cubic-bezier(.51, .92, .24, 1);
|
||||
$timingBounce: cubic-bezier(.51, .92, .24, 1.15);
|
||||
@ -1,8 +1,4 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
header {
|
||||
.header {
|
||||
|
||||
position: fixed;
|
||||
height: 49px;
|
||||
@ -12,31 +8,41 @@ header {
|
||||
z-index: 1;
|
||||
transition: transform .3s ease-out;
|
||||
|
||||
/* Modes ------------------------------------------------*/
|
||||
&.hidden { transform: translateY(-60px); }
|
||||
// Modes -------------------------------------------------------------- //
|
||||
&--hidden { transform: translateY(-60px); }
|
||||
|
||||
&.loading { transform: translateY(2px); }
|
||||
&--loading { transform: translateY(2px); }
|
||||
|
||||
&.error { transform: translateY(40px); }
|
||||
&--error { transform: translateY(40px); }
|
||||
|
||||
&.view {
|
||||
&--view {
|
||||
background: none;
|
||||
border-bottom: none;
|
||||
|
||||
&.error { background-color: rgba(10, 10, 10, .99); }
|
||||
.header__error { background-color: rgba(10, 10, 10, .99); }
|
||||
}
|
||||
|
||||
/* Title ------------------------------------------------*/
|
||||
#title {
|
||||
position: absolute;
|
||||
margin: 0 30%;
|
||||
width: 40%;
|
||||
padding: 15px 0;
|
||||
// Toolbars -------------------------------------------------------------- //
|
||||
&__toolbar {
|
||||
display: none;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
|
||||
&--visible { display: flex; }
|
||||
}
|
||||
|
||||
// Title -------------------------------------------------------------- //
|
||||
&__title {
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
cursor: default;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@ -51,37 +57,24 @@ header {
|
||||
transition: fill .2s ease-out;
|
||||
}
|
||||
|
||||
&:hover .iconic { fill: white(1); }
|
||||
&:hover .iconic {
|
||||
fill: white(1);
|
||||
}
|
||||
|
||||
&:active .iconic {
|
||||
transition: none;
|
||||
fill: white(.8);
|
||||
}
|
||||
|
||||
&.editable .iconic { display: inline-block; }
|
||||
&--editable .iconic { display: inline-block; }
|
||||
}
|
||||
|
||||
/* Toolbars ------------------------------------------------*/
|
||||
.toolbar {
|
||||
display: none;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* Button ------------------------------------------------*/
|
||||
// Buttons -------------------------------------------------------------- //
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 17px 8px;
|
||||
width: 15px;
|
||||
flex-shrink: 0;
|
||||
padding: 16px 8px;
|
||||
height: 15px;
|
||||
|
||||
&--left { float: left; }
|
||||
|
||||
&--right { float: right; }
|
||||
|
||||
.iconic {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
@ -89,7 +82,9 @@ header {
|
||||
transition: fill .2s ease-out;
|
||||
}
|
||||
|
||||
&:hover .iconic { fill: white(1); }
|
||||
&:hover .iconic {
|
||||
fill: white(1);
|
||||
}
|
||||
|
||||
&:active .iconic {
|
||||
transition: none;
|
||||
@ -101,24 +96,19 @@ header {
|
||||
&--eye.active .iconic { fill: #ff9737; }
|
||||
|
||||
&--info.active .iconic { fill: $colorBlue; }
|
||||
|
||||
&#button_signin { display: none; }
|
||||
|
||||
}
|
||||
|
||||
/* Button Divider ------------------------------------------------*/
|
||||
.button_divider {
|
||||
float: right;
|
||||
position: relative;
|
||||
// Divider -------------------------------------------------------------- //
|
||||
&__divider {
|
||||
flex-shrink: 0;
|
||||
width: 14px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* Search ------------------------------------------------*/
|
||||
#search {
|
||||
float: right;
|
||||
// Search -------------------------------------------------------------- //
|
||||
&__search {
|
||||
flex-shrink: 0;
|
||||
width: 80px;
|
||||
margin: 12px 12px 0 0;
|
||||
margin: 0;
|
||||
padding: 5px 12px 6px 12px;
|
||||
background-color: #1d1d1d;
|
||||
color: #fff;
|
||||
@ -141,10 +131,10 @@ header {
|
||||
&::-ms-clear { display: none; }
|
||||
}
|
||||
|
||||
#clearSearch {
|
||||
&__clear {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 78px;
|
||||
right: 60px;
|
||||
padding: 0;
|
||||
color: white(.5);
|
||||
font-size: 20px;
|
||||
@ -155,15 +145,15 @@ header {
|
||||
&:hover { color: white(1); }
|
||||
}
|
||||
|
||||
/* Hosted with Lychee ------------------------------------------------*/
|
||||
#hostedwith {
|
||||
float: right;
|
||||
// Hosted with -------------------------------------------------------------- //
|
||||
&__hostedwith {
|
||||
flex-shrink: 0;
|
||||
padding: 5px 10px;
|
||||
margin: 13px 9px;
|
||||
margin: 11px 0;
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
border-radius: 100px;
|
||||
display: none;
|
||||
cursor: default;
|
||||
|
||||
&:hover { background-color: black(.3); }
|
||||
}
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
#imageview {
|
||||
|
||||
position: fixed;
|
||||
@ -13,26 +9,28 @@
|
||||
background-color: rgba(10, 10, 10, .98);
|
||||
transition: background-color .3s;
|
||||
|
||||
/* Modes ------------------------------------------------*/
|
||||
// Modes -------------------------------------------------------------- //
|
||||
&.view { background-color: inherit; }
|
||||
|
||||
&.full { background-color: black(1); }
|
||||
|
||||
/* ImageView ------------------------------------------------*/
|
||||
// ImageView -------------------------------------------------------------- //
|
||||
#image {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce;
|
||||
will-change: transform;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce;
|
||||
|
||||
animation-name: zoomIn;
|
||||
animation-duration: .3s;
|
||||
animation-timing-function: $timingBounce;
|
||||
will-change: transform;
|
||||
|
||||
&.small {
|
||||
top: 50%;
|
||||
@ -49,7 +47,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Previous/Next Buttons ------------------------------------------------*/
|
||||
// Previous/Next Buttons -------------------------------------------------------------- //
|
||||
.arrow_wrapper {
|
||||
position: fixed;
|
||||
width: 15%;
|
||||
@ -88,9 +86,13 @@
|
||||
}
|
||||
|
||||
&:hover a#previous,
|
||||
&:hover a#next { transform: translateX(0); }
|
||||
&:hover a#next {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
a:hover { opacity: 1; }
|
||||
a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.iconic {
|
||||
fill: white(.8);
|
||||
|
||||
@ -1,27 +1,25 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
#loading {
|
||||
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-size: 100px 3px;
|
||||
background-repeat: repeat-x;
|
||||
border-bottom: 1px solid black(.3);
|
||||
display: none;
|
||||
|
||||
animation-name: moveBackground;
|
||||
animation-duration: .3s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
|
||||
/* Modes ------------------------------------------------*/
|
||||
// Modes -------------------------------------------------------------- //
|
||||
&.loading {
|
||||
height: 3px;
|
||||
background-image: linear-gradient(to right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.error {
|
||||
height: 40px;
|
||||
background-color: #2f0d0e;
|
||||
@ -29,7 +27,7 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Content ------------------------------------------------*/
|
||||
// Content -------------------------------------------------------------- //
|
||||
h1 {
|
||||
margin: 13px 13px 0 13px;
|
||||
color: #ddd;
|
||||
|
||||
@ -1,33 +1,5 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
|
||||
#title {
|
||||
margin: 0 20% !important;
|
||||
width: 40% !important;
|
||||
}
|
||||
|
||||
#title.view {
|
||||
margin: 0 20% !important;
|
||||
width: 60% !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
|
||||
#title {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#title.view {
|
||||
display: block !important;
|
||||
width: 70% !important;
|
||||
margin: 0 20% 0 10% !important;
|
||||
}
|
||||
|
||||
#imageview .arrow_wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
.basicModalContainer {
|
||||
background-color: black(.85);
|
||||
}
|
||||
@ -11,12 +7,20 @@
|
||||
background: linear-gradient(to bottom, #444, #333);
|
||||
box-shadow: 0 1px 4px black(.2), inset 0 1px 0 white(.05);
|
||||
|
||||
/* Reset default styles ------------------------------------------------*/
|
||||
.basicModal__content { padding: 0; }
|
||||
.basicModal__content p { margin: 0; }
|
||||
.basicModal__buttons { box-shadow: none; }
|
||||
// Reset -------------------------------------------------------------- //
|
||||
&__content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Text ------------------------------------------------*/
|
||||
&__content p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Text -------------------------------------------------------------- //
|
||||
p {
|
||||
padding: 10px 30px;
|
||||
color: white(.9);
|
||||
@ -47,8 +51,8 @@
|
||||
&.less { padding-bottom: 30px; }
|
||||
}
|
||||
|
||||
/* Buttons ------------------------------------------------*/
|
||||
.basicModal__button {
|
||||
// Buttons -------------------------------------------------------------- //
|
||||
&__button {
|
||||
padding: 13px 0 15px;
|
||||
background: black(.02);
|
||||
color: white(.5);
|
||||
@ -75,7 +79,7 @@
|
||||
&.hidden { display: none; }
|
||||
}
|
||||
|
||||
/* Inputs ------------------------------------------------*/
|
||||
// Inputs -------------------------------------------------------------- //
|
||||
input.text {
|
||||
padding: 9px 2px;
|
||||
width: 100%;
|
||||
@ -99,7 +103,7 @@
|
||||
&:last-child { margin-bottom: 10px; }
|
||||
}
|
||||
|
||||
/* Radio Buttons ------------------------------------------------*/
|
||||
// Radio Buttons ----------------------------------------------------------- //
|
||||
.choice {
|
||||
padding: 0 30px 15px;
|
||||
width: 100%;
|
||||
@ -140,7 +144,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Checked */
|
||||
// Checked
|
||||
label input:checked ~ .checkbox {
|
||||
background: black(.5);
|
||||
.iconic {
|
||||
@ -149,7 +153,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Active */
|
||||
// Active
|
||||
label input:active ~ .checkbox {
|
||||
background: black(.3);
|
||||
.iconic { opacity: .8; }
|
||||
@ -174,7 +178,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Select ------------------------------------------------*/
|
||||
// Select -------------------------------------------------------------- //
|
||||
.select {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@ -233,7 +237,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Version ------------------------------------------------*/
|
||||
// Version -------------------------------------------------------------- //
|
||||
.version {
|
||||
margin: -5px 0 0;
|
||||
padding: 0 30px 30px !important;
|
||||
@ -246,7 +250,7 @@
|
||||
span a { color: white(.3); }
|
||||
}
|
||||
|
||||
/* Title ------------------------------------------------*/
|
||||
// Title -------------------------------------------------------------- //
|
||||
h1 {
|
||||
float: left;
|
||||
width: 100%;
|
||||
@ -258,7 +262,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Rows ------------------------------------------------*/
|
||||
// Rows -------------------------------------------------------------- //
|
||||
.rows {
|
||||
margin: 0 8px 8px;
|
||||
width: calc(100% - 16px);
|
||||
@ -270,7 +274,7 @@
|
||||
box-shadow: inset 0 0 3px black(.4);
|
||||
}
|
||||
|
||||
/* Row ------------------------------------------------*/
|
||||
// Row -------------------------------------------------------------- //
|
||||
.rows .row {
|
||||
float: left;
|
||||
padding: 8px 0;
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
#multiselect {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 94, 204, .3);
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
#sidebar {
|
||||
.sidebar {
|
||||
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
right: -370px;
|
||||
right: -360px;
|
||||
width: 350px;
|
||||
height: calc(100% - 50px);
|
||||
background-color: rgba(25, 25, 25, .98);
|
||||
@ -14,7 +10,7 @@
|
||||
transform: translateX(0);
|
||||
transition: transform .3s $timing;
|
||||
|
||||
&.active { transform: translateX(-320px); }
|
||||
&.active { transform: translateX(-360px); }
|
||||
|
||||
&.notSelectable table tr td:last-child {
|
||||
-webkit-user-select: none !important;
|
||||
@ -22,8 +18,8 @@
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
/* Header ------------------------------------------------*/
|
||||
.header {
|
||||
// Header -------------------------------------------------------------- //
|
||||
&__header {
|
||||
float: left;
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
@ -31,27 +27,27 @@
|
||||
border-top: 1px solid $colorBlue;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
&__header h1 {
|
||||
position: absolute;
|
||||
margin: 15px 50px 15px 0;
|
||||
width: calc(100% - 50px);
|
||||
margin: 15px 0 15px 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Wrapper ------------------------------------------------*/
|
||||
.wrapper {
|
||||
// Wrapper -------------------------------------------------------------- //
|
||||
&__wrapper {
|
||||
float: left;
|
||||
height: calc(100% - 49px);
|
||||
width: 300px;
|
||||
width: 350px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Divider ------------------------------------------------*/
|
||||
.divider {
|
||||
// Divider -------------------------------------------------------------- //
|
||||
&__divider {
|
||||
float: left;
|
||||
padding: 12px 0 8px;
|
||||
width: 100%;
|
||||
@ -71,7 +67,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Edit ------------------------------------------------*/
|
||||
// Edit -------------------------------------------------------------- //
|
||||
.edit {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
@ -92,7 +88,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Table ------------------------------------------------*/
|
||||
// Table -------------------------------------------------------------- //
|
||||
table {
|
||||
float: left;
|
||||
margin: 10px 0 15px 20px;
|
||||
@ -114,7 +110,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Tags ------------------------------------------------*/
|
||||
// Tags -------------------------------------------------------------- //
|
||||
#tags {
|
||||
width: calc(100% - 40px);
|
||||
margin: 16px 20px 12px 20px;
|
||||
|
||||
@ -2,7 +2,28 @@
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
@import 'etc';
|
||||
// Functions --------------------------------------------------------------- //
|
||||
@function black($opacity) {
|
||||
@return rgba(0, 0, 0, $opacity);
|
||||
}
|
||||
|
||||
@function white($opacity) {
|
||||
@return rgba(255, 255, 255, $opacity);
|
||||
}
|
||||
|
||||
// Properties -------------------------------------------------------------- //
|
||||
$shadowLight : 0 -1px 0 black(.1);
|
||||
$shadow : 0 -1px 0 black(.2);
|
||||
|
||||
// Colors ------------------------------------------------------------------ //
|
||||
$colorBlue : #2293EC;
|
||||
$colorRed : #d92c34;
|
||||
|
||||
// Animations -------------------------------------------------------------- //
|
||||
$timing : cubic-bezier(.51, .92, .24, 1);
|
||||
$timingBounce : cubic-bezier(.51, .92, .24, 1.15);
|
||||
|
||||
// Rest -------------------------------------------------------------------- //
|
||||
@import 'reset';
|
||||
|
||||
* {
|
||||
@ -46,6 +67,7 @@ input {
|
||||
|
||||
#upload { display: none; }
|
||||
|
||||
// Files ------------------------------------------------------------------- //
|
||||
@import 'animations';
|
||||
@import 'content';
|
||||
@import 'basicContext.custom';
|
||||
|
||||
26
view.php
26
view.php
@ -51,16 +51,20 @@
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Header -->
|
||||
<header class="view">
|
||||
<header class="header header--view">
|
||||
|
||||
<a class="button button--right button--info" id="button_info" title="About Photo">
|
||||
<svg class="iconic"><use xlink:href="#info"></use></svg>
|
||||
</a>
|
||||
<a class="button button--right" id="button_direct" title="Direct Link">
|
||||
<svg class="iconic"><use xlink:href="#link-intact"></use></svg>
|
||||
</a>
|
||||
<div class="header__toolbar header__toolbar--public header__toolbar--visible">
|
||||
|
||||
<a id="title" class="view"></a>
|
||||
<a class="header__title"></a>
|
||||
|
||||
<a class="button button--info" id="button_info" title="About Photo">
|
||||
<svg class="iconic"><use xlink:href="#info"></use></svg>
|
||||
</a>
|
||||
<a class="button" id="button_direct" title="Direct Link">
|
||||
<svg class="iconic"><use xlink:href="#link-intact"></use></svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
@ -68,11 +72,11 @@
|
||||
<div id="imageview" class="view"></div>
|
||||
|
||||
<!-- Infobox -->
|
||||
<div id="sidebar">
|
||||
<div class='header'>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar__header">
|
||||
<h1>About</h1>
|
||||
</div>
|
||||
<div class='wrapper'></div>
|
||||
<div class="sidebar__wrapper"></div>
|
||||
</div>
|
||||
|
||||
<!-- JS -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user