V1.0.2

- Better mobile experience
- New Login
- jQuery update
- Small fixes and enhancements

css/animations.css

@@ -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 ------------------------------------------------*/
 @-webkit-keyframes moveDown {
 	0% {

css/style.css

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

index.html

@@ -3,7 +3,7 @@
 	<head>
 
 		<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="keywords" content="">
@@ -16,7 +16,7 @@
 
 		<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="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">
 
 	</head>

js/build.js

@@ -137,8 +137,8 @@ function buildSignInModal() {
 	modal += 	"<div class='message center'>";
 	modal += 		"<h1><a class='icon-lock'></a> Sign in</h1>";
 	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 id='version'>Version " + version + "</div>";
 	modal += 	"<a onclick='login()' class='button active'>Sign in</a>";

js/functions.js

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

js/main.js

@@ -12,45 +12,49 @@ var header = $("header"),
 	loading = $("#loading"),
 	infobox = $("#infobox"),
 	api_path = "php/api.php",
-	version = "1.0.1";
+	version = "1.0.2";
 
 $(document).ready(function(){
 
+	/* Event Name */
+	if (mobileBrowser()) event_name = "touchend";
+	else event_name = "click";
+
 	/* Login */
 	$("#password").live("keyup", function() {
 		if ($(this).val().length>0) $(this).removeClass("error");
 	});
 
 	/* 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 */
-	$("#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();", ""]);
 		$("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, "");
 		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);
 	});
-	$("#button_trash_album").live("click", function() { 
+	$("#button_trash_album").live(event_name, function() {
 		if (content.attr("data-id")=="0") deleteUnsorted();
 		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 */
-	$("#title.editable").live("click", function() {
+	$("#title.editable").live(event_name, function() {
 		if (visibleImageview()) renamePhoto(); else renameAlbum();
 	});
 
@@ -59,15 +63,15 @@ $(document).ready(function(){
 		e.preventDefault();
 		showContextMenuPhoto($(this).attr("data-id"), e.pageX, e.pageY);
 	});
-	$(".contextmenu_bg").live("click", closeContextMenu);
+	$(".contextmenu_bg").live(event_name, closeContextMenu);
 
 	/* 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);
 		else setPhotoPublic(e);
 	});
-	$(".copylink").live("click", function() { $(this).select() });
+	$(".copylink").live(event_name, function() { $(this).select() });
 
 	/* Upload */
 	$("#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")) });
 
 	/* 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 */
-	$(".message a.close").live("click", closeModal);
+	$(".message a.close").live(event_name, closeModal);
 
 	/* 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_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).keydown(key);
@@ -105,7 +109,7 @@ $(document).ready(function(){
 	$(window).bind("mouseenter", showControls);
 
 	/* 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';"]);
 		$("body").append(modal);

readme.md

@@ -2,8 +2,8 @@
 
 #### 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.
 

view.php

@@ -16,7 +16,7 @@
 		<link rel="shortcut icon" href="img/favicon.png">
 
 		<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">
 
 		<?php if(isset($_GET['p'])) echo facebookHeader($_GET['p']); ?>