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;
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;
}
}
}

View file

@ -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;
}
}
}

View file

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

View file

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