From 65fffeac3f960f9c74d693525a73ac14b201bf2b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 12 Mar 2019 17:34:00 +0100 Subject: Redesign landing page (#10232) --- app/views/about/_features.html.haml | 25 ---- app/views/about/_forms.html.haml | 15 --- app/views/about/_links.html.haml | 16 --- app/views/about/_login.html.haml | 13 ++ app/views/about/_registration.html.haml | 20 +-- app/views/about/show.html.haml | 208 +++++++++++--------------------- 6 files changed, 95 insertions(+), 202 deletions(-) delete mode 100644 app/views/about/_features.html.haml delete mode 100644 app/views/about/_forms.html.haml delete mode 100644 app/views/about/_links.html.haml create mode 100644 app/views/about/_login.html.haml (limited to 'app/views/about') diff --git a/app/views/about/_features.html.haml b/app/views/about/_features.html.haml deleted file mode 100644 index 8fbc6b760..000000000 --- a/app/views/about/_features.html.haml +++ /dev/null @@ -1,25 +0,0 @@ -.features-list - .features-list__row - .text - %h6= t 'about.features.real_conversation_title' - = t 'about.features.real_conversation_body' - .visual - = fa_icon 'fw comments' - .features-list__row - .text - %h6= t 'about.features.not_a_product_title' - = t 'about.features.not_a_product_body' - .visual - = fa_icon 'fw users' - .features-list__row - .text - %h6= t 'about.features.within_reach_title' - = t 'about.features.within_reach_body' - .visual - = fa_icon 'fw mobile' - .features-list__row - .text - %h6= t 'about.features.humane_approach_title' - = t 'about.features.humane_approach_body' - .visual - = fa_icon 'fw leaf' diff --git a/app/views/about/_forms.html.haml b/app/views/about/_forms.html.haml deleted file mode 100644 index 78a422690..000000000 --- a/app/views/about/_forms.html.haml +++ /dev/null @@ -1,15 +0,0 @@ -- if @instance_presenter.open_registrations - = render 'registration' -- else - = link_to t('auth.register_elsewhere'), 'https://joinmastodon.org/#getting-started', class: 'button button-primary' - - .closed-registrations-message - - if @instance_presenter.closed_registrations_message.blank? - %p= t('about.closed_registrations') - - else - = @instance_presenter.closed_registrations_message.html_safe - -.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 deleted file mode 100644 index 381f301f9..000000000 --- a/app/views/about/_links.html.haml +++ /dev/null @@ -1,16 +0,0 @@ -.container-alt.links - .brand - = link_to root_url do - = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon' - - %ul.nav - %li - - if user_signed_in? - = link_to t('settings.back'), root_url, class: 'webapp-btn' - - else - = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn' - %li= link_to t('about.about_this'), about_more_path - %li - = link_to 'https://joinmastodon.org/#getting-started' do - = "#{t('about.other_instances')}" - %i.fa.fa-external-link{ style: 'padding-left: 5px;' } diff --git a/app/views/about/_login.html.haml b/app/views/about/_login.html.haml new file mode 100644 index 000000000..d286f0d3c --- /dev/null +++ b/app/views/about/_login.html.haml @@ -0,0 +1,13 @@ += simple_form_for(new_user, url: user_session_path) do |f| + .fields-group + - if use_seamless_external_login? + = f.input :email, placeholder: t('simple_form.labels.defaults.username_or_email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.username_or_email') }, hint: false + - else + = f.input :email, placeholder: t('simple_form.labels.defaults.email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }, hint: false + + = f.input :password, placeholder: t('simple_form.labels.defaults.password'), input_html: { 'aria-label' => t('simple_form.labels.defaults.password') }, hint: false + + .actions + = f.button :button, t('auth.login'), type: :submit, class: 'button button-primary' + + %p.hint.subtle-hint= link_to t('auth.trouble_logging_in'), new_user_password_path diff --git a/app/views/about/_registration.html.haml b/app/views/about/_registration.html.haml index ee4f8fe2e..715bcd37c 100644 --- a/app/views/about/_registration.html.haml +++ b/app/views/about/_registration.html.haml @@ -1,12 +1,16 @@ = simple_form_for(new_user, url: user_registration_path) do |f| - = f.simple_fields_for :account do |account_fields| - = account_fields.input :username, wrapper: :with_label, autofocus: true, label: false, required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', placeholder: t('simple_form.labels.defaults.username') }, append: "@#{site_hostname}", hint: false + %p.lead= t('about.federation_hint_html', instance: content_tag(:strong, site_hostname)) - = f.input :email, placeholder: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }, hint: false - = f.input :password, placeholder: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off' }, hint: false - = 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' }, hint: false + .fields-group + = f.simple_fields_for :account do |account_fields| + = account_fields.input :username, wrapper: :with_label, autofocus: true, label: false, required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', placeholder: t('simple_form.labels.defaults.username') }, append: "@#{site_hostname}", hint: false, disabled: !Setting.open_registrations - .actions - = f.button :button, t('auth.register'), type: :submit, class: 'button button-primary' + = f.input :email, placeholder: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }, hint: false, disabled: !Setting.open_registrations + = f.input :password, placeholder: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off' }, hint: false, disabled: !Setting.open_registrations + = 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' }, hint: false, disabled: !Setting.open_registrations + + .fields-group + = f.input :agreement, as: :boolean, wrapper: :with_label, label: t('auth.checkbox_agreement_html', rules_path: about_more_path, terms_path: terms_path), disabled: !Setting.open_registrations - %p.hint.subtle-hint=t('auth.agreement_html', rules_path: about_more_path, terms_path: terms_path) + .actions + = f.button :button, Setting.open_registrations ? t('auth.register') : t('auth.registration_closed', instance: site_hostname), type: :submit, class: 'button button-primary', disabled: !Setting.open_registrations diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index f5a78665d..15d0af64e 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -3,144 +3,76 @@ - content_for :header_tags do %link{ rel: 'canonical', href: about_url }/ - %script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json) - = javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous' = render partial: 'shared/og' -.landing-page.alternative - .container - .grid - .column-0 - .brand - = link_to root_url do - = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon' - - - if Setting.timeline_preview - .column-1 - .landing-page__forms - .brand - = link_to root_url do - = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon' - - = render 'forms' - - - else - .column-1.non-preview - .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 - .column-2 - .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 - = 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) - - .landing-page__call-to-action{ dir: 'ltr' } - .row - .row__information-board - .information-board__section - %span= t 'about.user_count_before' - %strong= number_with_delimiter @instance_presenter.user_count - %span= t 'about.user_count_after', count: @instance_presenter.user_count - .information-board__section - %span= t 'about.status_count_before' - %strong= number_with_delimiter @instance_presenter.status_count - %span= t 'about.status_count_after', count: @instance_presenter.status_count - .row__mascot - .landing-page__mascot - = image_tag @instance_presenter.mascot&.file&.url || asset_pack_path('elephant_ui_plane.svg'), alt: '' - - - else - .column-2.non-preview - .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 - = 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) - - .landing-page__call-to-action - .row - .row__information-board - .information-board__section - %span= t 'about.user_count_before' - %strong= number_with_delimiter @instance_presenter.user_count - %span= t 'about.user_count_after', count: @instance_presenter.user_count - .information-board__section - %span= t 'about.status_count_before' - %strong= number_with_delimiter @instance_presenter.status_count - %span= t 'about.status_count_after', count: @instance_presenter.status_count - .row__mascot - .landing-page__mascot - = image_tag @instance_presenter.mascot&.file&.url || asset_pack_path('elephant_ui_plane.svg'), alt: '' - - - if Setting.timeline_preview - .column-3 - #mastodon-timeline{ data: { props: Oj.dump(default_props) } } - - - if Setting.timeline_preview - .column-4.landing-page__information - .landing-page__features - .features-list - %div - %h3= t 'about.what_is_mastodon' - %p= t 'about.about_mastodon_html' - %div.contact - %h3= t 'about.administered_by' - = account_link_to(@instance_presenter.contact_account, link_to(t('about.learn_more'), about_more_path, class: 'button button-alternative')) - - = render 'features' - - .landing-page__features__action - = link_to t('about.learn_more'), 'https://joinmastodon.org/', class: 'button button-alternative' - - .landing-page__footer +.landing + .landing__brand + = link_to root_url, class: 'brand' do + = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon' + %span.brand__tagline=t 'about.tagline' + + .landing__grid + .landing__grid__column.landing__grid__column-registration + .box-widget + = render 'registration' + + .directory + .directory__tag{ class: Setting.profile_directory ? nil : 'disabled' } + = optional_link_to Setting.profile_directory, explore_path do + %h4 + = fa_icon 'address-book fw' + = t('about.discover_users') + %small= t('about.browse_directory') + + .avatar-stack + - @instance_presenter.sample_accounts.each do |account| + = image_tag current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url, width: 48, height: 48, alt: '', class: 'account__avatar' + + .directory__tag{ class: Setting.timeline_preview ? nil : 'disabled' } + = optional_link_to Setting.timeline_preview, public_timeline_path do + %h4 + = fa_icon 'globe fw' + = t('about.see_whats_happening') + %small= t('about.browse_public_posts') + + .directory__tag + = link_to 'https://joinmastodon.org/apps', target: '_blank', rel: 'noopener' do + %h4 + = fa_icon 'tablet fw' + = t('about.get_apps') + %small= t('about.apps_platforms') + + .landing__grid__column.landing__grid__column-login + .box-widget + = render 'login' + + .hero-widget + .hero-widget__img + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title + + - if @instance_presenter.site_short_description.present? + .hero-widget__text %p - = link_to t('about.source_code'), @instance_presenter.source_url - = " (#{@instance_presenter.version_number})" - - - else - .column-4.non-preview.landing-page__information - .landing-page__features - .features-list - %div - %h3= t 'about.what_is_mastodon' - %p= t 'about.about_mastodon_html' - %div.contact - %h3= t 'about.administered_by' - = account_link_to(@instance_presenter.contact_account, link_to(t('about.learn_more'), about_more_path, class: 'button button-alternative')) - - = 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})" - -#modal-container + = @instance_presenter.site_short_description.html_safe.presence + = link_to about_more_path do + = t('about.learn_more') + = fa_icon 'angle-double-right' + + .hero-widget__footer + .hero-widget__footer__column + %h4= t 'about.administered_by' + + = account_link_to @instance_presenter.contact_account + + .hero-widget__footer__column + %h4= t 'about.server_stats' + + %div{ style: 'display: flex' } + .hero-widget__counter{ style: 'width: 50%' } + %strong= number_to_human @instance_presenter.user_count, strip_insignificant_zeros: true + %span= t 'about.user_count_after', count: @instance_presenter.user_count + .hero-widget__counter{ style: 'width: 50%' } + %strong= number_to_human @instance_presenter.active_user_count, strip_insignificant_zeros: true + %span + = t 'about.active_count_after' + %abbr{ title: t('about.active_footnote') } * -- cgit