From 0dcc1950d14cc4a7725ea1572d253c538a1f74e8 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 9 Aug 2018 12:58:20 +0200 Subject: Update /terms and /about/more to use public layout (#8142) --- app/views/about/_administration.html.haml | 19 --------- app/views/about/_contact.html.haml | 22 ----------- app/views/about/more.html.haml | 66 ++++++++++++++++--------------- app/views/about/show.html.haml | 4 +- app/views/about/terms.html.haml | 14 +++---- 5 files changed, 42 insertions(+), 83 deletions(-) delete mode 100644 app/views/about/_administration.html.haml delete mode 100644 app/views/about/_contact.html.haml (limited to 'app/views/about') diff --git a/app/views/about/_administration.html.haml b/app/views/about/_administration.html.haml deleted file mode 100644 index 02286d68b..000000000 --- a/app/views/about/_administration.html.haml +++ /dev/null @@ -1,19 +0,0 @@ -.account - .account__wrapper - - if @instance_presenter.contact_account - = link_to TagManager.instance.url_for(@instance_presenter.contact_account), class: 'account__display-name' do - .account__avatar-wrapper - .account__avatar{ style: "background-image: url(#{@instance_presenter.contact_account.avatar.url})" } - %span.display-name - %bdi - %strong.display-name__html.emojify= display_name(@instance_presenter.contact_account, custom_emojify: true) - %span.display-name__account @#{@instance_presenter.contact_account.acct} - - else - .account__display-name - .account__avatar-wrapper - .account__avatar{ style: "background-image: url(#{full_asset_url('avatars/original/missing.png', skip_pipeline: true)})" } - %span.display-name - %strong= t 'about.contact_missing' - %span.display-name__account= t 'about.contact_unavailable' - - = link_to t('about.learn_more'), about_more_path, class: 'button button-alternative' diff --git a/app/views/about/_contact.html.haml b/app/views/about/_contact.html.haml deleted file mode 100644 index 3215d50b5..000000000 --- a/app/views/about/_contact.html.haml +++ /dev/null @@ -1,22 +0,0 @@ -.panel - .panel-header - = succeed ':' do - = t 'about.contact' - - if contact.site_contact_email.present? - = mail_to contact.site_contact_email, nil, title: contact.site_contact_email - - else - %span= t 'about.contact_unavailable' - .panel-body - - if contact.contact_account - .owner - .avatar= image_tag contact.contact_account.avatar.url - .name - = link_to TagManager.instance.url_for(contact.contact_account) do - %span.display_name.emojify= display_name(contact.contact_account, custom_emojify: true) - %span.username @#{contact.contact_account.acct} - - else - .owner - .avatar= image_tag full_asset_url('avatars/original/missing.png', skip_pipeline: true) - .name - %span.display_name= t 'about.contact_missing' - %span.username= t 'about.contact_unavailable' diff --git a/app/views/about/more.html.haml b/app/views/about/more.html.haml index df072b8ae..9e042ca73 100644 --- a/app/views/about/more.html.haml +++ b/app/views/about/more.html.haml @@ -5,39 +5,41 @@ = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous' = render partial: 'shared/og' -.landing-page - .header-wrapper.compact - .header - = render 'links' +.grid-3 + .column-0 + .public-account-header.public-account-header--no-bar + .public-account-header__image + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title, class: 'parallax' - .container-alt.hero - .heading - %h3= t('about.description_headline', domain: site_hostname) - %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname) + .column-1 + .landing-page__call-to-action{ dir: 'ltr' } + .row + .row__information-board + .information-board__section + %span= t 'about.user_count_before' + %strong= number_with_delimiter @instance_presenter.user_count + %span= t 'about.user_count_after' + .information-board__section + %span= t 'about.status_count_before' + %strong= number_with_delimiter @instance_presenter.status_count + %span= t 'about.status_count_after' + .row__mascot + .landing-page__mascot + = image_tag asset_pack_path('elephant_ui_plane.svg') - .information-board - .container-alt - .information-board__sections - .information-board__section - %span= t 'about.user_count_before' - %strong= number_with_delimiter @instance_presenter.user_count - %span= t 'about.user_count_after' - .information-board__section - %span= t 'about.status_count_before' - %strong= number_with_delimiter @instance_presenter.status_count - %span= t 'about.status_count_after' - .information-board__section - %span= t 'about.domain_count_before' - %strong= number_with_delimiter @instance_presenter.domain_count - %span= t 'about.domain_count_after' - = render 'contact', contact: @instance_presenter + .column-2 + .landing-page__information.contact-widget + %p= t 'about.administered_by' - .extended-description - .container-alt - = @instance_presenter.site_extended_description.html_safe.presence || t('about.extended_description_html') + = account_link_to(@instance_presenter.contact_account) - .footer-links - .container-alt - %p - = link_to t('about.source_code'), @instance_presenter.source_url - = " (#{@instance_presenter.version_number})" + - if @instance_presenter.site_contact_email.present? + %p.contact-widget__mail + = succeed ':' do + = t 'about.contact' + %br/ + = mail_to @instance_presenter.site_contact_email, nil, title: @instance_presenter.site_contact_email + + .column-3 + .box-widget + .rich-formatting= @instance_presenter.site_extended_description.html_safe.presence || t('about.extended_description_html') diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index fba46d54b..8a40b97cc 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -110,7 +110,7 @@ %p= t 'about.about_mastodon_html' %div.contact %h3= t 'about.administered_by' - = render 'administration' + = account_link_to(@instance_presenter.contact_account, link_to(t('about.learn_more'), about_more_path, class: 'button button-alternative')) = render 'features' @@ -131,7 +131,7 @@ %p= t 'about.about_mastodon_html' %div.contact %h3= t 'about.administered_by' - = render 'administration' + = account_link_to(@instance_presenter.contact_account, link_to(t('about.learn_more'), about_more_path, class: 'button button-alternative')) = render 'features' diff --git a/app/views/about/terms.html.haml b/app/views/about/terms.html.haml index c7d36ed47..9d076a91b 100644 --- a/app/views/about/terms.html.haml +++ b/app/views/about/terms.html.haml @@ -1,11 +1,9 @@ - content_for :page_title do = t('terms.title', instance: site_hostname) -.landing-page - .header-wrapper.compact - .header - = render 'links' - - .extended-description - .container-alt - = @instance_presenter.site_terms.html_safe.presence || t('terms.body_html') +.grid + .column-0 + .box-widget + .rich-formatting= @instance_presenter.site_terms.html_safe.presence || t('terms.body_html') + .column-1 + = render 'application/sidebar' -- cgit From 5b8603879f06573d51c5c33edda6f410d1af7a02 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 10 Aug 2018 06:43:02 +0200 Subject: Adjust responsive design for /about/more and /terms (#8158) Follow-up to #8142 --- app/javascript/styles/mastodon/about.scss | 11 ++++++ app/javascript/styles/mastodon/containers.scss | 53 ++++++++++++++++++++++++++ app/javascript/styles/mastodon/widgets.scss | 11 +++++- app/views/about/more.html.haml | 8 ++-- 4 files changed, 78 insertions(+), 5 deletions(-) (limited to 'app/views/about') diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index bba7044cf..228dd96f0 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -790,8 +790,10 @@ $small-breakpoint: 960px; border-radius: 4px; padding: 25px 40px; overflow: hidden; + box-sizing: border-box; .row { + width: 100%; display: flex; flex-direction: row-reverse; flex-wrap: wrap; @@ -808,11 +810,20 @@ $small-breakpoint: 960px; flex: 1 0 auto; padding: 0 10px; } + + @media screen and (max-width: $no-gap-breakpoint) { + width: 100%; + justify-content: space-between; + } } .row__mascot { flex: 1; margin: 10px -50px 0 0; + + @media screen and (max-width: $no-gap-breakpoint) { + display: none; + } } } diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index ba36d62d9..8ecedd2cb 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -141,6 +141,55 @@ grid-column: 1/3; grid-row: 3; } + + .landing-page__call-to-action { + min-height: 100%; + } + + @media screen and (max-width: 738px) { + grid-template-columns: minmax(0, 50%) minmax(0, 50%); + + .landing-page__call-to-action { + padding: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .row__information-board { + width: 100%; + justify-content: center; + align-items: center; + } + + .row__mascot { + display: none; + } + } + + @media screen and (max-width: $no-gap-breakpoint) { + grid-gap: 0; + grid-template-columns: minmax(0, 100%); + + .column-0 { + grid-column: 1; + } + + .column-1 { + grid-column: 1; + grid-row: 3; + } + + .column-2 { + grid-column: 1; + grid-row: 2; + } + + .column-3 { + grid-column: 1; + grid-row: 4; + } + } } .public-layout { @@ -334,6 +383,10 @@ .public-account-header__image, .public-account-header__image img { border-radius: 4px; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; + } } } diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 875a36959..f843f0b42 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -114,7 +114,7 @@ .landing-page__information.contact-widget { box-sizing: border-box; padding: 20px; - height: 100%; + min-height: 100%; border-radius: 4px; background: $ui-base-color; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); @@ -127,6 +127,10 @@ word-wrap: break-word; font-weight: 400; + strong { + font-weight: 500; + } + p { margin-bottom: 10px; @@ -226,7 +230,10 @@ } .moved-account-widget, -.memoriam-widget { +.memoriam-widget, +.box-widget, +.contact-widget, +.landing-page__information.contact-widget { @media screen and (max-width: $no-gap-breakpoint) { margin-bottom: 0; box-shadow: none; diff --git a/app/views/about/more.html.haml b/app/views/about/more.html.haml index 9e042ca73..8411cd276 100644 --- a/app/views/about/more.html.haml +++ b/app/views/about/more.html.haml @@ -29,14 +29,16 @@ .column-2 .landing-page__information.contact-widget - %p= t 'about.administered_by' + %p + %strong= t 'about.administered_by' = account_link_to(@instance_presenter.contact_account) - if @instance_presenter.site_contact_email.present? %p.contact-widget__mail - = succeed ':' do - = t 'about.contact' + %strong + = succeed ':' do + = t 'about.contact' %br/ = mail_to @instance_presenter.site_contact_email, nil, title: @instance_presenter.site_contact_email -- cgit