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
This commit is contained in:
Lynx Kotoura 2018-02-27 01:43:45 +09:00 committed by Eugen Rochko
parent 3a6ace4874
commit 7150f2e9d3
3 changed files with 86 additions and 117 deletions

View File

@ -1015,26 +1015,20 @@ $small-breakpoint: 960px;
} }
&.tag-page { &.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 { .column-2 {
.about-hashtag { grid-column: 2;
background: darken($ui-base-color, 4%); grid-row: 1;
padding: 0 20px 20px 30px; }
border-radius: 0 5px 5px 0; }
.brand { .brand {
padding-top: 20px; text-align: unset;
margin-bottom: 20px; padding: 0;
img { img {
height: 48px; height: 48px;
@ -1042,13 +1036,6 @@ $small-breakpoint: 960px;
} }
} }
p {
strong {
color: $ui-secondary-color;
font-weight: 700;
}
}
.cta { .cta {
margin: 0; margin: 0;
@ -1056,53 +1043,27 @@ $small-breakpoint: 960px;
margin-right: 4px; margin-right: 4px;
} }
} }
@media screen and (max-width: $column-breakpoint) {
.grid {
.column-1 {
grid-column: 1;
grid-row: 2;
} }
.features-list { .column-2 {
margin-left: 30px; grid-column: 1;
margin-right: 10px; grid-row: 1;
}
}
} }
} }
@media screen and (max-width: 675px) { .brand {
.features { margin: 0;
padding: 10px 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;
} }
.about-mastodon { .landing-page__features {
order: 1;
flex: 0 0 auto;
max-width: 100%;
.about-hashtag {
background: unset;
padding: 0;
border-radius: 0;
.cta {
margin: 20px 0;
}
}
.features-list {
display: none; display: none;
} }
} }
} }
} }
}
}
}

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'

View File

@ -6,13 +6,16 @@
= javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous' = javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous'
= render 'og' = render 'og'
.landing-page.tag-page .landing-page.tag-page.alternative
.features .features
.container .container
.grid
.column-1
#mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) } } #mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) } }
.column-2
.about-mastodon .about-mastodon
.about-hashtag .about-hashtag.landing-page__information
.brand .brand
= link_to root_url do = link_to root_url do
= image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon' = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
@ -26,28 +29,8 @@
= 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'