From: Jan-Christoph Borchardt <JanCBorchardt@fsfe.org>
Date: Sun, 17 Apr 2011 13:49:54 +0000 (+0200)
Subject: beautiful toggle between cloud and settings
X-Git-Tag: v3.0~267^2~558^2~85^2~11
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=6891e363ea1c130382296a0e4eeef034a08fff70;p=nextcloud-server.git

beautiful toggle between cloud and settings
---

diff --git a/css/styles.css b/css/styles.css
index 93829b7ef96..0ee0e14bfb5 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,6 +1,7 @@
 * { margin:0; padding:0; border:0; }
 body { background-color:#fefefe; background-image:url('../img/body_background.jpg'); background-repeat:repeat-y; background-position:left top; line-height:1.6em; font:normal 80% "Lucida Grande", Arial, Verdana, sans-serif; color:#000; }
-#header { height:70px; padding:0.5em 1.5em; background-image:url('../img/header_background.png'); background-repeat:repeat-x; background-position:left top; }
+#header { height:70px; padding:0.5em 1.5em; background-image:url('../img/header.png'); background-repeat:repeat-x; background-position:left top; }
+#body-settings #header { background-image:url('../img/header-settings.png'); }
 #owncloud { float:left; margin:0 0 0 2em; }
 h1 { margin:1em 3em 1em 0; border-bottom:1px solid #666; text-transform:uppercase; font-weight:normal; font-style:italic; color:#666; }
 p.center { text-align:center; }
@@ -21,10 +22,22 @@ legend { padding:0 0.5em; font-size:1.2em; }
 
 div.controls { width:91%; margin:1em 1em 1em 2em; padding:0.5em 0; background-color:#f7f7f7; border:1px solid #eee; }
 
-/* LOG IN SCREEN ------------------------------------------------------------ */
-body.login { background-image:none; background-color:#ddd; }
-body.login p.info { width:16em; margin:4em auto; padding:1em; background-color:#eee; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
-#login { margin:0 auto 0 auto; padding:2em 0 0 0; background-image:url('../img/header_background2.png'); background-position:left 0; background-repeat:repeat-x; background-color:#eee; text-align:center; }
+/* INSTALLATION ------------------------------------------------------------
+input [type='radio'] { display:block; }
+.left { display:block; position:relative; top:2.5em; left:-19em; text-align: right; font-weight:bold; }
+input[type='radio'] { padding:10em; vertical-align:middle; }
+input+label { font-size:20em; font-weight:bold; vertical-align:middle
+ */
+legend { font-weight:bold; }
+legend abbr { border-bottom:1px dotted #000; }
+form a { color:#000; text-decoration:none; }
+ #login input[type='text'], #login input[type='password'] { display:block; margin:0 auto .5em; }
+ 
+ 
+/* LOG IN ------------------------------------------------------------ */
+#body-login { background-image:none; background-color:#ddd; }
+#body-login p.info { width:16em; margin:4em auto; padding:1em; background-color:#eee; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
+#login { margin:0 auto 0 auto; padding:2em 0 0 0; background-image:url('../img/header-login.png'); background-position:left 0; background-repeat:repeat-x; background-color:#eee; text-align:center; }
 #login form { margin:2.5em auto 0 auto; padding:0 0 1.5em 0; text-align:center; border-bottom:1px solid #fff; }
 #login h1 { margin:0; padding:2.5em 0 0 0; border:0; text-align:center; text-transform:lowercase; font-size:1.5em; }
 #login fieldset { background-color:transparent; border:0; }
@@ -32,8 +45,53 @@ body.login p.info { width:16em; margin:4em auto; padding:1em; background-color:#
 #login label { font-size:1.2em; color:#fff; }
 #login input { width:8em; margin:0.1em; padding:0.2em 0.5em; border:1px solid #ddd; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size:2em; color:#666; }
 #login input:hover, #login input:focus { outline:0; }
-#login input[type=submit] { width:5em; border:1px solid #ddd; background-color:#fff; font-size:2em; }
-#login input[type=submit]:hover, #login input[type=submit]:focus { background-color:#ccc; outline:0; }
+#login input[type='submit'] { width:5em; border:1px solid #ddd; background-color:#fff; font-size:2em; }
+#login input[type=
+<!DOCTYPE html> 
+<html> 
+	<head> 
+		<title>ownCloud</title> 
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+		<link rel="shortcut icon" href="/ocjcb//img/favicon.png" /><link rel="apple-touch-icon-precomposed" href="/ocjcb//img/favicon-touch.png" /> 
+					<link rel="stylesheet" href="/ocjcb//css/jquery-ui-1.8.10.custom.css" type="text/css" media="screen" /> 
+					<link rel="stylesheet" href="/ocjcb//css/styles.css" type="text/css" media="screen" /> 
+							<script type="text/javascript" src="/ocjcb//js/jquery-1.5.min.js"></script> 
+					<script type="text/javascript" src="/ocjcb//js/jquery-ui-1.8.10.custom.min.js"></script> 
+					<script type="text/javascript" src="/ocjcb//js/js.js"></script> 
+			</head> 
+ 
+	<body class="login"> 
+		<div id="login"> 
+	<img src="/ocjcb//img/owncloud-logo-medium-white.png" alt="ownCloud" /> 
+	<form action="#" method="post"> 
+		<input type='hidden' name='install' value='true'/> 
+		<fieldset> 
+			<input type="text" name="login" value="username" /> 
+			<input type="password" name="pass" value="password" /> 
+        </fieldset> 
+		<fieldset> 
+							<legend><abbr title="to use SQLite instead, install it on your server">MySQL</abbr> Database</legend> 
+				<input type="text" name="dbuser" value="admin / username" /> 
+				<input type="password" name="dbpass" value="password" /> 
+				<input type="text" name="dbname" value="database name" /> 
+					</fieldset> 
+		<fieldset id="advanced"> 
+			<legend><a id="advanced_options_link" href="">Advanced ▾</a></legend> 
+			<div id="advanced_options"> 
+				<label class="left">Data directory</label></p><input type="text" name="directory" value="/var/www/ocjcb/data" /> 
+														<input type='hidden' name='dbtype' value='mysql'/> 
+																					<label class="left">Host</label></p><input type="text" name="dbhost" value="localhost" /> 
+					<label class="left">Table prefix</label></p><input type="text" name="dbtableprefix" value="oc_" /> 
+							</div> 
+		</fieldset> 
+		<fieldset> 
+			<p class="submit"><input type="submit" value="Create" /></p> 
+		</fieldset> 
+	</form> 
+</div> 
+		<p class="info"><a href="http://owncloud.org/">ownCloud</a> is a personal cloud which runs on your own server.</p> 
+	</body> 
+</html> 'submit']:hover, #login input[type=submit]:focus { background-color:#ccc; outline:0; }
 
 /* META NAVIGATION (Settings, Log out) ---------------------------------------------------------------- */ 
 #metanav { float:right; position:relative; top:1.5em; list-style:none; margin:0; padding:0; }
diff --git a/img/header_background.png b/img/header_background.png
deleted file mode 100644
index d377f65186d..00000000000
Binary files a/img/header_background.png and /dev/null differ
diff --git a/img/header_background2.png b/img/header_background2.png
deleted file mode 100644
index b0160e02d1f..00000000000
Binary files a/img/header_background2.png and /dev/null differ
diff --git a/js/js.js b/js/js.js
index 86f5885ce62..06d4478357c 100644
--- a/js/js.js
+++ b/js/js.js
@@ -1,15 +1,4 @@
-$(document).ready(function() {
-
-    // Hides the user_menu div :
-    $('#user_menu').hide();
-
-    // Sets user_menu link behaviour :
-    $('#user_menu_link').click(function() {
-        $('#user').toggleClass('userLinkOn');
-        $('#user_menu').slideToggle(250);
-        return false;
-    });
-	
+$(document).ready(function() {	
 	//hide the advanced config
 	$('#advanced_options').hide();
 	$('#use_mysql').hide();
diff --git a/templates/installation.php b/templates/installation.php
index be4693288b2..cfbe53813e0 100644
--- a/templates/installation.php
+++ b/templates/installation.php
@@ -1,36 +1,30 @@
-<?php
-/*
- * Template for installation page
- */
-?>
 <div id="login">
 	<img src="<?php echo image_path("", "owncloud-logo-medium-white.png"); ?>" alt="ownCloud" />
-	<form action="" method="post">
+	<form action="#" method="post">
 		<input type='hidden' name='install' value='true'/>
 		<fieldset>
-			<p><input type="text" name="login" value="username" /></p>
-			<p><input type="password" name="pass" value="password" /></p>
+			<input type="text" name="login" value="your email" />
+			<input type="password" name="pass" value="password" />
         </fieldset>
 		<fieldset>
 			<?php if(!$_['hasSQLite']): ?>
 				<legend><abbr title="to use SQLite instead, install it on your server">MySQL</abbr> Database</legend>
-				<p><input type="text" name="dbuser" value="admin / username" /></p>
-				<p><input type="password" name="dbpass" value="password" /></p>
-				<p><input type="text" name="dbname" value="database name" /></p>
+				<input type="text" name="dbuser" value="MySQL user" />
+				<input type="password" name="dbpass" value="password" />
+				<input type="text" name="dbname" value="database name" />
 			<?php endif;?>
 		</fieldset>
 		<fieldset id="advanced">
 			<legend><a id="advanced_options_link" href="">Advanced ▾</a></legend>
 			<div id="advanced_options">
-				<p><label class="left">Data directory</label></p><p><input type="text" name="directory" value="<?php echo($_['datadir']);?>" /></p>
+				<label class="left">Data directory</label><input type="text" name="directory" value="<?php echo($_['datadir']);?>" />
 				<?php if($_['hasMySQL'] and $_['hasSQLite']): ?>
-					<p><label class="left">Database</label></p>
-					<p><input type="radio" name="dbtype" value='sqlite' id="sqlite" checked="checked" /><label for="sqlite">SQLite</label>
-					<input type="radio" name="dbtype" value='mysql' id="mysql"><label for="mysql">MySQL</label></p>
+					<input type="radio" name="dbtype" value='sqlite' id="sqlite" checked="checked" /><label for="sqlite">SQLite</label>
+					<input type="radio" name="dbtype" value='mysql' id="mysql"><label for="mysql">MySQL</label>
 					<div id="use_mysql">
-						<p><input type="text" name="dbuser" value="admin / username" /></p>
-						<p><input type="password" name="dbpass" value="password" /></p>
-						<p><input type="text" name="dbname" value="database name" /></p>
+						<input type="text" name="dbuser" value="MySQL user" />
+						<input type="password" name="dbpass" value="password" />
+						<input type="text" name="dbname" value="database name" />
 				<?php endif;?>
 				<?php if($_['hasMySQL'] and !$_['hasSQLite']): ?>
 						<input type='hidden' name='dbtype' value='mysql'/>
@@ -39,13 +33,13 @@
 						<input type='hidden' name='dbtype' value='sqlite'/>
 				<?php endif;?>
 				<?php if($_['hasMySQL'] and $_['hasSQLite']): ?>
-						<p><label class="left">Host</label></p><p><input type="text" name="dbhost" value="localhost" /></p>
-						<p><label class="left">Table prefix</label></p><p><input type="text" name="dbtableprefix" value="oc_" /></p>
+						<label class="left">Host</label><input type="text" name="dbhost" value="localhost" />
+						<label class="left">Table prefix</label><input type="text" name="dbtableprefix" value="oc_" />
 					</div>
 				<?php endif;?>
 				<?php if($_['hasMySQL'] and !$_['hasSQLite']): ?>
-					<p><label class="left">Host</label></p><p><input type="text" name="dbhost" value="localhost" /></p>
-					<p><label class="left">Table prefix</label></p><p><input type="text" name="dbtableprefix" value="oc_" /></p>
+					<label class="left">Host</label><input type="text" name="dbhost" value="localhost" />
+					<label class="left">Table prefix</label><input type="text" name="dbtableprefix" value="oc_" />
 				<?php endif;?>
 			</div>
 		</fieldset>
@@ -53,4 +47,4 @@
 			<p class="submit"><input type="submit" value="Create" /></p>
 		</fieldset>
 	</form>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/layout.admin.php b/templates/layout.admin.php
index 6f8b4302d3a..6b1e73fd3a4 100644
--- a/templates/layout.admin.php
+++ b/templates/layout.admin.php
@@ -12,13 +12,12 @@
 		<?php endforeach; ?>
 	</head>
 
-	<body>
+	<body id="body-settings">
 		<div id="header">
 			<a href="<?php echo link_to('', 'index.php'); ?>" title="" id="owncloud"><img src="<?php echo image_path('', 'owncloud-logo-small-white.png'); ?>" alt="ownCloud" /></a>
 
 			<ul id="metanav">
 				<li><a href="<?php echo link_to('', 'index.php'); ?>" title="Back to files"><img src="<?php echo image_path('', 'layout/back.png'); ?>"></a></li>
-				<li><a href="<?php echo link_to('settings', 'index.php'); ?>" title="Settings"><img src="<?php echo image_path('', 'layout/settings.png'); ?>"></a></li>
 				<li><a href="<?php echo link_to('', 'index.php?logout=true'); ?>" title="Log out"><img src="<?php echo image_path('', 'layout/logout.png'); ?>"></a></li>
 			</ul>
 		</div>
diff --git a/templates/layout.guest.php b/templates/layout.guest.php
index dc16a1183c9..c9575530820 100644
--- a/templates/layout.guest.php
+++ b/templates/layout.guest.php
@@ -12,7 +12,7 @@
 		<?php endforeach; ?>
 	</head>
 
-	<body class="login">
+	<body id="body-login">
 		<?php echo $_['content']; ?>
 		<p class="info"><a href="http://owncloud.org/">ownCloud</a> is a personal cloud which runs on your own server.</p>
 	</body>
diff --git a/templates/layout.user.php b/templates/layout.user.php
index b03fca93082..4e9190d91ff 100644
--- a/templates/layout.user.php
+++ b/templates/layout.user.php
@@ -12,7 +12,7 @@
 		<?php endforeach; ?>
 	</head>
 
-	<body>
+	<body id="body-user">
 		<div id="header">
 			<a href="<?php echo link_to('', 'index.php'); ?>" title="" id="owncloud"><img src="<?php echo image_path('', 'owncloud-logo-small-white.png'); ?>" alt="ownCloud" /></a>
 
diff --git a/templates/login.php b/templates/login.php
index 517fb0e0929..02ba70be52c 100644
--- a/templates/login.php
+++ b/templates/login.php
@@ -6,9 +6,9 @@
 			<?php if($_["error"]): ?>
 				Login failed!
 			<?php endif; ?>
-			<p><input type="text" name="user" value="" /></p>
-			<p><input type="password" name="password" /></p>
-			<p><input type="submit" value="Log in" /></p>
+			<input type="text" name="user" value="" />
+			<input type="password" name="password" />
+			<input type="submit" value="Log in" />
 		</fieldset>
 	</form>
 </div>