From c71aa468b5ce2aed9f9fcd0cc6c0c97166e239d3 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 22 Feb 2018 01:03:48 +0100 Subject: Redesign landing page (again) (#6486) * Redesign landing page (again) * Move login form in small version to the right column * Display closed registrations message * Add site setting for the hero image * Fix test * Increase spacing, maximum width, change call to action section --- app/views/about/_forms.html.haml | 14 ++++ app/views/about/_links.html.haml | 2 +- app/views/about/_registration.html.haml | 2 +- app/views/about/more.html.haml | 16 ++--- app/views/about/show.html.haml | 119 +++++++++++++++++++------------- app/views/about/terms.html.haml | 2 +- app/views/admin/settings/edit.html.haml | 1 + 7 files changed, 97 insertions(+), 59 deletions(-) create mode 100644 app/views/about/_forms.html.haml (limited to 'app/views') diff --git a/app/views/about/_forms.html.haml b/app/views/about/_forms.html.haml new file mode 100644 index 000000000..9916b6bf4 --- /dev/null +++ b/app/views/about/_forms.html.haml @@ -0,0 +1,14 @@ +- if @instance_presenter.open_registrations + = render 'registration' +- else + - if @instance_presenter.closed_registrations_message.blank? + %p= t('about.closed_registrations') + - else + = @instance_presenter.closed_registrations_message.html_safe + + = link_to t('auth.register'), 'https://joinmastodon.org', class: 'button button-primary' + +.separator-or + %span= t('auth.or') + += link_to t('auth.login'), new_user_session_path, class: 'button button-alternative-2 webapp-btn' diff --git a/app/views/about/_links.html.haml b/app/views/about/_links.html.haml index ccf4f08b9..f79c37e65 100644 --- a/app/views/about/_links.html.haml +++ b/app/views/about/_links.html.haml @@ -1,4 +1,4 @@ -.container.links +.container-alt.links .brand = link_to root_url do = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon' diff --git a/app/views/about/_registration.html.haml b/app/views/about/_registration.html.haml index 7a28f9738..6ca1d7129 100644 --- a/app/views/about/_registration.html.haml +++ b/app/views/about/_registration.html.haml @@ -10,6 +10,6 @@ = f.input :password_confirmation, placeholder: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password'), :autocomplete => 'off' } .actions - = f.button :button, t('auth.register'), type: :submit, class: 'button button-alternative' + = f.button :button, t('auth.register'), type: :submit, class: 'button button-primary' %p.hint.subtle-hint=t('auth.agreement_html', rules_path: about_more_path, terms_path: terms_path) diff --git a/app/views/about/more.html.haml b/app/views/about/more.html.haml index 9c9580eac..df072b8ae 100644 --- a/app/views/about/more.html.haml +++ b/app/views/about/more.html.haml @@ -10,34 +10,34 @@ .header = render 'links' - .container.hero + .container-alt.hero .heading %h3= t('about.description_headline', domain: site_hostname) %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname) .information-board - .container - .information-board-sections - .section + .container-alt + .information-board__sections + .information-board__section %span= t 'about.user_count_before' %strong= number_with_delimiter @instance_presenter.user_count %span= t 'about.user_count_after' - .section + .information-board__section %span= t 'about.status_count_before' %strong= number_with_delimiter @instance_presenter.status_count %span= t 'about.status_count_after' - .section + .information-board__section %span= t 'about.domain_count_before' %strong= number_with_delimiter @instance_presenter.domain_count %span= t 'about.domain_count_after' = render 'contact', contact: @instance_presenter .extended-description - .container + .container-alt = @instance_presenter.site_extended_description.html_safe.presence || t('about.extended_description_html') .footer-links - .container + .container-alt %p = link_to t('about.source_code'), @instance_presenter.source_url = " (#{@instance_presenter.version_number})" diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index b7c08479d..fd1cda8b3 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -6,51 +6,74 @@ = javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous' = render partial: 'shared/og' -.landing-page - .header-wrapper - .mascot-container - = image_tag asset_pack_path('elephant-fren.png'), alt: '', role: 'presentation', class: 'mascot' - - .header - = render 'links' - - .container.hero - .floats - %div{ role: 'presentation', class: 'float-1' } - %div{ role: 'presentation', class: 'float-2' } - %div{ role: 'presentation', class: 'float-3' } - .heading - %h1 - = @instance_presenter.site_title - %small= t 'about.hosted_on', domain: site_hostname - - if @instance_presenter.open_registrations - = render 'registration' - - else - .closed-registrations-message - %div - - if @instance_presenter.closed_registrations_message.blank? - %p= t('about.closed_registrations') - - else - = @instance_presenter.closed_registrations_message.html_safe - = link_to t('about.find_another_instance'), 'https://joinmastodon.org/', class: 'button button-alternative button--block' - - .about-short - .container - %h3= t('about.description_headline', domain: site_hostname) - %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname) - - .features - .container - - if Setting.timeline_preview - #mastodon-timeline{ data: { props: Oj.dump(default_props) } } - - .about-mastodon - %h3= t 'about.what_is_mastodon' - %p= t 'about.about_mastodon_html' - = link_to t('about.learn_more'), 'https://joinmastodon.org/', class: 'button button-secondary' - = render 'features' - .footer-links - .container - %p - = link_to t('about.source_code'), @instance_presenter.source_url - = " (#{@instance_presenter.version_number})" +.landing-page.alternative + .container + .row + .column-4.hide-sm.show-xs.show-m + .landing-page__forms + .brand + = link_to root_url do + = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon' + + .hide-xs + = render 'forms' + + .column-7.column-9-sm + .landing-page__hero + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title + + .landing-page__information + .landing-page__short-description + .row + .landing-page__logo.hide-xs + = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon' + + %h1 + = @instance_presenter.site_title + %small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname) + + %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname) + + .show-xs + .landing-page__forms + = render 'forms' + .landing-page__call-to-action.hide-xs + .row + .column-5 + .landing-page__mascot + = image_tag asset_pack_path('elephant_ui_plane.svg') + .column-5 + .information-board__section + %span= t 'about.user_count_before' + %strong= number_with_delimiter @instance_presenter.user_count + %span= t 'about.user_count_after' + .column-5 + .information-board__section + %span= t 'about.status_count_before' + %strong= number_with_delimiter @instance_presenter.status_count + %span= t 'about.status_count_after' + .landing-page__information + .landing-page__features + %h3= t 'about.what_is_mastodon' + %p= t 'about.about_mastodon_html' + + = render 'features' + + .landing-page__features__action + = link_to t('about.learn_more'), 'https://joinmastodon.org/', class: 'button button-alternative' + + .landing-page__footer + %p + = link_to t('about.source_code'), @instance_presenter.source_url + = " (#{@instance_presenter.version_number})" + + .column-4.column-6-sm.column-flex + .show-sm.hide-xs + .landing-page__forms + .brand + = link_to root_url do + = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon' + + = render 'forms' + - if Setting.timeline_preview + #mastodon-timeline{ data: { props: Oj.dump(default_props) } } diff --git a/app/views/about/terms.html.haml b/app/views/about/terms.html.haml index ba780759c..c7d36ed47 100644 --- a/app/views/about/terms.html.haml +++ b/app/views/about/terms.html.haml @@ -7,5 +7,5 @@ = render 'links' .extended-description - .container + .container-alt = @instance_presenter.site_terms.html_safe.presence || t('terms.body_html') diff --git a/app/views/admin/settings/edit.html.haml b/app/views/admin/settings/edit.html.haml index 73fd5642e..08d05d738 100644 --- a/app/views/admin/settings/edit.html.haml +++ b/app/views/admin/settings/edit.html.haml @@ -12,6 +12,7 @@ .fields-group = f.input :thumbnail, as: :file, wrapper: :with_block_label, label: t('admin.settings.thumbnail.title'), hint: t('admin.settings.thumbnail.desc_html') + = f.input :hero, as: :file, wrapper: :with_block_label, label: t('admin.settings.hero.title'), hint: t('admin.settings.hero.desc_html') %hr/ -- cgit