commit: a40167cf4d51743965a90f1f7496b5a1e9e25f18
parent: 18513a978aecd36bf61a5cd7dba08f9f20729de9
Author: Lynx Kotoura <admin@sanin.link>
Date: Tue, 27 Feb 2018 00:19:07 +0900
Better grid layout for the landing page (#6543)
* Use grid layout for the landing page
* Fix column settings
Set the ratio explicitly
* Improve information board
Diffstat:
2 files changed, 262 insertions(+), 135 deletions(-)
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
@@ -15,117 +15,172 @@ $small-breakpoint: 960px;
}
}
-.show-xs,
-.show-sm {
- display: none;
-}
-.show-m {
- display: block;
-}
-@media screen and (max-width: $small-breakpoint) {
- .hide-sm {
- display: none !important;
- }
+.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;
+ }
- .show-sm {
- display: block !important;
- }
-}
+ .column-1 {
+ grid-column: 1;
+ grid-row: 1;
+ }
-@media screen and (max-width: $column-breakpoint) {
- .hide-xs {
- display: none !important;
- }
+ .column-2 {
+ grid-column: 2;
+ grid-row: 1;
+ }
+
+ .column-3 {
+ grid-column: 3;
+ grid-row: 1 / 3;
+ }
- .show-xs {
- display: block !important;
+ .column-4 {
+ grid-column: 1 / 3;
+ grid-row: 2;
+ }
}
-}
-.row {
- display: flex;
- flex-wrap: wrap;
- margin: 0 -5px;
+ @media screen and (max-width: $small-breakpoint) {
- @for $i from 1 through 15 {
- .column-#{$i} {
- box-sizing: border-box;
- min-height: 1px;
- flex: 0 0 percentage($i / 15);
- max-width: percentage($i / 15);
- padding: 0 5px;
+ .grid {
+ grid-template-columns: 40% 60%;
- @media screen and (max-width: $small-breakpoint) {
- &-sm {
- box-sizing: border-box;
- min-height: 1px;
- flex: 0 0 percentage($i / 15);
- max-width: percentage($i / 15);
- padding: 0 5px;
+ .column-0 {
+ display: none;
+ }
- @media screen and (max-width: $column-breakpoint) {
- max-width: 100%;
- flex: 0 0 100%;
- margin-bottom: 10px;
+ .column-1 {
+ grid-column: 1;
+ grid-row: 1;
- &:last-child {
- margin-bottom: 0;
- }
- }
+ &.non-preview .landing-page__forms {
+ height: 100%;
}
}
- @media screen and (max-width: $column-breakpoint) {
- max-width: 100%;
- flex: 0 0 100%;
- margin-bottom: 10px;
+ .column-2 {
+ grid-column: 2;
+ grid-row: 1 / 3;
- &:last-child {
- margin-bottom: 0;
+ &.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;
}
}
}
}
-}
-.column-flex {
- display: flex;
- flex-direction: column;
-}
+ @media screen and (max-width: $column-breakpoint) {
+ .grid {
+ grid-template-columns: auto;
-.separator-or {
- position: relative;
- margin: 40px 0;
- text-align: center;
+ .column-0 {
+ display: block;
+ grid-column: 1;
+ grid-row: 1;
+ }
- &::before {
- content: "";
- display: block;
- width: 100%;
- height: 0;
- border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
- position: absolute;
- top: 50%;
- left: 0;
+ .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;
+ }
+ }
+ }
}
- span {
- display: inline-block;
- background: $ui-base-color;
- font-size: 12px;
- font-weight: 500;
- color: $ui-primary-color;
- text-transform: uppercase;
+ .column-flex {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .separator-or {
position: relative;
- z-index: 1;
- padding: 0 8px;
- cursor: default;
+ 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: $ui-primary-color;
+ text-transform: uppercase;
+ position: relative;
+ z-index: 1;
+ padding: 0 8px;
+ cursor: default;
+ }
}
-}
-.landing-page {
p,
li {
font-family: 'mastodon-font-sans-serif', sans-serif;
@@ -539,6 +594,7 @@ $small-breakpoint: 960px;
img {
position: static;
+ padding: 10px 0;
}
@media screen and (max-width: $small-breakpoint) {
@@ -558,18 +614,33 @@ $small-breakpoint: 960px;
}
&__call-to-action {
- margin-bottom: 10px;
background: darken($ui-base-color, 4%);
border-radius: 4px;
padding: 25px 40px;
overflow: hidden;
.row {
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap;
+ justify-content: space-between;
align-items: center;
}
- .information-board__section {
- padding: 0;
+ .row__information-board {
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+
+ .information-board__section {
+ flex: 1 0 80px;
+ padding: 0 5px;
+ }
+ }
+
+ .row__mascot {
+ flex: 1;
+ margin: 10px -50px 0 0;
}
}
@@ -619,6 +690,8 @@ $small-breakpoint: 960px;
&__short-description {
.row {
+ display: flex;
+ flex-wrap: wrap;
align-items: center;
margin-bottom: 40px;
}
@@ -668,7 +741,6 @@ $small-breakpoint: 960px;
height: 100%;
@media screen and (max-width: $small-breakpoint) {
- margin-bottom: 10px;
height: auto;
}
@@ -717,6 +789,7 @@ $small-breakpoint: 960px;
width: 100%;
flex: 1 1 auto;
overflow: hidden;
+ height: 100%;
.column-header {
color: inherit;
diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml
@@ -8,51 +8,100 @@
.landing-page.alternative
.container
- .row
- .column-4.hide-sm.show-xs.show-m
- .landing-page__forms
- .brand
- = link_to root_url do
- = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
-
- .hide-xs
+ .grid
+ .column-0
+ .brand
+ = link_to root_url do
+ = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+
+ - if Setting.timeline_preview
+ .column-1
+ .landing-page__forms
+ .brand
+ = link_to root_url do
+ = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+
= render 'forms'
- .column-7.column-9-sm
- .landing-page__hero
- = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title
+ - else
+ .column-1.non-preview
+ .landing-page__forms
+ .brand
+ = link_to root_url do
+ = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
- .landing-page__information
- .landing-page__short-description
+ = render 'forms'
+
+ - if Setting.timeline_preview
+ .column-2
+ .landing-page__hero
+ = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title
+
+ .landing-page__information
+ .landing-page__short-description
+ .row
+ .landing-page__logo
+ = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
+
+ %h1
+ = @instance_presenter.site_title
+ %small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)
+
+ %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
+
+ .landing-page__call-to-action
.row
- .landing-page__logo.hide-xs
- = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
+ .row__information-board
+ .information-board__section
+ %span= t 'about.user_count_before'
+ %strong= number_with_delimiter @instance_presenter.user_count
+ %span= t 'about.user_count_after'
+ .information-board__section
+ %span= t 'about.status_count_before'
+ %strong= number_with_delimiter @instance_presenter.status_count
+ %span= t 'about.status_count_after'
+ .row__mascot
+ .landing-page__mascot
+ = image_tag asset_pack_path('elephant_ui_plane.svg')
- %h1
- = @instance_presenter.site_title
- %small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)
+ - else
+ .column-2.non-preview
+ .landing-page__hero
+ = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title
- %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
+ .landing-page__information
+ .landing-page__short-description
+ .row
+ .landing-page__logo
+ = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
- .show-xs
- .landing-page__forms
- = render 'forms'
- .landing-page__call-to-action.hide-xs
- .row
- .column-5
- .landing-page__mascot
- = image_tag asset_pack_path('elephant_ui_plane.svg')
- .column-5
- .information-board__section
- %span= t 'about.user_count_before'
- %strong= number_with_delimiter @instance_presenter.user_count
- %span= t 'about.user_count_after'
- .column-5
- .information-board__section
- %span= t 'about.status_count_before'
- %strong= number_with_delimiter @instance_presenter.status_count
- %span= t 'about.status_count_after'
- .landing-page__information
+ %h1
+ = @instance_presenter.site_title
+ %small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)
+
+ %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
+
+ .landing-page__call-to-action
+ .row
+ .row__information-board
+ .information-board__section
+ %span= t 'about.user_count_before'
+ %strong= number_with_delimiter @instance_presenter.user_count
+ %span= t 'about.user_count_after'
+ .information-board__section
+ %span= t 'about.status_count_before'
+ %strong= number_with_delimiter @instance_presenter.status_count
+ %span= t 'about.status_count_after'
+ .row__mascot
+ .landing-page__mascot
+ = image_tag asset_pack_path('elephant_ui_plane.svg')
+
+ - if Setting.timeline_preview
+ .column-3
+ #mastodon-timeline{ data: { props: Oj.dump(default_props) } }
+
+ - if Setting.timeline_preview
+ .column-4.landing-page__information
.landing-page__features
%h3= t 'about.what_is_mastodon'
%p= t 'about.about_mastodon_html'
@@ -67,13 +116,18 @@
= link_to t('about.source_code'), @instance_presenter.source_url
= " (#{@instance_presenter.version_number})"
- .column-4.column-6-sm.column-flex
- .show-sm.hide-xs
- .landing-page__forms
- .brand
- = link_to root_url do
- = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+ - else
+ .column-4.non-preview.landing-page__information
+ .landing-page__features
+ %h3= t 'about.what_is_mastodon'
+ %p= t 'about.about_mastodon_html'
- = render 'forms'
- - if Setting.timeline_preview
- #mastodon-timeline{ data: { props: Oj.dump(default_props) } }
+ = render 'features'
+
+ .landing-page__features__action
+ = link_to t('about.learn_more'), 'https://joinmastodon.org/', class: 'button button-alternative'
+
+ .landing-page__footer
+ %p
+ = link_to t('about.source_code'), @instance_presenter.source_url
+ = " (#{@instance_presenter.version_number})"
