From b3b4b5a2eb21e5be6d844f35d03cf5f8b87091ae Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Sat, 14 Oct 2017 21:48:12 +0900 Subject: [PATCH] Adjust public hashtag pages (#5357) --- app/javascript/styles/about.scss | 130 +++++++++++++++++-------------- app/views/tags/show.html.haml | 28 +++++-- 2 files changed, 90 insertions(+), 68 deletions(-) diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index a15afc32c..358d86eec 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -704,7 +704,6 @@ .features #mastodon-timeline { height: 70vh; width: 100%; - min-width: 330px; margin-bottom: 50px; .column { @@ -718,85 +717,96 @@ } &.tag-page { - .brand { - padding-top: 20px; - margin-bottom: 20px; + .features { + padding: 30px 0; - img { - height: 48px; - width: auto; - } - } + .container { + max-width: 820px; - .container { - max-width: 690px; - } + #mastodon-timeline { + margin-right: 0; + border-top-right-radius: 0; + } - .cta { - margin: 40px 0; - margin-bottom: 80px; + .about-mastodon { + .about-hashtag { + background: darken($ui-base-color, 4%); + padding: 0 20px 20px 30px; + border-radius: 0 5px 5px 0; - .button { - margin-right: 4px; - } - } + .brand { + padding-top: 20px; + margin-bottom: 20px; - .about-mastodon { - max-width: 330px; + img { + height: 48px; + width: auto; + } + } - p { - strong { - color: $ui-secondary-color; - font-weight: 700; + 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) { - .container { - display: flex; - flex-direction: column; - } - .features { - padding: 20px 0; - } + padding: 10px 0; - .about-mastodon { - order: 1; - flex: 0 0 auto; - max-width: 100%; - } + .container { + display: flex; + flex-direction: column; - #mastodon-timeline { - order: 2; - flex: 0 0 auto; - height: 60vh; - } + #mastodon-timeline { + order: 2; + flex: 0 0 auto; + height: 60vh; + margin-bottom: 20px; + border-top-right-radius: 4px; + } - .cta { - margin: 20px 0; - margin-bottom: 30px; - } + .about-mastodon { + order: 1; + flex: 0 0 auto; + max-width: 100%; - .features-list { - display: none; - } + .about-hashtag { + background: unset; + padding: 0; + border-radius: 0; - .stripe { - display: none; + .cta { + margin: 20px 0; + } + } + + .features-list { + display: none; + } + } + } } } } - - .stripe { - width: 100%; - height: 360px; - overflow: hidden; - background: darken($ui-base-color, 4%); - position: absolute; - z-index: -1; - } } @keyframes floating { diff --git a/app/views/tags/show.html.haml b/app/views/tags/show.html.haml index 6266d3c0c..ea8b0faa3 100644 --- a/app/views/tags/show.html.haml +++ b/app/views/tags/show.html.haml @@ -7,29 +7,41 @@ = render 'og' .landing-page.tag-page - .stripe .features .container #mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) } } .about-mastodon - .brand - = link_to root_url do - = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon' + .about-hashtag + .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 - = link_to t('auth.login'), new_user_session_path, class: 'button button-secondary' - = link_to t('about.learn_more'), root_url, class: 'button button-alternative' + .cta + = link_to t('auth.login'), new_user_session_path, class: 'button button-secondary' + = link_to t('about.learn_more'), root_url, 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'