Column: consolidate column components, refactor transparency, get rid of .column-area--mobile, wtf

app/soapbox/components/column.js

@@ -6,18 +6,20 @@ export default class Column extends React.PureComponent {
 
   static propTypes = {
     className: PropTypes.string,
+    transparent: PropTypes.bool,
     children: PropTypes.node,
     label: PropTypes.string,
   };
 
   render() {
-    const { className, label, children } = this.props;
+    const { className, label, children, transparent, ...rest } = this.props;
 
     return (
       <div
         role='region'
         aria-label={label}
-        className={classNames('column', className)}
+        className={classNames('column', className, { 'column--transparent': transparent })}
+        {...rest}
       >
         {children}
       </div>

app/soapbox/features/account_timeline/index.js

@@ -177,7 +177,7 @@ class AccountTimeline extends ImmutablePureComponent {
     }
 
     return (
-      <Column showBackBtn={false}>
+      <Column transparent>
         <div className='account__section-headline'>
           <NavLink exact to={`/@${accountUsername}`}>
             <FormattedMessage id='account.posts' defaultMessage='Posts' />

app/soapbox/features/bookmarks/index.js

@@ -55,7 +55,7 @@ class Bookmarks extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.bookmarks' defaultMessage="You don't have any bookmarks yet. When you add one, it will show up here." />;
 
     return (
-      <Column icon='bookmark' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+      <Column heading={intl.formatMessage(messages.heading)} transparent>
         <StatusList
           trackScroll={!pinned}
           statusIds={statusIds}

app/soapbox/features/community_timeline/index.js

@@ -73,7 +73,7 @@ class CommunityTimeline extends React.PureComponent {
     const { intl, onlyMedia, timelineId } = this.props;
 
     return (
-      <Column label={intl.formatMessage(messages.title)}>
+      <Column label={intl.formatMessage(messages.title)} transparent>
         <SubNavigation message={intl.formatMessage(messages.title)} />
         <StatusListContainer
           scrollKey={`${timelineId}_timeline`}

app/soapbox/features/direct_timeline/index.js

@@ -48,7 +48,7 @@ class DirectTimeline extends React.PureComponent {
     const { intl, hasUnread } = this.props;
 
     return (
-      <Column label={intl.formatMessage(messages.title)}>
+      <Column label={intl.formatMessage(messages.title)} transparent>
         <ColumnHeader
           icon='envelope'
           active={hasUnread}

app/soapbox/features/home_timeline/index.js

@@ -98,7 +98,7 @@ class HomeTimeline extends React.PureComponent {
     const { done } = this.state;
 
     return (
-      <Column label={intl.formatMessage(messages.title)}>
+      <Column label={intl.formatMessage(messages.title)} transparent>
         {(features.suggestions && isEmpty && !isLoading && !done) ? (
           <BundleContainer fetchComponent={FollowRecommendationsContainer}>
             {Component => <Component onDone={this.handleDone} />}

app/soapbox/features/public_timeline/index.js

@@ -97,7 +97,7 @@ class CommunityTimeline extends React.PureComponent {
     const { intl, onlyMedia, timelineId, siteTitle, showExplanationBox, explanationBoxExpanded } = this.props;
 
     return (
-      <Column label={intl.formatMessage(messages.title)}>
+      <Column label={intl.formatMessage(messages.title)} transparent>
         <SubNavigation message={intl.formatMessage(messages.title)} />
         <PinnedHostsPicker />
         {showExplanationBox && <div className='explanation-box'>

app/soapbox/features/remote_timeline/index.js

@@ -85,7 +85,7 @@ class RemoteTimeline extends React.PureComponent {
     const { intl, hasUnread, onlyMedia, timelineId, instance, pinned } = this.props;
 
     return (
-      <Column label={intl.formatMessage(messages.title)}>
+      <Column label={intl.formatMessage(messages.title)} transparent>
         <HomeColumnHeader activeItem='fediverse' active={hasUnread} />
         <PinnedHostsPicker host={instance} />
         {!pinned && <div className='timeline-filter-message'>

app/soapbox/features/ui/components/better_column.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import ColumnHeader from './column_header';
 import PropTypes from 'prop-types';
+import Column from 'soapbox/components/column';
 import ColumnBackButton from '../../../components/column_back_button_slim';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 
 // Yes, there are 3 types of columns at this point, but this one is better, I swear
-export default class Column extends React.PureComponent {
+export default class BetterColumn extends React.PureComponent {
 
   static propTypes = {
     heading: PropTypes.string,
@@ -16,11 +17,11 @@ export default class Column extends React.PureComponent {
   };
 
   render() {
-    const { heading, icon, children, active, menu } = this.props;
+    const { heading, icon, children, active, menu, ...rest } = this.props;
     const columnHeaderId = heading && heading.replace(/ /g, '-');
 
     return (
-      <div role='region' aria-labelledby={columnHeaderId} className='column column--better'>
+      <Column aria-labelledby={columnHeaderId} className='column--better' {...rest}>
         <div className='column__top'>
           {heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />}
           {menu && (
@@ -31,7 +32,7 @@ export default class Column extends React.PureComponent {
           <ColumnBackButton />
         </div>
         {children}
-      </div>
+      </Column>
     );
   }
 

app/soapbox/features/ui/components/column.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import ColumnHeader from './column_header';
 import PropTypes from 'prop-types';
+import Column from 'soapbox/components/column';
 
-export default class Column extends React.PureComponent {
+export default class UIColumn extends React.PureComponent {
 
   static propTypes = {
     heading: PropTypes.string,
@@ -17,14 +18,14 @@ export default class Column extends React.PureComponent {
   }
 
   render() {
-    const { heading, icon, children, active, showBackBtn } = this.props;
+    const { heading, icon, children, active, showBackBtn, ...rest } = this.props;
     const columnHeaderId = heading && heading.replace(/ /g, '-');
 
     return (
-      <div role='region' aria-labelledby={columnHeaderId} className='column'>
+      <Column aria-labelledby={columnHeaderId} {...rest}>
         {heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} showBackBtn={showBackBtn} />}
         {children}
-      </div>
+      </Column>
     );
   }
 

app/soapbox/features/ui/components/columns_area.js

@@ -30,7 +30,7 @@ class ColumnsArea extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>

app/soapbox/pages/admin_page.js

@@ -27,7 +27,7 @@ class AdminPage extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>

app/soapbox/pages/default_page.js

@@ -45,7 +45,7 @@ class DefaultPage extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>

app/soapbox/pages/empty_page.js

@@ -16,7 +16,7 @@ export default class DefaultPage extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>

app/soapbox/pages/group_page.js

@@ -54,7 +54,7 @@ class GroupPage extends ImmutablePureComponent {
               </div>
 
               <div className='columns-area__panels__main'>
-                <div className='columns-area columns-area--mobile'>
+                <div className='columns-area'>
                   {children}
                 </div>
               </div>

app/soapbox/pages/groups_page.js

@@ -39,7 +39,7 @@ class GroupsPage extends ImmutablePureComponent {
               </div>
 
               <div className='columns-area__panels__main'>
-                <div className='columns-area columns-area--mobile'>
+                <div className='columns-area'>
                   {children}
                 </div>
               </div>

app/soapbox/pages/home_page.js

@@ -67,8 +67,8 @@ class HomePage extends ImmutablePureComponent {
               </div>
             </div>
 
-            <div className='columns-area__panels__main columns-area__panels__main--transparent'>
+            <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile columns-area--transparent'>
+              <div className='columns-area'>
                 {me && <div className='timeline-compose-block' ref={this.composeBlock}>
                   <Link className='timeline-compose-block__avatar' to={`/@${acct}`}>
                     <Avatar account={account} size={46} />

app/soapbox/pages/profile_page.js

@@ -98,8 +98,8 @@ class ProfilePage extends ImmutablePureComponent {
               </div>
             </div>
 
-            <div className='columns-area__panels__main columns-area__panels__main--transparent'>
+            <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile columns-area--transparent'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>

app/soapbox/pages/remote_instance_page.js

@@ -48,7 +48,7 @@ class RemoteInstancePage extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>

app/soapbox/pages/status_page.js

@@ -45,8 +45,8 @@ class StatusPage extends ImmutablePureComponent {
               </div>
             </div>
 
-            <div className='columns-area__panels__main columns-area__panels__main--transparent'>
+            <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile columns-area--transparent'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>

app/styles/accounts.scss

@@ -463,10 +463,6 @@ a .account__avatar {
 }
 
 .account__section-headline {
-  background: var(--foreground-color);
-  width: 100%;
-  display: flex;
-
   button,
   a {
     flex: none;

app/styles/chats.scss

@@ -366,7 +366,7 @@
       max-width: none;
     }
 
-    .columns-area--mobile .column {
+    .columns-area .column {
       border-radius: 0;
     }
 

app/styles/components/columns.scss

@@ -93,7 +93,7 @@
   }
 }
 
-.columns-area--mobile {
+.columns-area {
   display: block;
   flex-direction: column;
   width: 100%;
@@ -340,34 +340,20 @@
   cursor: default;
 }
 
-.columns-area--mobile .column {
+.columns-area .column {
   @include standard-panel;
 
+  &--transparent {
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
   @media screen and (max-width: 580px) {
     border-radius: 0;
   }
 }
 
-.columns-area--transparent .column {
-  background: transparent;
-  border-radius: 0;
-  box-shadow: none;
-
-  .column-back-button {
-    background: transparent;
-  }
-
-  .account__section-headline {
-    background: transparent;
-    border: 0;
-  }
-
-  .empty-column-indicator,
-  .error-column {
-    background: transparent;
-  }
-}
-
 .column-header__wrapper {
   position: relative;
   flex: 0 0 auto;
@@ -817,26 +803,6 @@
   }
 }
 
-.columns-area--transparent .follow-recommendations-container {
-  @include standard-panel;
-}
-
-// Let transparent columns extend the full width of the screen
-@media screen and (max-width: 450px) {
-  .columns-area__panels__main--transparent {
-    padding: 0;
-  }
-
-  .columns-area--transparent {
-    .status__wrapper,
-    .detailed-status__wrapper,
-    .timeline-compose-block,
-    .follow-recommendations-container {
-      border-radius: 0;
-    }
-  }
-}
-
 .column-title {
   text-align: center;
   padding: 40px;
@@ -896,3 +862,21 @@
     border-radius: 0;
   }
 }
+
+// Make MaterialStatus flush against SubNavigation
+.sub-navigation ~ .slist .item-list > article:first-child .material-status__status {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+// Display background for loading indicator
+.column--transparent {
+  .slist__append {
+    @include standard-panel;
+  }
+
+  .sub-navigation ~ .slist .slist__append {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}

app/styles/components/detailed-status.scss

@@ -111,7 +111,6 @@
 }
 
 .detailed-status__wrapper {
-  @include standard-panel;
   margin-bottom: 10px;
   position: relative;
   overflow: hidden;
@@ -159,19 +158,3 @@
   float: left;
   margin-right: 5px;
 }
-
-.thread {
-  // Don't display gaps between statuses in a thread
-  .status-container {
-    padding: 0;
-  }
-
-  .status__wrapper {
-    border-radius: 0;
-  }
-
-  .detailed-status__wrapper {
-    border-radius: 0;
-    margin: 0;
-  }
-}

app/styles/components/status.scss

@@ -170,15 +170,6 @@
     margin-top: 8px;
   }
 
-  &.status-direct:not(.read) {
-    background: var(--brand-color--med);
-    border-bottom-color: var(--brand-color--med);
-
-    .status__content a {
-      color: var(--brand-color--hicontrast);
-    }
-  }
-
   &.light {
     .status__relative-time {
       color: var(--primary-text-color--faint);

app/styles/ui.scss

@@ -443,7 +443,6 @@
   &__append {
     flex: 1 1 auto;
     position: relative;
-    min-height: 120px;
     padding: 30px 15px;
   }
 }