From e19eefe219c46ea9f763d0279029f03c5cf4554f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 11 Jul 2017 15:27:59 +0200 Subject: 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 --- app/views/about/_features.html.haml | 25 ++++++ app/views/about/_registration.html.haml | 20 ++--- app/views/about/show.html.haml | 120 ++++++++++++++--------------- app/views/admin/settings/edit.html.haml | 43 +++++------ app/views/auth/registrations/new.html.haml | 6 +- app/views/layouts/auth.html.haml | 3 +- 6 files changed, 119 insertions(+), 98 deletions(-) create mode 100644 app/views/about/_features.html.haml (limited to 'app/views') diff --git a/app/views/about/_features.html.haml b/app/views/about/_features.html.haml new file mode 100644 index 000000000..8fbc6b760 --- /dev/null +++ b/app/views/about/_features.html.haml @@ -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' diff --git a/app/views/about/_registration.html.haml b/app/views/about/_registration.html.haml index 4f38c1ecc..eeeb0088f 100644 --- a/app/views/about/_registration.html.haml +++ b/app/views/about/_registration.html.haml @@ -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) diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index d15b04163..f75f87c99 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -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})" diff --git a/app/views/admin/settings/edit.html.haml b/app/views/admin/settings/edit.html.haml index 3096a958d..59192530b 100644 --- a/app/views/admin/settings/edit.html.haml +++ b/app/views/admin/settings/edit.html.haml @@ -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 diff --git a/app/views/auth/registrations/new.html.haml b/app/views/auth/registrations/new.html.haml index 82d5483dd..af7ee2b28 100644 --- a/app/views/auth/registrations/new.html.haml +++ b/app/views/auth/registrations/new.html.haml @@ -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' diff --git a/app/views/layouts/auth.html.haml b/app/views/layouts/auth.html.haml index e5429a8ed..b4f1bd0f3 100644 --- a/app/views/layouts/auth.html.haml +++ b/app/views/layouts/auth.html.haml @@ -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' -- cgit