Adjust responsive design for /about/more and /terms (#8158)

Follow-up to #8142
This commit is contained in:
Eugen Rochko 2018-08-10 06:43:02 +02:00 committed by GitHub
parent 8c279b1648
commit 5b8603879f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 78 additions and 5 deletions

View File

@ -790,8 +790,10 @@ $small-breakpoint: 960px;
border-radius: 4px; border-radius: 4px;
padding: 25px 40px; padding: 25px 40px;
overflow: hidden; overflow: hidden;
box-sizing: border-box;
.row { .row {
width: 100%;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
flex-wrap: wrap; flex-wrap: wrap;
@ -808,11 +810,20 @@ $small-breakpoint: 960px;
flex: 1 0 auto; flex: 1 0 auto;
padding: 0 10px; padding: 0 10px;
} }
@media screen and (max-width: $no-gap-breakpoint) {
width: 100%;
justify-content: space-between;
}
} }
.row__mascot { .row__mascot {
flex: 1; flex: 1;
margin: 10px -50px 0 0; margin: 10px -50px 0 0;
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
} }
} }

View File

@ -141,6 +141,55 @@
grid-column: 1/3; grid-column: 1/3;
grid-row: 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 { .public-layout {
@ -334,6 +383,10 @@
.public-account-header__image, .public-account-header__image,
.public-account-header__image img { .public-account-header__image img {
border-radius: 4px; border-radius: 4px;
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
}
} }
} }

View File

@ -114,7 +114,7 @@
.landing-page__information.contact-widget { .landing-page__information.contact-widget {
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
height: 100%; min-height: 100%;
border-radius: 4px; border-radius: 4px;
background: $ui-base-color; background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@ -127,6 +127,10 @@
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
strong {
font-weight: 500;
}
p { p {
margin-bottom: 10px; margin-bottom: 10px;
@ -226,7 +230,10 @@
} }
.moved-account-widget, .moved-account-widget,
.memoriam-widget { .memoriam-widget,
.box-widget,
.contact-widget,
.landing-page__information.contact-widget {
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
margin-bottom: 0; margin-bottom: 0;
box-shadow: none; box-shadow: none;

View File

@ -29,14 +29,16 @@
.column-2 .column-2
.landing-page__information.contact-widget .landing-page__information.contact-widget
%p= t 'about.administered_by' %p
%strong= t 'about.administered_by'
= account_link_to(@instance_presenter.contact_account) = account_link_to(@instance_presenter.contact_account)
- if @instance_presenter.site_contact_email.present? - if @instance_presenter.site_contact_email.present?
%p.contact-widget__mail %p.contact-widget__mail
= succeed ':' do %strong
= t 'about.contact' = succeed ':' do
= t 'about.contact'
%br/ %br/
= mail_to @instance_presenter.site_contact_email, nil, title: @instance_presenter.site_contact_email = mail_to @instance_presenter.site_contact_email, nil, title: @instance_presenter.site_contact_email