arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

HTML and CSS changes

Browse Source
This commit is contained in:
Tobias Reich 2015-09-28 18:47:50 +02:00
parent e90d125a20
commit 453c587129
23 changed files with 308 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.css vendored
View File

Binary file not shown.

BIN
dist/main.js vendored
View File

Binary file not shown.

BIN
dist/view.js vendored
View File

Binary file not shown.

125
index.html
View File

@ -9,7 +9,6 @@
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="dist/main.css"> <link type="text/css" rel="stylesheet" href="dist/main.css">
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
@ -33,88 +32,106 @@
<div id="loading"></div> <div id="loading"></div>
<!-- Header --> <!-- Header -->
<header> <header class="header">
<!-- Title --> <div class="header__toolbar header__toolbar--public">
<a id="title"></a>
<!-- Buttons --> <a class="button" id="button_signin" title="Sign In">
<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">
<svg class="iconic"><use xlink:href="#account-login"></use></svg> <svg class="iconic"><use xlink:href="#account-login"></use></svg>
</a> </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">&times;</a>
<a class="header__divider"></a>
<a class="button button_add" title="Add">
<svg class="iconic"><use xlink:href="#plus"></use></svg> <svg class="iconic"><use xlink:href="#plus"></use></svg>
</a> </a>
<a class="button_divider"></a>
<input id="search" type="text" name="search" placeholder="Search …">
<a id="clearSearch">&times;</a>
</div> </div>
<div class="toolbar" id="tools_album"> <div class="header__toolbar header__toolbar--album">
<a class="button button--left" id="button_back_home" title="Close Album">
<a class="button" id="button_back_home" title="Close Album">
<svg class="iconic"><use xlink:href="#chevron-left"></use></svg> <svg class="iconic"><use xlink:href="#chevron-left"></use></svg>
</a> </a>
<a class="button button--right button_add" title="Add">
<svg class="iconic"><use xlink:href="#plus"></use></svg> <a class="header__title"></a>
</a>
<a class="button_divider"></a> <a class="button button--eye" id="button_share_album" title="Share Album">
<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">
<svg class="iconic iconic--eye"><use xlink:href="#eye"></use></svg> <svg class="iconic iconic--eye"><use xlink:href="#eye"></use></svg>
</a> </a>
</div> <a class="button" id="button_archive" title="Download Album">
<div class="toolbar" id="tools_photo"> <svg class="iconic"><use xlink:href="#cloud-download"></use></svg>
<a class="button button--left" id="button_back" title="Close Photo">
<svg class="iconic"><use xlink:href="#chevron-left"></use></svg>
</a> </a>
<a class="button button--right" id="button_more" title="More"> <a class="button button--info" id="button_info_album" title="About Album">
<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">
<svg class="iconic"><use xlink:href="#info"></use></svg> <svg class="iconic"><use xlink:href="#info"></use></svg>
</a> </a>
<a class="button_divider"></a> <a class="button" id="button_trash_album" title="Delete Album">
<a class="button button--right button--eye" id="button_share" title="Share Photo"> <svg class="iconic"><use xlink:href="#trash"></use></svg>
<svg class="iconic"><use xlink:href="#eye"></use></svg>
</a> </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> <svg class="iconic"><use xlink:href="#star"></use></svg>
</a> </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> </div>
</header> </header>
<!-- Content --> <!-- Content -->
<div id="content"></div> <div class="content"></div>
<!-- ImageView --> <!-- ImageView -->
<div id="imageview"></div> <div id="imageview"></div>
<!-- Sidebar --> <!-- Sidebar -->
<div id="sidebar"> <div class="sidebar">
<div class='header'> <div class="sidebar__header">
<h1>About</h1> <h1>About</h1>
</div> </div>
<div class='wrapper'></div> <div class="sidebar__wrapper"></div>
</div> </div>
<!-- Upload --> <!-- Upload -->

8
src/scripts/album.js
View File

@ -30,11 +30,11 @@ album.getID = function() {
} }
album.load = function(albumID, refresh) { album.load = function(albumID, refresh = false) {
password.get(albumID, function() { password.get(albumID, function() {
if (!refresh) lychee.animate('#content', 'contentZoomOut') if (refresh===false) lychee.animate('.content', 'contentZoomOut')
let startTime = new Date().getTime() let startTime = new Date().getTime()
@ -81,8 +81,8 @@ album.load = function(albumID, refresh) {
view.album.init() view.album.init()
if (!refresh) { if (refresh===false) {
lychee.animate('#content', 'contentZoomIn') lychee.animate(lychee.content, 'contentZoomIn')
header.setMode('album') header.setMode('album')
} }

6
src/scripts/albums.js
View File

@ -13,7 +13,7 @@ albums.load = function() {
let startTime = new Date().getTime() let startTime = new Date().getTime()
lychee.animate('#content', 'contentZoomOut') lychee.animate('.content', 'contentZoomOut')
if (albums.json===null) { if (albums.json===null) {
@ -38,7 +38,7 @@ albums.load = function() {
setTimeout(() => { setTimeout(() => {
header.setMode('albums') header.setMode('albums')
view.albums.init() view.albums.init()
lychee.animate('#content', 'contentZoomIn') lychee.animate(lychee.content, 'contentZoomIn')
}, waitTime) }, waitTime)
}) })
@ -48,7 +48,7 @@ albums.load = function() {
setTimeout(() => { setTimeout(() => {
header.setMode('albums') header.setMode('albums')
view.albums.init() view.albums.init()
lychee.animate('#content', 'contentZoomIn') lychee.animate(lychee.content, 'contentZoomIn')
}, 300) }, 300)
} }

134
src/scripts/contextMenu.js
View File

@ -8,13 +8,13 @@ contextMenu = {}
contextMenu.add = function(e) { contextMenu.add = function(e) {
let items = [ let items = [
{ type: 'item', title: build.iconic('image') + 'Upload Photo', fn: () => $('#upload_files').click() }, { 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 }, { 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 }, { 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 }, { 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('folder') + 'New Album', fn: album.add }
] ]
basicContext.show(items, e.originalEvent) basicContext.show(items, e.originalEvent)
@ -26,15 +26,15 @@ contextMenu.add = function(e) {
contextMenu.settings = function(e) { contextMenu.settings = function(e) {
let items = [ let items = [
{ type: 'item', title: build.iconic('person') + 'Change Login', fn: settings.setLogin }, { title: build.iconic('person') + 'Change Login', fn: settings.setLogin },
{ type: 'item', title: build.iconic('sort-ascending') + 'Change Sorting', fn: settings.setSorting }, { title: build.iconic('sort-ascending') + 'Change Sorting', fn: settings.setSorting },
{ type: 'item', title: build.iconic('dropbox', 'ionicons') + 'Set Dropbox', fn: settings.setDropboxKey }, { 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) }, { title: build.iconic('info') + 'About Lychee', fn: () => window.open(lychee.website) },
{ type: 'item', title: build.iconic('wrench') + 'Diagnostics', fn: () => window.open('plugins/check/') }, { title: build.iconic('wrench') + 'Diagnostics', fn: () => window.open('plugins/check/') },
{ type: 'item', title: build.iconic('align-left') + 'Show Log', fn: () => window.open('plugins/displaylog/') }, { 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('account-logout') + 'Sign Out', fn: lychee.logout }
] ]
basicContext.show(items, e.originalEvent) 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 showMerge = (albums.json && albums.json.albums && Object.keys(albums.json.albums).length>1)
let items = [ let items = [
{ type: 'item', title: build.iconic('pencil') + 'Rename', fn: () => album.setTitle([albumID]) }, { 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) } }, { 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('trash') + 'Delete', fn: () => album.delete([albumID]) }
] ]
$('.album[data-id="' + albumID + '"]').addClass('active') $('.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 showMerge = (albums.json && albums.json.albums && Object.keys(albums.json.albums).length>1)
let items = [ let items = [
{ type: 'item', title: build.iconic('pencil') + 'Rename All', fn: () => album.setTitle(albumIDs) }, { 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) }, { 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) } }, { 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('trash') + 'Delete All', fn: () => album.delete(albumIDs) }
] ]
items.push() 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>` 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) 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>` 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 // in order to keep the selection
let items = [ let items = [
{ type: 'item', title: build.iconic('star') + 'Star', fn: () => photo.setStar([photoID]) }, { title: build.iconic('star') + 'Star', fn: () => photo.setStar([photoID]) },
{ type: 'item', title: build.iconic('tag') + 'Tags', fn: () => photo.editTags([photoID]) }, { title: build.iconic('tag') + 'Tags', fn: () => photo.editTags([photoID]) },
{ type: 'separator' }, { },
{ type: 'item', title: build.iconic('pencil') + 'Rename', fn: () => photo.setTitle([photoID]) }, { title: build.iconic('pencil') + 'Rename', fn: () => photo.setTitle([photoID]) },
{ type: 'item', title: build.iconic('layers') + 'Duplicate', fn: () => photo.duplicate([photoID]) }, { title: build.iconic('layers') + 'Duplicate', fn: () => photo.duplicate([photoID]) },
{ type: 'item', title: build.iconic('folder') + 'Move', fn: () => { basicContext.close(); contextMenu.move([photoID], e) } }, { 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('trash') + 'Delete', fn: () => photo.delete([photoID]) }
] ]
$('.photo[data-id="' + photoID + '"]').addClass('active') $('.photo[data-id="' + photoID + '"]').addClass('active')
@ -178,13 +178,13 @@ contextMenu.photoMulti = function(photoIDs, e) {
multiselect.stopResize() multiselect.stopResize()
let items = [ let items = [
{ type: 'item', title: build.iconic('star') + 'Star All', fn: () => photo.setStar(photoIDs) }, { title: build.iconic('star') + 'Star All', fn: () => photo.setStar(photoIDs) },
{ type: 'item', title: build.iconic('tag') + 'Tag All', fn: () => photo.editTags(photoIDs) }, { title: build.iconic('tag') + 'Tag All', fn: () => photo.editTags(photoIDs) },
{ type: 'separator' }, { },
{ type: 'item', title: build.iconic('pencil') + 'Rename All', fn: () => photo.setTitle(photoIDs) }, { title: build.iconic('pencil') + 'Rename All', fn: () => photo.setTitle(photoIDs) },
{ type: 'item', title: build.iconic('layers') + 'Duplicate All', fn: () => photo.duplicate(photoIDs) }, { 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) } }, { 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('trash') + 'Delete All', fn: () => photo.delete(photoIDs) }
] ]
basicContext.show(items, e.originalEvent, contextMenu.close) basicContext.show(items, e.originalEvent, contextMenu.close)
@ -194,21 +194,21 @@ contextMenu.photoMulti = function(photoIDs, e) {
contextMenu.photoTitle = function(albumID, photoID, e) { contextMenu.photoTitle = function(albumID, photoID, e) {
let items = [ 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 let data = album.json
if (data.content!==false && data.num>1) { if (data.content!==false && data.num>1) {
items.push({ type: 'separator' }) items.push({ })
// Generate list of albums // Generate list of albums
$.each(data.content, function(index) { $.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>` 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 showDownload = lychee.publicMode===false || ((album.json && album.json.downloadable && album.json.downloadable==='1') && lychee.publicMode===true)
let items = [ let items = [
{ type: 'item', title: build.iconic('fullscreen-enter') + 'Full Photo', fn: () => window.open(photo.getDirectLink()) }, { 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('cloud-download') + 'Download', visible: showDownload, fn: () => photo.getArchive(photoID) }
] ]
basicContext.show(items, e.originalEvent) basicContext.show(items, e.originalEvent)
@ -244,7 +244,7 @@ contextMenu.move = function(photoIDs, e) {
// Show only 'Add album' when no album available // Show only 'Add album' when no album available
items = [ items = [
{ type: 'item', title: 'New Album', fn: album.add } { title: 'New Album', fn: album.add }
] ]
} else { } 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>` 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 // Show Unsorted when unsorted is not the current album
if (album.getID()!=='0') { if (album.getID()!=='0') {
items.unshift({ type: 'separator' }) items.unshift({ })
items.unshift({ type: 'item', title: 'Unsorted', fn: () => photo.setAlbum(photoIDs, 0) }) items.unshift({ title: 'Unsorted', fn: () => photo.setAlbum(photoIDs, 0) })
} }
@ -282,15 +282,15 @@ contextMenu.sharePhoto = function(photoID, e) {
iconClass = 'ionicons' iconClass = 'ionicons'
let items = [ let items = [
{ type: 'item', title: `<input readonly id="link" value="${ link }">`, fn: () => {}, class: 'noHover' }, { 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') }, { title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => photo.share(photoID, 'twitter') },
{ type: 'item', title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => photo.share(photoID, 'facebook') }, { title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => photo.share(photoID, 'facebook') },
{ type: 'item', title: build.iconic('envelope-closed') + 'Mail', fn: () => photo.share(photoID, 'mail') }, { title: build.iconic('envelope-closed') + 'Mail', fn: () => photo.share(photoID, 'mail') },
{ type: 'item', title: build.iconic('dropbox', iconClass) + 'Dropbox', fn: () => photo.share(photoID, 'dropbox') }, { 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()) }, { 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: build.iconic('ban') + 'Make Private', fn: () => photo.setPublic(photoID) }
] ]
basicContext.show(items, e.originalEvent) basicContext.show(items, e.originalEvent)
@ -303,14 +303,14 @@ contextMenu.shareAlbum = function(albumID, e) {
let iconClass = 'ionicons' let iconClass = 'ionicons'
let items = [ let items = [
{ type: 'item', title: `<input readonly id="link" value="${ location.href }">`, fn: () => {}, class: 'noHover' }, { 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') }, { title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => album.share('twitter') },
{ type: 'item', title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => album.share('facebook') }, { title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => album.share('facebook') },
{ type: 'item', title: build.iconic('envelope-closed') + 'Mail', fn: () => album.share('mail') }, { 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) }, { 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: build.iconic('ban') + 'Make Private', fn: () => album.setPublic(albumID, false) }
] ]
basicContext.show(items, e.originalEvent) basicContext.show(items, e.originalEvent)

72
src/scripts/header.js
View File

@ -5,7 +5,7 @@
header = { header = {
_dom: $('header') _dom: $('.header')
} }
@ -21,20 +21,25 @@ header.bind = function() {
// Event Name // Event Name
let eventName = lychee.getEventName() let eventName = lychee.getEventName()
/* Buttons */ header.dom('.header__title').on(eventName, function(e) {
header.dom('#title').on(eventName, function(e) {
if (!$(this).hasClass('editable')) return false 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) if (visible.photo()) contextMenu.photoTitle(album.getID(), photo.getID(), e)
else contextMenu.albumTitle(album.getID(), e)
}) })
header.dom('#button_share').on(eventName, function(e) { header.dom('#button_share').on(eventName, function(e) {
if (photo.json.public==='1' || photo.json.public==='2') contextMenu.sharePhoto(photo.getID(), e) if (photo.json.public==='1' || photo.json.public==='2') contextMenu.sharePhoto(photo.getID(), e)
else photo.setPublic(photo.getID(), e) else photo.setPublic(photo.getID(), e)
}) })
header.dom('#button_share_album').on(eventName, function(e) { header.dom('#button_share_album').on(eventName, function(e) {
if (album.json.public==='1') contextMenu.shareAlbum(album.getID(), e) if (album.json.public==='1') contextMenu.shareAlbum(album.getID(), e)
else album.setPublic(album.getID(), true, e) else album.setPublic(album.getID(), true, e)
}) })
header.dom('#button_signin') .on(eventName, lychee.loginDialog) header.dom('#button_signin') .on(eventName, lychee.loginDialog)
header.dom('#button_settings') .on(eventName, contextMenu.settings) header.dom('#button_settings') .on(eventName, contextMenu.settings)
header.dom('#button_info_album') .on(eventName, sidebar.toggle) 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_add') .on(eventName, contextMenu.add)
header.dom('#button_more') .on(eventName, function(e) { contextMenu.photoMore(photo.getID(), e) }) 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('#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_album') .on(eventName, function() { album.delete([album.getID()]) })
header.dom('#button_trash') .on(eventName, function() { photo.delete([photo.getID()]) }) header.dom('#button_trash') .on(eventName, function() { photo.delete([photo.getID()]) })
header.dom('#button_archive') .on(eventName, function() { album.getArchive(album.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_home') .on(eventName, function() { lychee.goto('') })
header.dom('#button_back') .on(eventName, function() { lychee.goto(album.getID()) }) header.dom('#button_back') .on(eventName, function() { lychee.goto(album.getID()) })
/* Search */ header.dom('.header__search').on('keyup click', function() { search.find($(this).val()) })
header.dom('#search').on('keyup click', function() { search.find($(this).val()) }) header.dom('.header__clear').on(eventName, function () {
header.dom('#clearSearch').on(eventName, function () { header.dom('.header__search').focus()
header.dom('#search').focus()
search.reset() search.reset()
}) })
@ -68,7 +72,7 @@ header.show = function() {
clearTimeout($(window).data('timeout')) clearTimeout($(window).data('timeout'))
lychee.imageview.removeClass('full') lychee.imageview.removeClass('full')
header.dom().removeClass('hidden') header.dom().removeClass('header--hidden')
// Adjust position or size of photo // Adjust position or size of photo
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin) 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)) let newMargin = (-1 * ($('#imageview #image').height()/2))
lychee.imageview.addClass('full') lychee.imageview.addClass('full')
header.dom().addClass('hidden') header.dom().addClass('header--hidden')
// Adjust position or size of photo // Adjust position or size of photo
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin) 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') { header.setTitle = function(title = 'Untitled') {
let $title = header.dom('#title'), let $title = header.dom('.header__title'),
html = lychee.html`$${ title }${ build.iconic('caret-bottom') }` html = lychee.html`$${ title }${ build.iconic('caret-bottom') }`
$title.html(html) $title.html(html)
@ -118,27 +122,39 @@ header.setTitle = function(title = 'Untitled') {
header.setMode = function(mode) { header.setMode = function(mode) {
let albumID = album.getID() if (mode==='albums' && lychee.publicMode===true) mode = 'public'
switch (mode) { 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': case 'albums':
header.dom().removeClass('view') header.dom().removeClass('header--view')
$('#tools_album, #tools_photo').hide() header.dom('.header__toolbar--public, .header__toolbar--album, .header__toolbar--photo').removeClass('header__toolbar--visible')
$('#tools_albums').show() header.dom('.header__toolbar--albums').addClass('header__toolbar--visible')
return true return true
break break
case 'album': case 'album':
header.dom().removeClass('view') let albumID = album.getID()
$('#tools_albums, #tools_photo').hide()
$('#tools_album').show() 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 // 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 // Hide download button when not logged in and album not downloadable
if (lychee.publicMode===true && album.json.downloadable==='0') $('#button_archive').hide() if (lychee.publicMode===true && album.json.downloadable==='0') $('#button_archive').hide()
@ -157,9 +173,9 @@ header.setMode = function(mode) {
case 'photo': case 'photo':
header.dom().addClass('view') header.dom().addClass('header--view')
$('#tools_albums, #tools_album').hide() header.dom('.header__toolbar--public, .header__toolbar--albums, .header__toolbar--album').removeClass('header__toolbar--visible')
$('#tools_photo').show() header.dom('.header__toolbar--photo').addClass('header__toolbar--visible')
return true return true
break break
@ -172,13 +188,13 @@ header.setMode = function(mode) {
header.setEditable = function(editable) { header.setEditable = function(editable) {
let $title = header.dom('#title') let $title = header.dom('.header__title')
// Hide editable icon when not logged in // Hide editable icon when not logged in
if (lychee.publicMode===true) editable = false if (lychee.publicMode===true) editable = false
if (editable) $title.addClass('editable') if (editable) $title.addClass('header__title--editable')
else $title.removeClass('editable') else $title.removeClass('header__title--editable')
return true return true

12
src/scripts/init.js
View File

@ -35,7 +35,7 @@ $(document).ready(function() {
}) })
.bind(['s', 'f'], function() { .bind(['s', 'f'], function() {
if (visible.photo()) { header.dom('#button_star').click(); return false } 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() { .bind('r', function() {
if (visible.album()) { album.setTitle(album.getID()); return false } if (visible.album()) { album.setTitle(album.getID()); return false }
@ -65,11 +65,11 @@ $(document).ready(function() {
}) })
Mousetrap.bindGlobal(['esc', 'command+up'], function() { Mousetrap.bindGlobal(['esc', 'command+up'], function() {
if (basicModal.visible()===true) basicModal.cancel() if (basicModal.visible()===true) basicModal.cancel()
else if (visible.contextMenu()) contextMenu.close() else if (visible.contextMenu()) contextMenu.close()
else if (visible.photo()) lychee.goto(album.getID()) else if (visible.photo()) lychee.goto(album.getID())
else if (visible.album()) lychee.goto('') else if (visible.album()) lychee.goto('')
else if (visible.albums() && $('#search').val().length!==0) search.reset() else if (visible.albums() && header.dom('.header__search').val().length!==0) search.reset()
return false return false
}) })

6
src/scripts/loadingBar.js
View File

@ -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!' if (!errorText) errorText = 'Whoops, it looks like something went wrong. Please reload the site and try again!'
// Move header down // Move header down
if (visible.header()) header.dom().addClass('error') if (visible.header()) header.dom().addClass('header__error')
// Modify loading // Modify loading
loadingBar.dom() loadingBar.dom()
@ -56,7 +56,7 @@ loadingBar.show = function(status, errorText) {
loadingBar._timeout = setTimeout(() => { loadingBar._timeout = setTimeout(() => {
// Move header down // Move header down
if (visible.header()) header.dom().addClass('loading') if (visible.header()) header.dom().addClass('header__loading')
// Modify loading // Modify loading
loadingBar.dom() loadingBar.dom()
@ -81,7 +81,7 @@ loadingBar.hide = function(force) {
loadingBar.status = null loadingBar.status = null
// Move header up // Move header up
header.dom().removeClass('error loading') header.dom().removeClass('header__error header__loading')
// Set timeout // Set timeout
clearTimeout(loadingBar._timeout) clearTimeout(loadingBar._timeout)

14
src/scripts/lychee.js
View File

@ -25,7 +25,7 @@ lychee = {
dropbox : false, dropbox : false,
dropboxKey : '', dropboxKey : '',
content : $('#content'), content : $('.content'),
imageview : $('#imageview') imageview : $('#imageview')
} }
@ -190,7 +190,7 @@ lychee.load = function() {
photo.json = null photo.json = null
// Show Photo // 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() lychee.content.hide()
album.load(albumID, true) album.load(albumID, true)
} }
@ -201,9 +201,6 @@ lychee.load = function() {
// Trash data // Trash data
photo.json = null photo.json = null
// Hide sidebar
if (visible.sidebar()) sidebar.toggle()
// Show Album // Show Album
if (visible.photo()) view.photo.hide() if (visible.photo()) view.photo.hide()
if (album.json && albumID==album.json.id) view.album.title() if (album.json && albumID==album.json.id) view.album.title()
@ -252,12 +249,12 @@ lychee.setTitle = function(title, editable) {
lychee.setMode = function(mode) { 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() $('#button_trash, #button_move, #button_share, #button_star').remove()
$(document) $(document)
.off('click', '#title.editable') .off('click', '.header__title--editable')
.off('touchend', '#title.editable') .off('touchend', '.header__title--editable')
.off('contextmenu', '.photo') .off('contextmenu', '.photo')
.off('contextmenu', '.album') .off('contextmenu', '.album')
.off('drop') .off('drop')
@ -274,7 +271,6 @@ lychee.setMode = function(mode) {
if (mode==='public') { if (mode==='public') {
header.dom('#button_signin, #hostedwith').show()
lychee.publicMode = true lychee.publicMode = true
} else if (mode==='view') { } else if (mode==='view') {

2
src/scripts/multiselect.js
View File

@ -16,7 +16,7 @@ multiselect.position = {
multiselect.bind = function() { 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 return true

8
src/scripts/search.js
View File

@ -15,7 +15,7 @@ search.find = function(term) {
$(window).data('timeout', setTimeout(function() { $(window).data('timeout', setTimeout(function() {
if ($('#search').val().length!==0) { if (header.dom('.header__search').val().length!==0) {
api.post('search', { term }, function(data) { api.post('search', { term }, function(data) {
@ -54,7 +54,7 @@ search.find = function(term) {
$('.no_content').remove() $('.no_content').remove()
lychee.animate('#content', 'contentZoomOut') lychee.animate('.content', 'contentZoomOut')
search.hash = data.hash search.hash = data.hash
@ -65,7 +65,7 @@ search.find = function(term) {
$('body').append(build.no_content('magnifying-glass')) $('body').append(build.no_content('magnifying-glass'))
} else { } else {
lychee.content.html(html) lychee.content.html(html)
lychee.animate('#content', 'contentZoomIn') lychee.animate(lychee.content, 'contentZoomIn')
} }
}, 300) }, 300)
@ -82,7 +82,7 @@ search.find = function(term) {
search.reset = function() { search.reset = function() {
$('#search').val('') header.dom('.header__search').val('')
$('.no_content').remove() $('.no_content').remove()
if (search.hash!=null) { if (search.hash!=null) {

8
src/scripts/sidebar.js
View File

@ -5,7 +5,7 @@
sidebar = { sidebar = {
_dom: $('#sidebar'), _dom: $('.sidebar'),
types: { types: {
DEFAULT : 0, DEFAULT : 0,
TAGS : 1 TAGS : 1
@ -71,7 +71,7 @@ sidebar.toggle = function() {
if (visible.sidebar() || visible.sidebarbutton()) { if (visible.sidebar() || visible.sidebarbutton()) {
header.dom('.button--info').toggleClass('active') header.dom('.button--info').toggleClass('active')
lychee.content.toggleClass('sidebar') lychee.content.toggleClass('content--sidebar')
sidebar.dom().toggleClass('active') sidebar.dom().toggleClass('active')
return true return true
@ -329,7 +329,7 @@ sidebar.render = function(structure) {
let _html = '' let _html = ''
_html += ` _html += `
<div class='divider'> <div class='sidebar__divider'>
<h1>${ section.title }</h1> <h1>${ section.title }</h1>
</div> </div>
<table> <table>
@ -374,7 +374,7 @@ sidebar.render = function(structure) {
if (section.editable===true) editable = build.editIcon('edit_tags') if (section.editable===true) editable = build.editIcon('edit_tags')
_html += lychee.html` _html += lychee.html`
<div class='divider'> <div class='sidebar__divider'>
<h1>$${ section.title }</h1> <h1>$${ section.title }</h1>
</div> </div>
<div id='tags'> <div id='tags'>

4
src/scripts/view.js
View File

@ -274,7 +274,7 @@ view.album = {
let structure = sidebar.createStructure.album(album.json), let structure = sidebar.createStructure.album(album.json),
html = sidebar.render(structure) html = sidebar.render(structure)
sidebar.dom('.wrapper').html(html) sidebar.dom('.sidebar__wrapper').html(html)
sidebar.bind() sidebar.bind()
} }
@ -440,7 +440,7 @@ view.photo = {
let structure = sidebar.createStructure.photo(photo.json), let structure = sidebar.createStructure.photo(photo.json),
html = sidebar.render(structure) html = sidebar.render(structure)
sidebar.dom('.wrapper').html(html) sidebar.dom('.sidebar__wrapper').html(html)
sidebar.bind() sidebar.bind()
} }

6
src/scripts/view/main.js
View File

@ -7,7 +7,7 @@
let lychee = {} let lychee = {}
lychee.content = $('#content') lychee.content = $('.content')
lychee.getEventName = function() { lychee.getEventName = function() {
@ -155,7 +155,7 @@ const loadPhotoInfo = function(photoID) {
// Set title // Set title
if (!data.title) data.title = 'Untitled' if (!data.title) data.title = 'Untitled'
document.title = 'Lychee - ' + data.title 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) let size = getPhotoSize(data)
@ -168,7 +168,7 @@ const loadPhotoInfo = function(photoID) {
let structure = sidebar.createStructure.photo(data), let structure = sidebar.createStructure.photo(data),
html = sidebar.render(structure) html = sidebar.render(structure)
sidebar.dom('.wrapper').html(html) sidebar.dom('.sidebar__wrapper').html(html)
sidebar.bind() sidebar.bind()
}) })

7
src/scripts/visible.js
View File

@ -6,12 +6,13 @@
visible = {} visible = {}
visible.albums = function() { 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 return false
} }
visible.album = function() { 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 return false
} }
@ -37,7 +38,7 @@ visible.sidebarbutton = function() {
} }
visible.header = function() { visible.header = function() {
if (header.dom().hasClass('hidden')===true) return false if (header.dom().hasClass('header--hidden')===true) return false
return true return true
} }

30
src/styles/_content.scss
View File

@ -1,8 +1,4 @@
/** .content {
* @copyright 2015 by Tobias Reich
*/
#content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -17,40 +13,28 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 1px; 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 .album,
&.contentZoomIn .photo { &.contentZoomIn .photo {
animation-name: zoomIn; animation-name: zoomIn;
animation-duration: .2s;
animation-fill-mode: forwards;
animation-timing-function: $timing;
} }
&.contentZoomIn .divider { &.contentZoomIn .divider {
animation-name: fadeIn; animation-name: fadeIn;
animation-duration: .2s;
animation-fill-mode: forwards;
animation-timing-function: $timing;
} }
&.contentZoomOut .album, &.contentZoomOut .album,
&.contentZoomOut .photo { &.contentZoomOut .photo {
animation-name: zoomOut; animation-name: zoomOut;
animation-duration: .2s;
animation-fill-mode: forwards;
animation-timing-function: $timing;
} }
&.contentZoomOut .divider { &.contentZoomOut .divider {
animation-name: fadeOut; animation-name: fadeOut;
animation-duration: .2s;
animation-fill-mode: forwards;
animation-timing-function: $timing;
} }
/* Albums and Photos ------------------------------------------------*/ /* Albums and Photos ------------------------------------------------*/
@ -62,6 +46,10 @@
margin: 30px 0 0 30px; margin: 30px 0 0 30px;
cursor: default; cursor: default;
animation-duration: .2s;
animation-fill-mode: forwards;
animation-timing-function: $timing;
img { img {
position: absolute; position: absolute;
width: 200px; width: 200px;
@ -199,6 +187,10 @@
border-top: 1px solid white(.02); border-top: 1px solid white(.02);
box-shadow: $shadow; box-shadow: $shadow;
animation-duration: .2s;
animation-fill-mode: forwards;
animation-timing-function: $timing;
&:first-child { &:first-child {
margin-top: 10px; margin-top: 10px;
border-top: 0; border-top: 0;

25
src/styles/_etc.scss
View File

@ -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);

106
src/styles/_header.scss
View File

@ -1,8 +1,4 @@
/** .header {
* @copyright 2015 by Tobias Reich
*/
header {
position: fixed; position: fixed;
height: 49px; height: 49px;
@ -12,31 +8,41 @@ header {
z-index: 1; z-index: 1;
transition: transform .3s ease-out; transition: transform .3s ease-out;
/* Modes ------------------------------------------------*/ // Modes -------------------------------------------------------------- //
&.hidden { transform: translateY(-60px); } &--hidden { transform: translateY(-60px); }
&.loading { transform: translateY(2px); } &--loading { transform: translateY(2px); }
&.error { transform: translateY(40px); } &--error { transform: translateY(40px); }
&.view { &--view {
background: none; background: none;
border-bottom: none; border-bottom: none;
&.error { background-color: rgba(10, 10, 10, .99); } .header__error { background-color: rgba(10, 10, 10, .99); }
} }
/* Title ------------------------------------------------*/ // Toolbars -------------------------------------------------------------- //
#title { &__toolbar {
position: absolute; display: none;
margin: 0 30%; align-items: center;
width: 40%; position: relative;
padding: 15px 0; box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0 10px;
&--visible { display: flex; }
}
// Title -------------------------------------------------------------- //
&__title {
width: 100%;
padding: 16px 0;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
z-index: 1;
cursor: default; cursor: default;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -51,37 +57,24 @@ header {
transition: fill .2s ease-out; transition: fill .2s ease-out;
} }
&:hover .iconic { fill: white(1); } &:hover .iconic {
fill: white(1);
}
&:active .iconic { &:active .iconic {
transition: none; transition: none;
fill: white(.8); fill: white(.8);
} }
&.editable .iconic { display: inline-block; } &--editable .iconic { display: inline-block; }
} }
/* Toolbars ------------------------------------------------*/ // Buttons -------------------------------------------------------------- //
.toolbar {
display: none;
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0 10px;
}
/* Button ------------------------------------------------*/
.button { .button {
display: inline-block; flex-shrink: 0;
padding: 17px 8px; padding: 16px 8px;
width: 15px;
height: 15px; height: 15px;
&--left { float: left; }
&--right { float: right; }
.iconic { .iconic {
width: 15px; width: 15px;
height: 15px; height: 15px;
@ -89,7 +82,9 @@ header {
transition: fill .2s ease-out; transition: fill .2s ease-out;
} }
&:hover .iconic { fill: white(1); } &:hover .iconic {
fill: white(1);
}
&:active .iconic { &:active .iconic {
transition: none; transition: none;
@ -101,24 +96,19 @@ header {
&--eye.active .iconic { fill: #ff9737; } &--eye.active .iconic { fill: #ff9737; }
&--info.active .iconic { fill: $colorBlue; } &--info.active .iconic { fill: $colorBlue; }
&#button_signin { display: none; }
} }
/* Button Divider ------------------------------------------------*/ // Divider -------------------------------------------------------------- //
.button_divider { &__divider {
float: right; flex-shrink: 0;
position: relative;
width: 14px; width: 14px;
height: 50px;
} }
/* Search ------------------------------------------------*/ // Search -------------------------------------------------------------- //
#search { &__search {
float: right; flex-shrink: 0;
width: 80px; width: 80px;
margin: 12px 12px 0 0; margin: 0;
padding: 5px 12px 6px 12px; padding: 5px 12px 6px 12px;
background-color: #1d1d1d; background-color: #1d1d1d;
color: #fff; color: #fff;
@ -141,10 +131,10 @@ header {
&::-ms-clear { display: none; } &::-ms-clear { display: none; }
} }
#clearSearch { &__clear {
position: absolute; position: absolute;
top: 13px; top: 13px;
right: 78px; right: 60px;
padding: 0; padding: 0;
color: white(.5); color: white(.5);
font-size: 20px; font-size: 20px;
@ -155,15 +145,15 @@ header {
&:hover { color: white(1); } &:hover { color: white(1); }
} }
/* Hosted with Lychee ------------------------------------------------*/ // Hosted with -------------------------------------------------------------- //
#hostedwith { &__hostedwith {
float: right; flex-shrink: 0;
padding: 5px 10px; padding: 5px 10px;
margin: 13px 9px; margin: 11px 0;
color: #888; color: #888;
font-size: 13px; font-size: 13px;
border-radius: 100px; border-radius: 100px;
display: none; cursor: default;
&:hover { background-color: black(.3); } &:hover { background-color: black(.3); }
} }

28
src/styles/_mediaquery.scss
View File

@ -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) { @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 { #imageview .arrow_wrapper {
display: none !important; display: none !important;
} }

14
src/styles/_sidebar.scss
View File

@ -1,8 +1,4 @@
/** .sidebar {
* @copyright 2015 by Tobias Reich
*/
#sidebar {
position: fixed; position: fixed;
top: 50px; top: 50px;
@ -23,7 +19,7 @@
} }
/* Header ------------------------------------------------*/ /* Header ------------------------------------------------*/
.header { &__header {
float: left; float: left;
height: 49px; height: 49px;
width: 100%; width: 100%;
@ -31,7 +27,7 @@
border-top: 1px solid $colorBlue; border-top: 1px solid $colorBlue;
} }
.header h1 { &__header h1 {
position: absolute; position: absolute;
margin: 15px 50px 15px 0; margin: 15px 50px 15px 0;
width: calc(100% - 50px); width: calc(100% - 50px);
@ -42,7 +38,7 @@
} }
/* Wrapper ------------------------------------------------*/ /* Wrapper ------------------------------------------------*/
.wrapper { &__wrapper {
float: left; float: left;
height: calc(100% - 49px); height: calc(100% - 49px);
width: 300px; width: 300px;
@ -51,7 +47,7 @@
} }
/* Divider ------------------------------------------------*/ /* Divider ------------------------------------------------*/
.divider { &__divider {
float: left; float: left;
padding: 12px 0 8px; padding: 12px 0 8px;
width: 100%; width: 100%;

24
src/styles/main.scss
View File

@ -2,7 +2,28 @@
* @copyright 2015 by Tobias Reich * @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'; @import 'reset';
* { * {
@ -46,6 +67,7 @@ input {
#upload { display: none; } #upload { display: none; }
// Files ------------------------------------------------------------------- //
@import 'animations'; @import 'animations';
@import 'content'; @import 'content';
@import 'basicContext.custom'; @import 'basicContext.custom';