Changeset 907a0bad7bc78fb0dfa42ae4e77417288294d680

Timestamp:

08/08/11 09:41:24 (10 months ago)

Author:

Xemle <xemle@phtagr.org>

Children:

9cf25c2b09c8670755ad77c3494075bc19cafca8

Parents:

a151cadb204796478796e90e9f8e96e679cc66a0

git-committer:

Xemle <xemle@phtagr.org> / 2011-08-08T09:41:24Z+0200

Message:

Improve login and register form

Files:

• controllers/users_controller.php (modified) (1 diff)
• views/elements/explorer/menu.ctp (modified) (1 diff)
• views/layouts/default.ctp (modified) (1 diff)
• views/users/login.ctp (modified) (2 diffs)
• views/users/register.ctp (modified) (2 diffs)
• webroot/css/default/_form.sass (modified) (2 diffs)

controllers/users_controller.php

@@ -443 +443 @@
     unset($this->data['User']['confirm']);
     unset($this->data['Captcha']['verification']);
+    $this->layout = 'default';
   }
 

views/elements/explorer/menu.ctp

@@ -78 +78 @@
 <?php 
   $url = $breadcrumb->params($crumbs);
-  echo $form->create(null, array('id' => 'explorer', 'action' => 'edit/'.$url));
+  echo $form->create(null, array('id' => 'explorer', 'action' => 'edit/'.$url, 'class' => 'explorer-menu'));
 ?>
 <div id="p-explorer-edit-meta">

views/layouts/default.ctp

@@ -32 +32 @@
 <div id="main"><div class="sub">
 
-<div id="content"><div class="sub">
+<div id="content content-<?php echo $this->params['controller']; ?>"><div class="sub">
 <?php echo $content_for_layout?>
 </div></div><!-- #content/sub -->

views/users/login.ctp

@@ -9 +9 @@
 ?>
 </fieldset>
+<div class="submit">
 <?php 
   $signup = '';
-  echo $form->submit(__('Login', true));
-  echo $html->link(__('Forgot your password', true), 'password');
+  
+  echo $form->submit(__('Login', true), array('div' => false));
   if ($register) {
-    echo $html->link(__('Sign Up', true), 'register');
+    echo " ".$html->link(__('Sign Up', true), 'register', array('class' => 'button'))." ";
   }
+  echo "<br/>".$html->link(__('Forgot your password', true), 'password');
+?>
+</div>
+<?php 
   echo $form->end();
   $script = <<<'JS'
@@ -21 +26 @@
   $(document).ready(function() {
     $(':submit').button();
+    $('.button').button();
     $('.message').addClass("ui-widget ui-corner-all ui-state-highlight");
   });

views/users/register.ctp

@@ -1 +1 @@
 <?php echo $session->flash(); ?>
 
-<?php echo $form->create('User', array('action' => 'register')); ?>
+<?php echo $form->create('User', array('action' => 'register', 'class' => 'default')); ?>
 <fieldset>
 <legend><?php __('Create Account'); ?></legend>
@@ -13 +13 @@
 ?>
 </fieldset>
-<?php echo $form->end(__('Sign Up', true)); ?>
+<?php 
+  echo $form->end(__('Sign Up', true)); 
 
+  $script = <<<'JS'
+(function($) {
+  $(document).ready(function() {
+    $(':submit').button();
+    $('.message').addClass("ui-widget ui-corner-all ui-state-highlight");
+  }); 
+})(jQuery);
+JS;
+  echo $this->Html->scriptBlock($script, array('inline' => false));
+?>

webroot/css/default/_form.sass

@@ -16 +16 @@
     background-color: #ffd
 
-=default-button
-  border: 1px solid #ddd
-  +border-radius(5px)
-  padding: 5px 15px
-  +linear-gradient(colour-stops(#eee, darken(#eee, 20%)))
-  color: #666
-  +text-shadow(white, 1px, 1px)
-  &:hover
-    background-color: $menuActiveBackgroundColor
-    +linear-gradient(colour-stops($menuActiveBackgroundColor, darken($menuActiveBackgroundColor, 20%)))
-    color: white
-    +text-shadow(black, -1px, -1px)
-    border-color: darken($menuActiveBackgroundColor, 20%)P
+form.default
+  margin: 10px 0
+  fieldset
+    legend
+      padding: 20px 0 10px 240px
+      font-size: 15pt
+    border: 0
+    > div
+      clear: left
+      label
+        +column(6)
+        margin-top: 15px
+        text-align: right
+      input
+        +column(6, true)
+        +default-input
+        font-size: 15pt
+        width: 224px
+        margin-top: 10px
+      > img
+        margin-top: 12px
+      > .error
+        clear: left
+        +prepend(6)
+        +column(6, true)
+        margin-top: 3px
+  div.submit
+    +prepend(6)
+    margin-top: 15px
 
-form
-  > fieldset, > div > fieldset
-    padding: 15px 0
+form.explorer-menu
+  fieldset
+    +column(12, true)
+    padding: 5px 0
     border: 0
-    > legend
-      color: white
-      +column(6, true)
-      font-family: Ubuntu-bold
-      text-align: right
+    legend
+      display: none 
     > div
-      padding: 5px 0
-      position: relative
-      clear: both
-      > label
+      label
         +column(6)
+        margin-top: 12px
         text-align: right
-      > input[type=text], > input[type=password], > textarea
-        +column(6)
+      input[type=text], textarea
+        +column(6, true)
+        margin-top: 10px
+        width: 224px
         +default-input
-      > select
-        +column(6)
+      select
+        margin-top: 10px
+        +column(6, true)
+        display: inline-block
         +default-input
-        > option
-          padding: 3px
+        option
+          padding: 13px
           color: black
-      &.checkbox 
-        > input[type=checkbox]
-          float: left
-          display: block
-          overflow: hidden
-          margin-left: 240px
-          margin-right: 10px
-          width: 40px
-        > label
-          width: 210px
-          text-align: left
-      > div.description
+      > div.description, > div.error
+        margin-top: 2px
+        +prepend(6)
         +column(6, true)
-      > div.error
-        clear: both
-        +prepend(6)
-        +column(12, true)
     > div.error
       background: darken(red, 30%)
-  > ul.buttons, > div > ul.buttons 
-    +prepend(6)
-    > li 
-      display: inline-block
-      margin-right: 10px
-      > input
-  > .submit, > div > .submit
+  div.submit
+    clear: left
     +prepend(6)
 
 form.login
+  +prepend(9)
   +column(6)
-  +prepend(8)
   margin: 20px 0 30px 0
-  legend
-    text-align: left
-    margin: 0
-    font-size: 15pt
   fieldset
+    border: none
+    legend
+      text-align: left
+      padding-bottom: 20px
+      margin: 0
+      font-size: 15pt
+    > div
+      display: block
+      margin-top: 5px
+      margin-bottom: 10px
     label
-      +column(6)
+      +span(6, true)
+      clear: left
       text-align: left
     input[type=text],
     input[type=password]
+      +span(6, true)
+      +default-input
+      margin-top: 3px
       padding: 4px
       clear: left
@@ -102 +110 @@
   > div.submit
       display: inline-block
-      padding: 0 10px 0 0
+      a.button,
       input[type=submit]
+        margin-right: 10px
+        margin-bottom: 5px
+        vertical-align: top
+        margin-right: 10px