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

app/javascript/styles/mastodon/about.scss

@@ -15,87 +15,143 @@ $small-breakpoint: 960px;
   }
 }
 
-.show-xs,
+
-.show-sm {
+
+.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-m {
-  display: block;
-}
-
-@media screen and (max-width: $small-breakpoint) {
-  .hide-sm {
-    display: none !important;
     }
 
-  .show-sm {
+    .column-1 {
-    display: block !important;
+      grid-column: 1;
-  }
+      grid-row: 1;
-}
-
-@media screen and (max-width: $column-breakpoint) {
-  .hide-xs {
-    display: none !important;
     }
 
-  .show-xs {
+    .column-2 {
-    display: block !important;
+      grid-column: 2;
+      grid-row: 1;
     }
-}
 
-.row {
+    .column-3 {
-  display: flex;
+      grid-column: 3;
-  flex-wrap: wrap;
+      grid-row: 1 / 3;
-  margin: 0 -5px;
+    }
 
-  @for $i from 1 through 15 {
+    .column-4 {
-    .column-#{$i} {
+      grid-column: 1 / 3;
-      box-sizing: border-box;
+      grid-row: 2;
-      min-height: 1px;
+    }
-      flex: 0 0 percentage($i / 15);
+  }
-      max-width: percentage($i / 15);
-      padding: 0 5px;
 
   @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;
 
-          @media screen and (max-width: $column-breakpoint) {
+    .grid {
-            max-width: 100%;
+      grid-template-columns: 40% 60%;
-            flex: 0 0 100%;
-            margin-bottom: 10px;
 
-            &:last-child {
+      .column-0 {
-              margin-bottom: 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) {
-        max-width: 100%;
+    .grid {
-        flex: 0 0 100%;
+      grid-template-columns: auto;
-        margin-bottom: 10px;
 
-        &:last-child {
+      .column-0 {
-          margin-bottom: 0;
+        display: block;
+        grid-column: 1;
+        grid-row: 1;
       }
-      }
-    }
-  }
-}
 
-.column-flex {
+      .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 {
+  .separator-or {
     position: relative;
     margin: 40px 0;
     text-align: center;
@@ -123,9 +179,8 @@ $small-breakpoint: 960px;
       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;
     }
 
+    .row__information-board {
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-end;
+
       .information-board__section {
-      padding: 0;
+        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;

app/views/about/show.html.haml

@@ -8,24 +8,39 @@
 
 .landing-page.alternative
   .container
-    .row
+    .grid
-      .column-4.hide-sm.show-xs.show-m
+      .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'
 
-          .hide-xs
             = render 'forms'
 
-      .column-7.column-9-sm
+      - else
+        .column-1.non-preview
+          .landing-page__forms
+            .brand
+              = link_to root_url do
+                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+
+            = 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.hide-xs
+                .landing-page__logo
                   = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
 
                 %h1
@@ -34,25 +49,59 @@
 
               %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
 
-        .show-xs
+          .landing-page__call-to-action
-          .landing-page__forms
-            = render 'forms'
-        .landing-page__call-to-action.hide-xs
             .row
-            .column-5
+              .row__information-board
-              .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'
+              .row__mascot
+                .landing-page__mascot
+                  = image_tag asset_pack_path('elephant_ui_plane.svg')
+
+      - 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
+
           .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
+              .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
+      - else
-        .show-sm.hide-xs
+        .column-4.non-preview.landing-page__information
-          .landing-page__forms
+          .landing-page__features
-            .brand
+            %h3= t 'about.what_is_mastodon'
-              = link_to root_url do
+            %p= t 'about.about_mastodon_html'
-                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
 
-            = render 'forms'
+            = render 'features'
-        - if Setting.timeline_preview
+
-          #mastodon-timeline{ data: { props: Oj.dump(default_props) } }
+            .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})"