diff options
| -rw-r--r-- | css/styles.css | 40 | ||||
| -rw-r--r-- | js/js.js | 20 | ||||
| -rw-r--r-- | templates/installation.php | 32 | ||||
| -rw-r--r-- | templates/login.php | 8 |
4 files changed, 52 insertions, 48 deletions
diff --git a/css/styles.css b/css/styles.css index d5b5f59f70c..6a4e7d8f897 100644 --- a/css/styles.css +++ b/css/styles.css @@ -22,30 +22,27 @@ 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; } -/* INSTALLATION ------------------------------------------------------------ */ -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; } -#login input[type='radio'] { display:none; } -#login input[type='radio']+label { margin:1em .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; background-color:#fff; } -#login input[type='radio']+label:hover, #login input[type='radio']+label:focus { background-color:#ccc; outline:0; } -.left { display:block; position:relative; top:2.5em; left:-19em; text-align: right; font-weight:bold; } - - -/* LOG IN ------------------------------------------------------------ */ +/* LOG IN & INSTALLATION ------------------------------------------------------------ */ #body-login { width:100%; 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:#eee url('../img/header-login.png') repeat-x left 0; 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 form a { color:#000; text-decoration:none; } #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; } #login fieldset p { margin:1em 0 0 0; padding:0; text-align:center; } -#login label { font-size:1.2em; } +#login legend { font-weight:bold; margin-left:45%; } +#login legend abbr { border-bottom:1px dotted #000; } +#login label { font-size:1.2em; display:inline; position:relative; top:2em; left:-12em; text-align:right; font-weight:bold; } #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; background-color:#fff; } #login input[type='submit']:hover, #login input[type=submit]:focus { background-color:#ccc; outline:0; } +#login input[type='text'], #login input[type='password'] { display:block; margin:0 auto .5em; } +#login input[type='radio'] { display:none; } +#login input[type='radio']+label { margin:1em .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; background-color:#fff; } +#login input[type='radio']+label:hover, #login input[type='radio']+label:focus { background-color:#ccc; outline:0; } +#login #use_mysql { margin-top:1.5em; } .prettybutton { 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:1.5em; text-decoration:none; color:#666; background-color:#fff; } .prettybutton:hover, .prettybutton:focus { background-color:#ccc; outline:0; } @@ -121,22 +118,9 @@ p.actions a.delete { background-image:url('../img/delete.png'); } #quota_indicator { margin:0 4em 1em 0; padding:0; border:1px solid #ddd; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; } #quota_indicator div { background-color:#76A9EA; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; } - /* PAGER ------------------------------------------------------------ */ -.pager tr td -{ - border-bottom: 0px; -} - - -.pager tr td a -{ - text-decoration: none; - color: #666666; - font-size: 0.9em; - text-align: center; -} - +.pager tr td { border-bottom:0px; } +.pager tr td a { text-decoration:none; color:#666666; font-size:0.9em; text-align:center; } /* LOGS --------------------------------------------------------------------- */ #logs_options { width:auto; margin:0; } @@ -22,4 +22,24 @@ $(document).ready(function() { $('label.sqlite').css('background-color', '#ddd'); $('label.mysql').css('background-color', '#fff'); }); + + // Hide and show input field values for login and installation form + var textuser = 'username'; + var textpassword = 'password'; + var textadmin = 'admin username'; + var textdbuser = 'MySQL user'; + var textdbpass = 'password'; + var textdbname = 'database name'; + $('#user').focus(function() { if($(this).attr('value') == textuser) $(this).attr('value', ''); }); + $('#user').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textuser); }); + $('#password').focus(function() { if($(this).attr('value') == textpassword) $(this).attr('value', ''); }); + $('#password').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textpassword); }); + $('#admin').focus(function() { if($(this).attr('value') == textadmin) $(this).attr('value', ''); }); + $('#admin').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textadmin); }); + $('#dbuser').focus(function() { if($(this).attr('value') == textdbuser) $(this).attr('value', ''); }); + $('#dbuser').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textdbuser); }); + $('#dbpass').focus(function() { if($(this).attr('value') == textdbpass) $(this).attr('value', ''); }); + $('#dbpass').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textdbpass); }); + $('#dbname').focus(function() { if($(this).attr('value') == textdbname) $(this).attr('value', ''); }); + $('#dbname').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textdbname); }); }); diff --git a/templates/installation.php b/templates/installation.php index 73b9a67743f..5c882e81bf0 100644 --- a/templates/installation.php +++ b/templates/installation.php @@ -1,45 +1,45 @@ <div id="login"> - <img src="<?php echo image_path("", "owncloud-logo-medium-white.png"); ?>" alt="ownCloud" /> + <img src="<?php echo image_path('', '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="your email" /> - <input type="password" name="pass" value="password" /> + <input type="text" name="login" id="admin" value="admin username" /> + <input type="password" name="pass" id="password" value="password" /> </fieldset> <fieldset> <?php if(!$_['hasSQLite']): ?> <legend><abbr title="to use SQLite instead, install it on your server">MySQL</abbr> Database</legend> - <input type="text" name="dbuser" value="MySQL user" /> - <input type="password" name="dbpass" value="password" /> - <input type="text" name="dbname" value="database name" /> + <input type="text" name="dbuser" id="dbuser" value="MySQL user" /> + <input type="password" name="dbpass" id="dbpass" value="password" /> + <input type="text" name="dbname" id="dbname" value="database name" /> <?php endif;?> </fieldset> <fieldset id="advanced"> <legend><a id="advanced_options_link" href="">Advanced ▾</a></legend> <div id="advanced_options"> - <label class="left">Data directory</label><input type="text" name="directory" value="<?php echo($_['datadir']);?>" /> + <label>Data directory</label><input type="text" name="directory" value="<?php echo($_['datadir']);?>" /> <?php if($_['hasMySQL'] and $_['hasSQLite']): ?> <input type="radio" name="dbtype" value='sqlite' id="sqlite" checked="checked" /><label class="sqlite" for="sqlite">SQLite</label> <input type="radio" name="dbtype" value='mysql' id="mysql"><label class="mysql" for="mysql">MySQL</label> <div id="use_mysql"> - <input type="text" name="dbuser" value="MySQL user" /> - <input type="password" name="dbpass" value="password" /> - <input type="text" name="dbname" value="database name" /> + <input type="text" name="dbuser" id="dbuser" value="MySQL user" /> + <input type="password" name="dbpass" id="dbpass" value="password" /> + <input type="text" name="dbname" id="dbname" value="database name" /> <?php endif;?> <?php if($_['hasMySQL'] and !$_['hasSQLite']): ?> - <input type='hidden' name='dbtype' value='mysql'/> + <input type="hidden" name="dbtype" value="mysql" /> <?php endif;?> <?php if(!$_['hasMySQL'] and $_['hasSQLite']): ?> - <input type='hidden' name='dbtype' value='sqlite'/> + <input type="hidden" name="dbtype" value="sqlite" /> <?php endif;?> <?php if($_['hasMySQL'] and $_['hasSQLite']): ?> - <label class="left">Database host</label><input type="text" name="dbhost" value="localhost" /> - <label class="left">Table prefix</label><input type="text" name="dbtableprefix" value="oc_" /> + <label>Database host</label><input type="text" name="dbhost" id="dbhost" value="localhost" /> + <label>Table prefix</label><input type="text" name="dbtableprefix" id="dbtableprefix" value="oc_" /> </div> <?php endif;?> <?php if($_['hasMySQL'] and !$_['hasSQLite']): ?> - <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_" /> + <label>Database host</label><input type="text" name="dbhost" id="dbhost" value="localhost" /> + <label>Table prefix</label><input type="text" name="dbtableprefix" id="dbtableprefix" value="oc_" /> <?php endif;?> </div> </fieldset> diff --git a/templates/login.php b/templates/login.php index 02ba70be52c..c0defdc2b08 100644 --- a/templates/login.php +++ b/templates/login.php @@ -1,13 +1,13 @@ <div id="login"> - <img src="<?php echo image_path("", "owncloud-logo-medium-white.png"); ?>" alt="ownCloud" /> + <img src="<?php echo image_path('', 'owncloud-logo-medium-white.png'); ?>" alt="ownCloud" /> <form action="index.php" method="post"> <!-- <h1>Sign in :</h1> --> <fieldset> - <?php if($_["error"]): ?> + <?php if($_['error']): ?> Login failed! <?php endif; ?> - <input type="text" name="user" value="" /> - <input type="password" name="password" /> + <input type="text" name="user" id="user" value="username" /> + <input type="password" name="password" id="password" value="password" /> <input type="submit" value="Log in" /> </fieldset> </form> |