- Better mobile experience
- New Login
- jQuery update
- Small fixes and enhancements
This commit is contained in:
Tobias Reich 2013-01-15 21:21:36 +01:00
parent c6c6a2e808
commit b565390419
16 changed files with 373 additions and 310 deletions

42
css/animations.css Normal file → Executable file
View File

@ -118,6 +118,48 @@
} }
} }
/* moveUp ------------------------------------------------*/
@-webkit-keyframes moveUp {
0% {
-webkit-transform: translateY(1000px);
}
100% {
-webkit-transform: translateY(0px);
}
}
@-moz-keyframes moveUp {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes moveUp {
0% {
-ms-transform: translateY(1000px);
}
100% {
-ms-transform: translateY(0px);
}
}
@-o-keyframes moveUp {
0% {
-o-transform: translateY(1000px);
}
100% {
-o-transform: translateY(0px);
}
}
@keyframes moveUp {
0% {
transform: translateY(1000px);
}
100% {
transform: translateY(0px);
}
}
/* moveDown ------------------------------------------------*/ /* moveDown ------------------------------------------------*/
@-webkit-keyframes moveDown { @-webkit-keyframes moveDown {
0% { 0% {

0
css/font-awesome.css vendored Normal file → Executable file
View File

View File

@ -9,10 +9,39 @@ table { border-collapse:collapse; border-spacing:0; }
/* Screen behavior -------------------------------------------------*/ /* Screen behavior -------------------------------------------------*/
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
#title span { display: none; } #title span { display: none; }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 640px) {
#title { display: none; } #title { display: none; }
#button_move { display: none; }
.center {
top: 0px !important;
left: 0px !important;
}
.message {
position: fixed !important;
width: 100% !important;
height: 100% !important;
margin: 1px 0px 0px 0px !important;
border-radius: 0px !important;
/* Animation */
-webkit-animation-name: moveUp !important;
-webkit-animation-duration: .3s !important;
-moz-animation-name: moveUp !important;
-moz-animation-duration: .3s !important;
-o-animation-name: moveUp !important;
-o-animation-duration: .3s !important;
animation-name: moveUp !important;
animation-duration: .3s !important;
}
} }
/* Basics -------------------------------------------------*/ /* Basics -------------------------------------------------*/
@ -60,7 +89,7 @@ body { background-color: #222; background-image: url(../img/background.jpg); fon
text-align: center; text-align: center;
text-shadow: 0 -1px 0 #000; text-shadow: 0 -1px 0 #000;
background: #000; background: #000;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, .29); box-shadow: 0 1px 2px hsla(0, 0%, 0%, .25);
border-radius: 3px; border-radius: 3px;
} }
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; } .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
@ -399,7 +428,7 @@ header {
#search:focus { #search:focus {
box-shadow: 0px 1px 0px #555, inset 0px 0px 2px #333; box-shadow: 0px 1px 0px #555, inset 0px 0px 2px #333;
opacity: 1; opacity: 1;
width: 180px; width: 150px;
} }
/* Tools ------------------------------------------------*/ /* Tools ------------------------------------------------*/
@ -690,14 +719,11 @@ header {
float: left; float: left;
width: 100%; width: 100%;
padding: 12px 0px; padding: 12px 0px;
background-color: rgba(0, 0, 0, .2);
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-shadow: 0px -1px 0px #000; text-shadow: 0px -1px 0px #000;
text-align: center; text-align: center;
border-bottom: 1px solid #111;
box-shadow: 0px 1px 0px rgba(255,255,255,.2);
} }
.message .close { .message .close {
position: absolute; position: absolute;
@ -710,16 +736,13 @@ header {
} }
.message p { .message p {
float: left; float: left;
width: 470px; width: 90%;
margin-top: 1px; margin-top: 1px;
padding: 12px 15px 15px 15px; padding: 12px 5% 15px 5%;
color: #eee; color: #eee;
font-size: 14px; font-size: 14px;
background-color: #555;
text-shadow: 0px -1px 0px #222; text-shadow: 0px -1px 0px #222;
line-height: 20px; line-height: 20px;
border-bottom: 1px solid #111;
box-shadow: 0px 1px 0px rgba(255,255,255,.1);
} }
.message .button { .message .button {
float: right; float: right;
@ -743,6 +766,9 @@ header {
box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1); box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1);
cursor: pointer; cursor: pointer;
} }
.message .button:first-of-type {
margin: 15px 5% 18px 0px !important;
}
.message .button.active { .message .button.active {
color: #fff; color: #fff;
box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1), 0px 0px 5px #005ecc; box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1), 0px 0px 5px #005ecc;
@ -818,35 +844,25 @@ header {
/* Sign in ------------------------------------------------*/ /* Sign in ------------------------------------------------*/
.sign_in { .sign_in {
float: left; float: left;
width: 500px; width: 100%;
margin-top: 1px; margin-top: 1px;
padding: 20px 0px; padding: 5px 0px;
color: #eee; color: #eee;
font-size: 14px; font-size: 14px;
background-color: #555;
text-shadow: 0px -1px 0px #222; text-shadow: 0px -1px 0px #222;
line-height: 20px; line-height: 20px;
border-bottom: 1px solid #111;
box-shadow: 0px 1px 0px rgba(255,255,255,.1);
}
.sign_in label {
float: left;
width: 20%;
margin: 6px 0px 0px 10%;
}
.sign_in label:first-of-type {
margin-bottom: 10px;
} }
.sign_in input { .sign_in input {
float: left; float: left;
width: 55%; width: 86%;
padding: 7px 10px 9px 10px; padding: 7px 2% 9px 2%;
margin: 0px 5%;
background-color: #444; background-color: #444;
color: #fff; color: #fff;
text-shadow: 0px 1px 0px #222; text-shadow: 0px 1px 0px #222;
border: none; border: none;
border: 1px solid #111; border: 1px solid #111;
box-shadow: 0px 1px 0px #777; box-shadow: 0px 1px 0px #555;
outline: none; outline: none;
border-radius: 5px; border-radius: 5px;
} }
@ -854,15 +870,15 @@ header {
margin-bottom: 10px; margin-bottom: 10px;
} }
.sign_in input:focus { .sign_in input:focus {
box-shadow: 0px 1px 0px #777, inset 0px 0px 3px #333, 0px 0px 5px #005ecc; box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #005ecc;
} }
.sign_in input.error:focus { .sign_in input.error:focus {
box-shadow: 0px 1px 0px #777, inset 0px 0px 3px #333, 0px 0px 5px #cc0007; box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #cc0007;
} }
.message #version { .message #version {
display: inline-block; display: inline-block;
margin-top: 23px; margin-top: 23px;
margin-left: 19px; margin-left: 5%;
color: #888; color: #888;
text-shadow: 0px -1px 0px #111; text-shadow: 0px -1px 0px #111;
} }

View File

@ -3,7 +3,7 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title> <title>Lychee</title>
<meta name="author" content="Tobias Reich, Philipp Maurer"> <meta name="author" content="Tobias Reich, Philipp Maurer">
<meta name="keywords" content=""> <meta name="keywords" content="">
@ -16,7 +16,7 @@
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon.png"> <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon.png">
<meta name="apple-mobile-web-app-status-bar-style" content="black" > <meta name="apple-mobile-web-app-status-bar-style" content="black" >
<meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="viewport" content="user-scalable=no, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
</head> </head>

4
js/build.js Normal file → Executable file
View File

@ -137,8 +137,8 @@ function buildSignInModal() {
modal += "<div class='message center'>"; modal += "<div class='message center'>";
modal += "<h1><a class='icon-lock'></a> Sign in</h1>"; modal += "<h1><a class='icon-lock'></a> Sign in</h1>";
modal += "<div class='sign_in'>"; modal += "<div class='sign_in'>";
modal += "<label>Username:</label><input id='username' type='text' name='' value=''>"; modal += "<input id='username' type='text' name='' value='' placeholder='username'>";
modal += "<label>Password:</label><input id='password' type='password' name='' value=''>"; modal += "<input id='password' type='password' name='' value='' placeholder='password'>";
modal += "</div>"; modal += "</div>";
modal += "<div id='version'>Version " + version + "</div>"; modal += "<div id='version'>Version " + version + "</div>";
modal += "<a onclick='login()' class='button active'>Sign in</a>"; modal += "<a onclick='login()' class='button active'>Sign in</a>";

File diff suppressed because one or more lines are too long

8
js/functions.js Normal file → Executable file
View File

@ -13,7 +13,7 @@
function init() { function init() {
$("#tools_albums").show(); $("#tools_albums").show();
$(".tools").tipsy({gravity: 'n'}); if (!mobileBrowser()) $(".tools").tipsy({gravity: 'n'});
params = "function=loggedIn"; params = "function=loggedIn";
$.ajax({type: "POST", url: api_path, data: params, success: function(data) { $.ajax({type: "POST", url: api_path, data: params, success: function(data) {
if (data!=1) { if (data!=1) {
@ -85,9 +85,11 @@ function getURL() {
} else if (albumID&&photoID) { } else if (albumID&&photoID) {
if (content.html()=="") {
content.hide(); content.hide();
loadPhotos(albumID, true);
}
showImageview(photoID); showImageview(photoID);
if (content.html()=="") loadPhotos(albumID, true);
} else if (albumID) { } else if (albumID) {
@ -662,7 +664,7 @@ function loadAlbumInfo(albumID) {
case "s": case "s":
document.title = "Lychee - Public"; document.title = "Lychee - Public";
headerTitle.html("Public<span> - " + data.publicNum + " photos</span>"); headerTitle.html("Public<span> - " + data.publicNum + " photos</span>");
$("#button_edit_album, #button_trash_album .button_divider").hide(); $("#button_edit_album, #button_trash_album, .button_divider").hide();
break; break;
case "0": case "0":
document.title = "Lychee - Unsorted"; document.title = "Lychee - Unsorted";

View File

@ -12,45 +12,49 @@ var header = $("header"),
loading = $("#loading"), loading = $("#loading"),
infobox = $("#infobox"), infobox = $("#infobox"),
api_path = "php/api.php", api_path = "php/api.php",
version = "1.0.1"; version = "1.0.2";
$(document).ready(function(){ $(document).ready(function(){
/* Event Name */
if (mobileBrowser()) event_name = "touchend";
else event_name = "click";
/* Login */ /* Login */
$("#password").live("keyup", function() { $("#password").live("keyup", function() {
if ($(this).val().length>0) $(this).removeClass("error"); if ($(this).val().length>0) $(this).removeClass("error");
}); });
/* Add Dialog */ /* Add Dialog */
$(".button_add").live("click", function() { $("body").append(buildAddModal) }); $(".button_add").live(event_name, function() { $("body").append(buildAddModal) });
$("#add_album").live("click", addAlbum); $("#add_album").live(event_name, addAlbum);
$("#add_photo").live("click", function() { $("#auswahl").html(""); $("#upload_files").click() }); $("#add_photo").live(event_name, function() { $("#auswahl").html(""); $("#upload_files").click() });
/* Toolbar Buttons */ /* Toolbar Buttons */
$("#button_signout").live("click", function() { $("#button_signout").live(event_name, function() {
modal = buildModal("Sign Out", "Are you sure you want to leave and log out?", ["Sign out", "Stay here"], ["logout();", ""]); modal = buildModal("Sign Out", "Are you sure you want to leave and log out?", ["Sign out", "Stay here"], ["logout();", ""]);
$("body").append(modal); $("body").append(modal);
}); });
$("#button_download").live("click", function() { $("#button_download").live(event_name, function() {
link = $("#image_view #image").css("background-image").replace(/"/g,"").replace(/url\(|\)$/ig, ""); link = $("#image_view #image").css("background-image").replace(/"/g,"").replace(/url\(|\)$/ig, "");
window.open(link,"_newtab"); window.open(link,"_newtab");
}); });
$("#button_move").live("click", function(e) { $("#button_move").live(event_name, function(e) {
showContextMenuMove(image_view.attr("data-id"), e.pageX, e.pageY); showContextMenuMove(image_view.attr("data-id"), e.pageX, e.pageY);
}); });
$("#button_trash_album").live("click", function() { $("#button_trash_album").live(event_name, function() {
if (content.attr("data-id")=="0") deleteUnsorted(); if (content.attr("data-id")=="0") deleteUnsorted();
else deleteAlbum(); else deleteAlbum();
}); });
$("#button_trash").live("click", function() { deletePhoto() }); $("#button_trash").live(event_name, function() { deletePhoto() });
$("#button_edit_album").live("click", function() { renameAlbum() }); $("#button_edit_album").live(event_name, function() { renameAlbum() });
$("#button_edit").live("click", function() { renamePhoto() }); $("#button_edit").live(event_name, function() { renamePhoto() });
$("#button_info").live("click", function() { showInfobox() }); $("#button_info").live(event_name, function() { showInfobox() });
$("#button_archive").live("click", function() { getAlbumArchive() }); $("#button_archive").live(event_name, function() { getAlbumArchive() });
$("#button_sync").live("click", function() { syncFolder() }); $("#button_sync").live(event_name, function() { syncFolder() });
/* Rename Album/Photo via Titlebar */ /* Rename Album/Photo via Titlebar */
$("#title.editable").live("click", function() { $("#title.editable").live(event_name, function() {
if (visibleImageview()) renamePhoto(); else renameAlbum(); if (visibleImageview()) renamePhoto(); else renameAlbum();
}); });
@ -59,15 +63,15 @@ $(document).ready(function(){
e.preventDefault(); e.preventDefault();
showContextMenuPhoto($(this).attr("data-id"), e.pageX, e.pageY); showContextMenuPhoto($(this).attr("data-id"), e.pageX, e.pageY);
}); });
$(".contextmenu_bg").live("click", closeContextMenu); $(".contextmenu_bg").live(event_name, closeContextMenu);
/* Star/Share Photo */ /* Star/Share Photo */
$("#button_star").live("click", setPhotoStar); $("#button_star").live(event_name, setPhotoStar);
$("#button_share").live("click", function(e) { $("#button_share").live(event_name, function(e) {
if ($("#button_share a.active").length) showContextMenuShare(image_view.attr("data-id"), e.pageX, e.pageY); if ($("#button_share a.active").length) showContextMenuShare(image_view.attr("data-id"), e.pageX, e.pageY);
else setPhotoPublic(e); else setPhotoPublic(e);
}); });
$(".copylink").live("click", function() { $(this).select() }); $(".copylink").live(event_name, function() { $(this).select() });
/* Upload */ /* Upload */
$("#upload_files").live("change", function() { $("#upload_files").live("change", function() {
@ -84,19 +88,19 @@ $(document).ready(function(){
$(".photo").live("click", function() { setURL("a" + content.attr("data-id") + "p" + $(this).attr("data-id")) }); $(".photo").live("click", function() { setURL("a" + content.attr("data-id") + "p" + $(this).attr("data-id")) });
/* Nav Back */ /* Nav Back */
$("#button_back_home").live("click", function() { setURL("") }); $("#button_back_home").live(event_name, function() { setURL("") });
$("#button_back").live("click", function() { setURL("a" + content.attr("data-id")) }); $("#button_back").live(event_name, function() { setURL("a" + content.attr("data-id")) });
/* Close Modal */ /* Close Modal */
$(".message a.close").live("click", closeModal); $(".message a.close").live(event_name, closeModal);
/* Image View */ /* Image View */
$("#image_view a#previous").live("click", loadPreviousPhoto); $("#image_view a#previous").live(event_name, loadPreviousPhoto);
$("#image_view a#next").live("click", loadNextPhoto); $("#image_view a#next").live(event_name, loadNextPhoto);
/* Infobox */ /* Infobox */
$("#infobox_overlay, #infobox .header a").live("click", function() { hideInfobox() }); $("#infobox_overlay, #infobox .header a").live(event_name, function() { hideInfobox() });
$("#edit_description").live("click", function() { setPhotoDescription() }); $("#edit_description").live(event_name, function() { setPhotoDescription() });
/* Window */ /* Window */
$(window).keydown(key); $(window).keydown(key);
@ -105,7 +109,7 @@ $(document).ready(function(){
$(window).bind("mouseenter", showControls); $(window).bind("mouseenter", showControls);
/* Init */ /* Init */
if ((BrowserDetect.browser=="Explorer")||(BrowserDetect.browser=="Safari"&&BrowserDetect.version<5)||(BrowserDetect.browser=="Chrome"&&BrowserDetect.version<18)||(BrowserDetect.browser=="Firefox"&&BrowserDetect.version<14)) { if ((BrowserDetect.browser=="Explorer")||(BrowserDetect.browser=="Safari"&&BrowserDetect.version<5)||(BrowserDetect.browser=="Chrome"&&BrowserDetect.version<18)||(BrowserDetect.browser=="Firefox"&&BrowserDetect.version<15)) {
modal = buildModal("Browser not supported", "You are currently using an outdated or unsupported Browser. This site might not work properly. Please consider to update your Browser!", ["Leave"], ["location.href = 'http://browsehappy.com';"]); modal = buildModal("Browser not supported", "You are currently using an outdated or unsupported Browser. This site might not work properly. Please consider to update your Browser!", ["Leave"], ["location.href = 'http://browsehappy.com';"]);
$("body").append(modal); $("body").append(modal);

0
js/upload.js Normal file → Executable file
View File

0
php/api.php Normal file → Executable file
View File

0
php/functions.php Normal file → Executable file
View File

View File

@ -2,8 +2,8 @@
#### A great looking and easy-to-use Photo-Management-System. #### A great looking and easy-to-use Photo-Management-System.
![Lychee ImageView](http://lychee.electerious.com/uploads/big/13511584079432.png) ![Lychee ImageView](http://lychee.electerious.com/uploads/big/13582806160093.png)
![Lychee ImageView](http://lychee.electerious.com/uploads/big/13497110451270.png) ![Lychee ImageView](http://lychee.electerious.com/uploads/big/13582805615704.png)
Lychee is a free, easy to use and great looking photo-management-system you can run on your server to manage and share photos. Just download the source and follow the instructions to install Lychee wherever you want. Lychee is a free, easy to use and great looking photo-management-system you can run on your server to manage and share photos. Just download the source and follow the instructions to install Lychee wherever you want.

0
uploads/big/empty.md Executable file
View File

0
uploads/thumb/empty.md Executable file
View File

2
view.php Normal file → Executable file
View File

@ -16,7 +16,7 @@
<link rel="shortcut icon" href="img/favicon.png"> <link rel="shortcut icon" href="img/favicon.png">
<meta name="apple-mobile-web-app-status-bar-style" content="black" > <meta name="apple-mobile-web-app-status-bar-style" content="black" >
<meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="viewport" content="user-scalable=no, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<?php if(isset($_GET['p'])) echo facebookHeader($_GET['p']); ?> <?php if(isset($_GET['p'])) echo facebookHeader($_GET['p']); ?>