CloudToys/puyopuyotetr.is
1
0
Fork 0
Code

[Glitch] Responsive design for profile directory

Browse Source 
Port SCSS changes from 087e118971 to glitch flavour
This commit is contained in:
Thibaut Girka 2018-12-18 17:03:53 +01:00
parent 034ffc079e
commit a18a46ca6e
2 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/flavours/glitch/styles/containers.scss
View File

@ -296,6 +296,12 @@
text-decoration: underline; text-decoration: underline;
color: $primary-text-color; color: $primary-text-color;
} }
@media screen and (max-width: $no-gap-breakpoint) {
&.optional {
display: none;
}
}
} }
.nav-button { .nav-button {

43
app/javascript/flavours/glitch/styles/widgets.scss
View File

@ -229,18 +229,6 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.moved-account-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;
border-radius: 0;
}
}
.page-header { .page-header {
background: lighten($ui-base-color, 8%); background: lighten($ui-base-color, 8%);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@ -261,11 +249,20 @@
font-size: 15px; font-size: 15px;
color: $darker-text-color; color: $darker-text-color;
} }
@media screen and (max-width: $no-gap-breakpoint) {
margin-top: 0;
background: lighten($ui-base-color, 4%);
h1 {
font-size: 24px;
}
}
} }
.directory { .directory {
background: $ui-base-color; background: $ui-base-color;
border-radius: 0 0 4px 4px; border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
&__tag { &__tag {
@ -407,4 +404,24 @@
font-size: 14px; font-size: 14px;
} }
} }
@media screen and (max-width: $no-gap-breakpoint) {
tbody td.optional {
display: none;
}
}
}
.moved-account-widget,
.memoriam-widget,
.box-widget,
.contact-widget,
.landing-page__information.contact-widget,
.directory,
.page-header {
@media screen and (max-width: $no-gap-breakpoint) {
margin-bottom: 0;
box-shadow: none;
border-radius: 0;
}
} }