commit: 7150f2e9d3791720131dc77cd889acd0226d6acb
parent: 3a6ace487465bd82c3f9527deb85f0c739742f32
Author: Lynx Kotoura <admin@sanin.link>
Date: Tue, 27 Feb 2018 01:43:45 +0900
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
Diffstat:
3 files changed, 84 insertions(+), 115 deletions(-)
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
@@ -1015,93 +1015,54 @@ $small-breakpoint: 960px;
}
&.tag-page {
- .features {
- padding: 30px 0;
-
- .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;
- }
- }
+ .grid {
+ @media screen and (min-width: $small-breakpoint) {
+ grid-template-columns: 33% 67%;
+ }
- .cta {
- margin: 0;
+ .column-2 {
+ grid-column: 2;
+ grid-row: 1;
+ }
+ }
- .button {
- margin-right: 4px;
- }
- }
- }
+ .brand {
+ text-align: unset;
+ padding: 0;
- .features-list {
- margin-left: 30px;
- margin-right: 10px;
- }
- }
+ img {
+ height: 48px;
+ width: auto;
}
}
- @media screen and (max-width: 675px) {
- .features {
- padding: 10px 0;
+ .cta {
+ margin: 0;
- .container-alt {
- display: flex;
- flex-direction: column;
-
- #mastodon-timeline {
- order: 2;
- flex: 0 0 auto;
- height: 60vh;
- margin-bottom: 20px;
- border-top-right-radius: 4px;
- }
+ .button {
+ margin-right: 4px;
+ }
+ }
- .about-mastodon {
- order: 1;
- flex: 0 0 auto;
- max-width: 100%;
+ @media screen and (max-width: $column-breakpoint) {
+ .grid {
+ .column-1 {
+ grid-column: 1;
+ grid-row: 2;
+ }
- .about-hashtag {
- background: unset;
- padding: 0;
- border-radius: 0;
+ .column-2 {
+ grid-column: 1;
+ grid-row: 1;
+ }
+ }
- .cta {
- margin: 20px 0;
- }
- }
+ .brand {
+ margin: 0;
+ }
- .features-list {
- display: none;
- }
- }
- }
+ .landing-page__features {
+ display: none;
}
}
}
diff --git a/app/views/tags/_features.html.haml b/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'
diff --git a/app/views/tags/show.html.haml b/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
- .about-hashtag
- .brand
- = link_to root_url do
- = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+ .column-2
+ .about-mastodon
+ .about-hashtag.landing-page__information
+ .brand
+ = 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
- - if user_signed_in?
- = link_to t('settings.back'), root_path, class: 'button button-secondary'
- - else
- = 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'
+ .cta
+ - if user_signed_in?
+ = link_to t('settings.back'), root_path, class: 'button button-secondary'
+ - else
+ = 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'
- .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'
+ .landing-page__features.landing-page__information
+ %h3= t 'about.what_is_mastodon'
+ %p= t 'about.about_mastodon_html'
+
+ = render 'features'
