diff --git a/app/javascript/mastodon/components/column_collapsable.js b/app/javascript/mastodon/components/column_collapsable.js
deleted file mode 100644
index d6b4edb9fe..0000000000
--- a/app/javascript/mastodon/components/column_collapsable.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class ColumnCollapsable extends React.PureComponent {
-
- static propTypes = {
- icon: PropTypes.string.isRequired,
- title: PropTypes.string,
- fullHeight: PropTypes.number.isRequired,
- children: PropTypes.node,
- onCollapse: PropTypes.func,
- };
-
- state = {
- collapsed: true,
- animating: false,
- };
-
- handleToggleCollapsed = () => {
- const currentState = this.state.collapsed;
-
- this.setState({ collapsed: !currentState, animating: true });
-
- if (!currentState && this.props.onCollapse) {
- this.props.onCollapse();
- }
- }
-
- handleTransitionEnd = () => {
- this.setState({ animating: false });
- }
-
- render () {
- const { icon, title, fullHeight, children } = this.props;
- const { collapsed, animating } = this.state;
-
- return (
-
-
-
-
-
-
- {(!collapsed || animating) && children}
-
-
- );
- }
-
-}
diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js
index a309f74e8a..ec9379320f 100644
--- a/app/javascript/mastodon/components/column_header.js
+++ b/app/javascript/mastodon/components/column_header.js
@@ -132,7 +132,7 @@ export default class ColumnHeader extends React.PureComponent {
-
+
{(!collapsed || animating) && collapsedContent}
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index c2062c398f..4b4f72cf7a 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -58,37 +58,6 @@
position: relative;
}
-.column-collapsable {
- position: relative;
-
- .column-collapsable__content {
- overflow: auto;
- transition: 300ms ease;
- opacity: 1;
- max-height: 70vh;
- }
-
- &.collapsed .column-collapsable__content {
- height: 0 !important;
- opacity: 0;
- }
-
- .column-collapsable__button {
- color: $primary-text-color;
- background: lighten($ui-base-color, 8%);
-
- &:hover {
- color: $primary-text-color;
- background: lighten($ui-base-color, 8%);
- }
- }
-
- &.collapsed .column-collapsable__button {
- color: $ui-primary-color;
- background: lighten($ui-base-color, 4%);
- }
-}
-
.column-icon {
background: lighten($ui-base-color, 4%);
color: $ui-primary-color;
@@ -2110,11 +2079,6 @@ button.icon-button.active i.fa-retweet {
transition: max-height 150ms ease-in-out, opacity 300ms linear;
opacity: 1;
- & > div {
- background: lighten($ui-base-color, 8%);
- padding: 15px;
- }
-
&.collapsed {
max-height: 0;
opacity: 0.5;
@@ -2125,6 +2089,11 @@ button.icon-button.active i.fa-retweet {
}
}
+.column-header__collapsible-inner {
+ background: lighten($ui-base-color, 8%);
+ padding: 15px;
+}
+
.column-header__setting-btn {
&:hover {
color: lighten($ui-primary-color, 4%);