diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx index d815e9db2f..12f4f2948b 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx @@ -70,7 +70,6 @@ class ComposeForm extends ImmutablePureComponent { singleColumn: PropTypes.bool, lang: PropTypes.string, advancedOptions: ImmutablePropTypes.map, - layout: PropTypes.string, media: ImmutablePropTypes.list, sideArm: PropTypes.string, sensitive: PropTypes.bool, @@ -259,7 +258,6 @@ class ComposeForm extends ImmutablePureComponent { intl, advancedOptions, isSubmitting, - layout, onChangeSpoilerness, onPaste, privacy, @@ -313,7 +311,7 @@ class ComposeForm extends ImmutablePureComponent { onSuggestionsClearRequested={this.onSuggestionsClearRequested} onSuggestionSelected={this.onSuggestionSelected} onPaste={onPaste} - autoFocus={!showSearch && !isMobile(window.innerWidth, layout)} + autoFocus={!showSearch && !isMobile(window.innerWidth)} lang={this.props.lang} > diff --git a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js index 9e0c62be00..c717058eaf 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js @@ -71,7 +71,6 @@ const mapStateToProps = state => ({ isInReply: state.getIn(['compose', 'in_reply_to']) !== null, lang: state.getIn(['compose', 'language']), advancedOptions: state.getIn(['compose', 'advanced_options']), - layout: state.getIn(['local_settings', 'layout']), media: state.getIn(['compose', 'media_attachments']), sideArm: sideArmPrivacy(state), sensitive: state.getIn(['compose', 'sensitive']), diff --git a/app/javascript/flavours/glitch/features/ui/index.jsx b/app/javascript/flavours/glitch/features/ui/index.jsx index ba7e521b75..b10bd04219 100644 --- a/app/javascript/flavours/glitch/features/ui/index.jsx +++ b/app/javascript/flavours/glitch/features/ui/index.jsx @@ -602,18 +602,7 @@ class UI extends PureComponent { const { draggingOver } = this.state; const { children, isWide, location, dropdownMenuIsOpen, layout, moved } = this.props; - const columnsClass = layout => { - switch (layout) { - case 'single': - return 'single-column'; - case 'multiple': - return 'multi-columns'; - default: - return 'auto-columns'; - } - }; - - const className = classNames('ui', columnsClass(layout), { + const className = classNames('ui', { 'wide': isWide, 'system-font': this.props.systemFontUi, 'hicolor-privacy-icons': this.props.hicolorPrivacyIcons, diff --git a/app/javascript/flavours/glitch/reducers/meta.js b/app/javascript/flavours/glitch/reducers/meta.js index 2bedd084f7..1fc669375c 100644 --- a/app/javascript/flavours/glitch/reducers/meta.js +++ b/app/javascript/flavours/glitch/reducers/meta.js @@ -14,9 +14,7 @@ const initialState = ImmutableMap({ export default function meta(state = initialState, action) { switch(action.type) { case STORE_HYDRATE: - return state.merge(action.state.get('meta')) - .set('permissions', action.state.getIn(['role', 'permissions'])) - .set('layout', layoutFromWindow(action.state.getIn(['local_settings', 'layout']))); + return state.merge(action.state.get('meta')).set('permissions', action.state.getIn(['role', 'permissions'])); case changeLayout.type: return state.set('layout', action.payload.layout); default: diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss index 6643cd1aa5..ec2a7e7ced 100644 --- a/app/javascript/flavours/glitch/styles/_mixins.scss +++ b/app/javascript/flavours/glitch/styles/_mixins.scss @@ -10,37 +10,6 @@ background-size: $size $size; } -@mixin single-column($media, $parent: '&') { - .auto-columns #{$parent} { - @media #{$media} { - @content; - } - } - .single-column #{$parent} { - @content; - } -} - -@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} { - @content; - } - } - .multi-columns #{$parent} { - @content; - } -} - @mixin fullwidth-gallery { &.full-width { margin-left: -14px; diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 202460fd5d..2ff1e997f7 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -496,7 +496,7 @@ body > [data-popper-placement] { outline: 0; } - @include single-column('screen and (max-width: 630px)') { + @media screen and (width <= 600px) { font-size: 16px; } } @@ -517,7 +517,7 @@ body > [data-popper-placement] { all: unset; } - @include limited-single-column('screen and (max-width: 600px)') { + @media screen and (width <= 600px) { height: 100px !important; // Prevent auto-resize textarea resize: vertical; } @@ -3040,10 +3040,6 @@ $ui-header-height: 55px; border-bottom-color: $ui-highlight-color; } - @include limited-single-column('screen and (max-width: 600px)') { - font-size: 16px; - } - &.light { color: $inverted-text-color; border-bottom: 2px solid lighten($ui-base-color, 27%); @@ -3054,6 +3050,10 @@ $ui-header-height: 55px; border-bottom-color: $ui-highlight-color; } } + + @media screen and (width <= 600px) { + font-size: 16px; + } } .status-card { @@ -6827,11 +6827,11 @@ img.modal-warning { padding-inline-end: 10px; } - @include single-column('screen and (max-width: 630px)') { + @media screen and (width <= 630px) { flex: auto; } - @include limited-single-column('screen and (max-width: 630px)') { + @media screen and (width <= 630px) { &, &:first-child, &:last-child { @@ -6845,7 +6845,7 @@ img.modal-warning { flex: 1 1 200px; } - @include single-column('screen and (max-width: 630px)') { + @media screen and (width <= 630px) { :root & { // Overrides `.wide` for single-column view flex: auto; @@ -6862,12 +6862,11 @@ img.modal-warning { } .search { - @include limited-single-column( - 'screen and (max-width: #{$no-gap-breakpoint})' - ) { + @media screen and (max-width: $no-gap-breakpoint) { margin-bottom: 0; } - @include single-column('screen and (max-width: 630px)') { + + @media screen and (width <= 630px) { font-size: 16px; } }