Skip to content
Snippets Groups Projects
Commit 7150f2e9 authored by Lynx Kotoura's avatar Lynx Kotoura Committed by Eugen Rochko
Browse files

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
parent 3a6ace48
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/javascript/styles/mastodon/about.scss
+ 37
− 76
View file @ 7150f2e9
......@@ -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;
}
}
}
......
app/views/tags/_features.html.haml 0 → 100644
+ 25
− 0
View file @ 7150f2e9
.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
+ 22
− 39
View file @ 7150f2e9
......@@ -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'
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment