Skip to content

Commit

Permalink
Merge pull request #1557 from code-corps/design-improvements
Browse files Browse the repository at this point in the history 
Minor design improvements to inputs and navigation
  • Loading branch information
@joshsmith
joshsmith committed Nov 27, 2017
2 parents 64a656c + 1d9b074 commit 3819736
Show file tree
Hide file tree
Showing 24 changed files with 150 additions and 46 deletions.
6 changes: 1 addition & 5 deletions app/styles/_inputs.scss
View file
Expand Up @@ -5,18 +5,14 @@
outline: none;
border: 1px solid $gray--light;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
background-color: #FAFAFA;

&.has-progress {
padding-right: 70px;
}
}

#{$all-text-inputs-focus} {
border-color: $blue--light;
background-color: #FFFFFF;
box-shadow: inset 0 2px 2px rgba(0,0,0,0.075), 0 0 5px rgba(81,167,232,0.5);
border-color: $blue;
}

select,
Expand Down
1 change: 1 addition & 0 deletions app/styles/base/_colors.scss
View file
Expand Up @@ -29,6 +29,7 @@ $blue--light: #51A7E8;
$blue--lighter: #EDF9FF;
$blue--lightest: #F6FCFF;
$blue--dark: #1B9BE5;
$blue--background: $blue--lighter;
// #3ABAFC, #51A7E8

$gray: #AAA;
Expand Down
2 changes: 1 addition & 1 deletion app/styles/components/create-comment-form.scss
View file
Expand Up @@ -16,7 +16,7 @@
}

.comment-signup {
background: $blue--lighter;
background: $blue--background;
padding: 10px 20px;

p {
Expand Down
2 changes: 1 addition & 1 deletion app/styles/components/donation-goal.scss
View file
Expand Up @@ -12,7 +12,7 @@

&:hover {
&.can-edit {
background: $blue--lighter;
background: $blue--background;
border-color: $blue--light;
cursor: pointer;
}
Expand Down
2 changes: 1 addition & 1 deletion app/styles/components/donation-payment.scss
View file
Expand Up @@ -33,7 +33,7 @@
}

.donation-container__amount {
background-color: $blue--lighter;
background-color: $blue--background;
border: 2px solid $blue--light;
border-radius: 5px;
margin: 20px 0;
Expand Down
2 changes: 1 addition & 1 deletion app/styles/components/donation/card-item.scss
View file
@@ -1,6 +1,6 @@
.card-item {
align-items: center;
background-color: $blue--lighter;
background-color: $blue--background;
border: 1px solid $blue;
border-radius: .25em;
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion app/styles/components/donations/donation-status.scss
View file
Expand Up @@ -5,7 +5,7 @@
}

.show-donation {
background: $blue--lighter;
background: $blue--background;
border-radius: 4px;
padding: 1em;

Expand Down
25 changes: 19 additions & 6 deletions app/styles/components/dropdown-menu.scss
View file
Expand Up @@ -68,13 +68,13 @@
}

.dropdown__body {
padding: 10px 15px;
padding: 0 5px;
}

.dropdown__options {
border-bottom: 1px solid $border-gray;
padding-bottom: 1em;
margin-bottom: 1em;
padding-bottom: 3px;
margin-bottom: 3px;

&:last-child {
border-bottom: none;
Expand All @@ -85,14 +85,27 @@
li {
display: block;
float: none;
padding: 3px 0;
padding: 1px 0;
}

a {
// having problems with "navigation__options a"
// overwriting the properties below
border: 0;
color: #08A8FC;
font-weight: normal;
padding: 0;
padding: 8px 11px;

.fa {
padding-right: 5px;
}

&.active {
font-weight: 600;
}

&.active, &:hover {
background: $blue--background;
color: $blue;
}
}
}
2 changes: 1 addition & 1 deletion app/styles/components/image-drop.scss
View file
Expand Up @@ -103,7 +103,7 @@
}

&--active {
background: $blue--lighter !important;
background: $blue--background !important;

&:before {
border-color: $blue--dark;
Expand Down
2 changes: 1 addition & 1 deletion app/styles/components/payments/funds-recipient/details-form.scss
View file
Expand Up @@ -13,7 +13,7 @@
padding: 1em;

&.checked {
background: $blue--lighter;
background: $blue--background;
border-color: $blue--dark;
}
}
Expand Down
2 changes: 1 addition & 1 deletion app/styles/components/project-menu.scss
View file
@@ -1,7 +1,7 @@
.page-menu, .project__menu, .organization-menu {
&--horizontal {
@include clearfix;
border-bottom: 1px solid $blue--lighter;
border-bottom: 1px solid $blue--background;
list-style-type: none;
margin-bottom: 10px;
padding: 0;
Expand Down
2 changes: 1 addition & 1 deletion app/styles/components/settings-menu.scss
View file
Expand Up @@ -10,7 +10,7 @@
padding: 10px 15px;

&:hover {
background: $blue--lighter;
background: $blue--background;
border-color: $gray;
color: $blue;
}
Expand Down
4 changes: 4 additions & 0 deletions app/styles/components/signup-form.scss
View file
Expand Up @@ -6,4 +6,8 @@
right: -8px;
}
}

a {
text-align: center;
}
}
2 changes: 1 addition & 1 deletion app/styles/components/skills-typeahead.scss
View file
Expand Up @@ -42,7 +42,7 @@ li.skill-dropdown-item {
}

&.selected {
background: $blue--lighter;
background: $blue--background;

a {
&:after {
Expand Down
10 changes: 8 additions & 2 deletions app/styles/layout/_forms.scss
View file
Expand Up @@ -71,6 +71,10 @@ $outer-border-radius: 4px;
max-width: 100%;
width: 100%;

&--centered {
text-align: center;
}

.input-group {
margin-bottom: 0;
}
Expand Down Expand Up @@ -135,6 +139,7 @@ $outer-border-radius: 4px;
.input-label {
label {
align-items: center;
color: $text--dark;
display: flex;
font-size: $body-font-size-normal;
font-weight: 600;
Expand Down Expand Up @@ -218,12 +223,13 @@ form {
font-family: $body-font-family;
font-size: $header-font-size-large;
font-weight: 500;
margin-bottom: 1em;
}
}

.error {
color: $red;
margin: 5px 0;
margin: 1em 0;
}

.login-form, .signup-form, .reset-password-form, .forgot-password-form {
Expand Down Expand Up @@ -282,7 +288,7 @@ form {
.strength {
position: absolute;
right: 10px;
top: 16px;
top: 40px;
width: 50px;

.progress-bar-container {
Expand Down
23 changes: 17 additions & 6 deletions app/templates/components/login-form.hbs
View file
@@ -1,13 +1,23 @@
<form {{action "authenticate" on="submit"}}>
<h2>Sign in</h2>
<div class="input-group">
<div class="input-label">
<label for="email">
<span class="input-label__text">Email</span>
</label>
</div>
{{#auto-focus}}
{{input name="email" id="identification" autofocus=true tabindex=0 placeholder="Email" value=identification}}
{{input name="email" id="identification" autofocus=true tabindex=0 value=identification}}
{{/auto-focus}}
</div>

<div class="input-group">
{{input name="password" id="password" placeholder="Password" type="password" value=password}}
<div class="input-label">
<label for="password">
<span class="input-label__text">Password</span>
</label>
</div>
{{input name="password" id="password" type="password" value=password}}
</div>

<div class="input-group">
Expand All @@ -20,14 +30,15 @@
</button>
</div>

{{#link-to 'password.forgot' classNames="t-forgot-password"}}
Forgot your password?
{{/link-to}}

{{#if errors}}
{{#each errors.errors as |error|}}
<p class="error">{{error.detail}}</p>
{{/each}}
{{/if}}

<div class="input-group input-group--centered">
{{#link-to 'password.forgot' classNames="t-forgot-password"}}
Forgot your password?
{{/link-to}}
</div>
</form>
14 changes: 12 additions & 2 deletions app/templates/components/organization-settings-form.hbs
View file
Expand Up @@ -13,10 +13,20 @@

<div class="settings-form__form">
<div class="input-group">
{{input type="text" name="name" value=organization.name placeholder="Organization Name"}}
<div class="input-label">
<label>
<span class="input-label__text">Organization name</span>
</label>
</div>
{{input type="text" name="name" value=organization.name}}
</div>
<div class="input-group">
{{input type="text" name="description" value=organization.description placeholder="Description"}}
<div class="input-label">
<label>
<span class="input-label__text">Description</span>
</label>
</div>
{{input type="text" name="description" value=organization.description}}
</div>

<div class="input-group">
Expand Down
21 changes: 18 additions & 3 deletions app/templates/components/project-settings-form.hbs
View file
Expand Up @@ -13,13 +13,28 @@

<div class="settings-form__form">
<div class="input-group">
{{input type="text" name="title" value=project.title placeholder="Title"}}
<div class="input-label">
<label>
<span class="input-label__text">Project title</span>
</label>
</div>
{{input type="text" name="title" value=project.title}}
</div>
<div class="input-group">
{{input type="text" name="description" value=project.description placeholder="Description"}}
<div class="input-label">
<label>
<span class="input-label__text">Description</span>
</label>
</div>
{{input type="text" name="description" value=project.description}}
</div>
<div class="input-group">
{{input type="text" name="website" value=project.website placeholder="Website"}}
<div class="input-label">
<label>
<span class="input-label__text">Website</span>
</label>
</div>
{{input type="text" name="website" value=project.website}}
</div>

<div class="input-group">
Expand Down
7 changes: 6 additions & 1 deletion app/templates/components/signup-email-input.hbs
View file
@@ -1,4 +1,9 @@
{{input name="email" autocapitalize="off" type="text" placeholder='Your email' value=user.email key-down="keyDown"}}
<div class="input-label">
<label for="email">
<span class="input-label__text">Your email</span>
</label>
</div>
{{input name="email" autocapitalize="off" type="text" value=user.email key-down="keyDown"}}
<div class="suggestions">
{{#if canShowValidations}}
{{#if isOkay}}
Expand Down
6 changes: 5 additions & 1 deletion app/templates/components/signup-form.hbs
View file
@@ -1,6 +1,5 @@
<div class="container">
<form>

{{#if (eq user.signUpContext 'donation')}}
<h2>Join Code Corps to continue.</h2>
{{else}}
Expand All @@ -23,5 +22,10 @@
{{error-formatter error=error}}
{{/if}}

<div class="input-group input-group--centered">
{{#link-to "login"}}
Already have an account?
{{/link-to}}
</div>
</form>
</div>
7 changes: 6 additions & 1 deletion app/templates/components/signup-password-input.hbs
View file
@@ -1,4 +1,9 @@
{{input class="has-progress" name="password" type="password" placeholder='Create a password' autocomplete="off" value=user.password}}
<div class="input-label">
<label for="password">
<span class="input-label__text">Create a password</span>
</label>
</div>
{{input class="has-progress" name="password" type="password" autocomplete="off" value=user.password}}
<div class="strength">
{{progress-bar-container percentage=strengthPercentage}}
</div>
Expand Down
7 changes: 6 additions & 1 deletion app/templates/components/signup-username-input.hbs
View file
@@ -1,5 +1,10 @@
<div class="input-label">
<label for="username">
<span class="input-label__text">Pick a username</span>
</label>
</div>
{{#auto-focus}}
{{input name="username" autocapitalize="off" autofocus=true tabindex=0 type="text" placeholder="Pick a username" value=user.username key-down="keyDown"}}
{{input name="username" autocapitalize="off" autofocus=true tabindex=0 type="text" value=user.username key-down="keyDown"}}
{{/auto-focus}}
<div class="suggestions">
{{#if canShowValidations}}
Expand Down
6 changes: 4 additions & 2 deletions app/templates/components/user-dropdown.hbs
View file
Expand Up @@ -4,13 +4,15 @@
seem to be used as hooks for testing only }}
<li>{{#link-to 'slugged-route' user.username class="slugged-route"}}Your profile{{/link-to}}</li>
<li>{{#link-to 'settings.profile' class="profile"}}Settings{{/link-to}}</li>
<li><a class="logout" {{action 'invalidateSession'}}>Log out</a></li>
</ul>
{{#if user.admin}}
<ul class="dropdown__options">
<li>{{#link-to 'admin'}}Admin{{/link-to}}</li>
<li>{{#link-to 'admin'}}{{fa-icon "terminal"}} Admin{{/link-to}}</li>
</ul>
{{/if}}
<ul class="dropdown__options">
<li><a class="logout" {{action 'invalidateSession'}}>Log out</a></li>
</ul>
</div>
<div class="dropdown__footer">
Signed in as <strong>{{user.username}}</strong>
Expand Down

0 comments on commit 3819736

Please sign in to comment.