nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactoring of the public pages design

Browse source
This commit is contained in:
flaburgan 2014-12-02 00:18:38 +01:00
parent 44649e9167
commit 1c231f3171
13 changed files with 223 additions and 400 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/colors.css.scss
View file

@ -7,7 +7,7 @@ $background-blue: #E7F2F7;
$grey: #2B2B2B;
$light-grey: #DDDDDD;
$border-grey: #DDDDDD;
$border-grey: #CCCCCC;
$border-dark-grey: #999999;
$link-grey: #777777;

169
app/assets/stylesheets/new_styles/_forms.scss
View file

@ -1,91 +1,128 @@
input,
textarea { /* Bootstrap reset */
&,
&:active,
&:invalid,
&:invalid:required, {
border-color: $border-grey;
box-shadow: none;
}
&:focus,
&:active:focus,
&:invalid:focus,
&:invalid:required:focus {
border-color: $border-dark-grey;
box-shadow: none;
}
}
/* autocomplete colors */
input:-webkit-autofill{
background-color: #fff !important;
background-image: none !important;
}
/* Forms described here are only used on the public pages at the moment */
form.block-form {
display : inline-block;
margin: 20px auto;
label {
color : $text-dark-grey;
}
input {
&:invalid,
&:invalid:required,
&:invalid:required:focus {
box-shadow : none;
border : none;
color : $text-dark-grey;
}
position: absolute;
top: -9999px;
left: -9999px;
}
fieldset {
box-shadow : inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 2px rgba(255,255,255,0.7);
margin-bottom : 1em;
background-color : #fff;
border : 1px solid $border-dark-grey;
border-radius: 5px;
margin-bottom: 1em;
background-color: #fff;
position: relative; /* To correctly place the entypo icon */
input[type=text],
input[type=email],
input[type=password] {
box-shadow: 0 0 0 0;
border-radius: 0;
border : none;
background : transparent;
padding : 10px;
margin-bottom : 0;
input {
color : $text-dark-grey;
margin: 0px;
border-bottom-width: 0px;
border-radius: 0px;
}
/* mainly bootstrap overrides */
.control-group {
margin : 0;
border-bottom : 1px solid $border-grey;
.form-control {
font-size: 16px;
height: 40px;
padding: 10px;
padding-left: 40px;
}
.control-label,
input[type=text],
input[type=password],
.field_with_errors label {
padding : 10px;
margin : 0;
}
.controls { margin-left : 100px; position : relative; }
.control-label { width : 80px; }
.controls .field_with_errors input {
background : {
image : image-url('invalid_fat@2x.png');
repeat : no-repeat;
position : 197px;
size: 20px 20px;
}
.form-control:first-of-type {
&,
&:focus,
&:invalid,
&:invalid:focus,
&:invalid:required,
&:invalid:required:focus {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
}
.form-control:last-of-type {
&,
&:focus,
&:invalid,
&:invalid:focus,
&:invalid:required,
&:invalid:required:focus {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-width: 1px;
}
}
.form-control:focus {
&,
&:invalid,
&:invalid:required {
border-color: $border-dark-grey;
border-bottom-width: 1px;
}
/* remove the border of the element under the one with the focus */
& + label + .entypo + .form-control {
border-top-width: 0px;
}
}
.entypo {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
text-align: center;
color: $text-grey;
font-size: 20px;
}
.entypo:nth-of-type(2) {
top: 50px;
}
.entypo:nth-of-type(3) {
top: 90px;
}
.entypo:nth-of-type(4) {
top: 130px;
}
input:-moz-placeholder { text-transform: uppercase; }
input::-webkit-input-placeholder { text-transform: uppercase; }
input:-ms-input-placeholder { text-transform: uppercase; }
}
input[type=submit] {
text-align : center;
display : block;
width : 100%;
padding : 8px 0;
}
}
textarea, input[type=text], input[type=password], input[type=search] {
&:focus,
&:invalid,
&:invalid:focus,
&:invalid:required,
&:invalid:required:focus {
border: 1px solid $border-dark-grey;
outline: none;
box-shadow: none;
color : $text-dark-grey;
text-align: center;
display: block;
width: 100%;
padding: 8px 0;
}
}

85
app/assets/stylesheets/new_styles/_login.scss
View file

@ -1,91 +1,16 @@
#login,
#forgot_password,
#reset_password {
padding-top: 20px;
padding-top: 25px;
.branding-asterisk {
margin: auto;
width: 154px;
height: 154px;
margin-bottom: 30px;
margin-bottom: 12px;
}
.span4.offset4 {
margin-bottom: 30px;
}
label {
text-transform: uppercase;
text-align: right;
padding: 10px 0;
overflow: hidden;
}
#new_user {
display: block;
margin: auto;
form.block-form {
max-width: 400px;
margin-bottom: 30px;
}
}
#login {
.form-signin {
.form-control {
font-size: 16px;
height: auto;
padding: 10px;
padding-left: 40px;
}
fieldset {
margin-bottom: 20px;
}
.entypo {
position: relative;
display: inline-block;
width: 20px;
text-align: center;
top: -6px;
left: 12px;
color: $text-grey;
font-size: 20px;
}
input[type=text], input[type=password] {
&:focus {
border: 1px solid #ccc;
}
}
input[type=text] {
margin-bottom: -24px;
border-radius: 5px 5px 0 0;
}
input[type=password] {
margin-bottom: -23px;
border-radius: 0 0 5px 5px;
}
}
}
#forgot_password {
label {
width: 40%;
}
input[type=password] {
width: 60%;
}
}
#reset_password {
label {
width: 45%;
}
input[type=password] {
width: 55%;
}
#new_user {
width: 500px;
}
}

42
app/assets/stylesheets/new_styles/_registration.scss
View file

@ -1,5 +1,4 @@
#registration {
& > .container-fluid {
margin-top: 5%;
}
@ -15,7 +14,7 @@
margin-bottom : 1em;
white-space : nowrap;
}
#pod-name {
text-align: center;
margin: 12px;
@ -33,16 +32,41 @@
}
form {
.control-label,
.controls {
margin-left : auto;
width : auto;
.form-control:last-of-type {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.controls {
float : right;
.captcha {
border: 1px solid $border-grey;
border-top: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
.captcha_img {
float: left;
margin-top: 3px;
}
#user_captcha {
float: right;
width: 69%;
border: 0px;
border-radius: 0px;
border-bottom-right-radius: 5px;
border-left: 1px solid $border-grey;
&:focus {
border: solid 1px $border-dark-grey;
/* Sorry about this dirty hack, the only way I found to correctly display the grey border */
position: relative;
top: -1px;
margin-right: -1px;
margin-bottom: -2px;
}
}
}
#terms > a {
color: inherit;
text-decoration: underline;

162
app/assets/stylesheets/sessions.css.scss
View file

@ -1,162 +0,0 @@
// Copyright (c) 2010-2011, Diaspora Inc. This file is
// licensed under the Affero General Public License version 3 or later. See
// the COPYRIGHT file.
@font-face {
font-family: 'BrandonGrotesqueLightRegular';
src: url('brandongrotesque_light/Brandon_light-webfont.eot');
src: local('☺'), url('brandongrotesque_light/Brandon_light-webfont.woff') format('woff'), url('brandongrotesque_light/Brandon_light-webfont.ttf') format('truetype'), url('brandongrotesque_light/Brandon_light-webfont.svg#webfont') format('svg');
font: {
weight: normal;
style: normal;
}
}
#flash_notice,
#flash_error,
#flash_alert {
z-index: 100;
top: 32px;
position: absolute;
color: #000;
width: 400px;
margin: 0 0 0 -200px;
left: 50%;
text-align: center;
font-size: 14px;
padding: 3px 0;
}
#flash_notice {
background-color: #CFC;
border: solid 1px #6C6;
}
#flash_error,
#flash_alert {
background-color: #FCC;
border: solid 1px #C66;
}
.fieldWithErrors {
display: inline;
}
.error_messages {
width: 400px;
border: 2px solid #CF0000;
padding: 0;
padding-bottom: 12px;
margin-bottom: 20px;
background-color: #f0f0f0;
font-size: 12px;
h2 {
text-align: left;
padding: 5px 5px 5px 15px;
margin: 0;
font: {
weight: bold;
size: 12px;
}
background-color: #c00;
}
p {
margin: 8px 10px;
}
ul {
margin: 0;
}
}
/* via blueprint */
html {
font-size: 100.01%;
}
/* via blueprint */
body {
font: {
size: 75%;
family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
color: #222;
background: #fff;
margin-left: 100px;
}
/* via blueprint */
input[type=text],
input[type=password],
textarea, select {
background-color: #fff;
border: 1px solid #bbb;
}
/* via blueprint */
input[type=text]:focus,
input[type=password]:focus,
input.text:focus,
input.title:focus,
textarea:focus, select:focus {
border-color: #666;
}
#huge_text {
font: {
size: 40px;
family: 'BrandonGrotesqueLightRegular';
}
line-height: 120px;
color: #333;
text-shadow: 0 1px 1px #999;
}
input {
font-size: 14px;
}
form p {
position: relative;
padding: 0;
}
label {
color: #999;
position: absolute;
padding-top: 7px;
left: 8px;
font: {
size: 14px;
weight: normal;
}
}
input[type='text'],
input[type='password'] {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
padding: 0.3em;
width: 395px;
border-top: 1px solid #999;
}
#user {
display: inline;
width: 500px;
.username {
width: 200px;
display: inline;
input {
display: inline;
width: 200px;
}
}
.user_network {
width: 200px;
display: inline;
font-size: 18px;
}
}

28
app/views/passwords/edit.haml
View file

@ -1,5 +1,5 @@
- content_for :page_title do
= "#{AppConfig.settings.pod_name} / #{t('devise.passwords.edit.change_password')}"
= "#{AppConfig.settings.pod_name} - #{t('devise.passwords.edit.change_password')}"
#reset_password
.container-fluid
@ -7,23 +7,23 @@
.branding-asterisk
%h1
= AppConfig.settings.pod_name
= form_for(resource, as: resource_name, url: password_path(resource_name), html: {class: "form-horizontal block-form", method: :put }, autocomplete: 'off') do |f|
%fieldset
%label{for: "user_password"}
= t('devise.passwords.edit.new_password')
%i.entypo.lock
= f.password_field :password, class: "input-block-level form-control", required: true, placeholder: t('devise.passwords.edit.new_password'), autocapitalize: "none", autocorrect: "off", autofocus: true
= f.hidden_field :reset_password_token
.control-group
%label{class: "control-label", for: "user_password"}
= t('devise.passwords.edit.new_password')
.controls
= f.password_field :password, required: true, placeholder: "••••••••", autocapitalize: "off", autocorrect: "off", autofocus: true
.control-group
%label{class: "control-label", for: "user_password_confirmation"}
= t('devise.passwords.edit.confirm_password')
.controls
= f.password_field :password_confirmation, required: true, placeholder: "••••••••", autocapitalize: "off", autocorrect: "off"
= hidden_field(:user, :remember_me, value: 1)
%label{for: "user_password_confirmation"}
= t('devise.passwords.edit.confirm_password')
%i.entypo.lock
= f.password_field :password_confirmation, class: "input-block-level form-control", required: true, placeholder: t('devise.passwords.edit.confirm_password'), autocapitalize: "none", autocorrect: "off"
= hidden_field(:user, :remember_me, value: 1)
= f.submit t('devise.passwords.edit.change_password'), class: "btn"
.text-center
= link_to t('devise.shared.links.sign_in'), new_session_path(resource_name)

14
app/views/passwords/new.haml
View file

@ -1,5 +1,5 @@
- content_for :page_title do
= "#{AppConfig.settings.pod_name} / #{t('devise.passwords.new.forgot_password')}"
= "#{AppConfig.settings.pod_name} - #{t('devise.passwords.new.forgot_password')}"
#forgot_password
.container-fluid
@ -12,15 +12,13 @@
- if !devise_error_messages!.empty?
%legend
%i
= t('devise.passwords.new.no_account')
= t('devise.passwords.new.no_account') # this is an error message and should not be displayed as a legend
%fieldset
.control-group
%label{class: "control-label", for: "user_email"}
= t('devise.passwords.new.email')
.controls
= f.text_field :email, required: true, autocapitalize: "off", placeholder: "••••••••", autocorrect: "off", autofocus: true
%label{for: "user_email"}
= t('devise.passwords.new.email')
%i.entypo.mail
= f.text_field :email, class: "input-block-level form-control", required: true, autocapitalize: "off", placeholder: t('devise.passwords.new.email'), autocorrect: "off", autofocus: true
= f.submit t('devise.passwords.new.send_password_instructions'), class: "btn"
.text-center
= link_to t('devise.shared.links.sign_in'), new_session_path(resource_name)

51
app/views/registrations/new.haml
View file

@ -2,50 +2,45 @@
.container-fluid
.row-fluid
.span10.offset1
.span6
.span7.hidden-phone
%h1#create-something-text
= t('.hey_make').html_safe
%h3#diaspora-hearts
= t('.diaspora')
.span6
.span5
.pull-right
%h2#pod-name
= AppConfig.settings.pod_name
%h4#sign-up-text
= t('.sign_up')
= form_for(resource, url: registration_path(resource_name), html: {class: "form-horizontal block-form", autocomplete: "off"}) do |f|
%fieldset
.control-group
%label.control-label{for: "user_email"}
= t('.email')
.controls
= f.email_field :email, placeholder: "luke@hoth.net", title: t('registrations.new.enter_email'), required: true
%label.control-label{for: "user_email"}
= t('.email')
%i.entypo.mail
= f.email_field :email, class: "input-block-level form-control", placeholder: t('.email'), title: t('registrations.new.enter_email'), required: true
.control-group
%label.control-label{for: "user_username"}
= t('.username')
.controls
= f.text_field :username, placeholder: "jedi_guy", title: t('registrations.new.enter_username'), required: true, pattern: "[A-Za-z0-9_]+"
%label.control-label{for: "user_username"}
= t('.username')
%i.entypo.user
= f.text_field :username, class: "input-block-level form-control", placeholder: t('.username'), title: t('registrations.new.enter_username'), required: true, pattern: "[A-Za-z0-9_]+"
.control-group
%label.control-label{for: "user_password"}
= t('.password')
.controls
= f.password_field :password, placeholder: "••••••••", title: t('registrations.new.enter_password'), required: true, pattern: "......+"
%label.control-label{for: "user_password"}
= t('.password')
%i.entypo.lock
= f.password_field :password, class: "input-block-level form-control", placeholder: t('.password'), title: t('registrations.new.enter_password'), required: true, pattern: "......+"
.control-group
%label.control-label{for: "user_password_confirmation"}
= t('.password_confirmation')
.controls
= f.password_field :password_confirmation, placeholder: "••••••••", title: t('registrations.new.enter_password_again'), required: true, pattern: "......+"
%label.control-label{for: "user_password_confirmation"}
= t('.password_confirmation')
%i.entypo.lock
= f.password_field :password_confirmation, class: "input-block-level form-control", placeholder: t('.password_confirmation'), title: t('registrations.new.enter_password_again'), required: true, pattern: "......+"
- if AppConfig.settings.captcha.enable?
#captcha.control-group
.captcha
= show_simple_captcha(object: 'user', code_type: 'numeric')
%div{style: "clear:both;"}
= invite_hidden_tag(invite)
- if AppConfig.settings.terms.enable?
%p#terms.text-center
= t('.terms', terms_link: link_to(t('.terms_link'), terms_path, target: "_blank")).html_safe
= f.submit t('.continue'), class: "btn", data: {disable_with: t('.submitting')}
= f.submit t('.sign_up'), class: "btn", data: {disable_with: t('.submitting')}

42
app/views/sessions/new.html.haml
View file

@ -1,5 +1,5 @@
- content_for :page_title do
= AppConfig.settings.pod_name + " / " + t('devise.sessions.new.sign_in')
= AppConfig.settings.pod_name + " - " + t('devise.sessions.new.sign_in')
.container-fluid#login
.text-center
@ -7,30 +7,36 @@
%h1
= AppConfig.settings.pod_name
= form_for resource, as: resource_name, url: session_path(resource_name), html: {class: 'form-signin'}, autocomplete: 'off' do |f|
= form_for resource, as: resource_name, url: session_path(resource_name), html: {class: 'block-form'}, autocomplete: 'off' do |f|
%fieldset
= f.text_field :username,
placeholder: t('registrations.new.username'),
class: 'input-block-level form-control',
required: true,
pattern: '[A-Za-z0-9_.@\-]+',
autocapitalize: 'off',
autocorrect: 'off',
autofocus: true
%label{for: "user_username"}
= t('registrations.new.username')
%i.entypo.user
= f.text_field :username,
placeholder: t('registrations.new.username'),
class: 'input-block-level form-control',
required: true,
pattern: '[A-Za-z0-9_.@\-]+',
autocapitalize: 'none',
autocorrect: 'off',
autofocus: true
= f.password_field :password,
placeholder: t('registrations.new.password'),
class: 'input-block-level form-control',
required: true
%label{for: "user_password"}
= t('registrations.new.password')
%i.entypo.lock
= f.password_field :password,
placeholder: t('registrations.new.password'),
class: 'input-block-level form-control',
required: true,
autocapitalize: 'none',
autocorrect: 'off'
= f.hidden_field :remember_me, value: 1
= f.submit t('devise.sessions.new.sign_in'), class: 'btn btn-large btn-block green'
= f.submit t('devise.sessions.new.sign_in'), class: 'btn btn-large btn-block'
.text-center
- if display_registration_link?
= link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name)
\-
- if display_password_reset_link?
= link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name), id: "forgot_password_link"
%br
- if display_registration_link?
= link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name)

5
app/views/simple_captcha/_simple_captcha.haml
View file

@ -1,4 +1,3 @@
.control-label
.captcha_img
= simple_captcha_options[:image]
.controls
= simple_captcha_options[:field]
= simple_captcha_options[:field]

6
config/locales/devise/devise.en.yml
View file

@ -30,13 +30,13 @@ en:
updated: 'Your password was changed successfully. You are now signed in.'
edit:
change_password: "Change my password"
new_password: "New password"
confirm_password: "Confirm password"
new_password: "NEW PASSWORD"
confirm_password: "CONFIRM PASSWORD"
new:
forgot_password: "Forgot your password?"
no_account: 'No account with this email exists'
reset_password: "Reset password"
email: "Email address"
email: "EMAIL ADDRESS"
send_password_instructions: "Send me reset password instructions"
confirmations:
send_instructions: 'You will receive an email with instructions about how to confirm your account in a few minutes.'

11
config/locales/diaspora/en.yml
View file

@ -829,15 +829,15 @@ en:
subject: "Your diaspora* account has been flagged for removal due to inactivity"
body: |-
Hello,
It looks as though you no longer want your account at %{pod_url}, as you haven’t used it for %{after_days} days. To ensure our active users get the best performance from this diaspora* pod, we’d like to remove unwanted accounts from our database.
We’d love you to stay part of diaspora*’s community, and you’re welcome to keep your account live if you want to.
If you want to keep your account live, all you need to do is to sign in to your account before %{remove_after}. When you sign in, take a moment to have a look around diaspora*. It has changed a lot since you last looked in, and we think you’ll like the improvements we’ve made. Follow some #tags to find content you love.
Sign in here: %{login_url}. If you’ve forgotten your sign-in details, you can ask for a reminder on that page.
Hoping to see you again,
The diaspora* email robot!
@ -1014,7 +1014,6 @@ en:
username: "USERNAME"
password: "PASSWORD"
password_confirmation: "PASSWORD CONFIRMATION"
continue: "Continue"
submitting: "Submitting..."
terms: "By creating an account you accept the %{terms_link}."
terms_link: "terms of service"

6
features/desktop/change_password.feature
View file

@ -12,16 +12,18 @@ Feature: Change password
Then I should be on the stream page
Scenario: Reset my password
Given a user with email "forgetful@users.net"
Given a user named "Georges Abitbol" with email "forgetful@users.net"
Given I am on forgot password page
When I fill out forgot password form with "forgetful@users.net"
And I submit forgot password form
Then I should see "You will receive an email with instructions"
When I follow the "Change my password" link from the last sent email
Then I should see "NEW PASSWORD"
When I fill out reset password form with "supersecret" and "supersecret"
And I submit reset password form
Then I should be on the stream page
And I sign out manually
And I sign in manually as "georges_abitbol" with password "supersecret"
Then I should be on the stream page
Scenario: Attempt to reset password with invalid email
Given I am on forgot password page