Redesign landing page (#10232)
This commit is contained in:
Eugen Rochko
GitHub
@ -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'
|
||||
@ -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'
|
||||
@ -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;' }
|
||||
13
app/views/about/_login.html.haml
Normal file
13
app/views/about/_login.html.haml
Normal file
@ -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
|
||||
@ -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
|
||||
|
||||
= 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
|
||||
|
||||
.actions
|
||||
= 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)
|
||||
= 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
|
||||
|
||||
@ -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'
|
||||
.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'
|
||||
|
||||
- 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'
|
||||
.landing__grid
|
||||
.landing__grid__column.landing__grid__column-registration
|
||||
.box-widget
|
||||
= render 'registration'
|
||||
|
||||
= render 'forms'
|
||||
.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')
|
||||
|
||||
- else
|
||||
.column-1.non-preview
|
||||
.landing-page__forms
|
||||
.brand
|
||||
= link_to root_url do
|
||||
= image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
|
||||
.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'
|
||||
|
||||
= render 'forms'
|
||||
.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')
|
||||
|
||||
- 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
|
||||
.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-page__information
|
||||
.landing-page__short-description
|
||||
.row
|
||||
.landing-page__logo
|
||||
= image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
|
||||
.landing__grid__column.landing__grid__column-login
|
||||
.box-widget
|
||||
= render 'login'
|
||||
|
||||
%h1
|
||||
= @instance_presenter.site_title
|
||||
%small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)
|
||||
.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
|
||||
|
||||
%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
|
||||
- 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})"
|
||||
= @instance_presenter.site_short_description.html_safe.presence
|
||||
= link_to about_more_path do
|
||||
= t('about.learn_more')
|
||||
= fa_icon 'angle-double-right'
|
||||
|
||||
- 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'))
|
||||
.hero-widget__footer
|
||||
.hero-widget__footer__column
|
||||
%h4= t 'about.administered_by'
|
||||
|
||||
= render 'features'
|
||||
= account_link_to @instance_presenter.contact_account
|
||||
|
||||
.landing-page__features__action
|
||||
= link_to t('about.learn_more'), 'https://joinmastodon.org/', class: 'button button-alternative'
|
||||
.hero-widget__footer__column
|
||||
%h4= t 'about.server_stats'
|
||||
|
||||
.landing-page__footer
|
||||
%p
|
||||
= link_to t('about.source_code'), @instance_presenter.source_url
|
||||
= " (#{@instance_presenter.version_number})"
|
||||
|
||||
#modal-container
|
||||
%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') } *
|
||||
|
||||
Reference in New Issue
Block a user