Redesign the landing page, mount public timeline on it (#4122)
* Redesign the landing page, mount public timeline on it * Adjust the standalone mounted component to the lacking of router * Adjust auth layout pages to new design * Fix tests * Standalone public timeline polling every 5 seconds * Remove now obsolete translations * Add responsive design for new landing page * Address reviews * Add floating clouds behind frontpage form * Use access token from public page when available * Fix mentions and hashtags links, cursor on status content in standalone mode * Add footer link to source code * Fix errors on pages that don't embed the component, use classnames * Fix tests * Change anonymous autoPlayGif default to false * When gif autoplay is disabled, hover to play * Add option to hide the timeline preview * Slightly improve alt layout * Add elephant friend to new frontpage * Display "back to mastodon" in place of "login" when logged in on frontpage * Change polling time to 3s
This commit is contained in:
Eugen Rochko
GitHub
parent
8784bd79d0
commit
e19eefe219
68 changed files with 959 additions and 658 deletions
25
app/views/about/_features.html.haml
Normal file
25
app/views/about/_features.html.haml
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
.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,10 +1,13 @@
|
|||
= simple_form_for(new_user, url: user_registration_path) do |f|
|
||||
= f.simple_fields_for :account do |account_fields|
|
||||
= account_fields.input :username,
|
||||
autofocus: true,
|
||||
placeholder: t('simple_form.labels.defaults.username'),
|
||||
required: true,
|
||||
input_html: { 'aria-label' => t('simple_form.labels.defaults.username') }
|
||||
.input-with-append
|
||||
= account_fields.input :username,
|
||||
autofocus: true,
|
||||
placeholder: t('simple_form.labels.defaults.username'),
|
||||
required: true,
|
||||
input_html: { 'aria-label' => t('simple_form.labels.defaults.username') }
|
||||
.append
|
||||
= "@#{site_hostname}"
|
||||
|
||||
= f.input :email,
|
||||
placeholder: t('simple_form.labels.defaults.email'),
|
||||
|
|
@ -22,9 +25,6 @@
|
|||
input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password') }
|
||||
|
||||
.actions
|
||||
= f.button :button, t('about.get_started'), type: :submit
|
||||
= f.button :button, t('auth.register'), type: :submit, class: 'button button-alternative'
|
||||
|
||||
.info
|
||||
= link_to t('auth.login'), new_user_session_path, class: 'webapp-btn'
|
||||
·
|
||||
= link_to t('about.about_this'), about_more_path
|
||||
%p.hint.subtle-hint=t('auth.agreement_html', rules_path: about_more_path, terms_path: terms_path)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
- content_for :header_tags do
|
||||
%script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json)
|
||||
= javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'
|
||||
|
||||
- content_for :page_title do
|
||||
|
|
@ -9,79 +10,70 @@
|
|||
%meta{ property: 'og:url', content: about_url }/
|
||||
%meta{ property: 'og:type', content: 'website' }/
|
||||
%meta{ property: 'og:title', content: site_hostname }/
|
||||
%meta{ property: 'og:description', content: strip_tags(@instance_presenter.site_description.presence || t('about.about_mastodon')) }/
|
||||
%meta{ property: 'og:description', content: strip_tags(@instance_presenter.site_description.presence || t('about.about_mastodon_html')) }/
|
||||
%meta{ property: 'og:image', content: asset_pack_path('mastodon_small.jpg', protocol: :request) }/
|
||||
%meta{ property: 'og:image:width', content: '400' }/
|
||||
%meta{ property: 'og:image:height', content: '400' }/
|
||||
%meta{ property: 'twitter:card', content: 'summary' }/
|
||||
|
||||
.wrapper
|
||||
%h1
|
||||
= image_tag asset_pack_path('logo.png')
|
||||
= Setting.site_title
|
||||
.landing-page
|
||||
.header-wrapper
|
||||
.mascot-container
|
||||
= image_tag asset_pack_path('elephant-fren.png'), class: 'mascot'
|
||||
|
||||
%p!= t('about.about_mastodon')
|
||||
.header
|
||||
.container.links
|
||||
.brand
|
||||
= link_to root_url do
|
||||
= image_tag asset_pack_path('logo.svg')
|
||||
Mastodon
|
||||
|
||||
.screenshot-with-signup
|
||||
.mascot= image_tag asset_pack_path('fluffy-elephant-friend.png')
|
||||
%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 t('about.other_instances'), 'https://joinmastodon.org/'
|
||||
|
||||
- if @instance_presenter.open_registrations
|
||||
= render 'registration'
|
||||
- else
|
||||
.closed-registrations-message
|
||||
- if @instance_presenter.closed_registrations_message.blank?
|
||||
%p= t('about.closed_registrations')
|
||||
.container.hero
|
||||
.floats
|
||||
= image_tag asset_pack_path('cloud2.png'), class: 'float-1'
|
||||
= image_tag asset_pack_path('cloud3.png'), class: 'float-2'
|
||||
= image_tag asset_pack_path('cloud4.png'), 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
|
||||
!= @instance_presenter.closed_registrations_message
|
||||
.info
|
||||
= link_to t('auth.login'), new_user_session_path, class: 'webapp-btn'
|
||||
·
|
||||
= link_to t('about.other_instances'), 'https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/List-of-Mastodon-instances.md'
|
||||
·
|
||||
= link_to t('about.about_this'), about_more_path
|
||||
.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'
|
||||
|
||||
%h3= t('about.features_headline')
|
||||
.learn-more-cta
|
||||
.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-list
|
||||
.features-list__column
|
||||
%ul.fa-ul
|
||||
%li
|
||||
= fa_icon('li check-square')
|
||||
= t 'about.features.chronology'
|
||||
%li
|
||||
= fa_icon('li check-square')
|
||||
= t 'about.features.public'
|
||||
%li
|
||||
= fa_icon('li check-square')
|
||||
= t 'about.features.characters'
|
||||
%li
|
||||
= fa_icon('li check-square')
|
||||
= t 'about.features.gifv'
|
||||
.features-list__column
|
||||
%ul.fa-ul
|
||||
%li
|
||||
= fa_icon('li check-square')
|
||||
= t 'about.features.privacy'
|
||||
%li
|
||||
= fa_icon('li check-square')
|
||||
= t 'about.features.blocks'
|
||||
%li
|
||||
= fa_icon('li check-square')
|
||||
= t 'about.features.ethics'
|
||||
%li
|
||||
= fa_icon('li check-square')
|
||||
= t 'about.features.api'
|
||||
.features
|
||||
.container
|
||||
- if Setting.timeline_preview
|
||||
#mastodon-timeline{ data: { props: Oj.dump(default_props) } }
|
||||
|
||||
- unless @instance_presenter.site_description.blank?
|
||||
%h3= t('about.description_headline', domain: site_hostname)
|
||||
%p!= @instance_presenter.site_description
|
||||
|
||||
.actions
|
||||
.info
|
||||
= link_to t('about.terms'), terms_path
|
||||
·
|
||||
= link_to t('about.apps'), 'https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md'
|
||||
·
|
||||
= link_to t('about.source_code'), 'https://github.com/tootsuite/mastodon'
|
||||
·
|
||||
= link_to t('about.other_instances'), 'https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/List-of-Mastodon-instances.md'
|
||||
.about-mastodon
|
||||
%h3= t 'about.what_is_mastodon'
|
||||
%p= t 'about.about_mastodon_html'
|
||||
%a.button.button-secondary{ href: 'https://joinmastodon.org' }= t 'about.learn_more'
|
||||
= render 'features'
|
||||
.footer-links
|
||||
.container
|
||||
%p
|
||||
= link_to t('about.source_code'), 'https://github.com/tootsuite/mastodon'
|
||||
= " (#{@instance_presenter.version_number})"
|
||||
|
|
|
|||
|
|
@ -12,54 +12,53 @@
|
|||
%tr
|
||||
%td
|
||||
%strong= t('admin.settings.contact_information.label')
|
||||
%td= text_field_tag :site_contact_username,
|
||||
@settings['site_contact_username'].value,
|
||||
place_holder: t('admin.settings.contact_information.username')
|
||||
%td= text_field_tag :site_contact_username, @settings['site_contact_username'].value, place_holder: t('admin.settings.contact_information.username')
|
||||
%tr
|
||||
%td
|
||||
%strong= t('admin.accounts.email')
|
||||
%td= text_field_tag :site_contact_email,
|
||||
@settings['site_contact_email'].value,
|
||||
place_holder: t('admin.settings.contact_information.email')
|
||||
%td= text_field_tag :site_contact_email, @settings['site_contact_email'].value, place_holder: t('admin.settings.contact_information.email')
|
||||
%tr
|
||||
%td
|
||||
%strong= t('admin.settings.site_title')
|
||||
%td= text_field_tag :site_title,
|
||||
@settings['site_title'].value
|
||||
%td= text_field_tag :site_title, @settings['site_title'].value
|
||||
%tr
|
||||
%td
|
||||
%strong= t('admin.settings.site_description.title')
|
||||
%p= t('admin.settings.site_description.desc_html')
|
||||
%td= text_area_tag :site_description,
|
||||
@settings['site_description'].value,
|
||||
rows: 8
|
||||
%td= text_area_tag :site_description, @settings['site_description'].value, rows: 8
|
||||
%tr
|
||||
%td
|
||||
%strong= t('admin.settings.site_description_extended.title')
|
||||
%p= t('admin.settings.site_description_extended.desc_html')
|
||||
%td= text_area_tag :site_extended_description,
|
||||
@settings['site_extended_description'].value,
|
||||
rows: 8
|
||||
%td= text_area_tag :site_extended_description, @settings['site_extended_description'].value, rows: 8
|
||||
%tr
|
||||
%td
|
||||
%strong= t('admin.settings.site_terms.title')
|
||||
%p= t('admin.settings.site_terms.desc_html')
|
||||
%td= text_area_tag :site_terms,
|
||||
@settings['site_terms'].value,
|
||||
rows: 8
|
||||
%td= text_area_tag :site_terms, @settings['site_terms'].value, rows: 8
|
||||
%tr
|
||||
%td
|
||||
%strong= t('admin.settings.registrations.open.title')
|
||||
%p= t('admin.settings.registrations.open.desc_html')
|
||||
%td
|
||||
= select_tag :open_registrations,
|
||||
options_for_select({ t('admin.settings.registrations.open.disabled') => false, t('admin.settings.registrations.open.enabled') => true }, @settings['open_registrations'].value)
|
||||
= select_tag :open_registrations, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['open_registrations'].value)
|
||||
%tr
|
||||
%td
|
||||
%strong= t('admin.settings.registrations.closed_message.title')
|
||||
%p= t('admin.settings.registrations.closed_message.desc_html')
|
||||
%td= text_area_tag :closed_registrations_message,
|
||||
@settings['closed_registrations_message'].value,
|
||||
rows: 8
|
||||
%td= text_area_tag :closed_registrations_message, @settings['closed_registrations_message'].value, rows: 8
|
||||
%tr
|
||||
%td
|
||||
%strong= t('admin.settings.registrations.deletion.title')
|
||||
%p= t('admin.settings.registrations.deletion.desc_html')
|
||||
%td
|
||||
= select_tag :open_deletion, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['open_deletion'].value)
|
||||
%tr
|
||||
%td
|
||||
%strong= t('admin.settings.timeline_preview.title')
|
||||
%p= t('admin.settings.timeline_preview.desc_html')
|
||||
%td
|
||||
= select_tag :timeline_preview, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['timeline_preview'].value)
|
||||
|
||||
.simple_form.actions
|
||||
= button_tag t('generic.save_changes'), type: :submit, class: :btn
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@
|
|||
= render 'shared/error_messages', object: resource
|
||||
|
||||
= f.simple_fields_for :account do |ff|
|
||||
= ff.input :username, autofocus: true, placeholder: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username') }
|
||||
.input-with-append
|
||||
= ff.input :username, autofocus: true, placeholder: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username') }
|
||||
.append
|
||||
= "@#{site_hostname}"
|
||||
|
||||
= f.input :email, placeholder: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }
|
||||
= f.input :password, autocomplete: 'off', placeholder: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password') }
|
||||
|
|
@ -14,4 +17,5 @@
|
|||
.actions
|
||||
= f.button :button, t('auth.register'), type: :submit
|
||||
|
||||
%p.hint.subtle-hint=t('auth.agreement_html', rules_path: about_more_path, terms_path: terms_path)
|
||||
.form-footer= render 'auth/shared/links'
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
.logo-container
|
||||
%h1
|
||||
= link_to root_path do
|
||||
= image_tag asset_pack_path('logo.png')
|
||||
= image_tag asset_pack_path('logo.svg')
|
||||
Mastodon
|
||||
|
||||
.form-container
|
||||
= render 'flashes'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue