From a70468aa562e51c3dd0d4a7505f4163e3572ea13 Mon Sep 17 00:00:00 2001 From: Surinna Curtis Date: Sat, 24 Jun 2017 13:18:54 -0500 Subject: [PATCH 1/8] Support overriding media queries for deciding between single-column/multi-column layouts with a class --- app/javascript/mastodon/features/ui/index.js | 2 +- app/javascript/styles/_mixins.scss | 22 ++++++++++++++++++++ app/javascript/styles/accounts.scss | 8 +++---- app/javascript/styles/components.scss | 22 ++++++++++---------- app/javascript/styles/containers.scss | 4 ++-- app/javascript/styles/custom.scss | 2 +- 6 files changed, 41 insertions(+), 19 deletions(-) diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 8453679b0..f3a8bebe9 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -179,7 +179,7 @@ export default class UI extends React.PureComponent { const { children } = this.props; return ( -
+
diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss index 455062135..76302af99 100644 --- a/app/javascript/styles/_mixins.scss +++ b/app/javascript/styles/_mixins.scss @@ -10,3 +10,25 @@ height: $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; + } +} \ No newline at end of file diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index 10f8bd2b9..815f8b94f 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -9,7 +9,7 @@ overflow: hidden; position: relative; - @media screen and (max-width: 700px) { + @include single-column('screen and (max-width: 700px)') { border-radius: 0; box-shadow: none; } @@ -148,7 +148,7 @@ order: 1; } - @media screen and (max-width: 480px) { + @include single-column('screen and (max-width: 480px)') { .details { display: block; } @@ -230,7 +230,7 @@ color: lighten($ui-base-color, 10%); } - @media screen and (max-width: 360px) { + @include single-column('screen and (max-width: 360px)') { padding: 30px 20px; a, @@ -258,7 +258,7 @@ display: flex; flex-wrap: wrap; - @media screen and (max-width: 700px) { + @include single-column('screen and (max-width: 700px)') { border-radius: 0; box-shadow: none; } diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 025ef2f64..e204f3637 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1330,7 +1330,7 @@ position: relative; } -@media screen and (min-width: 360px) { +@include multi-columns('screen and (min-width: 360px)', $parent: null) { .columns-area { padding: 10px; } @@ -1386,7 +1386,7 @@ } } -@media screen and (min-width: 360px) { +@include multi-columns('screen and (min-width: 360px)', $parent: null) { .tabs-bar { margin: 10px; margin-bottom: 0; @@ -1397,7 +1397,7 @@ } } -@media screen and (max-width: 1024px) { +@include single-column('screen and (max-width: 1024px)', $parent: null) { .column, .drawer { width: 100%; @@ -1414,7 +1414,7 @@ } } -@media screen and (min-width: 1025px) { +@include multi-columns('screen and (min-width: 1025px)', $parent: null) { .columns-area { 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 { span { display: inline; @@ -1548,7 +1548,7 @@ } } -@media screen and (min-width: 1025px) { +@include multi-columns('screen and (min-width: 1025px)', $parent: null) { .tabs-bar { display: none; } @@ -1737,7 +1737,7 @@ } &.hidden-on-mobile { - @media screen and (max-width: 1024px) { + @include single-column('screen and (max-width: 1024px)') { display: none; } } @@ -2114,7 +2114,7 @@ button.icon-button.active i.fa-retweet { } &.hidden-on-mobile { - @media screen and (max-width: 1024px) { + @include single-column('screen and (max-width: 1024px)') { 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 { width: 100%; height: 100%; @@ -3209,7 +3209,7 @@ button.icon-button.active i.fa-retweet { margin-right: 15px; } -@media screen and (max-width: 400px) { +@include single-column('screen and (max-width: 400px)', $parent: null) { .onboarding-modal__page-one { 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 { font-size: 14px; line-height: 20px; diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss index 68f73e0c0..34d6cbc69 100644 --- a/app/javascript/styles/containers.scss +++ b/app/javascript/styles/containers.scss @@ -3,7 +3,7 @@ margin: 0 auto; margin-top: 40px; - @media screen and (max-width: 700px) { + @include single-column('screen and (max-width: 700px)') { width: 100%; margin: 0; } @@ -15,7 +15,7 @@ margin-bottom: 0; cursor: default; - @media screen and (max-width: 360px) { + @include single-column('screen and (max-width: 360px)') { margin: 30px auto; } diff --git a/app/javascript/styles/custom.scss b/app/javascript/styles/custom.scss index b03231102..7a0509842 100644 --- a/app/javascript/styles/custom.scss +++ b/app/javascript/styles/custom.scss @@ -1,6 +1,6 @@ @import 'application'; -@media screen and (min-width: 1300px) { +@include multi-columns('screen and (min-width: 1300px)', $parent: null) { .column { flex-grow: 1 !important; max-width: 400px; From ceb545c08002ed34f8837ddd2fd032178f59c6ed Mon Sep 17 00:00:00 2001 From: Surinna Curtis Date: Sat, 24 Jun 2017 14:22:55 -0500 Subject: [PATCH 2/8] Pass in correct "singleColumn" prop value when auto-columns is not used. --- app/javascript/mastodon/features/ui/index.js | 15 +++++++++++++-- app/javascript/mastodon/is_mobile.js | 11 +++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index f3a8bebe9..a372deac5 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -74,6 +74,15 @@ class WrappedRoute extends React.Component { } +function columnClass(columns) { + switch (columns) { + case "auto": return "auto-columns"; + case "single": return "single-column"; + case "multiple": return "multi-columns"; + default: return "auto-columns"; + } +} + @connect() export default class UI extends React.PureComponent { @@ -178,10 +187,12 @@ export default class UI extends React.PureComponent { const { width, draggingOver } = this.state; const { children } = this.props; + const columns = "auto"; + return ( -
+
- + diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js index 992e63727..8689dbe23 100644 --- a/app/javascript/mastodon/is_mobile.js +++ b/app/javascript/mastodon/is_mobile.js @@ -1,7 +1,14 @@ const LAYOUT_BREAKPOINT = 1024; -export function isMobile(width) { - return width <= LAYOUT_BREAKPOINT; +export function isMobile(width, columns) { + switch (columns) { + case "multiple": + return false; + case "single": + return true; + default: + return width <= LAYOUT_BREAKPOINT; + } }; const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; From ddba5d3b8c065cdf1ef206b13fea02444ffdf1f7 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sat, 24 Jun 2017 17:07:25 -0700 Subject: [PATCH 3/8] Use Redux store to keep track of layout --- .../mastodon/containers/mastodon.js | 1 + app/javascript/mastodon/features/ui/index.js | 31 +++++++++++-------- app/javascript/mastodon/is_mobile.js | 4 +-- app/javascript/mastodon/reducers/settings.js | 1 + 4 files changed, 22 insertions(+), 15 deletions(-) diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index 3bd89902f..f66110520 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/app/javascript/mastodon/containers/mastodon.js @@ -24,6 +24,7 @@ addLocaleData(localeData); const store = configureStore(); const initialState = JSON.parse(document.getElementById('initial-state').textContent); +if (localStorage) initialState.layout = localStorage.getItem('mastodon-layout'); store.dispatch(hydrateStore(initialState)); export default class Mastodon extends React.PureComponent { diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index a372deac5..f8c10f9a3 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -74,21 +74,17 @@ class WrappedRoute extends React.Component { } -function columnClass(columns) { - switch (columns) { - case "auto": return "auto-columns"; - case "single": return "single-column"; - case "multiple": return "multi-columns"; - default: return "auto-columns"; - } -} +const mapStateToProps = state => ({ + layout: state.getIn(['settings', 'layout']), +}); -@connect() +@connect(mapStateToProps) export default class UI extends React.PureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, children: PropTypes.node, + layout: PropTypes.string, }; state = { @@ -184,15 +180,24 @@ export default class UI extends React.PureComponent { } render () { - const { width, draggingOver } = this.state; + const { width, draggingOver, layout } = this.state; const { children } = this.props; - const columns = "auto"; + const columnsClass = layout => { + switch (layout) { + case 'single': + return 'single-column'; + case 'multiple': + return 'multiple-columns'; + default: + return 'auto-columns'; + } + } return ( -
+
- + diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js index 8689dbe23..014a9a8d5 100644 --- a/app/javascript/mastodon/is_mobile.js +++ b/app/javascript/mastodon/is_mobile.js @@ -2,9 +2,9 @@ const LAYOUT_BREAKPOINT = 1024; export function isMobile(width, columns) { switch (columns) { - case "multiple": + case 'multiple': return false; - case "single": + case 'single': return true; default: return width <= LAYOUT_BREAKPOINT; diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js index ddad7a4fc..9a15a1fe3 100644 --- a/app/javascript/mastodon/reducers/settings.js +++ b/app/javascript/mastodon/reducers/settings.js @@ -6,6 +6,7 @@ import uuid from '../uuid'; const initialState = Immutable.Map({ onboarded: false, + layout: 'auto', home: Immutable.Map({ shows: Immutable.Map({ From 4c37f629bce6fede13b6105749a10e585fb9c3b0 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sat, 24 Jun 2017 18:30:59 -0700 Subject: [PATCH 4/8] Don't change layout of static pages --- app/javascript/styles/accounts.scss | 8 ++++---- app/javascript/styles/containers.scss | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index 815f8b94f..10f8bd2b9 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -9,7 +9,7 @@ overflow: hidden; position: relative; - @include single-column('screen and (max-width: 700px)') { + @media screen and (max-width: 700px) { border-radius: 0; box-shadow: none; } @@ -148,7 +148,7 @@ order: 1; } - @include single-column('screen and (max-width: 480px)') { + @media screen and (max-width: 480px) { .details { display: block; } @@ -230,7 +230,7 @@ color: lighten($ui-base-color, 10%); } - @include single-column('screen and (max-width: 360px)') { + @media screen and (max-width: 360px) { padding: 30px 20px; a, @@ -258,7 +258,7 @@ display: flex; flex-wrap: wrap; - @include single-column('screen and (max-width: 700px)') { + @media screen and (max-width: 700px) { border-radius: 0; box-shadow: none; } diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss index 34d6cbc69..68f73e0c0 100644 --- a/app/javascript/styles/containers.scss +++ b/app/javascript/styles/containers.scss @@ -3,7 +3,7 @@ margin: 0 auto; margin-top: 40px; - @include single-column('screen and (max-width: 700px)') { + @media screen and (max-width: 700px) { width: 100%; margin: 0; } @@ -15,7 +15,7 @@ margin-bottom: 0; cursor: default; - @include single-column('screen and (max-width: 360px)') { + @media screen and (max-width: 360px) { margin: 30px auto; } From da05cde72108e4caf3a053d3dd949d97fe8ff711 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sat, 24 Jun 2017 19:12:34 -0700 Subject: [PATCH 5/8] Better settings handling with localSettings (new!) --- .../mastodon/actions/local_settings.js | 20 +++++++++++++++++++ .../mastodon/containers/mastodon.js | 6 +++++- app/javascript/mastodon/features/ui/index.js | 10 +++++----- app/javascript/mastodon/reducers/index.js | 2 ++ .../mastodon/reducers/local_settings.js | 20 +++++++++++++++++++ 5 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 app/javascript/mastodon/actions/local_settings.js create mode 100644 app/javascript/mastodon/reducers/local_settings.js diff --git a/app/javascript/mastodon/actions/local_settings.js b/app/javascript/mastodon/actions/local_settings.js new file mode 100644 index 000000000..742a1eec2 --- /dev/null +++ b/app/javascript/mastodon/actions/local_settings.js @@ -0,0 +1,20 @@ +export const LOCAL_SETTING_CHANGE = 'LOCAL_SETTING_CHANGE'; + +export function changeLocalSetting(key, value) { + return dispatch => { + dispatch({ + type: LOCAL_SETTING_CHANGE, + key, + value, + }); + + dispatch(saveLocalSettings()); + }; +}; + +export function saveLocalSettings() { + return (_, getState) => { + const localSettings = getState().get('localSettings').toJS(); + localStorage.setItem('mastodon-settings', JSON.stringify(localSettings)); + }; +}; diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index f66110520..3468a7944 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/app/javascript/mastodon/containers/mastodon.js @@ -24,7 +24,11 @@ addLocaleData(localeData); const store = configureStore(); const initialState = JSON.parse(document.getElementById('initial-state').textContent); -if (localStorage) initialState.layout = localStorage.getItem('mastodon-layout'); +try { + initialState.localSettings = JSON.parse(localStorage.getItem('mastodon-settings')); +} catch (e) { + initialState.localSettings = {}; +} store.dispatch(hydrateStore(initialState)); export default class Mastodon extends React.PureComponent { diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index f8c10f9a3..e5915ffe0 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -75,7 +75,7 @@ class WrappedRoute extends React.Component { } const mapStateToProps = state => ({ - layout: state.getIn(['settings', 'layout']), + layout: state.getIn(['localSettings', 'layout']), }); @connect(mapStateToProps) @@ -180,19 +180,19 @@ export default class UI extends React.PureComponent { } render () { - const { width, draggingOver, layout } = this.state; - const { children } = this.props; + const { width, draggingOver } = this.state; + const { children, layout } = this.props; const columnsClass = layout => { switch (layout) { case 'single': return 'single-column'; case 'multiple': - return 'multiple-columns'; + return 'multi-columns'; default: return 'auto-columns'; } - } + }; return (
diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js index be402a16b..24f7f94a6 100644 --- a/app/javascript/mastodon/reducers/index.js +++ b/app/javascript/mastodon/reducers/index.js @@ -14,6 +14,7 @@ import relationships from './relationships'; import search from './search'; import notifications from './notifications'; import settings from './settings'; +import localSettings from './local_settings'; import status_lists from './status_lists'; import cards from './cards'; import reports from './reports'; @@ -36,6 +37,7 @@ export default combineReducers({ search, notifications, settings, + localSettings, cards, reports, contexts, diff --git a/app/javascript/mastodon/reducers/local_settings.js b/app/javascript/mastodon/reducers/local_settings.js new file mode 100644 index 000000000..529d31ebb --- /dev/null +++ b/app/javascript/mastodon/reducers/local_settings.js @@ -0,0 +1,20 @@ +import { LOCAL_SETTING_CHANGE } from '../actions/local_settings'; +import { STORE_HYDRATE } from '../actions/store'; +import Immutable from 'immutable'; + +const initialState = Immutable.Map({ + layout: 'auto', +}); + +const hydrate = (state, localSettings) => state.mergeDeep(localSettings); + +export default function localSettings(state = initialState, action) { + switch(action.type) { + case STORE_HYDRATE: + return hydrate(state, action.state.get('localSettings')); + case LOCAL_SETTING_CHANGE: + return state.setIn(action.key, action.value); + default: + return state; + } +}; From ca0d30c04b96a87deed0e2da824212e2d644eb91 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sat, 24 Jun 2017 20:04:46 -0700 Subject: [PATCH 6/8] OKAY THIS WORKS THIS WORKS --- .../mastodon/features/compose/index.js | 57 ++++++++++++++++++- .../mastodon/locales/defaultMessages.json | 16 ++++++ app/javascript/mastodon/locales/en.json | 4 ++ app/javascript/styles/components.scss | 33 ++++++++--- 4 files changed, 100 insertions(+), 10 deletions(-) diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js index 747fe4216..512167193 100644 --- a/app/javascript/mastodon/features/compose/index.js +++ b/app/javascript/mastodon/features/compose/index.js @@ -4,8 +4,9 @@ import NavigationContainer from './containers/navigation_container'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { mountCompose, unmountCompose } from '../../actions/compose'; +import { changeLocalSetting } from '../../actions/local_settings'; import Link from 'react-router-dom/Link'; -import { injectIntl, defineMessages } from 'react-intl'; +import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; import SearchContainer from './containers/search_container'; import Motion from 'react-motion/lib/Motion'; import spring from 'react-motion/lib/spring'; @@ -21,6 +22,7 @@ const messages = defineMessages({ const mapStateToProps = state => ({ showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']), + layout: state.getIn(['localSettings', 'layout']), }); @connect(mapStateToProps) @@ -32,6 +34,7 @@ export default class Compose extends React.PureComponent { multiColumn: PropTypes.bool, showSearch: PropTypes.bool, intl: PropTypes.object.isRequired, + layout: PropTypes.string, }; componentDidMount () { @@ -42,8 +45,14 @@ export default class Compose extends React.PureComponent { this.props.dispatch(unmountCompose()); } + onLayoutClick = (e) => { + const layout = e.currentTarget.getAttribute('data-mastodon-layout'); + this.props.dispatch(changeLocalSetting(['layout'], layout)); + e.preventDefault(); + } + render () { - const { multiColumn, showSearch, intl } = this.props; + const { multiColumn, showSearch, intl, layout } = this.props; let header = ''; @@ -59,6 +68,47 @@ export default class Compose extends React.PureComponent { ); } + let layoutContent = ''; + + switch (layout) { + case 'single': + layoutContent = ( +
+

+ +

+

+ • +

+
+ ); + break; + case 'multiple': + layoutContent = ( +
+

+ +

+

+ • +

+
+ ); + break; + default: + layoutContent = ( +
+

+ +

+

+ • +

+
+ ); + break; + } + return (
{header} @@ -79,6 +129,9 @@ export default class Compose extends React.PureComponent { }
+ + {layoutContent} +
); } diff --git a/app/javascript/mastodon/locales/defaultMessages.json b/app/javascript/mastodon/locales/defaultMessages.json index dd790f659..803d9b292 100644 --- a/app/javascript/mastodon/locales/defaultMessages.json +++ b/app/javascript/mastodon/locales/defaultMessages.json @@ -658,6 +658,22 @@ { "defaultMessage": "Logout", "id": "navigation_bar.logout" + }, + { + "defaultMessage": "Your current layout is:", + "id": "layout.current_is" + }, + { + "defaultMessage": "Mobile", + "id": "layout.mobile" + }, + { + "defaultMessage": "Desktop", + "id": "layout.desktop" + }, + { + "defaultMessage": "Auto", + "id": "layout.auto" } ], "path": "app/javascript/mastodon/features/compose/index.json" diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 8fb409618..c19d4aa02 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -79,6 +79,10 @@ "home.column_settings.show_reblogs": "Show boosts", "home.column_settings.show_replies": "Show replies", "home.settings": "Column settings", + "layout.auto": "Auto", + "layout.current_is": "Your current layout is:", + "layout.desktop": "Desktop", + "layout.mobile": "Mobile", "lightbox.close": "Close", "loading_indicator.label": "Loading...", "media_gallery.toggle_visible": "Toggle visibility", diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index e204f3637..1fa20a731 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1447,28 +1447,26 @@ .drawer__pager { box-sizing: border-box; padding: 0; - flex-grow: 1; + flex: 0 0 auto; position: relative; overflow: hidden; - display: flex; } .drawer__inner { - position: absolute; - top: 0; - left: 0; background: lighten($ui-base-color, 13%); box-sizing: border-box; padding: 0; - display: flex; - flex-direction: column; overflow: hidden; overflow-y: auto; width: 100%; - height: 100%; &.darker { + position: absolute; + top: 0; + left: 0; background: $ui-base-color; + width: 100%; + height: 100%; } } @@ -1496,6 +1494,25 @@ } } +.layout__selector { + margin-top: 20px; + + a { + text-decoration: underline; + cursor: pointer; + color: lighten($ui-base-color, 26%); + } + + b { + font-weight: bold; + } + + p { + font-size: 13px; + color: $ui-secondary-color; + } +} + .tabs-bar { display: flex; background: lighten($ui-base-color, 8%); From 7427680e75330335ab7e19a731609bd0270db010 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sat, 24 Jun 2017 20:14:58 -0700 Subject: [PATCH 7/8] Allowed little media rules --- app/javascript/styles/_mixins.scss | 2 +- app/javascript/styles/components.scss | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss index 76302af99..ba9f8e5b6 100644 --- a/app/javascript/styles/_mixins.scss +++ b/app/javascript/styles/_mixins.scss @@ -31,4 +31,4 @@ .multi-columns #{$parent} { @content; } -} \ No newline at end of file +} diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 1fa20a731..54a44937e 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1330,7 +1330,7 @@ position: relative; } -@include multi-columns('screen and (min-width: 360px)', $parent: null) { +@media screen and (min-width: 360px) { .columns-area { padding: 10px; } @@ -1386,7 +1386,7 @@ } } -@include multi-columns('screen and (min-width: 360px)', $parent: null) { +@media screen and (min-width: 360px) { .tabs-bar { margin: 10px; margin-bottom: 0; @@ -1557,7 +1557,7 @@ } } -@include multi-columns('screen and (min-width: 600px)', $parent: null) { +@media screen and (min-width: 600px) { .tabs-bar__link { span { display: inline; @@ -3090,7 +3090,7 @@ button.icon-button.active i.fa-retweet { } } -@include single-column('screen and (max-width: 550px)', $parent: null) { +@media screen and (max-width: 550px) { .onboarding-modal { width: 100%; height: 100%; @@ -3226,7 +3226,7 @@ button.icon-button.active i.fa-retweet { margin-right: 15px; } -@include single-column('screen and (max-width: 400px)', $parent: null) { +@media screen and (max-width: 400px) { .onboarding-modal__page-one { flex-direction: column; } @@ -3301,7 +3301,7 @@ button.icon-button.active i.fa-retweet { } } -@include single-column('screen and (max-width: 320px) and (max-height: 600px)', $parent: null) { +@media screen and (max-width: 320px) and (max-height: 600px) { .onboarding-modal__page p { font-size: 14px; line-height: 20px; From b8a5052d5361b812df3873fdeaa96f901843ef11 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sat, 24 Jun 2017 20:32:03 -0700 Subject: [PATCH 8/8] Better style handling at small sizes --- app/javascript/styles/_mixins.scss | 8 ++++++++ app/javascript/styles/components.scss | 27 +++++++++++++++------------ 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss index ba9f8e5b6..7412991b8 100644 --- a/app/javascript/styles/_mixins.scss +++ b/app/javascript/styles/_mixins.scss @@ -22,6 +22,14 @@ } } +@mixin limited-single-column($media, $parent: '&') { + .auto-columns #{$parent}, .single-column #{$parent} { + @media #{$media} { + @content; + } + } +} + @mixin multi-columns($media, $parent: '&') { .auto-columns #{$parent} { @media #{$media} { diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 54a44937e..af9da6c37 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1328,11 +1328,12 @@ justify-content: flex-start; overflow-x: auto; position: relative; + padding: 10px; } -@media screen and (min-width: 360px) { +@include limited-single-column('screen and (max-width: 360px)', $parent: null) { .columns-area { - padding: 10px; + padding: 0; } } @@ -1386,14 +1387,13 @@ } } -@media screen and (min-width: 360px) { +@include limited-single-column('screen and (max-width: 360px)', $parent: null) { .tabs-bar { - margin: 10px; - margin-bottom: 0; + margin: 0; } .search { - margin-bottom: 10px; + margin-bottom: 0; } } @@ -1518,6 +1518,8 @@ background: lighten($ui-base-color, 8%); flex: 0 0 auto; overflow-y: auto; + margin: 10px; + margin-bottom: 0; } .tabs-bar__link { @@ -1545,7 +1547,7 @@ &:hover, &:focus, &:active { - @media screen and (min-width: 1025px) { + @include multi-columns('screen and (min-width: 1025px)') { background: lighten($ui-base-color, 14%); transition: all 100ms linear; } @@ -1557,7 +1559,7 @@ } } -@media screen and (min-width: 600px) { +@include limited-single-column('screen and (max-width: 600px)', $parent: null) { .tabs-bar__link { span { display: inline; @@ -1798,7 +1800,7 @@ outline: 0; } - @media screen and (max-width: 600px) { + @include limited-single-column('screen and (max-width: 600px)') { font-size: 16px; } } @@ -1815,7 +1817,7 @@ padding-right: 10px + 22px; resize: none; - @media screen and (max-width: 600px) { + @include limited-single-column('screen and (max-width: 600px)') { height: 100px !important; // prevent auto-resize textarea resize: vertical; } @@ -1928,7 +1930,7 @@ border-bottom-color: $ui-highlight-color; } - @media screen and (max-width: 600px) { + @include limited-single-column('screen and (max-width: 600px)') { font-size: 16px; } } @@ -2889,6 +2891,7 @@ button.icon-button.active i.fa-retweet { .search { position: relative; + margin-bottom: 10px; } .search__input { @@ -2921,7 +2924,7 @@ button.icon-button.active i.fa-retweet { background: lighten($ui-base-color, 4%); } - @media screen and (max-width: 600px) { + @include limited-single-column('screen and (max-width: 600px)') { font-size: 16px; } }