tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update /terms and /about/more to use public layout (#8142)

Browse Source
This commit is contained in:
Eugen Rochko
2018-08-09 12:58:20 +02:00
committed by GitHub
parent f2404de871
commit 0dcc1950d1
53 changed files with 397 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/controllers/about_controller.rb
View File

@ -9,9 +9,13 @@ class AboutController < ApplicationController
@initial_state_json = serializable_resource.to_json
end
def more; end
def more
render layout: 'public'
end
def terms; end
def terms
render layout: 'public'
end
private

407
app/javascript/styles/mastodon/about.scss
View File

@ -15,6 +15,276 @@ $small-breakpoint: 960px;
}
}
.rich-formatting {
font-family: 'mastodon-font-sans-serif', sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: $darker-text-color;
padding-right: 10px;
a {
color: $highlight-text-color;
text-decoration: underline;
}
p,
li {
font-family: 'mastodon-font-sans-serif', sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
margin-bottom: 12px;
color: $darker-text-color;
a {
color: $highlight-text-color;
text-decoration: underline;
}
&:last-child {
margin-bottom: 0;
}
}
em {
display: inline;
margin: 0;
padding: 0;
font-weight: 700;
background: transparent;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: lighten($darker-text-color, 10%);
}
h1 {
font-family: 'mastodon-font-display', sans-serif;
font-size: 26px;
line-height: 30px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
small {
font-family: 'mastodon-font-sans-serif', sans-serif;
display: block;
font-size: 18px;
font-weight: 400;
color: lighten($darker-text-color, 10%);
}
}
h2 {
font-family: 'mastodon-font-display', sans-serif;
font-size: 22px;
line-height: 26px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h3 {
font-family: 'mastodon-font-display', sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h4 {
font-family: 'mastodon-font-display', sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h5 {
font-family: 'mastodon-font-display', sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h6 {
font-family: 'mastodon-font-display', sans-serif;
font-size: 12px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
ul,
ol {
margin-left: 20px;
&[type='a'] {
list-style-type: lower-alpha;
}
&[type='i'] {
list-style-type: lower-roman;
}
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ol,
li > ul {
margin-top: 6px;
}
hr {
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
margin: 20px 0;
&.spacer {
height: 1px;
border: 0;
}
}
}
.information-board {
background: darken($ui-base-color, 4%);
padding: 20px 0;
.container-alt {
position: relative;
padding-right: 280px + 15px;
}
&__sections {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
&__section {
flex: 1 0 0;
font-family: 'mastodon-font-sans-serif', sans-serif;
font-size: 16px;
line-height: 28px;
color: $primary-text-color;
text-align: right;
padding: 10px 15px;
span,
strong {
display: block;
}
span {
&:last-child {
color: $secondary-text-color;
}
}
strong {
font-weight: 500;
font-size: 32px;
line-height: 48px;
}
@media screen and (max-width: $column-breakpoint) {
text-align: center;
}
}
.panel {
position: absolute;
width: 280px;
box-sizing: border-box;
background: darken($ui-base-color, 8%);
padding: 20px;
padding-top: 10px;
border-radius: 4px 4px 0 0;
right: 0;
bottom: -40px;
.panel-header {
font-family: 'mastodon-font-display', sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
color: $darker-text-color;
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: 1px solid lighten($ui-base-color, 4%);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
a,
span {
font-weight: 400;
color: darken($darker-text-color, 10%);
}
a {
text-decoration: none;
}
}
}
.owner {
text-align: center;
.avatar {
width: 80px;
height: 80px;
margin: 0 auto;
margin-bottom: 15px;
img {
display: block;
width: 80px;
height: 80px;
border-radius: 48px;
}
}
.name {
font-size: 14px;
a {
display: block;
color: $primary-text-color;
text-decoration: none;
&:hover {
.display_name {
text-decoration: underline;
}
}
}
.username {
display: block;
color: $darker-text-color;
}
}
}
}
.landing-page {
.grid {
display: grid;
@ -486,128 +756,6 @@ $small-breakpoint: 960px;
}
}
.information-board {
background: darken($ui-base-color, 4%);
padding: 20px 0;
.container-alt {
position: relative;
padding-right: 280px + 15px;
}
&__sections {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
&__section {
flex: 1 0 0;
font-family: 'mastodon-font-sans-serif', sans-serif;
font-size: 16px;
line-height: 28px;
color: $primary-text-color;
text-align: right;
padding: 10px 15px;
span,
strong {
display: block;
}
span {
&:last-child {
color: $secondary-text-color;
}
}
strong {
font-weight: 500;
font-size: 32px;
line-height: 48px;
}
@media screen and (max-width: $column-breakpoint) {
text-align: center;
}
}
.panel {
position: absolute;
width: 280px;
box-sizing: border-box;
background: darken($ui-base-color, 8%);
padding: 20px;
padding-top: 10px;
border-radius: 4px 4px 0 0;
right: 0;
bottom: -40px;
.panel-header {
font-family: 'mastodon-font-display', sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
color: $darker-text-color;
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: 1px solid lighten($ui-base-color, 4%);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
a,
span {
font-weight: 400;
color: darken($darker-text-color, 10%);
}
a {
text-decoration: none;
}
}
}
.owner {
text-align: center;
.avatar {
width: 80px;
height: 80px;
margin: 0 auto;
margin-bottom: 15px;
img {
display: block;
width: 80px;
height: 80px;
border-radius: 48px;
}
}
.name {
font-size: 14px;
a {
display: block;
color: $primary-text-color;
text-decoration: none;
&:hover {
.display_name {
text-decoration: underline;
}
}
}
.username {
display: block;
color: $darker-text-color;
}
}
}
}
&.alternative {
padding: 10px 0;
@ -983,21 +1131,6 @@ $small-breakpoint: 960px;
}
}
.extended-description {
padding: 50px 0;
font-family: 'mastodon-font-sans-serif', sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: $darker-text-color;
a {
color: $highlight-text-color;
text-decoration: underline;
}
}
.footer-links {
padding-bottom: 50px;
text-align: right;

37
app/javascript/styles/mastodon/containers.scss
View File

@ -115,6 +115,34 @@
}
}
.grid-3 {
display: grid;
grid-gap: 10px;
grid-template-columns: 3fr 1fr;
grid-auto-columns: 25%;
grid-auto-rows: max-content;
.column-0 {
grid-column: 1/3;
grid-row: 1;
}
.column-1 {
grid-column: 1;
grid-row: 2;
}
.column-2 {
grid-column: 2;
grid-row: 2;
}
.column-3 {
grid-column: 1/3;
grid-row: 3;
}
}
.public-layout {
@media screen and (max-width: $no-gap-breakpoint) {
padding-top: 48px;
@ -300,6 +328,15 @@
}
}
&--no-bar {
margin-bottom: 0;
.public-account-header__image,
.public-account-header__image img {
border-radius: 4px;
}
}
@media screen and (max-width: $no-gap-breakpoint) {
margin-bottom: 0;
box-shadow: none;

42
app/javascript/styles/mastodon/widgets.scss
View File

@ -103,6 +103,48 @@
}
}
.box-widget {
padding: 20px;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
}
.contact-widget,
.landing-page__information.contact-widget {
box-sizing: border-box;
padding: 20px;
height: 100%;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
}
.contact-widget {
font-size: 15px;
color: $darker-text-color;
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
p {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
&__mail {
margin-top: 10px;
a {
color: $primary-text-color;
text-decoration: none;
}
}
}
.moved-account-widget {
padding: 15px;
padding-bottom: 20px;

19
app/views/about/_administration.html.haml
View File

@ -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'

22
app/views/about/_contact.html.haml
View File

@ -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'

66
app/views/about/more.html.haml
View File

@ -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')

4
app/views/about/show.html.haml
View File

@ -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'

14
app/views/about/terms.html.haml
View File

@ -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'