diff --git a/Changelog.md b/Changelog.md
index f8d2f36316407dc50ae37043d587f7fa77d176df..93a89f5d405f93f794ec82657df7d08790607bad 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -23,8 +23,8 @@
* Fix counter background does not cover more than 2 digits on profile [#4499](https://github.com/diaspora/diaspora/issues/4499)
* Fix commenting upon submission fail [#4005] (https://github.com/diaspora/diaspora/issues/4005)
* Fix date color and alignment in the notifications dropdown [#4502](https://github.com/diaspora/diaspora/issues/4502)
-
* Add a white background to images shown in the lightbox [#4475](https://github.com/diaspora/diaspora/issues/4475)
+* Refactor getting_started page, test if facebook is available, fix [#4520](https://github.com/diaspora/diaspora/issues/4520)
## Features
* Add oEmbed content to the mobile view [#4343](https://github.com/diaspora/diaspora/pull/4353)
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index 2832832e02cc18417c541f5610468f41929d62e8..c009f7d1d6cf3cbc5ea85a1167a5951b92acb32f 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -2508,6 +2508,38 @@ a.toggle_selector
:-moz-box-shadow none
:box-shadow none
+#hello-there
+ p
+ :font-size medium
+ h1
+ :margin 0px
+ h2
+ :margin
+ :top 80px
+ :bottom 12px
+ h3
+ :font
+ :size large
+ :weight 200
+ :margin 0px
+ form, p
+ :margin-left 30px
+ input
+ :margin-bottom 15px
+ .hero-unit
+ :margin 20px 42px
+ :padding 40px 80px
+ .awesome
+ :text-align center
+ :margin-top 60px
+ .creation
+ :font-size 16px
+
+#profile_photo_upload
+ #fileInfo
+ :margin-top 12px
+ :text-align left
+
#welcome-to-diaspora
:-webkit-box-shadow inset 0 -2px 10px rgba(0,0,0,0.35)
:-moz-box-shadow inset 0 -2px 10px rgba(0,0,0,0.35)
diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile.css.scss
index 3b3d0b149830727c48a4dc4e80a8dc404e9e92ae..6a4f8c37b8acaf3ca52c0574eb4d53af0e634ebc 100644
--- a/app/assets/stylesheets/mobile.css.scss
+++ b/app/assets/stylesheets/mobile.css.scss
@@ -1282,3 +1282,20 @@ input#q.search {
.remove_comment {
opacity: 0.5;
}
+
+.center {
+ text-align: center;
+}
+
+/* --- Getting started page --- */
+#hello-there {
+ h1, h2, h3 { line-height: normal; }
+ h1 { font-size: 25px; }
+ h2 { font-size: 20px; }
+ h3 { font-size: 15px; }
+
+ h2, #awesome_button {
+ margin-top: 30px;
+ }
+}
+
diff --git a/app/views/people/_add_contact.html.haml b/app/views/people/_add_contact.html.haml
index 2631a4582413355cb5212373d8a79f9136bc2be6..156f32e88f841e480d2973cf76497451f5019751 100644
--- a/app/views/people/_add_contact.html.haml
+++ b/app/views/people/_add_contact.html.haml
@@ -1,4 +1,4 @@
-.span7.offset1.well
+.well
= t('.invited_by')
.media
.float-right
diff --git a/app/views/photos/_new_profile_photo.haml b/app/views/photos/_new_profile_photo.haml
index 26dad191a404fe027db0f9f1458e8d4b55345a3e..b6d1acb3a8e15f3890f4813047cb4832accb0193 100644
--- a/app/views/photos/_new_profile_photo.haml
+++ b/app/views/photos/_new_profile_photo.haml
@@ -60,17 +60,11 @@
#profile_photo_upload
= owner_image_tag(:thumb_medium)
- -if !aspect.nil? && aspect == :getting_started
- %br
- %br
-
#file-upload.button
=t('.upload')
= image_tag('mobile-spinner.gif', :class => 'hidden', :style => "z-index:-1", :id => 'file-upload-spinner')
- %br
- %br
%p
#fileInfo
diff --git a/app/views/photos/_new_profile_photo.mobile.haml b/app/views/photos/_new_profile_photo.mobile.haml
index 4cd9510a661bfef09e8f1d8a0ac517591e499845..5677f4ed55f4f20d25fc34210f5b1d5cf8dfad52 100644
--- a/app/views/photos/_new_profile_photo.mobile.haml
+++ b/app/views/photos/_new_profile_photo.mobile.haml
@@ -43,17 +43,11 @@
#profile_photo_upload
= owner_image_tag(:thumb_medium)
- -if !aspect.nil? && aspect == :getting_started
- %br
- %br
-
#file-upload.button
=t('.upload')
= image_tag('mobile-spinner.gif', :class => 'hidden', :style => "z-index:-1", :id => 'file-upload-spinner')
- %br
- %br
%p
#fileInfo
diff --git a/app/views/users/getting_started.haml b/app/views/users/getting_started.haml
index 0dd140c0d5fc9a714ea0c8b8ec2f70eee5a8e8cc..a1e24b752b34a316a15c09e38baef07a01eb2506 100644
--- a/app/views/users/getting_started.haml
+++ b/app/views/users/getting_started.haml
@@ -4,72 +4,43 @@
- content_for :head do
= javascript_include_tag :profile
-:css
- .media, .bd{ overflow: visible;}
-
-%br
%section#hello-there
.hero-unit
%h1.center
= t('.well_hello_there')
- %p.center
+ %h3.center
= t(".community_welcome")
= invited_by_message
-
- .clearfix
- %br
- %br
-
- .clearfix
- .row
- %h2
- = t(".who_are_you")
-
- .row
- %p
- != t('.connect_to_facebook', :link => link_to(t('.connect_to_facebook_link'), "auth/facebook?callback_url=#{getting_started_url}"))
-
- .row
- .span6
- = form_tag profile_path, :method => :put, :remote => true, :id => 'edit_profile' do
- %fieldset
- .clearfix
- = label_tag 'profile[first_name]', t('profiles.edit.your_name'), :class => "bootstrapped"
- .input
- = text_field_tag 'profile[first_name]', current_user.first_name
- = image_tag 'ajax-loader.gif', :id => "gs-name-form-spinner", :class => "hidden"
-
- .clearfix
- = label_tag :your_photo, t('profiles.edit.your_photo'), :class => "bootstrapped"
- .input{:style => "position:relative;"}
- = render 'photos/new_profile_photo', :aspect => :getting_started, :person => current_user.person
- %br
- %br
-
- .clearfix
- .row
- %h2
- = t('.what_are_you_in_to')
-
- .row
- %p
- = t('.hashtag_explanation')
-
- .row
- .span13
- = form_tag(tag_followings_path, :method => 'get', :class => "tag_input search_form") do
- %fieldset
- .clearfix
- = label_tag 'follow_tags', t('.hashtag_suggestions'), :class => "bootstrapped"
- .input
- = text_field_tag 'follow_tags', nil, :class => "nostrap"
-
- .clearfix
- %br
- %br
- %br
- .input
- = link_to "#{t('.awesome_take_me_to_diaspora')} »", stream_path, :id => "awesome_button", :class => "btn primary"
+
+ %h2
+ = t(".who_are_you")
+
+ - if AppConfig.configured_services.include? :facebook
+ %p
+ != t('.connect_to_facebook', :link => link_to(t('.connect_to_facebook_link'), "auth/facebook?callback_url=#{getting_started_url}"))
+
+ = form_tag profile_path, :method => :put, :remote => true, :id => 'edit_profile' do
+ %fieldset
+ = label_tag 'profile[first_name]', t('profiles.edit.your_name')
+ = text_field_tag 'profile[first_name]', current_user.first_name
+ = image_tag 'ajax-loader.gif', :id => "gs-name-form-spinner", :class => "hidden"
+ = label_tag :your_photo, t('profiles.edit.your_photo')
+ = render 'photos/new_profile_photo', :aspect => :getting_started, :person => current_user.person
+
+ %h2
+ = t('.what_are_you_in_to')
+
+ %p
+ = t('.hashtag_explanation')
+
+ = form_tag(tag_followings_path, :method => 'get', :class => "tag_input search_form") do
+ %fieldset
+ = label_tag 'follow_tags', t('.hashtag_suggestions')
+ #tags_list
+ = text_field_tag 'follow_tags', nil, :class => "nostrap"
+
+ .awesome
+ = link_to "#{t('.awesome_take_me_to_diaspora')} »", stream_path, :id => "awesome_button", :class => "button creation"
diff --git a/app/views/users/getting_started.mobile.haml b/app/views/users/getting_started.mobile.haml
index bc90efcdb53532c89c35e3dd17b51e92ddec0402..321178bf4d83ce59aee4ba8c8dd7f92c5730b450 100644
--- a/app/views/users/getting_started.mobile.haml
+++ b/app/views/users/getting_started.mobile.haml
@@ -42,64 +42,43 @@
%section#hello-there
.hero-unit-mobile
- %h3.center
+ %h1.center
= t('.well_hello_there')
- %p.center
+ %h3.center
= t(".community_welcome")
= invited_by_message
- .clearfix
-
- .clearfix
- .row
- %h3
- = t(".who_are_you")
-
- .row
- %p
- != t('.connect_to_facebook', :link => link_to(t('.connect_to_facebook_link'), "auth/facebook?callback_url=#{getting_started_url}"))
-
- .row
- .span6
- = form_tag profile_path, :method => :put, :remote => true, :id => 'edit_profile' do
- %fieldset
- .clearfix
- = label_tag 'profile[first_name]', t('profiles.edit.your_name'), :class => "bootstrapped"
- .input
- = text_field_tag 'profile[first_name]', current_user.first_name
- = image_tag 'ajax-loader.gif', :id => "gs-name-form-spinner", :class => "hidden"
-
- %span.saved{:class => "hidden"}
- = image_tag 'icons/check_yes_ok.png'
- = t(".saved")
-
- .clearfix
- = label_tag :your_photo, t('profiles.edit.your_photo'), :class => "bootstrapped"
- = render 'photos/new_profile_photo', :aspect => :getting_started, :person => current_user.person
-
- .clearfix
- .row
- %h3
- = t('.what_are_you_in_to')
-
- .row
- %p
- = t('.hashtag_explanation')
-
- .row
- .span13
- = form_tag(tag_followings_path, :method => 'get', :class => "tag_input search_form") do
- %fieldset
- .clearfix
- = label_tag 'follow_tags', t('.hashtag_suggestions'), :class => "bootstrapped"
- .input
- = text_field_tag 'follow_tags', nil, :class => "nostrap"
-
- .clearfix
- %br
- %br
- %br
- .input
- = link_to "#{t('.awesome_take_me_to_diaspora')} »", stream_path, :id => "awesome_button", :class => "btn primary"
+ %h2
+ = t(".who_are_you")
+
+ - if AppConfig.configured_services.include? :facebook
+ %p
+ != t('.connect_to_facebook', :link => link_to(t('.connect_to_facebook_link'), "auth/facebook?callback_url=#{getting_started_url}"))
+
+ = form_tag profile_path, :method => :put, :remote => true, :id => 'edit_profile' do
+ %fieldset
+ = label_tag 'profile[first_name]', t('profiles.edit.your_name'), :class => "bootstrapped"
+ = text_field_tag 'profile[first_name]', current_user.first_name
+ = image_tag 'ajax-loader.gif', :id => "gs-name-form-spinner", :class => "hidden"
+ %span.saved{:class => "hidden"}
+ = image_tag 'icons/check_yes_ok.png'
+ = t(".saved")
+
+ = label_tag :your_photo, t('profiles.edit.your_photo'), :class => "bootstrapped"
+ = render 'photos/new_profile_photo', :aspect => :getting_started, :person => current_user.person
+
+ %h2
+ = t('.what_are_you_in_to')
+
+ %p
+ = t('.hashtag_explanation')
+
+ = form_tag(tag_followings_path, :method => 'get', :class => "tag_input search_form") do
+ %fieldset
+ = label_tag 'follow_tags', t('.hashtag_suggestions'), :class => "bootstrapped"
+ = text_field_tag 'follow_tags', nil, :class => "nostrap"
+
+ .center
+ = link_to "#{t('.awesome_take_me_to_diaspora')} »", stream_path, :id => "awesome_button", :class => "button creation"