diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js index 29b41fd6e..4f183fa74 100644 --- a/app/javascript/mastodon/components/status_action_bar.js +++ b/app/javascript/mastodon/components/status_action_bar.js @@ -249,7 +249,7 @@ class StatusActionBar extends ImmutablePureComponent { return (
-
+
{shareButton} diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index d3b4a5909..b078d4d24 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -193,7 +193,6 @@ $small-breakpoint: 960px; } strong { - font-family: $font-display, sans-serif; font-weight: 500; font-size: 32px; line-height: 48px; @@ -281,6 +280,168 @@ $small-breakpoint: 960px; } .landing-page { + .grid { + display: grid; + grid-gap: 10px; + grid-template-columns: 1fr 2fr; + grid-auto-columns: 25%; + grid-auto-rows: max-content; + + .column-0 { + display: none; + } + + .column-1 { + grid-column: 1; + grid-row: 1; + } + + .column-2 { + grid-column: 2; + grid-row: 1; + } + + .column-3 { + grid-column: 3; + grid-row: 1 / 3; + } + + .column-4 { + grid-column: 1 / 3; + grid-row: 2; + } + } + + @media screen and (max-width: $small-breakpoint) { + .grid { + grid-template-columns: 40% 60%; + + .column-0 { + display: none; + } + + .column-1 { + grid-column: 1; + grid-row: 1; + + &.non-preview .landing-page__forms { + height: 100%; + } + } + + .column-2 { + grid-column: 2; + grid-row: 1 / 3; + + &.non-preview { + grid-column: 2; + grid-row: 1; + } + } + + .column-3 { + grid-column: 1; + grid-row: 2 / 4; + } + + .column-4 { + grid-column: 2; + grid-row: 3; + + &.non-preview { + grid-column: 1 / 3; + grid-row: 2; + } + } + } + } + + @media screen and (max-width: $column-breakpoint) { + .grid { + grid-template-columns: 100%; + + .column-0 { + display: block; + grid-column: 1; + grid-row: 1; + } + + .column-1 { + grid-column: 1; + grid-row: 3; + + .brand { + display: none; + } + } + + .column-2 { + grid-column: 1; + grid-row: 2; + + .landing-page__logo, + .landing-page__call-to-action { + display: none; + } + + &.non-preview { + grid-column: 1; + grid-row: 2; + } + } + + .column-3 { + grid-column: 1; + grid-row: 5; + } + + .column-4 { + grid-column: 1; + grid-row: 4; + + &.non-preview { + grid-column: 1; + grid-row: 4; + } + } + } + } + + .column-flex { + display: flex; + flex-direction: column; + } + + .separator-or { + position: relative; + margin: 40px 0; + text-align: center; + + &::before { + content: ""; + display: block; + width: 100%; + height: 0; + border-bottom: 1px solid rgba($ui-base-lighter-color, .6); + position: absolute; + top: 50%; + left: 0; + } + + span { + display: inline-block; + background: $ui-base-color; + font-size: 12px; + font-weight: 500; + color: $darker-text-color; + text-transform: uppercase; + position: relative; + z-index: 1; + padding: 0 8px; + cursor: default; + } + } + p, li { font-family: $font-sans-serif, sans-serif; @@ -297,6 +458,28 @@ $small-breakpoint: 960px; } } + .closed-registrations-message { + margin-top: 20px; + + &, + p { + text-align: center; + font-size: 12px; + line-height: 18px; + color: $darker-text-color; + margin-bottom: 0; + + a { + color: $highlight-text-color; + text-decoration: underline; + } + } + + p:last-child { + margin-bottom: 0; + } + } + em { display: inline; margin: 0; @@ -410,6 +593,187 @@ $small-breakpoint: 960px; } } + .container-alt { + width: 100%; + box-sizing: border-box; + max-width: 800px; + margin: 0 auto; + word-wrap: break-word; + } + + .header-wrapper { + padding-top: 15px; + background: $ui-base-color; + background: linear-gradient(150deg, lighten($ui-base-color, 8%), $ui-base-color); + position: relative; + + &.compact { + background: $ui-base-color; + padding-bottom: 15px; + + .hero .heading { + padding-bottom: 20px; + font-family: $font-sans-serif, sans-serif; + font-size: 16px; + font-weight: 400; + font-size: 16px; + line-height: 30px; + color: $darker-text-color; + + a { + color: $highlight-text-color; + text-decoration: underline; + } + } + } + } + + .brand { + a { + padding-left: 0; + padding-right: 0; + color: $white; + } + + img { + height: 32px; + position: relative; + top: 4px; + left: -10px; + } + } + + .header { + line-height: 30px; + overflow: hidden; + + .container-alt { + display: flex; + justify-content: space-between; + } + + .links { + position: relative; + z-index: 4; + + a { + display: flex; + justify-content: center; + align-items: center; + color: $darker-text-color; + text-decoration: none; + padding: 12px 16px; + line-height: 32px; + font-family: $font-display, sans-serif; + font-weight: 500; + font-size: 14px; + + &:hover { + color: $secondary-text-color; + } + } + + ul { + list-style: none; + margin: 0; + + li { + display: inline-block; + vertical-align: bottom; + margin: 0; + + &:first-child a { + padding-left: 0; + } + + &:last-child a { + padding-right: 0; + } + } + } + } + + .hero { + margin-top: 50px; + align-items: center; + position: relative; + + .heading { + position: relative; + z-index: 4; + padding-bottom: 150px; + } + + .simple_form, + .closed-registrations-message { + background: darken($ui-base-color, 4%); + width: 280px; + padding: 15px 20px; + border-radius: 4px 4px 0 0; + line-height: initial; + position: relative; + z-index: 4; + + .actions { + margin-bottom: 0; + + button, + .button, + .block-button { + margin-bottom: 0; + } + } + } + + .closed-registrations-message { + min-height: 330px; + display: flex; + flex-direction: column; + justify-content: space-between; + } + } + } + + .about-short { + background: darken($ui-base-color, 4%); + padding: 50px 0 30px; + font-family: $font-sans-serif, sans-serif; + font-size: 16px; + font-weight: 400; + font-size: 16px; + line-height: 30px; + color: $darker-text-color; + + a { + color: $highlight-text-color; + text-decoration: underline; + } + } + + &.alternative { + padding: 10px 0; + + .brand { + text-align: center; + padding: 30px 0; + margin-bottom: 10px; + + img { + position: static; + padding: 10px 0; + } + + @media screen and (max-width: $small-breakpoint) { + padding: 15px 0; + } + + @media screen and (max-width: $column-breakpoint) { + padding: 0; + margin-bottom: -10px; + } + } + } + &__information, &__forms { padding: 20px; @@ -603,7 +967,215 @@ $small-breakpoint: 960px; } } + &__forms { + height: 100%; + + @media screen and (max-width: $small-breakpoint) { + height: auto; + } + + @media screen and (max-width: $column-breakpoint) { + background: transparent; + box-shadow: none; + padding: 0 20px; + margin-top: 30px; + margin-bottom: 40px; + + .separator-or { + span { + background: darken($ui-base-color, 8%); + } + } + } + + hr { + margin: 40px 0; + } + + .button { + display: block; + } + + .subtle-hint a { + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + } + + #mastodon-timeline { + display: flex; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + font-family: $font-sans-serif, sans-serif; + font-size: 13px; + line-height: 18px; + font-weight: 400; + color: $primary-text-color; + width: 100%; + flex: 1 1 auto; + overflow: hidden; + height: 100%; + + .column-header { + color: inherit; + font-family: inherit; + font-size: 16px; + line-height: inherit; + font-weight: inherit; + margin: 0; + padding: 0; + } + + .column { + padding: 0; + border-radius: 4px; + overflow: hidden; + width: 100%; + } + + .scrollable { + height: 400px; + } + + p { + font-size: inherit; + line-height: inherit; + font-weight: inherit; + color: $primary-text-color; + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + + a { + color: $secondary-text-color; + text-decoration: none; + } + } + + .attachment-list__list { + margin-left: 0; + list-style: none; + + li { + font-size: inherit; + line-height: inherit; + font-weight: inherit; + margin-bottom: 0; + + a { + color: $dark-text-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + } + + @media screen and (max-width: $column-breakpoint) { + display: none; + } + } + + &__features { + & > p { + padding-right: 60px; + } + + .features-list { + margin: 40px 0; + margin-top: 30px; + } + + &__action { + text-align: center; + } + } + + .features-list { + .features-list__row { + display: flex; + padding: 10px 0; + justify-content: space-between; + + .visual { + flex: 0 0 auto; + display: flex; + align-items: center; + margin-left: 15px; + + .fa { + display: block; + color: $darker-text-color; + font-size: 48px; + } + } + + .text { + font-size: 16px; + line-height: 30px; + color: $darker-text-color; + + h6 { + font-size: inherit; + line-height: inherit; + margin-bottom: 0; + } + } + } + + @media screen and (min-width: $small-breakpoint) { + display: grid; + grid-gap: 30px; + grid-template-columns: 1fr 1fr; + grid-auto-columns: 50%; + grid-auto-rows: max-content; + } + } + + .footer-links { + padding-bottom: 50px; + text-align: right; + color: $dark-text-color; + + p { + font-size: 14px; + } + + a { + color: inherit; + text-decoration: underline; + } + } + + &__footer { + margin-top: 10px; + text-align: center; + color: $dark-text-color; + + p { + font-size: 14px; + + a { + color: inherit; + text-decoration: underline; + } + } + } + @media screen and (max-width: 840px) { + .container-alt { + padding: 0 20px; + } + .information-board { .container-alt { padding-right: 20px; @@ -639,217 +1211,109 @@ $small-breakpoint: 960px; .features .container-alt { display: block; } + + .header { + .links { + padding-top: 15px; + background: darken($ui-base-color, 4%); + + a { + padding: 12px 8px; + } + + .nav { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + } + + .brand img { + left: 0; + top: 0; + } + } + + .hero { + margin-top: 30px; + padding: 0; + + .heading { + padding: 30px 20px; + text-align: center; + } + + .simple_form, + .closed-registrations-message { + background: darken($ui-base-color, 8%); + width: 100%; + border-radius: 0; + box-sizing: border-box; + } + } + } } .cta { margin: 20px; } -} -.landing { - margin-bottom: 100px; - - @media screen and (max-width: 738px) { - margin-bottom: 0; - } - - &__brand { - display: flex; - justify-content: center; - align-items: center; - padding: 50px; - - img { - height: 52px; - } - - @media screen and (max-width: $no-gap-breakpoint) { + &.tag-page { + @media screen and (max-width: $column-breakpoint) { padding: 0; - margin-bottom: 30px; - } - } - .directory { - margin-top: 30px; - background: transparent; - box-shadow: none; - border-radius: 0; - } - - .hero-widget { - margin-top: 30px; - margin-bottom: 0; - - h4 { - padding: 10px; - text-transform: uppercase; - font-weight: 700; - font-size: 13px; - color: $darker-text-color; - } - - &__text { - border-radius: 0; - padding-bottom: 0; - } - - &__footer { - background: $ui-base-color; - padding: 10px; - border-radius: 0 0 4px 4px; - display: flex; - - &__column { - flex: 1 1 50%; + .container { + padding: 0; } - } - .account { - padding: 10px 0; - border-bottom: 0; - - .account__display-name { + #mastodon-timeline { display: flex; - align-items: center; - } - - .account__avatar { - width: 44px; - height: 44px; - background-size: 44px 44px; + height: 100vh; + border-radius: 0; } } - &__counter { - padding: 10px; - - strong { - font-family: $font-display, sans-serif; - font-size: 15px; - font-weight: 700; - display: block; + .grid { + @media screen and (min-width: $small-breakpoint) { + grid-template-columns: 33% 67%; } - span { - font-size: 14px; - color: $darker-text-color; - } - } - } - - .simple_form .user_agreement .label_input > label { - font-weight: 400; - color: $darker-text-color; - } - - .simple_form p.lead { - color: $darker-text-color; - font-size: 15px; - line-height: 20px; - font-weight: 400; - margin-bottom: 25px; - } - - &__grid { - max-width: 960px; - margin: 0 auto; - display: grid; - grid-template-columns: minmax(0, 50%) minmax(0, 50%); - grid-gap: 30px; - - @media screen and (max-width: 738px) { - grid-template-columns: minmax(0, 100%); - grid-gap: 10px; - - &__column-login { + .column-2 { + grid-column: 2; grid-row: 1; - display: flex; - flex-direction: column; - - .box-widget { - order: 2; - flex: 0 0 auto; - } - - .hero-widget { - margin-top: 0; - margin-bottom: 10px; - order: 1; - flex: 0 0 auto; - } - } - - &__column-registration { - grid-row: 2; - } - - .directory { - margin-top: 10px; } } - @media screen and (max-width: $no-gap-breakpoint) { - grid-gap: 0; + .brand { + text-align: unset; + padding: 0; - .hero-widget { - display: block; - margin-bottom: 0; - box-shadow: none; + img { + height: 48px; + width: auto; + } + } - &__img, - &__img img, - &__footer { - border-radius: 0; + .cta { + margin: 0; + + .button { + margin-right: 4px; + } + } + + @media screen and (max-width: $column-breakpoint) { + .grid { + grid-gap: 0; + + .column-1 { + grid-column: 1; + grid-row: 1; } - } - .hero-widget, - .box-widget, - .directory__tag { - border-bottom: 1px solid lighten($ui-base-color, 8%); - } - - .directory { - margin-top: 0; - - &__tag { - margin-bottom: 0; - - & > a, - & > div { - border-radius: 0; - box-shadow: none; - } - - &:last-child { - border-bottom: 0; - } + .column-2 { + display: none; } } } } } - -.brand { - position: relative; - text-decoration: none; -} - -.brand__tagline { - display: block; - position: absolute; - bottom: -10px; - left: 50px; - width: 300px; - color: $ui-primary-color; - text-decoration: none; - font-size: 14px; - - @media screen and (max-width: $no-gap-breakpoint) { - position: static; - width: auto; - margin-top: 20px; - color: $dark-text-color; - } -} - diff --git a/app/presenters/instance_presenter.rb b/app/presenters/instance_presenter.rb index f3a73209a..866eb9de9 100644 --- a/app/presenters/instance_presenter.rb +++ b/app/presenters/instance_presenter.rb @@ -8,6 +8,7 @@ class InstancePresenter :site_description, :site_extended_description, :site_terms, + :open_registrations, :closed_registrations_message, to: Setting ) 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/_forms.html.haml b/app/views/about/_forms.html.haml new file mode 100644 index 000000000..81f7173f7 --- /dev/null +++ b/app/views/about/_forms.html.haml @@ -0,0 +1,15 @@ +- if @instance_presenter.open_registrations + = render 'registration' +- else + = link_to t('auth.register_elsewhere'), 'https://joinmastodon.org', 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' diff --git a/app/views/about/_links.html.haml b/app/views/about/_links.html.haml new file mode 100644 index 000000000..f79c37e65 --- /dev/null +++ b/app/views/about/_links.html.haml @@ -0,0 +1,16 @@ +.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/' do + = "#{t('about.other_instances')}" + %i.fa.fa-external-link{ style: 'padding-left: 5px;' } diff --git a/app/views/about/_registration.html.haml b/app/views/about/_registration.html.haml index ff32ec8c4..ee4f8fe2e 100644 --- a/app/views/about/_registration.html.haml +++ b/app/views/about/_registration.html.haml @@ -1,28 +1,12 @@ = simple_form_for(new_user, url: user_registration_path) do |f| - .simple_form__overlay-area - %p.lead= t('about.federation_hint_html', instance: content_tag(:strong, site_hostname)) + = 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 - .fields-group - = f.simple_fields_for :account do |account_fields| - = account_fields.input :username, wrapper: :with_label, 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: closed_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 + = 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 - = 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: closed_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: closed_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: closed_registrations? + .actions + = f.button :button, t('auth.register'), type: :submit, class: 'button button-primary' - - if approved_registrations? - .fields-group - = f.simple_fields_for :invite_request do |invite_request_fields| - = invite_request_fields.input :text, as: :text, wrapper: :with_block_label, required: false - - .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: closed_registrations? - - .actions - = f.button :button, sign_up_message, type: :submit, class: 'button button-primary', disabled: closed_registrations? - - - if closed_registrations? && @instance_presenter.closed_registrations_message.present? - .simple_form__overlay-area__overlay - .simple_form__overlay-area__overlay__content.rich-formatting - .block-icon= fa_icon 'warning' - = @instance_presenter.closed_registrations_message.html_safe + %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 17d72895f..71cd68f22 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -7,13 +7,13 @@ .landing-page.alternative .header{ style: 'display: none' } - = image_tag asset_pack_path('header-cybre-alt.jpg'), alt: @instance_presenter.site_title + = image_pack_tag 'header-cybre-alt.jpg', alt: @instance_presenter.site_title .container .grid .column-0 .brand = link_to root_url do - = image_tag asset_pack_path('logo-cybre.png') + = image_pack_tag 'logo-cybre.png' = Setting.site_title - if Setting.timeline_preview @@ -21,7 +21,7 @@ .landing-page__forms .brand = link_to root_url do - = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon' + = image_pack_tag 'logo_full.svg', alt: 'Mastodon' = render 'forms' @@ -30,7 +30,7 @@ .landing-page__forms .brand = link_to root_url do - = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon' + = image_pack_tag 'logo_full.svg', alt: 'Mastodon' = render 'forms' @@ -43,7 +43,7 @@ .landing-page__short-description .row .landing-page__logo - = image_tag asset_pack_path('logo-cybre.png'), alt: 'Cybrespace' + = image_pack_tag 'logo-cybre.png', alt: 'Cybrespace' %h1 = @instance_presenter.site_title @@ -65,11 +65,11 @@ .row__mascot .landing-page__mascot .floats.float-1 - = image_tag asset_pack_path('floppy-3.svg') + = image_pack_tag 'floppy-3.svg' .floats.float-2 - = image_tag asset_pack_path('floppy-1.svg') + = image_pack_tag 'floppy-1.svg' .floats.float-3 - = image_tag asset_pack_path('floppy-2.svg') + = image_pack_tag 'floppy-2.svg' - else .column-2.non-preview @@ -80,7 +80,7 @@ .landing-page__short-description .row .landing-page__logo - = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon' + = image_pack_tag 'logo_transparent.svg', alt: 'Mastodon' %h1 = @instance_presenter.site_title