diff --git a/app/assets/images/fluffy-elephant-friend.png b/app/assets/images/fluffy-elephant-friend.png new file mode 100644 index 000000000..11787e936 Binary files /dev/null and b/app/assets/images/fluffy-elephant-friend.png differ diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss index f29090f1a..ce443fab4 100644 --- a/app/assets/stylesheets/about.scss +++ b/app/assets/stylesheets/about.scss @@ -95,6 +95,7 @@ .actions { overflow: hidden; + margin-bottom: 20px; .info { float: right; @@ -273,3 +274,61 @@ } } } + +.features-list { + display: flex; + margin-bottom: 20px; + + .features-list__column { + flex: 1 1 0; + + ul { + list-style: none; + } + + li { + margin: 0; + } + } +} + +.screenshot-with-signup { + display: flex; + margin-bottom: 20px; + + .mascot { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + img { + display: block; + margin: 0 auto; + max-width: 100%; + height: auto; + } + } + + .simple_form { + width: 300px; + flex: 0 0 auto; + background: rgba(darken($color1, 7%), 0.5); + padding: 14px; + border-radius: 4px; + box-shadow: 0 0 15px rgba($color8, 0.4); + + .actions { + margin-bottom: 0; + } + + .info { + text-align: center; + + a { + color: $color2; + } + } + } +} diff --git a/app/views/about/index.html.haml b/app/views/about/index.html.haml index 2d861d8a8..84f8e788f 100644 --- a/app/views/about/index.html.haml +++ b/app/views/about/index.html.haml @@ -20,17 +20,64 @@ Mastodon %p= t('about.about_mastodon').html_safe - %p= t('about.about_instance', instance: Rails.configuration.x.local_domain).html_safe - .screenshot= image_tag 'screenshot.png' + .screenshot-with-signup + .mascot= image_tag 'fluffy-elephant-friend.png' + + = simple_form_for(:user, url: user_registration_path) do |f| + = 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') } + + = 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') } + = f.input :password_confirmation, autocomplete: "off", placeholder: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password') } + + .actions + = f.button :button, t('about.get_started'), type: :submit + + .info + = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn' + · + = link_to t('about.about_this'), about_more_path + + %h3= t('about.features_headline') + + .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' - unless @description.blank? + %h3= t('about.description_headline', domain: Rails.configuration.x.local_domain) %p= @description.html_safe .actions .info - = link_to t('about.learn_more'), about_more_path - · = link_to t('about.terms'), terms_path · = link_to t('apps'), 'https://github.com/tootsuite/mastodon/blob/master/docs/Using-Mastodon/Apps.md' @@ -38,6 +85,3 @@ = link_to t('about.source_code'), 'https://github.com/tootsuite/mastodon' · = link_to t('about.other_instances'), 'https://github.com/tootsuite/mastodon/blob/master/docs/Using-Mastodon/List-of-Mastodon-instances.md' - - = link_to t('about.get_started'), new_user_registration_path, class: 'button webapp-btn' - = link_to t('auth.login'), new_user_session_path, class: 'button webapp-btn' diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml index a17279b1e..116ede532 100644 --- a/app/views/settings/preferences/show.html.haml +++ b/app/views/settings/preferences/show.html.haml @@ -7,7 +7,7 @@ .fields-group = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) } - = f.input :setting_default_privacy, collection: Status.visibilities.keys, wrapper: :with_label, include_blank: false, label_method: lambda { |visibility| I18n.t("statuses.visibilities.#{visibility}") }, required: false + = f.input :setting_default_privacy, collection: Status.visibilities.keys - [:direct], wrapper: :with_label, include_blank: false, label_method: lambda { |visibility| I18n.t("statuses.visibilities.#{visibility}") }, required: false .fields-group = f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff| diff --git a/config/locales/en.yml b/config/locales/en.yml index 00ae0ad8e..eaaf853b1 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2,11 +2,23 @@ en: about: about_instance: "%{instance} is a Mastodon instance." - about_mastodon: Mastodon is a free, open-source social network server. A decentralized alternative to commercial platforms, it avoids the risks of a single company monopolizing your communication. Anyone can run Mastodon and participate in the social network seamlessly. + about_mastodon: Mastodon is a free, open-source social network. A decentralized alternative to commercial platforms, it avoids the risks of a single company monopolizing your communication. Pick a server that you trust — whichever you choose, you can interact with everyone else. Anyone can run their own Mastodon instance and participate in the social network seamlessly. + about_this: About this instance business_email: 'Business e-mail:' contact: Contact + description_headline: What is %{domain}? domain_count_after: other instances domain_count_before: Connected to + features: + api: Open API for apps and services + blocks: Rich block and muting tools + characters: 500 characters per post + chronology: Timelines are chronological + ethics: 'Ethical design: no ads, no tracking' + gifv: GIFV sets and short videos + privacy: Granular, per-post privacy settings + public: Public timelines + features_headline: What sets Mastodon apart get_started: Get started learn_more: Learn more links: Links