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%; }