Browse Source

Restore 2.7 landing page

cybrespace
parent
commit
555013b54d
8 changed files with 715 additions and 210 deletions
  1. +1
    -1
      app/javascript/mastodon/components/status_action_bar.js
  2. +640
    -176
      app/javascript/styles/mastodon/about.scss
  3. +1
    -0
      app/presenters/instance_presenter.rb
  4. +25
    -0
      app/views/about/_features.html.haml
  5. +15
    -0
      app/views/about/_forms.html.haml
  6. +16
    -0
      app/views/about/_links.html.haml
  7. +8
    -24
      app/views/about/_registration.html.haml
  8. +9
    -9
      app/views/about/show.html.haml

+ 1
- 1
app/javascript/mastodon/components/status_action_bar.js View File

@@ -249,7 +249,7 @@ class StatusActionBar extends ImmutablePureComponent {

return (
<div className='status__action-bar'>
<div className='status__action-bar__counter'><IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} />
<div className='status__action-bar__counter'><IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
<IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='floppy-o' onClick={this.handleFavouriteClick} />
{shareButton}


+ 640
- 176
app/javascript/styles/mastodon/about.scss View File

@@ -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,253 +967,353 @@ $small-breakpoint: 960px;
}
}

@media screen and (max-width: 840px) {
.information-board {
.container-alt {
padding-right: 20px;
}
&__forms {
height: 100%;

.panel {
position: static;
margin-top: 20px;
width: 100%;
border-radius: 4px;
@media screen and (max-width: $small-breakpoint) {
height: auto;
}

.panel-header {
text-align: center;
@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;
}
}
}

@media screen and (max-width: 675px) {
.header-wrapper {
padding-top: 0;
#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;
}

&.compact {
padding-bottom: 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;
}

&.compact .hero .heading {
text-align: initial;
a {
color: $secondary-text-color;
text-decoration: none;
}
}

.header .container-alt,
.features .container-alt {
display: block;
}
}
.attachment-list__list {
margin-left: 0;
list-style: none;

.cta {
margin: 20px;
}
}
li {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
margin-bottom: 0;

.landing {
margin-bottom: 100px;
a {
color: $dark-text-color;
text-decoration: none;

@media screen and (max-width: 738px) {
margin-bottom: 0;
&:hover {
text-decoration: underline;
}
}
}
}

@media screen and (max-width: $column-breakpoint) {
display: none;
}
}

&__brand {
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
&__features {
& > p {
padding-right: 60px;
}

img {
height: 52px;
.features-list {
margin: 40px 0;
margin-top: 30px;
}

@media screen and (max-width: $no-gap-breakpoint) {
padding: 0;
margin-bottom: 30px;
&__action {
text-align: center;
}
}

.directory {
margin-top: 30px;
background: transparent;
box-shadow: none;
border-radius: 0;
.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;
}
}

.hero-widget {
margin-top: 30px;
margin-bottom: 0;
.footer-links {
padding-bottom: 50px;
text-align: right;
color: $dark-text-color;

h4 {
padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: $darker-text-color;
p {
font-size: 14px;
}

&__text {
border-radius: 0;
padding-bottom: 0;
a {
color: inherit;
text-decoration: underline;
}
}

&__footer {
background: $ui-base-color;
padding: 10px;
border-radius: 0 0 4px 4px;
display: flex;
&__footer {
margin-top: 10px;
text-align: center;
color: $dark-text-color;

p {
font-size: 14px;

&__column {
flex: 1 1 50%;
a {
color: inherit;
text-decoration: underline;
}
}
}

.account {
padding: 10px 0;
border-bottom: 0;
@media screen and (max-width: 840px) {
.container-alt {
padding: 0 20px;
}

.account__display-name {
display: flex;
align-items: center;
.information-board {
.container-alt {
padding-right: 20px;
}

.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
.panel {
position: static;
margin-top: 20px;
width: 100%;
border-radius: 4px;

.panel-header {
text-align: center;
}
}
}
}

&__counter {
padding: 10px;
@media screen and (max-width: 675px) {
.header-wrapper {
padding-top: 0;

strong {
font-family: $font-display, sans-serif;
font-size: 15px;
font-weight: 700;
display: block;
&.compact {
padding-bottom: 0;
}

span {
font-size: 14px;
color: $darker-text-color;
&.compact .hero .heading {
text-align: initial;
}
}
}

.simple_form .user_agreement .label_input > label {
font-weight: 400;
color: $darker-text-color;
}
.header .container-alt,
.features .container-alt {
display: block;
}

.simple_form p.lead {
color: $darker-text-color;
font-size: 15px;
line-height: 20px;
font-weight: 400;
margin-bottom: 25px;
}
.header {
.links {
padding-top: 15px;
background: darken($ui-base-color, 4%);

&__grid {
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
grid-gap: 30px;
a {
padding: 12px 8px;
}

@media screen and (max-width: 738px) {
grid-template-columns: minmax(0, 100%);
grid-gap: 10px;
.nav {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}

&__column-login {
grid-row: 1;
display: flex;
flex-direction: column;
.brand img {
left: 0;
top: 0;
}
}

.box-widget {
order: 2;
flex: 0 0 auto;
.hero {
margin-top: 30px;
padding: 0;

.heading {
padding: 30px 20px;
text-align: center;
}

.hero-widget {
margin-top: 0;
margin-bottom: 10px;
order: 1;
flex: 0 0 auto;
.simple_form,
.closed-registrations-message {
background: darken($ui-base-color, 8%);
width: 100%;
border-radius: 0;
box-sizing: border-box;
}
}
}
}

&__column-registration {
grid-row: 2;
.cta {
margin: 20px;
}

&.tag-page {
@media screen and (max-width: $column-breakpoint) {
padding: 0;

.container {
padding: 0;
}

.directory {
margin-top: 10px;
#mastodon-timeline {
display: flex;
height: 100vh;
border-radius: 0;
}
}

@media screen and (max-width: $no-gap-breakpoint) {
grid-gap: 0;

.hero-widget {
display: block;
margin-bottom: 0;
box-shadow: none;

&__img,
&__img img,
&__footer {
border-radius: 0;
}
.grid {
@media screen and (min-width: $small-breakpoint) {
grid-template-columns: 33% 67%;
}

.hero-widget,
.box-widget,
.directory__tag {
border-bottom: 1px solid lighten($ui-base-color, 8%);
.column-2 {
grid-column: 2;
grid-row: 1;
}
}

.directory {
margin-top: 0;
.brand {
text-align: unset;
padding: 0;

&__tag {
margin-bottom: 0;
img {
height: 48px;
width: auto;
}
}

& > a,
& > div {
border-radius: 0;
box-shadow: none;
}
.cta {
margin: 0;

&:last-child {
border-bottom: 0;
}
}
.button {
margin-right: 4px;
}
}
}
}

.brand {
position: relative;
text-decoration: none;
}
@media screen and (max-width: $column-breakpoint) {
.grid {
grid-gap: 0;

.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;
.column-1 {
grid-column: 1;
grid-row: 1;
}

.column-2 {
display: none;
}
}
}
}
}


+ 1
- 0
app/presenters/instance_presenter.rb View File

@@ -8,6 +8,7 @@ class InstancePresenter
:site_description,
:site_extended_description,
:site_terms,
:open_registrations,
:closed_registrations_message,
to: Setting
)


+ 25
- 0
app/views/about/_features.html.haml View 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'

+ 15
- 0
app/views/about/_forms.html.haml View File

@@ -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'

+ 16
- 0
app/views/about/_links.html.haml View File

@@ -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;' }

+ 8
- 24
app/views/about/_registration.html.haml View File

@@ -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)

+ 9
- 9
app/views/about/show.html.haml View File

@@ -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


Loading…
Cancel
Save