Adjust layout of user account page
- password inputs now inline to tighten up page height.
- Adjust dimension of inputs to better match designs.
Change-Id: Id349020541e24440b46b630b0fec2433778b78ce
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/users/controllers/user-accounts-controller.html b/app/users/controllers/user-accounts-controller.html
index 3dd5a34..b03c42d 100644
--- a/app/users/controllers/user-accounts-controller.html
+++ b/app/users/controllers/user-accounts-controller.html
@@ -9,11 +9,11 @@
<form class="user-manage__form" role="form" action="">
<fieldset>
<div class="row column">
- <label for="user-manage__current-password" class="inline">Current password</label>
+ <label for="user-manage__current-password">Current password</label>
<input id="user-manage__current-password" type="password" class="user-manage__current-password inline"/>
</div>
- <div class="row column">
- <label for="user-manage__new-password" class="inline">New password</label>
+ <div class="inline">
+ <label for="user-manage__new-password">New password</label>
<div class="user-manage__input-wrapper inline">
<input id="user-manage__new-password" type="{{showpassword ? 'text' : 'password'}}" ng-model="password" class="user-manage__new-password inline"/>
<button ng-model="showpassword" ng-click="togglePassword = !togglePassword; showpassword = !showpassword;" class="password-toggle">
@@ -22,8 +22,8 @@
</button>
</div>
</div>
- <div class="row column">
- <label for="user-manage__verify-password" class="inline">Retype new password</label>
+ <div class="inline">
+ <label for="user-manage__verify-password">Retype new password</label>
<div class="user-manage__input-wrapper inline">
<input id="user-manage__verify-password" type="{{showpasswordVerify ? 'text' : 'password'}}" ng-model="passwordVerify" class="user-manage__verify-password inline"/>
<button ng-model="showpasswordVerify" ng-click="toggleVerify = !toggleVerify; showpasswordVerify = !showpasswordVerify;" class="password-toggle">
diff --git a/app/users/styles/user-accounts.scss b/app/users/styles/user-accounts.scss
index a22e3bc..28af84a 100644
--- a/app/users/styles/user-accounts.scss
+++ b/app/users/styles/user-accounts.scss
@@ -1,11 +1,14 @@
+$userInputHeight: 40px;
+
.user-manage__form {
label {
- min-width: 260px;
+ min-width: 210px;
font-weight: 700;
+ margin-right: 4em;
}
input {
- width: 190px;
- height: 32px;
+ width: 225px;
+ height: $userInputHeight;
}
fieldset {
display: block;
@@ -16,7 +19,7 @@
.user-manage__input-wrapper {
position: relative;
- height: 32px;
+ height: $userInputHeight;
margin-bottom: 1em;
input {
padding-right: 60px;