monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support overriding media queries for deciding between single-column/multi-column layouts with a class

This commit is contained in:
Surinna Curtis 2017-06-24 13:18:54 -05:00
parent 8b23bf7cbd
commit a70468aa56
6 changed files with 41 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/mastodon/features/ui/index.js
View File

@ -179,7 +179,7 @@ export default class UI extends React.PureComponent {
const { children } = this.props; const { children } = this.props;
return ( return (
<div className='ui' ref={this.setRef}> <div className='ui auto-columns' ref={this.setRef}>
<TabsBar /> <TabsBar />
<ColumnsAreaContainer singleColumn={isMobile(width)}> <ColumnsAreaContainer singleColumn={isMobile(width)}>
<WrappedSwitch> <WrappedSwitch>

22
app/javascript/styles/_mixins.scss
View File

@ -10,3 +10,25 @@
height: $size; height: $size;
background-size: $size $size; background-size: $size $size;
} }
@mixin single-column($media, $parent: '&') {
.auto-columns #{$parent} {
@media #{$media} {
@content;
}
}
.single-column #{$parent} {
@content;
}
}
@mixin multi-columns($media, $parent: '&') {
.auto-columns #{$parent} {
@media #{$media} {
@content;
}
}
.multi-columns #{$parent} {
@content;
}
}

8
app/javascript/styles/accounts.scss
View File

@ -9,7 +9,7 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@media screen and (max-width: 700px) { @include single-column('screen and (max-width: 700px)') {
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
} }
@ -148,7 +148,7 @@
order: 1; order: 1;
} }
@media screen and (max-width: 480px) { @include single-column('screen and (max-width: 480px)') {
.details { .details {
display: block; display: block;
} }
@ -230,7 +230,7 @@
color: lighten($ui-base-color, 10%); color: lighten($ui-base-color, 10%);
} }
@media screen and (max-width: 360px) { @include single-column('screen and (max-width: 360px)') {
padding: 30px 20px; padding: 30px 20px;
a, a,
@ -258,7 +258,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@media screen and (max-width: 700px) { @include single-column('screen and (max-width: 700px)') {
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
} }

22
app/javascript/styles/components.scss
View File

@ -1330,7 +1330,7 @@
position: relative; position: relative;
} }
@media screen and (min-width: 360px) { @include multi-columns('screen and (min-width: 360px)', $parent: null) {
.columns-area { .columns-area {
padding: 10px; padding: 10px;
} }
@ -1386,7 +1386,7 @@
} }
} }
@media screen and (min-width: 360px) { @include multi-columns('screen and (min-width: 360px)', $parent: null) {
.tabs-bar { .tabs-bar {
margin: 10px; margin: 10px;
margin-bottom: 0; margin-bottom: 0;
@ -1397,7 +1397,7 @@
} }
} }
@media screen and (max-width: 1024px) { @include single-column('screen and (max-width: 1024px)', $parent: null) {
.column, .column,
.drawer { .drawer {
width: 100%; width: 100%;
@ -1414,7 +1414,7 @@
} }
} }
@media screen and (min-width: 1025px) { @include multi-columns('screen and (min-width: 1025px)', $parent: null) {
.columns-area { .columns-area {
padding: 0; padding: 0;
} }
@ -1540,7 +1540,7 @@
} }
} }
@media screen and (min-width: 600px) { @include multi-columns('screen and (min-width: 600px)', $parent: null) {
.tabs-bar__link { .tabs-bar__link {
span { span {
display: inline; display: inline;
@ -1548,7 +1548,7 @@
} }
} }
@media screen and (min-width: 1025px) { @include multi-columns('screen and (min-width: 1025px)', $parent: null) {
.tabs-bar { .tabs-bar {
display: none; display: none;
} }
@ -1737,7 +1737,7 @@
} }
&.hidden-on-mobile { &.hidden-on-mobile {
@media screen and (max-width: 1024px) { @include single-column('screen and (max-width: 1024px)') {
display: none; display: none;
} }
} }
@ -2114,7 +2114,7 @@ button.icon-button.active i.fa-retweet {
} }
&.hidden-on-mobile { &.hidden-on-mobile {
@media screen and (max-width: 1024px) { @include single-column('screen and (max-width: 1024px)') {
display: none; display: none;
} }
} }
@ -3073,7 +3073,7 @@ button.icon-button.active i.fa-retweet {
} }
} }
@media screen and (max-width: 550px) { @include single-column('screen and (max-width: 550px)', $parent: null) {
.onboarding-modal { .onboarding-modal {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -3209,7 +3209,7 @@ button.icon-button.active i.fa-retweet {
margin-right: 15px; margin-right: 15px;
} }
@media screen and (max-width: 400px) { @include single-column('screen and (max-width: 400px)', $parent: null) {
.onboarding-modal__page-one { .onboarding-modal__page-one {
flex-direction: column; flex-direction: column;
} }
@ -3284,7 +3284,7 @@ button.icon-button.active i.fa-retweet {
} }
} }
@media screen and (max-width: 320px) and (max-height: 600px) { @include single-column('screen and (max-width: 320px) and (max-height: 600px)', $parent: null) {
.onboarding-modal__page p { .onboarding-modal__page p {
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;

4
app/javascript/styles/containers.scss
View File

@ -3,7 +3,7 @@
margin: 0 auto; margin: 0 auto;
margin-top: 40px; margin-top: 40px;
@media screen and (max-width: 700px) { @include single-column('screen and (max-width: 700px)') {
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
@ -15,7 +15,7 @@
margin-bottom: 0; margin-bottom: 0;
cursor: default; cursor: default;
@media screen and (max-width: 360px) { @include single-column('screen and (max-width: 360px)') {
margin: 30px auto; margin: 30px auto;
} }

2
app/javascript/styles/custom.scss
View File

@ -1,6 +1,6 @@
@import 'application'; @import 'application';
@media screen and (min-width: 1300px) { @include multi-columns('screen and (min-width: 1300px)', $parent: null) {
.column { .column {
flex-grow: 1 !important; flex-grow: 1 !important;
max-width: 400px; max-width: 400px;