Tobias Reich
9 years ago
commit
95801ac334
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 33 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,37 @@
|
||||
<?php
|
||||
|
||||
###
|
||||
# @name Update to version 3.0.0
|
||||
# @copyright 2015 by Tobias Reich
|
||||
###
|
||||
|
||||
if (!defined('LYCHEE')) exit('Error: Direct access is not allowed!');
|
||||
|
||||
# Remove login
|
||||
# Login now saved as crypt without md5. Legacy code has been removed.
|
||||
$query = Database::prepare($database, "UPDATE `?` SET `value` = '' WHERE `key` = 'username' LIMIT 1", array(LYCHEE_TABLE_SETTINGS));
|
||||
$resetUsername = $database->query($query);
|
||||
if (!$resetUsername) {
|
||||
Log::error($database, 'update_030000', __LINE__, 'Could not reset username (' . $database->error . ')');
|
||||
return false;
|
||||
}
|
||||
$query = Database::prepare($database, "UPDATE `?` SET `value` = '' WHERE `key` = 'password' LIMIT 1", array(LYCHEE_TABLE_SETTINGS));
|
||||
$resetPassword = $database->query($query);
|
||||
if (!$resetPassword) {
|
||||
Log::error($database, 'update_030000', __LINE__, 'Could not reset password (' . $database->error . ')');
|
||||
return false;
|
||||
}
|
||||
|
||||
# Make public albums private and reset password
|
||||
# Password now saved as crypt without md5. Legacy code has been removed.
|
||||
$query = Database::prepare($database, "UPDATE `?` SET `public` = 0, `password` = NULL", array(LYCHEE_TABLE_ALBUMS));
|
||||
$resetPublic = $database->query($query);
|
||||
if (!$resetPublic) {
|
||||
Log::error($database, 'update_030000', __LINE__, 'Could not reset public albums (' . $database->error . ')');
|
||||
return false;
|
||||
}
|
||||
|
||||
# Set version
|
||||
if (Database::setVersion($database, '030000')===false) return false;
|
||||
|
||||
?>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 331 B After Width: | Height: | Size: 432 B |
|
Before Width: | Height: | Size: 361 B After Width: | Height: | Size: 557 B |
|
Before Width: | Height: | Size: 428 B After Width: | Height: | Size: 577 B |
@ -1,8 +0,0 @@
|
||||
/* Browser Detection */
|
||||
var BrowserDetect={init:function(){this.browser=this.searchString(this.dataBrowser)||"An unknown browser";this.version=this.searchVersion(navigator.userAgent)||this.searchVersion(navigator.appVersion)||"an unknown version";this.OS=this.searchString(this.dataOS)||"an unknown OS"},searchString:function(d){for(var a=0;a<d.length;a++){var b=d[a].string;var c=d[a].prop;this.versionSearchString=d[a].versionSearch||d[a].identity;if(b){if(b.indexOf(d[a].subString)!=-1){return d[a].identity}}else{if(c){return d[a].identity}}}},searchVersion:function(b){var a=b.indexOf(this.versionSearchString);if(a==-1){return}return parseFloat(b.substring(a+this.versionSearchString.length+1))},dataBrowser:[{string:navigator.userAgent,subString:"Chrome",identity:"Chrome"},{string:navigator.userAgent,subString:"OmniWeb",versionSearch:"OmniWeb/",identity:"OmniWeb"},{string:navigator.vendor,subString:"Apple",identity:"Safari",versionSearch:"Version"},{prop:window.opera,identity:"Opera"},{string:navigator.vendor,subString:"iCab",identity:"iCab"},{string:navigator.vendor,subString:"KDE",identity:"Konqueror"},{string:navigator.userAgent,subString:"Firefox",identity:"Firefox"},{string:navigator.vendor,subString:"Camino",identity:"Camino"},{string:navigator.userAgent,subString:"Netscape",identity:"Netscape"},{string:navigator.userAgent,subString:"MSIE",identity:"Explorer",versionSearch:"MSIE"},{string:navigator.userAgent,subString:"Gecko",identity:"Mozilla",versionSearch:"rv"},{string:navigator.userAgent,subString:"Mozilla",identity:"Netscape",versionSearch:"Mozilla"}],dataOS:[{string:navigator.platform,subString:"Win",identity:"Windows"},{string:navigator.platform,subString:"Mac",identity:"Mac"},{string:navigator.userAgent,subString:"iPhone",identity:"iPhone/iPod"},{string:navigator.platform,subString:"Linux",identity:"Linux"}]};BrowserDetect.init();
|
||||
function mobileBrowser() { if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) return true; else return false; }
|
||||
/* GET */
|
||||
function gup(b){b=b.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var a="[\\?&]"+b+"=([^&#]*)",d=new RegExp(a),c=d.exec(window.location.href);if(c===null){return""}else{return c[1]}};
|
||||
/*! jQuery Retina Plugin */
|
||||
(function(a){a.fn.retina=function(c){var d={"retina-background":false,"retina-suffix":"@2x"};if(c){a.extend(d,c)}var b=function(f,g){var e=new Image();e.onload=function(){g(e)};e.src=f};if(window.devicePixelRatio>1){this.each(function(){var e=a(this);if(this.tagName.toLowerCase()=="img"&&e.attr("src")){var g=e.attr("src").replace(/\.(?!.*\.)/,d["retina-suffix"]+".");b(g,function(h){e.attr("src",h.src);var i=a("<div>").append(e.clone()).remove().html();if(!(/(width|height)=["']\d+["']/.test(i))){e.attr("width",h.width/2)
|
||||
}})}if(d["retina-background"]){var f=e.css("background-image");if(/^url\(.*\)$/.test(f)){var g=f.substring(4,f.length-1).replace(/\.(?!.*\.)/,d["retina-suffix"]+".");b(g,function(h){e.css("background-image","url("+h.src+")");if(e.css("background-size")=="auto auto"){e.css("background-size",(h.width/2)+"px auto")}})}}})}}})(jQuery);
|
||||
@ -0,0 +1,12 @@
|
||||
function gup(b) {
|
||||
|
||||
b = b.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
|
||||
|
||||
var a = "[\\?&]" + b + "=([^&#]*)",
|
||||
d = new RegExp(a),
|
||||
c = d.exec(window.location.href);
|
||||
|
||||
if (c === null) return '';
|
||||
else return c[1];
|
||||
|
||||
};
|
||||
@ -0,0 +1,64 @@
|
||||
/**
|
||||
* @description This module communicates with Lychee's API
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
api = {
|
||||
|
||||
path: 'php/api.php',
|
||||
onError: null
|
||||
|
||||
}
|
||||
|
||||
api.post = function(fn, params, callback) {
|
||||
|
||||
var success,
|
||||
error;
|
||||
|
||||
loadingBar.show();
|
||||
|
||||
params = $.extend({function: fn}, params);
|
||||
|
||||
success = function(data) {
|
||||
|
||||
setTimeout(function() { loadingBar.hide() }, 100);
|
||||
|
||||
// Catch errors
|
||||
if (typeof data==='string'&&
|
||||
data.substring(0, 7)==='Error: ') {
|
||||
api.onError(data.substring(7, data.length), params, data);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Convert 1 to true and an empty string to false
|
||||
if (data==='1') data = true;
|
||||
else if (data==='') data = false;
|
||||
|
||||
// Convert to JSON if string start with '{' and ends with '}'
|
||||
if (typeof data==='string'&&
|
||||
data.substring(0, 1)==='{'&&
|
||||
data.substring(data.length-1, data.length)==='}') data = $.parseJSON(data);
|
||||
|
||||
// Output response when debug mode is enabled
|
||||
if (lychee.debugMode) console.log(data);
|
||||
|
||||
callback(data);
|
||||
|
||||
}
|
||||
|
||||
error = function(jqXHR, textStatus, errorThrown) {
|
||||
|
||||
api.onError('Server error or API not found.', params, errorThrown);
|
||||
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: api.path,
|
||||
data: params,
|
||||
dataType: 'text',
|
||||
success,
|
||||
error
|
||||
});
|
||||
|
||||
}
|
||||
@ -1,424 +0,0 @@
|
||||
###
|
||||
# @description This module is used to generate HTML-Code.
|
||||
# @copyright 2014 by Tobias Reich
|
||||
###
|
||||
|
||||
window.build = {}
|
||||
|
||||
build.divider = (title) ->
|
||||
|
||||
"<div class='divider fadeIn'><h1>#{ title }</h1></div>"
|
||||
|
||||
build.editIcon = (id) ->
|
||||
|
||||
"<div id='#{ id }' class='edit'><a class='icon-pencil'></a></div>"
|
||||
|
||||
build.multiselect = (top, left) ->
|
||||
|
||||
"<div id='multiselect' style='top: #{ top }px; left: #{ left }px;'></div>"
|
||||
|
||||
build.album = (data) ->
|
||||
|
||||
return '' if not data?
|
||||
|
||||
title = data.title
|
||||
longTitle = ''
|
||||
typeThumb = ''
|
||||
|
||||
if title? and title.length > 18
|
||||
|
||||
title = data.title.substr(0, 18) + '...'
|
||||
longTitle = data.title
|
||||
|
||||
if data.thumb0.split('.').pop() is 'svg' then typeThumb = 'nonretina'
|
||||
|
||||
html = """
|
||||
<div class='album' data-id='#{ data.id }' data-password='#{ data.password }'>
|
||||
<img src='#{ data.thumb2 }' width='200' height='200' alt='thumb' data-type='nonretina'>
|
||||
<img src='#{ data.thumb1 }' width='200' height='200' alt='thumb' data-type='nonretina'>
|
||||
<img src='#{ data.thumb0 }' width='200' height='200' alt='thumb' data-type='#{ typeThumb }'>
|
||||
<div class='overlay'>
|
||||
"""
|
||||
|
||||
if data.password and lychee.publicMode is false
|
||||
html += "<h1 title='#{ longTitle }'><span class='icon-lock'></span> #{ title }</h1>";
|
||||
else
|
||||
html += "<h1 title='#{ longTitle }'>#{ title }</h1>"
|
||||
|
||||
html += """
|
||||
<a>#{ data.sysdate }</a>
|
||||
</div>
|
||||
"""
|
||||
|
||||
if lychee.publicMode is false
|
||||
|
||||
if data.star is '1' then html += "<a class='badge icon-star'></a>"
|
||||
if data.public is '1' then html += "<a class='badge icon-share'></a>"
|
||||
if data.unsorted is '1' then html += "<a class='badge icon-reorder'></a>"
|
||||
if data.recent is '1' then html += "<a class='badge icon-time'></a>"
|
||||
|
||||
html += "</div>"
|
||||
|
||||
return html
|
||||
|
||||
build.photo = (data) ->
|
||||
|
||||
return '' if not data?
|
||||
|
||||
title = data.title
|
||||
longTitle = ''
|
||||
|
||||
if title? and title.length > 18
|
||||
|
||||
title = data.title.substr(0, 18) + '...'
|
||||
longTitle = data.title
|
||||
|
||||
html = """
|
||||
<div class='photo' data-album-id='#{ data.album }' data-id='#{ data.id }'>
|
||||
<img src='#{ data.thumbUrl }' width='200' height='200' alt='thumb'>
|
||||
<div class='overlay'>
|
||||
<h1 title='#{ longTitle }'>#{ title }</h1>
|
||||
"""
|
||||
|
||||
if data.cameraDate is '1'
|
||||
html += "<a><span class='icon-camera' title='Photo Date'></span>#{ data.sysdate }</a>"
|
||||
else
|
||||
html += "<a>#{ data.sysdate }</a>"
|
||||
|
||||
html += "</div>"
|
||||
|
||||
if data.star is '1' then html += "<a class='badge icon-star'></a>"
|
||||
if lychee.publicMode is false and data.public is '1' and album.json.public isnt '1' then html += "<a class='badge icon-share'></a>"
|
||||
|
||||
html += "</div>"
|
||||
|
||||
return html
|
||||
|
||||
build.imageview = (data, size, visibleControls) ->
|
||||
|
||||
return '' if not data?
|
||||
|
||||
html = """
|
||||
<div class='arrow_wrapper previous'><a id='previous' class='icon-caret-left'></a></div>
|
||||
<div class='arrow_wrapper next'><a id='next' class='icon-caret-right'></a></div>
|
||||
"""
|
||||
|
||||
if size is 'big'
|
||||
|
||||
if visibleControls is true
|
||||
html += "<div id='image' style='background-image: url(#{ data.url })'></div>"
|
||||
else
|
||||
html += "<div id='image' style='background-image: url(#{ data.url });' class='full'></div>"
|
||||
|
||||
else if size is 'medium'
|
||||
|
||||
if visibleControls is true
|
||||
html += "<div id='image' style='background-image: url(#{ data.medium })'></div>"
|
||||
else
|
||||
html += "<div id='image' style='background-image: url(#{ data.medium });' class='full'></div>"
|
||||
|
||||
else if size is 'small'
|
||||
|
||||
if visibleControls is true
|
||||
html += "<div id='image' class='small' style='background-image: url(#{ data.url }); width: #{ data.width }px; height: #{ data.height }px; margin-top: -#{ parseInt(data.height/2-20) }px; margin-left: -#{ data.width/2 }px;'></div>"
|
||||
else
|
||||
html += "<div id='image' class='small' style='background-image: url(#{ data.url }); width: #{ data.width }px; height: #{ data.height }px; margin-top: -#{ parseInt(data.height/2) }px; margin-left: -#{ data.width/2 }px;'></div>"
|
||||
|
||||
return html
|
||||
|
||||
build.no_content = (typ) ->
|
||||
|
||||
html = """
|
||||
<div class='no_content fadeIn'>
|
||||
<a class='icon icon-#{ typ }'></a>
|
||||
"""
|
||||
|
||||
switch typ
|
||||
when 'search' then html += "<p>No results</p>"
|
||||
when 'share' then html += "<p>No public albums</p>"
|
||||
when 'cog' then html += "<p>No configuration</p>"
|
||||
|
||||
html += "</div>"
|
||||
|
||||
return html
|
||||
|
||||
build.modal = (title, text, button, marginTop, closeButton) ->
|
||||
|
||||
if marginTop? then custom_style = "style='margin-top: #{ marginTop }px;'"
|
||||
else custom_style = ''
|
||||
|
||||
html = """
|
||||
<div class='message_overlay fadeIn'>
|
||||
<div class='message center' #{ custom_style }>
|
||||
<h1>#{ title }</h1>
|
||||
"""
|
||||
|
||||
if closeButton isnt false then html += "<a class='close icon-remove-sign'></a>"
|
||||
|
||||
html += "<p>#{ text }</p>"
|
||||
|
||||
$.each button, (index) ->
|
||||
|
||||
if this[0] isnt ''
|
||||
|
||||
if index is 0 then html += "<a class='button active'>#{ this[0] }</a>"
|
||||
else html += "<a class='button'>#{ this[0] }</a>"
|
||||
|
||||
html += """
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
return html
|
||||
|
||||
build.signInModal = ->
|
||||
|
||||
html = """
|
||||
<div class='message_overlay'>
|
||||
<div class='message center'>
|
||||
<h1><a class='icon-lock'></a> Sign In</h1>
|
||||
<a class='close icon-remove-sign'></a>
|
||||
<div class='sign_in'>
|
||||
<input id='username' type='text' value='' placeholder='username' autocapitalize='off' autocorrect='off'>
|
||||
<input id='password' type='password' value='' placeholder='password'>
|
||||
</div>
|
||||
<div id='version'>Version #{ lychee.version }<span> – <a target='_blank' href='#{ lychee.updateURL }'>Update available!</a><span></div>
|
||||
<a onclick='lychee.login()' class='button active'>Sign in</a>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
return html
|
||||
|
||||
build.uploadModal = (title, files) ->
|
||||
|
||||
html = """
|
||||
<div class='upload_overlay fadeIn'>
|
||||
<div class='upload_message center'>
|
||||
<h1>#{ title }</h1>
|
||||
<a class='close icon-remove-sign'></a>
|
||||
<div class='rows'>
|
||||
"""
|
||||
|
||||
i = 0
|
||||
file = null
|
||||
|
||||
while i < files.length
|
||||
|
||||
file = files[i]
|
||||
|
||||
if file.name.length > 40
|
||||
file.name = file.name.substr(0, 17) + '...' + file.name.substr(file.name.length-20, 20)
|
||||
|
||||
html += """
|
||||
<div class='row'>
|
||||
<a class='name'>#{ lychee.escapeHTML(file.name) }</a>
|
||||
"""
|
||||
|
||||
if file.supported is true then html += "<a class='status'></a>"
|
||||
else html += "<a class='status error'>Not supported</a>"
|
||||
|
||||
html += """
|
||||
<p class='notice'></p>
|
||||
</div>
|
||||
"""
|
||||
|
||||
i++
|
||||
|
||||
html += """
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
return html
|
||||
|
||||
build.tags = (tags, forView) ->
|
||||
|
||||
html = ''
|
||||
|
||||
if forView is true or lychee.publicMode is true then editTagsHTML = ''
|
||||
else editTagsHTML = ' ' + build.editIcon('edit_tags')
|
||||
|
||||
if tags isnt ''
|
||||
|
||||
tags = tags.split ','
|
||||
|
||||
tags.forEach (tag, index, array) ->
|
||||
html += "<a class='tag'>#{ tag }<span class='icon-remove' data-index='#{ index }'></span></a>"
|
||||
|
||||
html += editTagsHTML
|
||||
|
||||
else
|
||||
|
||||
html = "<div class='empty'>No Tags#{ editTagsHTML }</div>"
|
||||
|
||||
return html
|
||||
|
||||
build.infoboxPhoto = (data, forView) ->
|
||||
|
||||
html = """
|
||||
<div class='header'><h1>About</h1><a class='icon-remove-sign'></a></div>
|
||||
<div class='wrapper'>
|
||||
"""
|
||||
|
||||
switch data.public
|
||||
when '0' then visible = 'No'
|
||||
when '1' then visible = 'Yes'
|
||||
when '2' then visible = 'Yes (Album)'
|
||||
else visible = '-'
|
||||
|
||||
if forView is true or lychee.publicMode is true then editTitleHTML = ''
|
||||
else editTitleHTML = ' ' + build.editIcon('edit_title')
|
||||
|
||||
if forView is true or lychee.publicMode is true then editDescriptionHTML = ''
|
||||
else editDescriptionHTML = ' ' + build.editIcon('edit_description')
|
||||
|
||||
infos = [
|
||||
['', 'Basics']
|
||||
['Title', data.title + editTitleHTML]
|
||||
['Uploaded', data.sysdate]
|
||||
['Description', data.description + editDescriptionHTML]
|
||||
['', 'Image']
|
||||
['Size', data.size]
|
||||
['Format', data.type]
|
||||
['Resolution', data.width + ' x ' + data.height]
|
||||
['Tags', build.tags(data.tags, forView)]
|
||||
]
|
||||
|
||||
exifHash = data.takestamp+data.make+data.model+data.shutter+data.aperture+data.focal+data.iso
|
||||
|
||||
if exifHash isnt '0' or exifHash isnt '0'
|
||||
|
||||
infos = infos.concat [
|
||||
['', 'Camera']
|
||||
['Captured', data.takedate]
|
||||
['Make', data.make]
|
||||
['Type/Model', data.model]
|
||||
['Shutter Speed', data.shutter]
|
||||
['Aperture', data.aperture]
|
||||
['Focal Length', data.focal]
|
||||
['ISO', data.iso]
|
||||
]
|
||||
|
||||
infos = infos.concat [
|
||||
['', 'Share']
|
||||
['Public', visible]
|
||||
]
|
||||
|
||||
infos.forEach (info, i, items) ->
|
||||
|
||||
if info[1] is '' or
|
||||
not info[1]?
|
||||
|
||||
info[1] = '-'
|
||||
|
||||
switch info[0]
|
||||
|
||||
when ''
|
||||
|
||||
# Separator
|
||||
html += """
|
||||
</table>
|
||||
<div class='separator'><h1>#{ info[1] }</h1></div>
|
||||
<table>
|
||||
"""
|
||||
|
||||
when 'Tags'
|
||||
|
||||
# Tags
|
||||
if forView isnt true and lychee.publicMode is false
|
||||
|
||||
html += """
|
||||
</table>
|
||||
<div class='separator'><h1>#{ info[0] }</h1></div>
|
||||
<div id='tags'>#{ info[1] }</div>
|
||||
"""
|
||||
|
||||
else
|
||||
|
||||
# Item
|
||||
html += """
|
||||
<tr>
|
||||
<td>#{ info[0] }</td>
|
||||
<td class='attr_#{ info[0].toLowerCase() }'>#{ info[1] }</td>
|
||||
</tr>
|
||||
"""
|
||||
|
||||
html += """
|
||||
</table>
|
||||
<div class='bumper'></div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
return html
|
||||
|
||||
build.infoboxAlbum = (data, forView) ->
|
||||
|
||||
html = """
|
||||
<div class='header'><h1>About</h1><a class='icon-remove-sign'></a></div>
|
||||
<div class='wrapper'>
|
||||
"""
|
||||
|
||||
switch data.public
|
||||
when '0' then visible = 'No'
|
||||
when '1' then visible = 'Yes'
|
||||
else visible = '-'
|
||||
|
||||
switch data.password
|
||||
when false then password = 'No'
|
||||
when true then password = 'Yes'
|
||||
else password = '-'
|
||||
|
||||
switch data.downloadable
|
||||
when '0' then downloadable = 'No'
|
||||
when '1' then downloadable = 'Yes'
|
||||
else downloadable = '-'
|
||||
|
||||
if forView is true or lychee.publicMode is true then editTitleHTML = ''
|
||||
else editTitleHTML = ' ' + build.editIcon('edit_title_album')
|
||||
|
||||
if forView is true or lychee.publicMode is true then editDescriptionHTML = ''
|
||||
else editDescriptionHTML = ' ' + build.editIcon('edit_description_album')
|
||||
|
||||
infos = [
|
||||
['', 'Basics']
|
||||
['Title', data.title + editTitleHTML]
|
||||
['Description', data.description + editDescriptionHTML]
|
||||
['', 'Album']
|
||||
['Created', data.sysdate]
|
||||
['Images', data.num]
|
||||
['', 'Share']
|
||||
['Public', visible]
|
||||
['Downloadable', downloadable]
|
||||
['Password', password]
|
||||
]
|
||||
|
||||
infos.forEach (info, i, items) ->
|
||||
|
||||
if info[0] is ''
|
||||
|
||||
# Separator
|
||||
html += """
|
||||
</table>
|
||||
<div class='separator'><h1>#{ info[1] }</h1></div>
|
||||
<table id='infos'>
|
||||
"""
|
||||
|
||||
else
|
||||
|
||||
# Item
|
||||
html += """
|
||||
<tr>
|
||||
<td>#{ info[0] }</td>
|
||||
<td class='attr_#{ info[0].toLowerCase() }'>#{ info[1] }</td>
|
||||
</tr>
|
||||
"""
|
||||
|
||||
html += """
|
||||
</table>
|
||||
<div class='bumper'></div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
return html
|
||||
@ -0,0 +1,269 @@
|
||||
/**
|
||||
* @description This module is used to generate HTML-Code.
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
window.build = {}
|
||||
|
||||
build.iconic = function(icon, classes) {
|
||||
|
||||
var html = '';
|
||||
|
||||
classes = classes || '';
|
||||
|
||||
html = `
|
||||
<svg class='iconic ${ classes }'>
|
||||
<use xlink:href='#${ icon }' />
|
||||
</svg>
|
||||
`
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
|
||||
build.divider = function(title) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html = `
|
||||
<div class='divider'>
|
||||
<h1>${ title }</h1>
|
||||
</div>
|
||||
`
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
|
||||
build.editIcon = function(id) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html = `<div id='${ id }' class='edit'>${ build.iconic('pencil') }</div>`
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
|
||||
build.multiselect = function(top, left) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html = `<div id='multiselect' style='top: ${ top }px; left: ${ left }px;'></div>`
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
|
||||
build.album = function(data) {
|
||||
|
||||
if (data===null||data===undefined) return '';
|
||||
|
||||
var html = '',
|
||||
title = data.title,
|
||||
longTitle = '';
|
||||
|
||||
if (title!==null&&title.length>18) {
|
||||
|
||||
title = data.title.substr(0, 18) + '...';
|
||||
longTitle = data.title;
|
||||
|
||||
}
|
||||
|
||||
var {path: thumbPath, hasRetina: thumbRetina} = lychee.retinize(data.thumbs[0]);
|
||||
|
||||
html = `
|
||||
<div class='album' data-id='${ data.id }'>
|
||||
<img src='${ data.thumbs[2] }' width='200' height='200' alt='thumb' data-retina='false'>
|
||||
<img src='${ data.thumbs[1] }' width='200' height='200' alt='thumb' data-retina='false'>
|
||||
<img src='${ thumbPath }' width='200' height='200' alt='thumb' data-retina='${ thumbRetina }'>
|
||||
<div class='overlay'>
|
||||
<h1 title='${ longTitle }'>${ title }</h1>
|
||||
<a>${ data.sysdate }</a>
|
||||
</div>
|
||||
`
|
||||
|
||||
if (lychee.publicMode===false) {
|
||||
|
||||
if (data.star==='1') html += `<a class='badge icn-star'>${ build.iconic('star') }</a>`;
|
||||
if (data.public==='1') html += `<a class='badge icn-share'>${ build.iconic('eye') }</a>`;
|
||||
if (data.unsorted==='1') html += `<a class='badge'>${ build.iconic('list') }</a>`;
|
||||
if (data.recent==='1') html += `<a class='badge'>${ build.iconic('clock') }</a>`;
|
||||
if (data.password==='1') html += `<a class='badge'>${ build.iconic('lock-locked') }</a>`;
|
||||
|
||||
}
|
||||
|
||||
html += '</div>'
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
|
||||
build.photo = function(data) {
|
||||
|
||||
if (data===null||data===undefined) return '';
|
||||
|
||||
var html = '',
|
||||
title = data.title,
|
||||
longTitle = '';
|
||||
|
||||
if (title!==null&&title.length>18) {
|
||||
|
||||
title = data.title.substr(0, 18) + '...';
|
||||
longTitle = data.title;
|
||||
|
||||
}
|
||||
|
||||
var {path: thumbPath, hasRetina: thumbRetina} = lychee.retinize(data.thumbUrl);
|
||||
|
||||
html = `
|
||||
<div class='photo' data-album-id='${ data.album }' data-id='${ data.id }'>
|
||||
<img src='${ thumbPath }' width='200' height='200' alt='thumb'>
|
||||
<div class='overlay'>
|
||||
<h1 title='${ longTitle }'>${ title }</h1>
|
||||
`
|
||||
|
||||
if (data.cameraDate==='1') html += `<a><span title='Camera Date'>${ build.iconic('camera-slr') }</span>${ data.sysdate }</a>`;
|
||||
else html += `<a>${ data.sysdate }</a>`;
|
||||
|
||||
html += '</div>';
|
||||
|
||||
if (lychee.publicMode===false) {
|
||||
|
||||
if (data.star==='1') html += `<a class='badge iconic-star'>${ build.iconic('star') }</a>`;
|
||||
if (data.public==='1'&&album.json.public!=='1') html += `<a class='badge iconic-share'>${ build.iconic('eye') }</a>`;
|
||||
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html
|
||||
|
||||
}
|
||||
|
||||
build.imageview = function(data, size, visibleControls) {
|
||||
|
||||
if (data===null||data===undefined) return '';
|
||||
|
||||
var html = '';
|
||||
|
||||
html = `
|
||||
<div class='arrow_wrapper arrow_wrapper--previous'><a id='previous'>${ build.iconic('caret-left') }</a></div>
|
||||
<div class='arrow_wrapper arrow_wrapper--next'><a id='next'>${ build.iconic('caret-right') }</a></div>
|
||||
`
|
||||
|
||||
if (size==='big') {
|
||||
|
||||
if (visibleControls===true)
|
||||
html += `<div id='image' style='background-image: url(${ data.url })'></div>`;
|
||||
else
|
||||
html += `<div id='image' style='background-image: url(${ data.url });' class='full'></div>`;
|
||||
|
||||
} else if (size==='medium') {
|
||||
|
||||
if (visibleControls===true)
|
||||
html += `<div id='image' style='background-image: url(${ data.medium })'></div>`;
|
||||
else
|
||||
html += `<div id='image' style='background-image: url(${ data.medium });' class='full'></div>`;
|
||||
|
||||
} else if (size==='small') {
|
||||
|
||||
if (visibleControls===true)
|
||||
html += `<div id='image' class='small' style='background-image: url(${ data.url }); width: ${ data.width }px; height: ${ data.height }px; margin-top: -${ parseInt(data.height/2-20) }px; margin-left: -${ data.width/2 }px;'></div>`;
|
||||
else
|
||||
html += `<div id='image' class='small' style='background-image: url(${ data.url }); width: ${ data.width }px; height: ${ data.height }px; margin-top: -${ parseInt(data.height/2) }px; margin-left: -${ data.width/2 }px;'></div>`;
|
||||
|
||||
}
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
|
||||
build.no_content = function(typ) {
|
||||
|
||||
var html;
|
||||
|
||||
html = `
|
||||
<div class='no_content fadeIn'>
|
||||
${ build.iconic(typ) }
|
||||
`
|
||||
|
||||
switch (typ) {
|
||||
case 'magnifying-glass': html += '<p>No results</p>';
|
||||
break;
|
||||
case 'eye': html += '<p>No public albums</p>';
|
||||
break;
|
||||
case 'cog': html += '<p>No configuration</p>';
|
||||
break;
|
||||
case 'question-mark': html += '<p>Photo not found</p>';
|
||||
break;
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
|
||||
build.uploadModal = function(title, files) {
|
||||
|
||||
var html = '',
|
||||
i = 0,
|
||||
file = null;
|
||||
|
||||
html = `
|
||||
<h1>${ title }</h1>
|
||||
<div class='rows'>
|
||||
`
|
||||
|
||||
while (i<files.length) {
|
||||
|
||||
file = files[i];
|
||||
|
||||
if (file.name.length>40) file.name = file.name.substr(0, 17) + '...' + file.name.substr(file.name.length-20, 20);
|
||||
|
||||
html += `
|
||||
<div class='row'>
|
||||
<a class='name'>${ lychee.escapeHTML(file.name) }</a>
|
||||
`
|
||||
|
||||
if (file.supported===true) html += `<a class='status'></a>`;
|
||||
else html += `<a class='status error'>Not supported</a>`;
|
||||
|
||||
html += `
|
||||
<p class='notice'></p>
|
||||
</div>
|
||||
`
|
||||
|
||||
i++;
|
||||
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
|
||||
build.tags = function(tags) {
|
||||
|
||||
var html = '',
|
||||
editTagsHTML = '';
|
||||
|
||||
if (tags!=='') {
|
||||
|
||||
tags = tags.split(',');
|
||||
|
||||
tags.forEach(function(tag, index, array) {
|
||||
html += `<a class='tag'>${ tag }<span data-index='${ index }'>${ build.iconic('x') }</span></a>`
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
html = `<div class='empty'>No Tags</div>`;
|
||||
|
||||
}
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
@ -0,0 +1,184 @@
|
||||
/**
|
||||
* @description This module takes care of the header.
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
header = {
|
||||
|
||||
_dom: $('header')
|
||||
|
||||
}
|
||||
|
||||
header.dom = function(selector) {
|
||||
|
||||
if (selector===undefined||selector===null||selector==='') return header._dom;
|
||||
return header._dom.find(selector);
|
||||
|
||||
}
|
||||
|
||||
header.bind = function() {
|
||||
|
||||
// Event Name
|
||||
var eventName = ('ontouchend' in document.documentElement) ? 'touchend' : 'click';
|
||||
|
||||
/* 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('#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);
|
||||
header.dom('#button_info') .on(eventName, sidebar.toggle);
|
||||
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('#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()) });
|
||||
header.dom('#button_star') .on(eventName, function() { photo.setStar([photo.getID()]) });
|
||||
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();
|
||||
search.reset();
|
||||
});
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
header.show = function() {
|
||||
|
||||
var newMargin = -1*($('#imageview #image').height()/2)+20;
|
||||
|
||||
clearTimeout($(window).data('timeout'));
|
||||
|
||||
lychee.imageview.removeClass('full');
|
||||
header.dom().removeClass('hidden');
|
||||
|
||||
// Adjust position or size of photo
|
||||
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin);
|
||||
else $('#imageview #image').removeClass('full');
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
header.hide = function(e, delay = 500) {
|
||||
|
||||
if (visible.photo()&&!visible.sidebar()&&!visible.contextMenu()&&!visible.message()) {
|
||||
|
||||
var newMargin = -1*($('#imageview #image').height()/2);
|
||||
|
||||
clearTimeout($(window).data('timeout'));
|
||||
|
||||
$(window).data('timeout', setTimeout(function() {
|
||||
|
||||
lychee.imageview.addClass('full');
|
||||
header.dom().addClass('hidden');
|
||||
|
||||
// Adjust position or size of photo
|
||||
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin);
|
||||
else $('#imageview #image').addClass('full');
|
||||
|
||||
}, delay));
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
header.setTitle = function(title = 'Untitled') {
|
||||
|
||||
var $title = header.dom('#title');
|
||||
|
||||
$title.html(title + build.iconic('caret-bottom'));
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
header.setMode = function(mode) {
|
||||
|
||||
var albumID = album.getID();
|
||||
|
||||
switch (mode) {
|
||||
|
||||
case 'albums':
|
||||
|
||||
header.dom().removeClass('view');
|
||||
$('#tools_album, #tools_photo').hide();
|
||||
$('#tools_albums').show();
|
||||
|
||||
return true;
|
||||
break;
|
||||
|
||||
case 'album':
|
||||
|
||||
header.dom().removeClass('view');
|
||||
$('#tools_albums, #tools_photo').hide();
|
||||
$('#tools_album').show();
|
||||
|
||||
// Hide download button when album empty
|
||||
album.json.content === false ? $('#button_archive').hide() : $('#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();
|
||||
|
||||
if (albumID==='s'||albumID==='f'||albumID==='r') {
|
||||
$('#button_info_album, #button_trash_album, #button_share_album').hide();
|
||||
} else if (albumID==='0') {
|
||||
$('#button_info_album, #button_share_album').hide();
|
||||
$('#button_trash_album').show();
|
||||
} else {
|
||||
$('#button_info_album, #button_trash_album, #button_share_album').show();
|
||||
}
|
||||
|
||||
return true;
|
||||
break;
|
||||
|
||||
case 'photo':
|
||||
|
||||
header.dom().addClass('view');
|
||||
$('#tools_albums, #tools_album').hide();
|
||||
$('#tools_photo').show();
|
||||
|
||||
return true;
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
header.setEditable = function(editable) {
|
||||
|
||||
var $title = header.dom('#title');
|
||||
|
||||
// Hide editable icon when not logged in
|
||||
if (lychee.publicMode===true) editable = false;
|
||||
|
||||
if (editable) $title.addClass('editable');
|
||||
else $title.removeClass('editable');
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
/**
|
||||
* @description Build, show and hide a modal.
|
||||
* @copyright 2014 by Tobias Reich
|
||||
*/
|
||||
|
||||
modal = {
|
||||
|
||||
fns: null
|
||||
|
||||
}
|
||||
|
||||
modal.show = function(title, text, buttons, marginTop, closeButton) {
|
||||
|
||||
if (!buttons) {
|
||||
buttons = [
|
||||
['', function() {}],
|
||||
['', function() {}]
|
||||
];
|
||||
}
|
||||
|
||||
modal.fns = [buttons[0][1], buttons[1][1]];
|
||||
|
||||
$('body').append(build.modal(title, text, buttons, marginTop, closeButton));
|
||||
$('.message input:first-child').focus().select();
|
||||
|
||||
}
|
||||
|
||||
modal.close = function() {
|
||||
|
||||
modal.fns = null;
|
||||
$('.message_overlay').removeClass('fadeIn').css('opacity', 0);
|
||||
setTimeout(function() { $('.message_overlay').remove() }, 300);
|
||||
|
||||
}
|
||||
@ -0,0 +1,396 @@
|
||||
/**
|
||||
* @description This module takes care of the sidebar.
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
sidebar = {
|
||||
|
||||
_dom: $('#sidebar'),
|
||||
types: {
|
||||
DEFAULT: 0,
|
||||
TAGS: 1
|
||||
},
|
||||
createStructure: {}
|
||||
|
||||
}
|
||||
|
||||
sidebar.dom = function(selector) {
|
||||
|
||||
if (selector===undefined||selector===null||selector==='') return sidebar._dom;
|
||||
return sidebar._dom.find(selector);
|
||||
|
||||
}
|
||||
|
||||
sidebar.bind = function() {
|
||||
|
||||
// This function should be called after building and appending
|
||||
// the sidebars content to the DOM.
|
||||
// This function can be called multiple times, therefore
|
||||
// event handlers should be removed before binding a new one.
|
||||
|
||||
// Event Name
|
||||
var eventName = ('ontouchend' in document.documentElement) ? 'touchend' : 'click';
|
||||
|
||||
sidebar
|
||||
.dom('#edit_title')
|
||||
.off(eventName)
|
||||
.on(eventName, function() {
|
||||
if (visible.photo()) photo.setTitle([photo.getID()]);
|
||||
else if (visible.album()) album.setTitle([album.getID()]);
|
||||
});
|
||||
|
||||
sidebar
|
||||
.dom('#edit_description')
|
||||
.off(eventName)
|
||||
.on(eventName, function() {
|
||||
if (visible.photo()) photo.setDescription(photo.getID());
|
||||
else if (visible.album()) album.setDescription(album.getID());
|
||||
});
|
||||
|
||||
sidebar
|
||||
.dom('#edit_tags')
|
||||
.off(eventName)
|
||||
.on(eventName, function() {
|
||||
photo.editTags([photo.getID()])
|
||||
});
|
||||
|
||||
sidebar
|
||||
.dom('#tags .tag span')
|
||||
.off(eventName)
|
||||
.on(eventName, function() {
|
||||
photo.deleteTag(photo.getID(), $(this).data('index'))
|
||||
});
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
sidebar.toggle = function() {
|
||||
|
||||
if (visible.sidebar()||
|
||||
visible.sidebarbutton()) {
|
||||
|
||||
header.dom('.button--info').toggleClass('active');
|
||||
lychee.content.toggleClass('sidebar');
|
||||
sidebar.dom().toggleClass('active');
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
sidebar.setSelectable = function(selectable = true) {
|
||||
|
||||
// Attributes/Values inside the sidebar are selectable by default.
|
||||
// Selection needs to be deactivated to prevent an unwanted selection
|
||||
// while using multiselect.
|
||||
|
||||
if (selectable===true) sidebar.dom().removeClass('notSelectable');
|
||||
else sidebar.dom().addClass('notSelectable');
|
||||
|
||||
}
|
||||
|
||||
sidebar.changeAttr = function(attr, value = '-') {
|
||||
|
||||
if (attr===undefined||attr===null||attr==='') return false;
|
||||
|
||||
// Set a default for the value
|
||||
if (value===''||value===null) value = '-';
|
||||
|
||||
sidebar.dom('.attr_' + attr).html(value);
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
sidebar.createStructure.photo = function(data) {
|
||||
|
||||
if (data===undefined||data===null||data==='') return false;
|
||||
|
||||
var editable = false,
|
||||
exifHash = data.takestamp + data.make + data.model + data.shutter + data.aperture + data.focal + data.iso,
|
||||
structure = {},
|
||||
_public = '';
|
||||
|
||||
// Enable editable when user logged in
|
||||
if (lychee.publicMode===false) editable = true;
|
||||
|
||||
// Set value for public
|
||||
switch (data.public) {
|
||||
|
||||
case '0': _public = 'No';
|
||||
break;
|
||||
case '1': _public = 'Yes';
|
||||
break;
|
||||
case '2': _public = 'Yes (Album)';
|
||||
break;
|
||||
default: _public = '-';
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
structure.basics = {
|
||||
title: 'Basics',
|
||||
type: sidebar.types.DEFAULT,
|
||||
rows: [
|
||||
{ title: 'Title', value: data.title, editable },
|
||||
{ title: 'Uploaded', value: data.sysdate },
|
||||
{ title: 'Description', value: data.description, editable },
|
||||
]
|
||||
}
|
||||
|
||||
structure.image = {
|
||||
title: 'Image',
|
||||
type: sidebar.types.DEFAULT,
|
||||
rows: [
|
||||
{ title: 'Size', value: data.size },
|
||||
{ title: 'Format', value: data.type },
|
||||
{ title: 'Resolution', value: data.width + ' x ' + data.height }
|
||||
]
|
||||
}
|
||||
|
||||
// Only create tags section when user logged in
|
||||
if (lychee.publicMode===false) {
|
||||
|
||||
structure.tags = {
|
||||
title: 'Tags',
|
||||
type: sidebar.types.TAGS,
|
||||
value: build.tags(data.tags),
|
||||
editable
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
structure.tags = {}
|
||||
|
||||
}
|
||||
|
||||
// Only create EXIF section when EXIF data available
|
||||
if (exifHash!=='0') {
|
||||
|
||||
structure.exif = {
|
||||
title: 'Camera',
|
||||
type: sidebar.types.DEFAULT,
|
||||
rows: [
|
||||
{ title: 'Captured', value: data.takedate },
|
||||
{ title: 'Make', value: data.make },
|
||||
{ title: 'Type/Model', value: data.model },
|
||||
{ title: 'Shutter Speed', value: data.shutter },
|
||||
{ title: 'Aperture', value: data.aperture },
|
||||
{ title: 'Focal Length', value: data.focal },
|
||||
{ title: 'ISO', value: data.iso }
|
||||
]
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
structure.exif = {}
|
||||
|
||||
}
|
||||
|
||||
structure.sharing = {
|
||||
title: 'Sharing',
|
||||
type: sidebar.types.DEFAULT,
|
||||
rows: [
|
||||
{ title: 'Public', value: _public },
|
||||
]
|
||||
}
|
||||
|
||||
// Construct all parts of the structure
|
||||
structure = [
|
||||
structure.basics,
|
||||
structure.image,
|
||||
structure.tags,
|
||||
structure.exif,
|
||||
structure.sharing
|
||||
]
|
||||
|
||||
return structure;
|
||||
|
||||
}
|
||||
|
||||
sidebar.createStructure.album = function(data) {
|
||||
|
||||
if (data===undefined||data===null||data==='') return false;
|
||||
|
||||
var editable = false,
|
||||
structure = {},
|
||||
_public = '',
|
||||
visible = '',
|
||||
downloadable = '',
|
||||
password = '';
|
||||
|
||||
// Enable editable when user logged in
|
||||
if (lychee.publicMode===false) editable = true;
|
||||
|
||||
// Set value for public
|
||||
switch (data.public) {
|
||||
|
||||
case '0': _public = 'No';
|
||||
break;
|
||||
case '1': _public = 'Yes';
|
||||
break;
|
||||
default: _public = '-';
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
// Set value for visible
|
||||
switch (data.visible) {
|
||||
|
||||
case '0': visible = 'No';
|
||||
break;
|
||||
case '1': visible = 'Yes';
|
||||
break;
|
||||
default: visible = '-';
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
// Set value for downloadable
|
||||
switch (data.downloadable) {
|
||||
|
||||
case '0': downloadable = 'No';
|
||||
break;
|
||||
case '1': downloadable = 'Yes';
|
||||
break;
|
||||
default: downloadable = '-';
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
// Set value for password
|
||||
switch (data.password) {
|
||||
|
||||
case '0': password = 'No';
|
||||
break;
|
||||
case '1': password = 'Yes';
|
||||
break;
|
||||
default: password = '-';
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
structure.basics = {
|
||||
title: 'Basics',
|
||||
type: sidebar.types.DEFAULT,
|
||||
rows: [
|
||||
{ title: 'Title', value: data.title, editable },
|
||||
{ title: 'Description', value: data.description, editable }
|
||||
]
|
||||
}
|
||||
|
||||
structure.album = {
|
||||
title: 'Album',
|
||||
type: sidebar.types.DEFAULT,
|
||||
rows: [
|
||||
{ title: 'Created', value: data.sysdate },
|
||||
{ title: 'Images', value: data.num }
|
||||
]
|
||||
}
|
||||
|
||||
structure.share = {
|
||||
title: 'Share',
|
||||
type: sidebar.types.DEFAULT,
|
||||
rows: [
|
||||
{ title: 'Public', value: _public },
|
||||
{ title: 'Visible', value: visible },
|
||||
{ title: 'Downloadable', value: downloadable },
|
||||
{ title: 'Password', value: password }
|
||||
]
|
||||
}
|
||||
|
||||
// Construct all parts of the structure
|
||||
structure = [
|
||||
structure.basics,
|
||||
structure.album,
|
||||
structure.share
|
||||
]
|
||||
|
||||
return structure;
|
||||
|
||||
}
|
||||
|
||||
sidebar.render = function(structure) {
|
||||
|
||||
if (structure===undefined||structure===null||structure==='') return false;
|
||||
|
||||
var html = '';
|
||||
|
||||
var renderDefault = function(section) {
|
||||
|
||||
let _html = '';
|
||||
|
||||
_html += `
|
||||
<div class='divider'>
|
||||
<h1>${ section.title }</h1>
|
||||
</div>
|
||||
<table>
|
||||
`
|
||||
|
||||
section.rows.forEach(function(row) {
|
||||
|
||||
let value = row.value;
|
||||
|
||||
// Set a default for the value
|
||||
if (value===''||value===null||value===undefined) value = '-';
|
||||
|
||||
// Wrap span-element around value for easier selecting on change
|
||||
value = `<span class='attr_${ row.title.toLowerCase() }'>${ value }</span>`;
|
||||
|
||||
// Add edit-icon to the value when editable
|
||||
if (row.editable===true) value += ' ' + build.editIcon('edit_' + row.title.toLowerCase());
|
||||
|
||||
_html += `
|
||||
<tr>
|
||||
<td>${ row.title }</td>
|
||||
<td>${ value }</td>
|
||||
</tr>
|
||||
`
|
||||
|
||||
});
|
||||
|
||||
_html += `
|
||||
</table>
|
||||
`
|
||||
|
||||
return _html;
|
||||
|
||||
};
|
||||
|
||||
var renderTags = function(section) {
|
||||
|
||||
let _html = '';
|
||||
|
||||
_html += `
|
||||
<div class='divider'>
|
||||
<h1>${ section.title }</h1>
|
||||
</div>
|
||||
<div id='tags'>
|
||||
<div class='attr_${ section.title.toLowerCase() }'>${ section.value }</div>
|
||||
`
|
||||
|
||||
// Add edit-icon to the value when editable
|
||||
if (section.editable===true) _html += build.editIcon('edit_tags');
|
||||
|
||||
_html += `
|
||||
</div>
|
||||
`
|
||||
|
||||
return _html;
|
||||
|
||||
}
|
||||
|
||||
structure.forEach(function(section) {
|
||||
|
||||
if (section.type===sidebar.types.DEFAULT) html += renderDefault(section);
|
||||
else if (section.type===sidebar.types.TAGS) html += renderTags(section);
|
||||
|
||||
});
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* @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,303 +0,0 @@
|
||||
/* Font Awesome
|
||||
the iconic font designed for use with Twitter Bootstrap
|
||||
-------------------------------------------------------
|
||||
The full suite of pictographic icons, examples, and documentation
|
||||
can be found at: http://fortawesome.github.com/Font-Awesome/
|
||||
|
||||
License
|
||||
-------------------------------------------------------
|
||||
The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
|
||||
http://creativecommons.org/licenses/by/3.0/ A mention of
|
||||
'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
|
||||
source code is considered acceptable attribution (most common on the web).
|
||||
If human readable source code is not available to the end user, a mention in
|
||||
an 'About' or 'Credits' screen is considered acceptable (most common in desktop
|
||||
or mobile software).
|
||||
|
||||
Contact
|
||||
-------------------------------------------------------
|
||||
Email: dave@davegandy.com
|
||||
Twitter: http://twitter.com/fortaweso_me
|
||||
Work: http://lemonwi.se co-founder
|
||||
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
src: url('../src/fonts/fontawesome-webfont.eot');
|
||||
src: url('../src/fonts/fontawesome-webfont.eot?#iefix') format('eot'), url('../src/fonts/fontawesome-webfont.woff') format('woff'), url('../src/fonts/fontawesome-webfont.ttf') format('truetype'), url('../src/fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Font Awesome styles
|
||||
------------------------------------------------------- */
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a [class^="icon-"], a [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
/* makes the font 33% larger relative to the icon container */
|
||||
.icon-large:before {
|
||||
vertical-align: top;
|
||||
font-size: 1.3333333333333333em;
|
||||
}
|
||||
.btn [class^="icon-"], .btn [class*=" icon-"] {
|
||||
/* keeps button heights with and without icons the same */
|
||||
|
||||
line-height: .9em;
|
||||
}
|
||||
li [class^="icon-"], li [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
width: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
|
||||
/* 1.5 increased font size for icon-large * 1.25 width */
|
||||
|
||||
width: 1.875em;
|
||||
}
|
||||
li[class^="icon-"], li[class*=" icon-"] {
|
||||
margin-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
li[class^="icon-"]:before, li[class*=" icon-"]:before {
|
||||
text-indent: -2em;
|
||||
text-align: center;
|
||||
}
|
||||
li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
|
||||
text-indent: -1.3333333333333333em;
|
||||
}
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||
readers do not read off random characters that represent icons */
|
||||
.icon-glass:before { content: "\f000"; }
|
||||
.icon-music:before { content: "\f001"; }
|
||||
.icon-search:before { content: "\f002"; }
|
||||
.icon-envelope:before { content: "\f003"; }
|
||||
.icon-heart:before { content: "\f004"; }
|
||||
.icon-star:before { content: "\f005"; }
|
||||
.icon-star-empty:before { content: "\f006"; }
|
||||
.icon-user:before { content: "\f007"; }
|
||||
.icon-film:before { content: "\f008"; }
|
||||
.icon-th-large:before { content: "\f009"; }
|
||||
.icon-th:before { content: "\f00a"; }
|
||||
.icon-th-list:before { content: "\f00b"; }
|
||||
.icon-ok:before { content: "\f00c"; }
|
||||
.icon-remove:before { content: "\f00d"; }
|
||||
.icon-zoom-in:before { content: "\f00e"; }
|
||||
|
||||
.icon-zoom-out:before { content: "\f010"; }
|
||||
.icon-off:before { content: "\f011"; }
|
||||
.icon-signal:before { content: "\f012"; }
|
||||
.icon-cog:before { content: "\f013"; }
|
||||
.icon-trash:before { content: "\f014"; }
|
||||
.icon-home:before { content: "\f015"; }
|
||||
.icon-file:before { content: "\f016"; }
|
||||
.icon-time:before { content: "\f017"; }
|
||||
.icon-road:before { content: "\f018"; }
|
||||
.icon-download-alt:before { content: "\f019"; }
|
||||
.icon-download:before { content: "\f01a"; }
|
||||
.icon-upload:before { content: "\f01b"; }
|
||||
.icon-inbox:before { content: "\f01c"; }
|
||||
.icon-play-circle:before { content: "\f01d"; }
|
||||
.icon-repeat:before { content: "\f01e"; }
|
||||
|
||||
/* \f020 doesn't work in Safari. all shifted one down */
|
||||
.icon-refresh:before { content: "\f021"; }
|
||||
.icon-list-alt:before { content: "\f022"; }
|
||||
.icon-lock:before { content: "\f023"; }
|
||||
.icon-flag:before { content: "\f024"; }
|
||||
.icon-headphones:before { content: "\f025"; }
|
||||
.icon-volume-off:before { content: "\f026"; }
|
||||
.icon-volume-down:before { content: "\f027"; }
|
||||
.icon-volume-up:before { content: "\f028"; }
|
||||
.icon-qrcode:before { content: "\f029"; }
|
||||
.icon-barcode:before { content: "\f02a"; }
|
||||
.icon-tag:before { content: "\f02b"; }
|
||||
.icon-tags:before { content: "\f02c"; }
|
||||
.icon-book:before { content: "\f02d"; }
|
||||
.icon-bookmark:before { content: "\f02e"; }
|
||||
.icon-print:before { content: "\f02f"; }
|
||||
|
||||
.icon-camera:before { content: "\f030"; }
|
||||
.icon-font:before { content: "\f031"; }
|
||||
.icon-bold:before { content: "\f032"; }
|
||||
.icon-italic:before { content: "\f033"; }
|
||||
.icon-text-height:before { content: "\f034"; }
|
||||
.icon-text-width:before { content: "\f035"; }
|
||||
.icon-align-left:before { content: "\f036"; }
|
||||
.icon-align-center:before { content: "\f037"; }
|
||||
.icon-align-right:before { content: "\f038"; }
|
||||
.icon-align-justify:before { content: "\f039"; }
|
||||
.icon-list:before { content: "\f03a"; }
|
||||
.icon-indent-left:before { content: "\f03b"; }
|
||||
.icon-indent-right:before { content: "\f03c"; }
|
||||
.icon-facetime-video:before { content: "\f03d"; }
|
||||
.icon-picture:before { content: "\f03e"; }
|
||||
|
||||
.icon-pencil:before { content: "\f040"; }
|
||||
.icon-map-marker:before { content: "\f041"; }
|
||||
.icon-adjust:before { content: "\f042"; }
|
||||
.icon-tint:before { content: "\f043"; }
|
||||
.icon-edit:before { content: "\f044"; }
|
||||
.icon-share:before { content: "\f045"; }
|
||||
.icon-check:before { content: "\f046"; }
|
||||
.icon-move:before { content: "\f047"; }
|
||||
.icon-step-backward:before { content: "\f048"; }
|
||||
.icon-fast-backward:before { content: "\f049"; }
|
||||
.icon-backward:before { content: "\f04a"; }
|
||||
.icon-play:before { content: "\f04b"; }
|
||||
.icon-pause:before { content: "\f04c"; }
|
||||
.icon-stop:before { content: "\f04d"; }
|
||||
.icon-forward:before { content: "\f04e"; }
|
||||
|
||||
.icon-fast-forward:before { content: "\f050"; }
|
||||
.icon-step-forward:before { content: "\f051"; }
|
||||
.icon-eject:before { content: "\f052"; }
|
||||
.icon-chevron-left:before { content: "\f053"; }
|
||||
.icon-chevron-right:before { content: "\f054"; }
|
||||
.icon-plus-sign:before { content: "\f055"; }
|
||||
.icon-minus-sign:before { content: "\f056"; }
|
||||
.icon-remove-sign:before { content: "\f057"; }
|
||||
.icon-ok-sign:before { content: "\f058"; }
|
||||
.icon-question-sign:before { content: "\f059"; }
|
||||
.icon-info-sign:before { content: "\f05a"; }
|
||||
.icon-screenshot:before { content: "\f05b"; }
|
||||
.icon-remove-circle:before { content: "\f05c"; }
|
||||
.icon-ok-circle:before { content: "\f05d"; }
|
||||
.icon-ban-circle:before { content: "\f05e"; }
|
||||
|
||||
.icon-arrow-left:before { content: "\f060"; }
|
||||
.icon-arrow-right:before { content: "\f061"; }
|
||||
.icon-arrow-up:before { content: "\f062"; }
|
||||
.icon-arrow-down:before { content: "\f063"; }
|
||||
.icon-share-alt:before { content: "\f064"; }
|
||||
.icon-resize-full:before { content: "\f065"; }
|
||||
.icon-resize-small:before { content: "\f066"; }
|
||||
.icon-plus:before { content: "\f067"; }
|
||||
.icon-minus:before { content: "\f068"; }
|
||||
.icon-asterisk:before { content: "\f069"; }
|
||||
.icon-exclamation-sign:before { content: "\f06a"; }
|
||||
.icon-gift:before { content: "\f06b"; }
|
||||
.icon-leaf:before { content: "\f06c"; }
|
||||
.icon-fire:before { content: "\f06d"; }
|
||||
.icon-eye-open:before { content: "\f06e"; }
|
||||
|
||||
.icon-eye-close:before { content: "\f070"; }
|
||||
.icon-warning-sign:before { content: "\f071"; }
|
||||
.icon-plane:before { content: "\f072"; }
|
||||
.icon-calendar:before { content: "\f073"; }
|
||||
.icon-random:before { content: "\f074"; }
|
||||
.icon-comment:before { content: "\f075"; }
|
||||
.icon-magnet:before { content: "\f076"; }
|
||||
.icon-chevron-up:before { content: "\f077"; }
|
||||
.icon-chevron-down:before { content: "\f078"; }
|
||||
.icon-retweet:before { content: "\f079"; }
|
||||
.icon-shopping-cart:before { content: "\f07a"; }
|
||||
.icon-folder-close:before { content: "\f07b"; }
|
||||
.icon-folder-open:before { content: "\f07c"; }
|
||||
.icon-resize-vertical:before { content: "\f07d"; }
|
||||
.icon-resize-horizontal:before { content: "\f07e"; }
|
||||
|
||||
.icon-bar-chart:before { content: "\f080"; }
|
||||
.icon-twitter-sign:before { content: "\f081"; }
|
||||
.icon-facebook-sign:before { content: "\f082"; }
|
||||
.icon-camera-retro:before { content: "\f083"; }
|
||||
.icon-key:before { content: "\f084"; }
|
||||
.icon-cogs:before { content: "\f085"; }
|
||||
.icon-comments:before { content: "\f086"; }
|
||||
.icon-thumbs-up:before { content: "\f087"; }
|
||||
.icon-thumbs-down:before { content: "\f088"; }
|
||||
.icon-star-half:before { content: "\f089"; }
|
||||
.icon-heart-empty:before { content: "\f08a"; }
|
||||
.icon-signout:before { content: "\f08b"; }
|
||||
.icon-linkedin-sign:before { content: "\f08c"; }
|
||||
.icon-pushpin:before { content: "\f08d"; }
|
||||
.icon-external-link:before { content: "\f08e"; }
|
||||
|
||||
.icon-signin:before { content: "\f090"; }
|
||||
.icon-trophy:before { content: "\f091"; }
|
||||
.icon-github-sign:before { content: "\f092"; }
|
||||
.icon-upload-alt:before { content: "\f093"; }
|
||||
.icon-lemon:before { content: "\f094"; }
|
||||
.icon-phone:before { content: "\f095"; }
|
||||
.icon-check-empty:before { content: "\f096"; }
|
||||
.icon-bookmark-empty:before { content: "\f097"; }
|
||||
.icon-phone-sign:before { content: "\f098"; }
|
||||
.icon-twitter:before { content: "\f099"; }
|
||||
.icon-facebook:before { content: "\f09a"; }
|
||||
.icon-github:before { content: "\f09b"; }
|
||||
.icon-unlock:before { content: "\f09c"; }
|
||||
.icon-credit-card:before { content: "\f09d"; }
|
||||
.icon-rss:before { content: "\f09e"; }
|
||||
|
||||
.icon-hdd:before { content: "\f0a0"; }
|
||||
.icon-bullhorn:before { content: "\f0a1"; }
|
||||
.icon-bell:before { content: "\f0a2"; }
|
||||
.icon-certificate:before { content: "\f0a3"; }
|
||||
.icon-hand-right:before { content: "\f0a4"; }
|
||||
.icon-hand-left:before { content: "\f0a5"; }
|
||||
.icon-hand-up:before { content: "\f0a6"; }
|
||||
.icon-hand-down:before { content: "\f0a7"; }
|
||||
.icon-circle-arrow-left:before { content: "\f0a8"; }
|
||||
.icon-circle-arrow-right:before { content: "\f0a9"; }
|
||||
.icon-circle-arrow-up:before { content: "\f0aa"; }
|
||||
.icon-circle-arrow-down:before { content: "\f0ab"; }
|
||||
.icon-globe:before { content: "\f0ac"; }
|
||||
.icon-wrench:before { content: "\f0ad"; }
|
||||
.icon-tasks:before { content: "\f0ae"; }
|
||||
|
||||
.icon-filter:before { content: "\f0b0"; }
|
||||
.icon-briefcase:before { content: "\f0b1"; }
|
||||
.icon-fullscreen:before { content: "\f0b2"; }
|
||||
|
||||
.icon-group:before { content: "\f0c0"; }
|
||||
.icon-link:before { content: "\f0c1"; }
|
||||
.icon-cloud:before { content: "\f0c2"; }
|
||||
.icon-beaker:before { content: "\f0c3"; }
|
||||
.icon-cut:before { content: "\f0c4"; }
|
||||
.icon-copy:before { content: "\f0c5"; }
|
||||
.icon-paper-clip:before { content: "\f0c6"; }
|
||||
.icon-save:before { content: "\f0c7"; }
|
||||
.icon-sign-blank:before { content: "\f0c8"; }
|
||||
.icon-reorder:before { content: "\f0c9"; }
|
||||
.icon-list-ul:before { content: "\f0ca"; }
|
||||
.icon-list-ol:before { content: "\f0cb"; }
|
||||
.icon-strikethrough:before { content: "\f0cc"; }
|
||||
.icon-underline:before { content: "\f0cd"; }
|
||||
.icon-table:before { content: "\f0ce"; }
|
||||
|
||||
.icon-magic:before { content: "\f0d0"; }
|
||||
.icon-truck:before { content: "\f0d1"; }
|
||||
.icon-pinterest:before { content: "\f0d2"; }
|
||||
.icon-pinterest-sign:before { content: "\f0d3"; }
|
||||
.icon-google-plus-sign:before { content: "\f0d4"; }
|
||||
.icon-google-plus:before { content: "\f0d5"; }
|
||||
.icon-money:before { content: "\f0d6"; }
|
||||
.icon-caret-down:before { content: "\f0d7"; }
|
||||
.icon-caret-up:before { content: "\f0d8"; }
|
||||
.icon-caret-left:before { content: "\f0d9"; }
|
||||
.icon-caret-right:before { content: "\f0da"; }
|
||||
.icon-columns:before { content: "\f0db"; }
|
||||
.icon-sort:before { content: "\f0dc"; }
|
||||
.icon-sort-down:before { content: "\f0dd"; }
|
||||
.icon-sort-up:before { content: "\f0de"; }
|
||||
|
||||
.icon-envelope-alt:before { content: "\f0e0"; }
|
||||
.icon-linkedin:before { content: "\f0e1"; }
|
||||
.icon-undo:before { content: "\f0e2"; }
|
||||
.icon-legal:before { content: "\f0e3"; }
|
||||
.icon-dashboard:before { content: "\f0e4"; }
|
||||
.icon-comment-alt:before { content: "\f0e5"; }
|
||||
.icon-comments-alt:before { content: "\f0e6"; }
|
||||
.icon-bolt:before { content: "\f0e7"; }
|
||||
.icon-sitemap:before { content: "\f0e8"; }
|
||||
.icon-umbrella:before { content: "\f0e9"; }
|
||||
.icon-paste:before { content: "\f0ea"; }
|
||||
|
||||
.icon-user-md:before { content: "\f200"; }
|
||||
@ -1,180 +0,0 @@
|
||||
/**
|
||||
* @copyright 2014 by Tobias Reich
|
||||
*/
|
||||
|
||||
#infobox_overlay {
|
||||
z-index: 3;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
#infobox {
|
||||
|
||||
z-index: 4;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
background-color: rgba(20, 20, 20, .98);
|
||||
box-shadow: -1px 0 2px rgba(0, 0, 0, .8);
|
||||
display: none;
|
||||
transform: translateX(370px);
|
||||
transition: transform .3s cubic-bezier(.51, .92, .24, 1.15);
|
||||
|
||||
&.active { transform: translateX(50px); }
|
||||
|
||||
/* Misc ------------------------------------------------*/
|
||||
.wrapper {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.edit {
|
||||
display: inline;
|
||||
margin-left: 3px;
|
||||
width: 20px;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bumper {
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* Header ------------------------------------------------*/
|
||||
.header {
|
||||
float: left;
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to bottom, #2A2A2A, #131313);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
position: absolute;
|
||||
margin: 15px 30% 15px calc(30% - 25px);
|
||||
width: 40%;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.header a {
|
||||
float: right;
|
||||
padding: 15px 65px 15px 15px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
opacity: .5;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Seperator ------------------------------------------------*/
|
||||
.separator {
|
||||
float: left;
|
||||
width: 100%;
|
||||
border-top: 1px solid rgba(255, 255, 255, .02);
|
||||
box-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
|
||||
|
||||
&:first-child {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 20px 0 5px 20px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
}
|
||||
}
|
||||
|
||||
/* Table ------------------------------------------------*/
|
||||
table {
|
||||
float: left;
|
||||
margin: 10px 0 15px 20px;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
padding: 5px 0px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
user-select: text;
|
||||
|
||||
&:first-child { width: 110px; }
|
||||
|
||||
&:last-child { padding-right: 10px; }
|
||||
}
|
||||
|
||||
/* Tags ------------------------------------------------*/
|
||||
#tags {
|
||||
width: calc(100% - 40px);
|
||||
margin: 16px 20px 12px 20px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#tags .empty {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#tags .edit {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#tags .empty .edit {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#tags .tag {
|
||||
float: left;
|
||||
padding: 4px 7px;
|
||||
margin: 0 6px 8px 0;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
border: 2px solid rgba(255, 255, 255, .3);
|
||||
border-radius: 100px;
|
||||
font-size: 12px;
|
||||
transition: border .3s;
|
||||
|
||||
&:hover { border: 2px solid #aaa; }
|
||||
}
|
||||
|
||||
#tags .tag span {
|
||||
float: right;
|
||||
width: 0;
|
||||
padding: 0;
|
||||
margin: 0 0 -2px 0;
|
||||
color: red;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transform: scale(0);
|
||||
transition: width .3s, margin .3s, transform .3s;
|
||||
}
|
||||
|
||||
#tags .tag:hover span {
|
||||
width: 10px;
|
||||
margin: 0 0 -2px 6px;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,64 +1,35 @@
|
||||
/**
|
||||
* @copyright 2014 by Tobias Reich
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
|
||||
#title {
|
||||
margin: 0px 20% !important;
|
||||
margin: 0 20% !important;
|
||||
width: 40% !important;
|
||||
}
|
||||
|
||||
#title.view {
|
||||
margin: 0px 20% !important;
|
||||
margin: 0 20% !important;
|
||||
width: 60% !important;
|
||||
}
|
||||
#title span {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
|
||||
#title {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#title.view {
|
||||
display: block !important;
|
||||
width: 70% !important;
|
||||
margin: 0px 20% 0px 10% !important;
|
||||
}
|
||||
#button_move {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.center {
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
}
|
||||
|
||||
.album, .photo {
|
||||
margin: 40px 0px 0px 50px !important;
|
||||
margin: 0 20% 0 10% !important;
|
||||
}
|
||||
|
||||
#imageview .arrow_wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.message {
|
||||
position: fixed !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 1px 0px 0px 0px !important;
|
||||
border-radius: 0px !important;
|
||||
|
||||
/* Animation */
|
||||
animation: moveUp .3s !important;
|
||||
}
|
||||
|
||||
.upload_message {
|
||||
margin-top: 0px !important;
|
||||
margin-left: 0px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,208 +1,264 @@
|
||||
/**
|
||||
* @copyright 2014 by Tobias Reich
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
.message_overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, .85);
|
||||
z-index: 1000;
|
||||
.basicModalContainer {
|
||||
background-color: black(.85);
|
||||
}
|
||||
|
||||
.message {
|
||||
.basicModal {
|
||||
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 500px;
|
||||
margin-left: -250px;
|
||||
margin-top: -95px;
|
||||
background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
|
||||
background: linear-gradient(to bottom, #444, #333);
|
||||
border: 1px solid black(.7);
|
||||
border-bottom: 1px solid black(.8);
|
||||
box-shadow: 0 1px 4px black(.2), inset 0 1px 0 white(.05);
|
||||
|
||||
/* Animation */
|
||||
animation-name: moveUp;
|
||||
animation-duration: .3s;
|
||||
animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);
|
||||
|
||||
/* Header ------------------------------------------------*/
|
||||
h1 {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 12px 14px 6px 7px;
|
||||
color: #aaa;
|
||||
font-size: 20px;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover { color: #fff; }
|
||||
}
|
||||
|
||||
/* Text ------------------------------------------------*/
|
||||
p {
|
||||
float: left;
|
||||
width: 90%;
|
||||
margin-top: 1px;
|
||||
padding: 12px 5% 15px 5%;
|
||||
color: #eee;
|
||||
display: block;
|
||||
padding: 10px 30px;
|
||||
color: white(.9);
|
||||
font-size: 14px;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
text-align: left;
|
||||
text-shadow: $shadow;
|
||||
line-height: 20px;
|
||||
|
||||
b {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
color: white(1);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #eee;
|
||||
color: white(.9);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed #888;
|
||||
}
|
||||
|
||||
&:first-of-type { padding-top: 42px; }
|
||||
|
||||
&:last-of-type { padding-bottom: 40px; }
|
||||
|
||||
&.signIn:first-of-type { padding-top: 30px; }
|
||||
|
||||
&.signIn:last-of-type { padding-bottom: 30px; }
|
||||
|
||||
&.less { padding-bottom: 30px; }
|
||||
}
|
||||
|
||||
/* Button ------------------------------------------------*/
|
||||
.button {
|
||||
float: right;
|
||||
margin: 15px 15px 15px 0;
|
||||
padding: 7px 10px 8px 10px;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(0,0,0,.4);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .05);
|
||||
cursor: pointer;
|
||||
/* Buttons ------------------------------------------------*/
|
||||
.basicModal__button {
|
||||
padding: 13px 0 15px;
|
||||
background: black(.02);
|
||||
color: white(.5);
|
||||
text-shadow: $shadow;
|
||||
border-top: 1px solid black(.2);
|
||||
box-shadow: inset 0 1px 0 white(.02);
|
||||
cursor: default;
|
||||
|
||||
&:first-of-type { margin: 15px 5% 18px 0; }
|
||||
&:hover { background: white(.02); }
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .1), 0 0 4px #005ecc;
|
||||
&:active,
|
||||
&--active {
|
||||
transition: none;
|
||||
background: black(.1);
|
||||
}
|
||||
|
||||
&:hover { background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57)); }
|
||||
&#basicModal__action {
|
||||
color: $colorBlue;
|
||||
box-shadow: inset 0 1px 0 white(.02), inset 1px 0 0 black(.2);
|
||||
}
|
||||
|
||||
&#basicModal__action.red { color: $colorRed; }
|
||||
|
||||
&.hidden { display: none; }
|
||||
|
||||
&:active,
|
||||
&.pressed { background-image: linear-gradient(to bottom, rgb(57, 57, 57), rgb(60, 60, 60)); }
|
||||
}
|
||||
|
||||
/* Input ------------------------------------------------*/
|
||||
/* Inputs ------------------------------------------------*/
|
||||
input.text {
|
||||
float: left;
|
||||
width: calc(100% - 10px);
|
||||
padding: 17px 5px 9px 5px;
|
||||
margin-top: 10px;
|
||||
width: calc(100% - 4px);
|
||||
padding: 9px 2px;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
text-shadow: $shadow;
|
||||
border: none;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .1);
|
||||
// Do not use rgba() for border-bottom
|
||||
// to avoid a blurry line in Safari on non-retina screens
|
||||
border-bottom: 1px solid #222;
|
||||
border-radius: 0px;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 1px 0 white(.05);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input.less { margin-bottom: -10px; }
|
||||
&:focus { border-bottom-color: $colorBlue; }
|
||||
|
||||
input.more { margin-bottom: 30px; }
|
||||
&.error { border-bottom-color: $colorRed; }
|
||||
|
||||
.copylink { margin-bottom: 20px; }
|
||||
&:first-child { margin-top: 10px; }
|
||||
|
||||
&:last-child { margin-bottom: 10px; }
|
||||
}
|
||||
|
||||
/* Radio Buttons ------------------------------------------------*/
|
||||
.choice {
|
||||
float: left;
|
||||
margin: 12px 5%;
|
||||
width: 90%;
|
||||
padding: 0 30px 15px;
|
||||
width: calc(100% - 60px);
|
||||
color: #fff;
|
||||
|
||||
input { float: left; }
|
||||
&:last-child { padding-bottom: 40px; }
|
||||
|
||||
h2 {
|
||||
label {
|
||||
float: left;
|
||||
margin: 1px 0 0 8px;
|
||||
color: #fff;
|
||||
color: white(1);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
text-shadow: $shadow;
|
||||
}
|
||||
|
||||
label input {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
label .checkbox {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: black(.5);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 0 1px black(.7);
|
||||
|
||||
.iconic {
|
||||
box-sizing: border-box;
|
||||
fill: $colorBlue;
|
||||
padding: 2px;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: opacity .2s $timing, transform .2s $timing;
|
||||
}
|
||||
}
|
||||
|
||||
/* Checked */
|
||||
label input:checked ~ .checkbox {
|
||||
background: black(.5);
|
||||
.iconic {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Active */
|
||||
label input:active ~ .checkbox {
|
||||
background: black(.3);
|
||||
.iconic { opacity: .8; }
|
||||
}
|
||||
|
||||
label .label { margin: 0 0 0 18px; }
|
||||
|
||||
p {
|
||||
margin-top: 2px;
|
||||
padding: 0 5% 0 25px;
|
||||
color: #aaa;
|
||||
clear: both;
|
||||
padding: 2px 0 0 35px;
|
||||
margin: 0;
|
||||
width: calc(100% - 35px);
|
||||
color: white(.6);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
p input {
|
||||
width: 100%;
|
||||
padding: 10px 1px 9px;
|
||||
margin-top: 10px;
|
||||
input.text {
|
||||
display: none;
|
||||
margin-top: 5px;
|
||||
margin-left: 35px;
|
||||
width: calc(100% - 39px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Version ------------------------------------------------*/
|
||||
#version {
|
||||
display: inline-block;
|
||||
margin-top: 23px;
|
||||
margin-left: 5%;
|
||||
color: #888;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
.version {
|
||||
margin: -5px 0 0;
|
||||
padding: 0 30px 30px !important;
|
||||
color: white(.3);
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
|
||||
span { display: none; }
|
||||
|
||||
span a { color: #888; }
|
||||
span a { color: white(.3); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Sign in ------------------------------------------------*/
|
||||
.sign_in {
|
||||
/* Title ------------------------------------------------*/
|
||||
h1 {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-shadow: $shadow;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-top: 1px;
|
||||
padding: 5px 0;
|
||||
color: #eee;
|
||||
font-size: 14px;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
line-height: 20px;
|
||||
/* Rows ------------------------------------------------*/
|
||||
.rows {
|
||||
margin: 0 8px 8px;
|
||||
width: calc(100% - 16px);
|
||||
height: 300px;
|
||||
background-color: black(.4);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 0 3px black(.4);
|
||||
}
|
||||
|
||||
/* Input ------------------------------------------------*/
|
||||
input {
|
||||
/* Row ------------------------------------------------*/
|
||||
.rows .row {
|
||||
float: left;
|
||||
width: 88%;
|
||||
padding: 7px 1% 9px 1%;
|
||||
margin: 0 5%;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 #222;
|
||||
border: none;
|
||||
border-bottom: 1px solid #222;
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,.1);
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
padding: 8px 0;
|
||||
width: 100%;
|
||||
background-color: white(.02);
|
||||
|
||||
&:nth-child(2n) { background-color: white(0); }
|
||||
|
||||
a.name {
|
||||
float: left;
|
||||
padding: 5px 10px;
|
||||
width: calc(70% - 20px);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a.status {
|
||||
float: left;
|
||||
padding: 5px 10px;
|
||||
width: calc(30% - 20px);
|
||||
color: white(.5);
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
|
||||
animation-name: pulse;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
&:first-of-type { margin-bottom: 10px; }
|
||||
&.error,
|
||||
&.success { animation: none; }
|
||||
|
||||
&.error:focus { box-shadow: 0 1px 0 rgba(204, 0, 7, .6); }
|
||||
&.error { color: rgb(213, 24, 24); }
|
||||
|
||||
&.success { color: rgb(42, 213, 0); }
|
||||
}
|
||||
|
||||
p.notice {
|
||||
display: none;
|
||||
float: left;
|
||||
padding: 2px 10px 5px;
|
||||
width: calc(100% - 20px);
|
||||
color: white(.5);
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,179 @@
|
||||
/**
|
||||
* @copyright 2015 by Tobias Reich
|
||||
*/
|
||||
|
||||
#sidebar {
|
||||
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
right: -370px;
|
||||
width: 350px;
|
||||
height: calc(100% - 50px);
|
||||
background-color: rgba(25, 25, 25, .98);
|
||||
border-left: 1px solid black(.2);
|
||||
transform: translateX(0);
|
||||
transition: transform .3s $timing;
|
||||
|
||||
&.active { transform: translateX(-320px); }
|
||||
|
||||
&.notSelectable table tr td:last-child {
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
/* Header ------------------------------------------------*/
|
||||
.header {
|
||||
float: left;
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
background: linear-gradient(to bottom, white(.02), black(0));
|
||||
border-top: 1px solid $colorBlue;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
position: absolute;
|
||||
margin: 15px 50px 15px 0;
|
||||
width: calc(100% - 50px);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Wrapper ------------------------------------------------*/
|
||||
.wrapper {
|
||||
float: left;
|
||||
height: calc(100% - 49px);
|
||||
width: 300px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Divider ------------------------------------------------*/
|
||||
.divider {
|
||||
float: left;
|
||||
padding: 12px 0 8px;
|
||||
width: 100%;
|
||||
border-top: 1px solid white(.02);
|
||||
box-shadow: $shadow;
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
box-shaodw: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0 20px;
|
||||
color: white(.6);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* Edit ------------------------------------------------*/
|
||||
.edit {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
width: 10px;
|
||||
|
||||
.iconic {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
fill: white(.5);
|
||||
transition: fill .2s ease-out;
|
||||
}
|
||||
|
||||
&:hover .iconic { fill: white(1); }
|
||||
|
||||
&:active .iconic {
|
||||
transition: none;
|
||||
fill: white(.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* Table ------------------------------------------------*/
|
||||
table {
|
||||
float: left;
|
||||
margin: 10px 0 15px 20px;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
padding: 5px 0px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
&:first-child { width: 110px; }
|
||||
|
||||
&:last-child {
|
||||
padding-right: 10px;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tags ------------------------------------------------*/
|
||||
#tags {
|
||||
width: calc(100% - 40px);
|
||||
margin: 16px 20px 12px 20px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#tags > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#tags .empty {
|
||||
font-size: 14px;
|
||||
margin: 0 2px 8px 0;
|
||||
}
|
||||
|
||||
#tags .edit { margin-top: 6px; }
|
||||
|
||||
#tags .empty .edit { margin-top: 0; }
|
||||
|
||||
#tags .tag {
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
margin: 0 6px 8px 0;
|
||||
background-color: black(.5);
|
||||
border-radius: 100px;
|
||||
font-size: 12px;
|
||||
transition: background-color .2s;
|
||||
|
||||
&:hover { background-color: black(.3); }
|
||||
}
|
||||
|
||||
#tags .tag span {
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0 0 -2px 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
transform: scale(0);
|
||||
transition: width .2s, margin .2s, transform .2s, fill .2s ease-out;
|
||||
|
||||
.iconic {
|
||||
fill: $colorRed;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&:hover .iconic { fill: lighten($colorRed, 10%); }
|
||||
|
||||
&:active .iconic {
|
||||
transition: none;
|
||||
fill: darken($colorRed, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
#tags .tag:hover span {
|
||||
width: 9px;
|
||||
margin: 0 0 -2px 5px;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,125 +0,0 @@
|
||||
/**
|
||||
* @copyright 2014 by Tobias Reich
|
||||
*/
|
||||
|
||||
#upload {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload_overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, .85);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.upload_message {
|
||||
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 450px;
|
||||
margin-left: -225px;
|
||||
margin-top: -170px;
|
||||
background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
|
||||
animation-name: moveUp;
|
||||
animation-duration: .3s;
|
||||
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
||||
|
||||
/* Header ------------------------------------------------*/
|
||||
h1 {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 11px 14px 6px 7px;
|
||||
color: #aaa;
|
||||
font-size: 20px;
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover { color: #fff; }
|
||||
}
|
||||
|
||||
/* Rows ------------------------------------------------*/
|
||||
.rows {
|
||||
float: left;
|
||||
margin: 3px 8px 8px 8px;
|
||||
width: calc(100% - 16px);
|
||||
height: 300px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 0 3px rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
/* Row ------------------------------------------------*/
|
||||
.rows .row {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
padding: 8px 0;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, .02);
|
||||
|
||||
&:nth-child(2n) { background-color: rgba(255, 255, 255, 0); }
|
||||
|
||||
a.name {
|
||||
float: left;
|
||||
padding: 5px 10px;
|
||||
width: calc(70% - 20px);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a.status {
|
||||
float: left;
|
||||
padding: 5px 10px;
|
||||
width: calc(30% - 20px);
|
||||
color: rgba(255, 255, 255, .5);
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
|
||||
animation-name: pulse;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
&.error,
|
||||
&.success { animation: none; }
|
||||
|
||||
&.error { color: rgb(213, 24, 24); }
|
||||
|
||||
&.success { color: rgb(42, 213, 0); }
|
||||
}
|
||||
|
||||
p.notice {
|
||||
display: none;
|
||||
float: left;
|
||||
padding: 2px 10px 5px;
|
||||
width: calc(100% - 20px);
|
||||
color: rgba(255, 255, 255, .5);
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue