diff --git a/app/soapbox/features/ui/components/drawer_loading.js b/app/soapbox/features/ui/components/drawer_loading.js
deleted file mode 100644
index 08b0d2347..000000000
--- a/app/soapbox/features/ui/components/drawer_loading.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-const DrawerLoading = () => (
-
-);
-
-export default DrawerLoading;
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 84d8978ee..1e0be7267 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -58,7 +58,6 @@
@import 'components/react-toggle';
@import 'components/getting-started';
@import 'components/promo-panel';
-@import 'components/drawer';
@import 'components/still-image';
@import 'components/timeline-queue-header';
@import 'components/badge';
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index cc2e09607..0e0672381 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -61,6 +61,7 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
+ flex: 1 1 100%;
}
@media screen and (min-width: 631px) {
@@ -68,8 +69,7 @@
padding: 0;
}
- .column,
- .drawer {
+ .column {
flex: 0 0 auto;
padding: 10px;
padding-left: 5px;
@@ -85,8 +85,7 @@
}
.columns-area > div {
- .column,
- .drawer {
+ .column {
padding-left: 5px;
padding-right: 5px;
}
@@ -100,8 +99,7 @@
margin: 0 auto;
padding: 15px 0;
- .column,
- .drawer {
+ .column {
width: 100%;
height: 100%;
padding: 0;
@@ -893,3 +891,28 @@
border-top-right-radius: 0;
}
}
+
+// TODO: Get rid of whatever a "drawer" is
+// Probably rename to column-something
+.drawer__pager {
+ box-sizing: border-box;
+ padding: 0;
+ flex-grow: 1;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+}
+
+.drawer__inner {
+ top: 0;
+ left: 0;
+ background: var(--foreground-color);
+ box-sizing: border-box;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ overflow-y: auto;
+ width: 100%;
+ height: 100%;
+}
diff --git a/app/styles/components/drawer.scss b/app/styles/components/drawer.scss
deleted file mode 100644
index fe50fb50a..000000000
--- a/app/styles/components/drawer.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-.drawer {
- width: 300px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- overflow-y: hidden;
-}
-
-.drawer__tab {
- display: block;
- flex: 1 1 auto;
- padding: 15px 5px 13px;
- color: var(--primary-text-color--faint);
- text-decoration: none;
- text-align: center;
- font-size: 16px;
- border-bottom: 2px solid transparent;
-}
-
-.column,
-.drawer {
- flex: 1 1 100%;
-}
-
-.drawer__pager {
- box-sizing: border-box;
- padding: 0;
- flex-grow: 1;
- position: relative;
- overflow: hidden;
- display: flex;
-}
-
-.drawer__inner {
- top: 0;
- left: 0;
- background: var(--foreground-color);
- box-sizing: border-box;
- padding: 0;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- overflow-y: auto;
- width: 100%;
- height: 100%;
-}
-
-.pseudo-drawer {
- background: var(--background-color);
- font-size: 13px;
- text-align: left;
-}
-
-.drawer__header {
- flex: 0 0 auto;
- font-size: 16px;
- background: var(--brand-color--med);
- margin-bottom: 10px;
- display: flex;
- flex-direction: row;
-
- a {
- transition: background 100ms ease-in;
-
- &:hover {
- background: var(--background-color);
- transition: background 200ms ease-out;
- }
- }
-}
-
-.drawer__backdrop {
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba($base-overlay-background, 0.5);
-}
diff --git a/app/styles/rtl.scss b/app/styles/rtl.scss
index 051d0e82d..483ff5449 100644
--- a/app/styles/rtl.scss
+++ b/app/styles/rtl.scss
@@ -228,8 +228,7 @@ body.rtl {
}
@media screen and (min-width: 631px) {
- .column,
- .drawer {
+ .column {
padding-left: 5px;
padding-right: 5px;
@@ -240,8 +239,7 @@ body.rtl {
}
.columns-area > div {
- .column,
- .drawer {
+ .column {
padding-left: 5px;
padding-right: 5px;
}
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 6f3a379bb..2f68412bf 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -318,7 +318,6 @@
.react-swipeable-view-container {
&,
.columns-area,
- .drawer,
.column {
height: 100%;
}