Grid layout for tag pages (#6545)

* Use grid layout for the landing page

* Use grid layout for tag pages

* Set 2 columns width as explicit percentage for tag pages

app/javascript/styles/mastodon/about.scss

@@ -1015,93 +1015,54 @@ $small-breakpoint: 960px;
   }
 
   &.tag-page {
-    .features {
+    .grid {
-      padding: 30px 0;
+      @media screen and (min-width: $small-breakpoint) {
-
+        grid-template-columns: 33% 67%;
-      .container-alt {
+      }
-        max-width: 820px;
-
-        #mastodon-timeline {
-          margin-right: 0;
-          border-top-right-radius: 0;
-        }
-
-        .about-mastodon {
-          .about-hashtag {
-            background: darken($ui-base-color, 4%);
-            padding: 0 20px 20px 30px;
-            border-radius: 0 5px 5px 0;
-
-            .brand {
-              padding-top: 20px;
-              margin-bottom: 20px;
-
-              img {
-                height: 48px;
-                width: auto;
-              }
-            }
-
-            p {
-              strong {
-                color: $ui-secondary-color;
-                font-weight: 700;
-              }
-            }
 
-            .cta {
+      .column-2 {
-              margin: 0;
+        grid-column: 2;
+        grid-row: 1;
+      }
+    }
 
-              .button {
+    .brand {
-                margin-right: 4px;
+      text-align: unset;
-              }
+      padding: 0;
-            }
-          }
 
-          .features-list {
+      img {
-            margin-left: 30px;
+        height: 48px;
-            margin-right: 10px;
+        width: auto;
-          }
-        }
       }
     }
 
-    @media screen and (max-width: 675px) {
+    .cta {
-      .features {
+      margin: 0;
-        padding: 10px 0;
 
-        .container-alt {
+      .button {
-          display: flex;
+        margin-right: 4px;
-          flex-direction: column;
+      }
-
+    }
-          #mastodon-timeline {
-            order: 2;
-            flex: 0 0 auto;
-            height: 60vh;
-            margin-bottom: 20px;
-            border-top-right-radius: 4px;
-          }
 
-          .about-mastodon {
+    @media screen and (max-width: $column-breakpoint) {
-            order: 1;
+      .grid {
-            flex: 0 0 auto;
+        .column-1 {
-            max-width: 100%;
+          grid-column: 1;
+          grid-row: 2;
+        }
 
-            .about-hashtag {
+        .column-2 {
-              background: unset;
+          grid-column: 1;
-              padding: 0;
+          grid-row: 1;
-              border-radius: 0;
+        }
+      }
 
-              .cta {
+      .brand {
-                margin: 20px 0;
+        margin: 0;
-              }
+      }
-            }
 
-            .features-list {
+      .landing-page__features {
-              display: none;
+        display: none;
-            }
-          }
-        }
       }
     }
   }

app/views/tags/_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'

app/views/tags/show.html.haml

@@ -6,48 +6,31 @@
   = javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous'
   = render 'og'
 
-.landing-page.tag-page
+.landing-page.tag-page.alternative
   .features
     .container
-      #mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) } }
+      .grid
+        .column-1
+          #mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) } }
 
-      .about-mastodon
+        .column-2
-        .about-hashtag
+          .about-mastodon
-          .brand
+            .about-hashtag.landing-page__information
-            = link_to root_url do
+              .brand
-              = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+                = link_to root_url do
+                  = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
 
-          %p= t 'about.about_hashtag_html', hashtag: @tag.name
+              %p= t 'about.about_hashtag_html', hashtag: @tag.name
 
-          .cta
+              .cta
-            - if user_signed_in?
+                - if user_signed_in?
-              = link_to t('settings.back'), root_path, class: 'button button-secondary'
+                  = link_to t('settings.back'), root_path, class: 'button button-secondary'
-            - else
+                - else
-              = link_to t('auth.login'), new_user_session_path, class: 'button button-secondary'
+                  = link_to t('auth.login'), new_user_session_path, class: 'button button-secondary'
-            = link_to t('about.learn_more'), about_path, class: 'button button-alternative'
+                = link_to t('about.learn_more'), about_path, class: 'button button-alternative'
 
-        .features-list
+            .landing-page__features.landing-page__information
-          .features-list__row
+              %h3= t 'about.what_is_mastodon'
-            .text
+              %p= t 'about.about_mastodon_html'
-              %h6= t 'about.features.real_conversation_title'
+
-              = t 'about.features.real_conversation_body'
+              = render 'features'
-            .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'