From a4c56505f41a191a21e595c26060510df3f2b909 Mon Sep 17 00:00:00 2001 From: Fire Demon Date: Wed, 26 Aug 2020 15:26:51 -0500 Subject: [UI] Merge landing and about page --- app/controllers/about_controller.rb | 6 +- .../flavours/glitch/styles/containers.scss | 12 ++ .../flavours/glitch/styles/monsterfork/about.scss | 9 ++ .../flavours/glitch/styles/monsterfork/index.scss | 1 + .../flavours/glitch/styles/variables.scss | 2 +- app/javascript/flavours/glitch/styles/widgets.scss | 1 - app/views/about/show.html.haml | 174 +++++++++++++-------- config/routes.rb | 2 +- 8 files changed, 134 insertions(+), 73 deletions(-) create mode 100644 app/javascript/flavours/glitch/styles/monsterfork/about.scss diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb index 1f8f9ff58..bf3d3ff42 100644 --- a/app/controllers/about_controller.rb +++ b/app/controllers/about_controller.rb @@ -11,9 +11,7 @@ class AboutController < ApplicationController skip_before_action :require_functional!, only: [:more, :terms] - def show; end - - def more + def show flash.now[:notice] = I18n.t('about.instance_actor_flash') if params[:instance_actor] toc_generator = TOCGenerator.new(@instance_presenter.site_extended_description) @@ -24,6 +22,8 @@ class AboutController < ApplicationController @allows = DomainAllow.where(hidden: false) if display_allows? end + alias more show + def terms; end helper_method :display_allows? diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index 0afdeb332..eab6e480c 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -208,6 +208,18 @@ margin-bottom: 10px; } + @media screen and (max-width: 800px) { + .column-3 { + grid-column: 3 / 5; + grid-row: 3; + } + + .column-4 { + grid-column: 1/3; + grid-row: 3; + } + } + @media screen and (max-width: 738px) { grid-template-columns: minmax(0, 50%) minmax(0, 50%); diff --git a/app/javascript/flavours/glitch/styles/monsterfork/about.scss b/app/javascript/flavours/glitch/styles/monsterfork/about.scss new file mode 100644 index 000000000..4ab9cfa7c --- /dev/null +++ b/app/javascript/flavours/glitch/styles/monsterfork/about.scss @@ -0,0 +1,9 @@ +.box-widget { + .simple_form p.lead { + color: $darker-text-color; + font-size: 15px; + line-height: 20px; + font-weight: bold; + margin-bottom: 25px; + } +} \ No newline at end of file diff --git a/app/javascript/flavours/glitch/styles/monsterfork/index.scss b/app/javascript/flavours/glitch/styles/monsterfork/index.scss index 841415620..9888adfe4 100644 --- a/app/javascript/flavours/glitch/styles/monsterfork/index.scss +++ b/app/javascript/flavours/glitch/styles/monsterfork/index.scss @@ -1 +1,2 @@ @import 'components/index'; +@import 'about'; \ No newline at end of file diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 8d1d394f5..9ddabe6f4 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -49,7 +49,7 @@ $media-modal-media-max-width: 100%; // put margins on top and bottom of image to avoid the screen covered by image. $media-modal-media-max-height: 80%; -$no-gap-breakpoint: 415px; +$no-gap-breakpoint: 700px; $font-sans-serif: 'opensans' !default; $font-display: 'montserrat' !default; diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss index 531425573..da136da03 100644 --- a/app/javascript/flavours/glitch/styles/widgets.scss +++ b/app/javascript/flavours/glitch/styles/widgets.scss @@ -556,7 +556,6 @@ $fluid-breakpoint: $maximum-width + 20px; .table-of-contents { background: darken($ui-base-color, 4%); - min-height: 100%; font-size: 14px; border-radius: 4px; diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index b80a9207f..42aaa95f3 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -6,75 +6,115 @@ %script{ src: '/registration.js', type: 'text/javascript', crossorigin: 'anonymous' }/ = render partial: 'shared/og' -.landing - .landing__brand - = link_to root_url, class: 'brand' do - = svg_logo_full - %span.brand__tagline=t 'about.tagline' - - .landing__grid - .landing__grid__column.landing__grid__column-registration +.grid-4 + .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('media/images/preview.jpg'), alt: @instance_presenter.site_title, class: 'parallax' + + .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', count: @instance_presenter.user_count + .information-board__section + %span= t 'about.status_count_before' + %strong= number_with_delimiter @instance_presenter.status_count + %span= t 'about.status_count_after', count: @instance_presenter.status_count + .row__mascot + .landing-page__mascot + = image_tag @instance_presenter.mascot&.file&.url || asset_pack_path('media/images/elephant_ui_plane.svg'), alt: '' + + .column-2 + .contact-widget + %h4= t 'about.administered_by' + + = account_link_to(@instance_presenter.contact_account) + + - if @instance_presenter.site_contact_email.present? + %h4 + = succeed ':' do + = t 'about.contact' + + = mail_to @instance_presenter.site_contact_email, nil, title: @instance_presenter.site_contact_email + + .column-3 + = render 'application/flashes' + + .box-widget + = render 'registration' + + %br + + - if @contents.blank? && ((!display_allows? || @allows&.empty?) && (!display_blocks? || @blocks&.empty?)) + = nothing_here + - else .box-widget - = render 'registration' - - .directory - - if Setting.profile_directory - .directory__tag - = optional_link_to Setting.profile_directory, explore_path do - %h4 - = fa_icon 'address-book fw' - = t('about.discover_users') - %small= t('about.browse_directory') - - .avatar-stack - - @instance_presenter.sample_accounts.each do |account| - = image_tag current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url, alt: '', class: 'account__avatar' - - - if Setting.timeline_preview - .directory__tag - = optional_link_to Setting.timeline_preview, public_timeline_path do - %h4 - = fa_icon 'globe fw' - = t('about.see_whats_happening') - %small= t('about.browse_public_posts') + .rich-formatting + = @contents.html_safe + + - if display_allows? && !@allows.empty? + %h2#available-content= t('about.available_content') + %p= t('about.available_content_html') + = render partial: 'domain_allows', locals: { domain_allows: @allows } + + - if display_blocks? && !@blocks.empty? + %h2#unavailable-content= t('about.unavailable_content') + %p= t('about.unavailable_content_html') + + - if (blocks = @blocks.select(&:reject_media?)) && !blocks.empty? + %h3= t('about.unavailable_content_description.rejecting_media_title') + %p= t('about.unavailable_content_description.rejecting_media') + = render partial: 'domain_blocks', locals: { domain_blocks: blocks } + - if (blocks = @blocks.select(&:silence?)) && !blocks.empty? + %h3= t('about.unavailable_content_description.silenced_title') + %p= t('about.unavailable_content_description.silenced') + = render partial: 'domain_blocks', locals: { domain_blocks: blocks } + - if (blocks = @blocks.select(&:suspend?)) && !blocks.empty? + %h3= t('about.unavailable_content_description.suspended_title') + %p= t('about.unavailable_content_description.suspended') + = render partial: 'domain_blocks', locals: { domain_blocks: blocks } + + .column-4 + .box-widget + = render 'login' + + %br + + %ul.table-of-contents + - @table_of_contents.each do |item| + %li + = link_to item.title, "##{item.anchor}" + + - unless item.children.empty? + %ul + - item.children.each do |sub_item| + %li= link_to sub_item.title, "##{sub_item.anchor}" + + - if display_allows? && !@allows.empty? + %li= link_to t('about.available_content'), '#available-content' + + - if display_blocks? && !@blocks.empty? + %li= link_to t('about.unavailable_content'), '#unavailable-content' + + %br + + .directory + - if Setting.profile_directory .directory__tag - = link_to 'https://joinmastodon.org/apps', target: '_blank', rel: 'noopener noreferrer' do + = optional_link_to Setting.profile_directory, explore_path do %h4 - = fa_icon 'tablet fw' - = t('about.get_apps') - %small= t('about.apps_platforms') + = fa_icon 'address-book fw' + = t('about.discover_users') - .landing__grid__column.landing__grid__column-login - .box-widget - = render 'login' - - .hero-widget - .hero-widget__img - = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.jpg'), alt: @instance_presenter.site_title - - .hero-widget__text - %p - = @instance_presenter.site_short_description.html_safe.presence || t('about.about_mastodon_html') - = link_to about_more_path do - = t('about.learn_more') - = fa_icon 'angle-double-right' - - .hero-widget__footer - .hero-widget__footer__column - %h4= t 'about.administered_by' - - = account_link_to @instance_presenter.contact_account - - .hero-widget__footer__column - %h4= t 'about.server_stats' - - .hero-widget__counters__wrapper - .hero-widget__counter - %strong= number_to_human @instance_presenter.user_count, strip_insignificant_zeros: true - %span= t 'about.user_count_after', count: @instance_presenter.user_count - .hero-widget__counter - %strong= number_to_human @instance_presenter.active_user_count, strip_insignificant_zeros: true - %span - = t 'about.active_count_after' - %abbr{ title: t('about.active_footnote') } * + .directory__tag + = link_to 'https://joinmastodon.org/apps', target: '_blank', rel: 'noopener noreferrer' do + %h4 + = fa_icon 'tablet fw' + = t('about.get_apps') + + %br diff --git a/config/routes.rb b/config/routes.rb index 74ed750a4..570c31561 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -515,7 +515,7 @@ Rails.application.routes.draw do get '/web/(*any)', to: 'home#index', as: :web get '/about', to: 'about#show' - get '/about/more', to: 'about#more' + get '/about/more', to: redirect('/about') get '/terms', to: 'about#terms' match '/', via: [:post, :put, :patch, :delete], to: 'application#raise_not_found', format: false -- cgit