chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 14 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
commit 7150f2e9d3
3 changed files with 86 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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