Improved landing page

This commit is contained in:
Eugen Rochko 2017-03-21 19:18:37 +01:00
parent 6b1db5c2b2
commit 8803ca9efe
5 changed files with 124 additions and 9 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View file

@ -95,6 +95,7 @@
.actions { .actions {
overflow: hidden; overflow: hidden;
margin-bottom: 20px;
.info { .info {
float: right; 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;
}
}
}
}

View file

@ -20,17 +20,64 @@
Mastodon Mastodon
%p= t('about.about_mastodon').html_safe %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? - unless @description.blank?
%h3= t('about.description_headline', domain: Rails.configuration.x.local_domain)
%p= @description.html_safe %p= @description.html_safe
.actions .actions
.info .info
= link_to t('about.learn_more'), about_more_path
·
= link_to t('about.terms'), terms_path = link_to t('about.terms'), terms_path
· ·
= link_to t('apps'), 'https://github.com/tootsuite/mastodon/blob/master/docs/Using-Mastodon/Apps.md' = 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.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.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'

View file

@ -7,7 +7,7 @@
.fields-group .fields-group
= f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) } = 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 .fields-group
= f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff| = f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff|

View file

@ -2,11 +2,23 @@
en: en:
about: about:
about_instance: "<em>%{instance}</em> is a Mastodon instance." about_instance: "<em>%{instance}</em> is a Mastodon instance."
about_mastodon: Mastodon is a <em>free, open-source</em> social network server. A <em>decentralized</em> alternative to commercial platforms, it avoids the risks of a single company monopolizing your communication. Anyone can run Mastodon and participate in the <em>social network</em> seamlessly. about_mastodon: Mastodon is a <em>free, open-source</em> social network. A <em>decentralized</em> alternative to commercial platforms, it avoids the risks of a single company monopolizing your communication. Pick a server that you trust &mdash; whichever you choose, you can interact with everyone else. Anyone can run their own Mastodon instance and participate in the <em>social network</em> seamlessly.
about_this: About this instance
business_email: 'Business e-mail:' business_email: 'Business e-mail:'
contact: Contact contact: Contact
description_headline: What is %{domain}?
domain_count_after: other instances domain_count_after: other instances
domain_count_before: Connected to 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 get_started: Get started
learn_more: Learn more learn_more: Learn more
links: Links links: Links