me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Grid layout for tag pages (#6545)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

117
app/javascript/styles/mastodon/about.scss
View file

@ -1015,93 +1015,54 @@ $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 { .column-2 {
max-width: 820px; grid-column: 2;
grid-row: 1;
#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 {
margin: 0;
.button {
margin-right: 4px;
}
}
}
.features-list {
margin-left: 30px;
margin-right: 10px;
}
}
} }
} }
@media screen and (max-width: 675px) { .brand {
.features { text-align: unset;
padding: 10px 0; padding: 0;
.container-alt { img {
display: flex; height: 48px;
flex-direction: column; width: auto;
}
}
#mastodon-timeline { .cta {
order: 2; margin: 0;
flex: 0 0 auto;
height: 60vh;
margin-bottom: 20px;
border-top-right-radius: 4px;
}
.about-mastodon { .button {
order: 1; margin-right: 4px;
flex: 0 0 auto; }
max-width: 100%; }
.about-hashtag { @media screen and (max-width: $column-breakpoint) {
background: unset; .grid {
padding: 0; .column-1 {
border-radius: 0; grid-column: 1;
grid-row: 2;
.cta {
margin: 20px 0;
}
}
.features-list {
display: none;
}
}
} }
.column-2 {
grid-column: 1;
grid-row: 1;
}
}
.brand {
margin: 0;
}
.landing-page__features {
display: none;
} }
} }
} }

25
app/views/tags/_features.html.haml Normal file
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'

61
app/views/tags/show.html.haml
View file

@ -6,48 +6,31 @@
= 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
#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'