Some more prettifying, cleaning up community and main.tsx

ui/src/components/community.tsx

@@ -187,7 +187,6 @@ export class Community extends Component<any, State> {
     return (
       <div class="container">
         <Helmet title={this.documentTitle} />
-        {this.selects()}
         {this.state.loading ? (
           <h5>
             <svg class="icon icon-spinner spin">
@@ -197,19 +196,7 @@ export class Community extends Component<any, State> {
         ) : (
           <div class="row">
             <div class="col-12 col-md-8">
-              <h5>
-                {this.state.community.title}
-                {this.state.community.removed && (
-                  <small className="ml-2 text-muted font-italic">
-                    {i18n.t('removed')}
-                  </small>
-                )}
-                {this.state.community.nsfw && (
-                  <small className="ml-2 text-muted font-italic">
-                    {i18n.t('nsfw')}
-                  </small>
-                )}
-              </h5>
+              {this.selects()}
               {this.listings()}
               {this.paginator()}
             </div>

ui/src/components/data-type-select.tsx

@@ -33,7 +33,7 @@ export class DataTypeSelect extends Component<
 
   render() {
     return (
-      <div class="btn-group btn-group-toggle">
+      <div class="btn-group btn-group-toggle flex-wrap mb-2">
         <label
           className={`pointer btn btn-outline-secondary 
             ${this.state.type_ == DataType.Post && 'active'}

ui/src/components/inbox.tsx

@@ -171,7 +171,7 @@ export class Inbox extends Component<any, InboxState> {
 
   unreadOrAllRadios() {
     return (
-      <div class="btn-group btn-group-toggle">
+      <div class="btn-group btn-group-toggle flex-wrap mb-2">
         <label
           className={`btn btn-outline-secondary pointer
             ${this.state.unreadOrAll == UnreadOrAll.Unread && 'active'}
@@ -204,7 +204,7 @@ export class Inbox extends Component<any, InboxState> {
 
   messageTypeRadios() {
     return (
-      <div class="btn-group btn-group-toggle">
+      <div class="btn-group btn-group-toggle flex-wrap mb-2">
         <label
           className={`btn btn-outline-secondary pointer 
             ${this.state.messageType == MessageType.All && 'active'}

ui/src/components/listing-type-select.tsx

@@ -34,7 +34,7 @@ export class ListingTypeSelect extends Component<
 
   render() {
     return (
-      <div class="btn-group btn-group-toggle">
+      <div class="btn-group btn-group-toggle flex-wrap mb-2">
         <label
           className={`btn btn-outline-secondary 
             ${this.state.type_ == ListingType.Subscribed && 'active'}

ui/src/components/main.tsx

@@ -194,21 +194,77 @@ export class Main extends Component<any, MainState> {
           <main role="main" class="col-12 col-md-8">
             {this.posts()}
           </main>
-          <aside class="col-12 col-md-4">{this.my_sidebar()}</aside>
+          <aside class="col-12 col-md-4">{this.mySidebar()}</aside>
         </div>
       </div>
     );
   }
 
-  my_sidebar() {
+  mySidebar() {
     return (
       <div>
         {!this.state.loading && (
           <div>
             <div class="card bg-transparent border-secondary mb-3">
+              <div class="card-header bg-transparent border-secondary">
+                {this.siteName()}
+                {this.adminButtons()}
+              </div>
               <div class="card-body">
                 {this.trendingCommunities()}
-                {UserService.Instance.user &&
+                {this.createCommunityButton()}
+                {/*
+                {this.subscribedCommunities()}
+                */}
+              </div>
+            </div>
+
+            <div class="card bg-transparent border-secondary mb-3">
+              <div class="card-body">{this.sidebar()}</div>
+            </div>
+
+            <div class="card bg-transparent border-secondary">
+              <div class="card-body">{this.landing()}</div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  createCommunityButton() {
+    return (
+      <Link class="btn btn-secondary btn-block" to="/create_community">
+        {i18n.t('create_a_community')}
+      </Link>
+    );
+  }
+
+  trendingCommunities() {
+    return (
+      <div>
+        <h5>
+          <T i18nKey="trending_communities">
+            #
+            <Link class="text-body" to="/communities">
+              #
+            </Link>
+          </T>
+        </h5>
+        <ul class="list-inline">
+          {this.state.trendingCommunities.map(community => (
+            <li class="list-inline-item">
+              <CommunityLink community={community} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+
+  subscribedCommunities() {
+    return (
+      UserService.Instance.user &&
       this.state.subscribedCommunities.length > 0 && (
         <div>
           <h5>
@@ -234,42 +290,7 @@ export class Main extends Component<any, MainState> {
             ))}
           </ul>
         </div>
-                  )}
-                <Link
-                  class="btn btn-secondary btn-block"
-                  to="/create_community"
-                >
-                  {i18n.t('create_a_community')}
-                </Link>
-              </div>
-            </div>
-            {this.sidebar()}
-            {this.landing()}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  trendingCommunities() {
-    return (
-      <div>
-        <h5>
-          <T i18nKey="trending_communities">
-            #
-            <Link class="text-body" to="/communities">
-              #
-            </Link>
-          </T>
-        </h5>
-        <ul class="list-inline">
-          {this.state.trendingCommunities.map(community => (
-            <li class="list-inline-item">
-              <CommunityLink community={community} />
-            </li>
-          ))}
-        </ul>
-      </div>
+      )
     );
   }
 
@@ -305,24 +326,40 @@ export class Main extends Component<any, MainState> {
   siteInfo() {
     return (
       <div>
-        <div class="card bg-transparent border-secondary mb-3">
-          <div class="card-body">
-            <h5 class="mb-0">{`${this.state.siteRes.site.name}`}</h5>
-            {this.canAdmin && (
-              <ul class="list-inline mb-1 text-muted font-weight-bold">
-                <li className="list-inline-item-action">
-                  <span
-                    class="pointer"
-                    onClick={linkEvent(this, this.handleEditClick)}
-                    data-tippy-content={i18n.t('edit')}
-                  >
-                    <svg class="icon icon-inline">
-                      <use xlinkHref="#icon-edit"></use>
-                    </svg>
-                  </span>
+        {this.state.siteRes.site.description && this.siteDescription()}
+        {this.badges()}
+        {this.admins()}
+      </div>
+    );
+  }
+
+  siteName() {
+    return <h5 class="mb-0">{`${this.state.siteRes.site.name}`}</h5>;
+  }
+
+  admins() {
+    return (
+      <ul class="mt-1 list-inline small mb-0">
+        <li class="list-inline-item">{i18n.t('admins')}:</li>
+        {this.state.siteRes.admins.map(admin => (
+          <li class="list-inline-item">
+            <UserListing
+              user={{
+                name: admin.name,
+                avatar: admin.avatar,
+                local: admin.local,
+                actor_id: admin.actor_id,
+                id: admin.id,
+              }}
+            />
           </li>
+        ))}
       </ul>
-            )}
+    );
+  }
+
+  badges() {
+    return (
       <ul class="my-2 list-inline">
         {/*
               <li className="list-inline-item badge badge-light">
@@ -355,44 +392,41 @@ export class Main extends Component<any, MainState> {
           </Link>
         </li>
       </ul>
-            <ul class="mt-1 list-inline small mb-0">
-              <li class="list-inline-item">{i18n.t('admins')}:</li>
-              {this.state.siteRes.admins.map(admin => (
-                <li class="list-inline-item">
-                  <UserListing
-                    user={{
-                      name: admin.name,
-                      avatar: admin.avatar,
-                      local: admin.local,
-                      actor_id: admin.actor_id,
-                      id: admin.id,
-                    }}
-                  />
+    );
+  }
+
+  adminButtons() {
+    return (
+      this.canAdmin && (
+        <ul class="list-inline mb-1 text-muted font-weight-bold">
+          <li className="list-inline-item-action">
+            <span
+              class="pointer"
+              onClick={linkEvent(this, this.handleEditClick)}
+              data-tippy-content={i18n.t('edit')}
+            >
+              <svg class="icon icon-inline">
+                <use xlinkHref="#icon-edit"></use>
+              </svg>
+            </span>
           </li>
-              ))}
         </ul>
-          </div>
-        </div>
-        {this.state.siteRes.site.description && (
-          <div class="card bg-transparent border-secondary mb-3">
-            <div class="card-body">
+      )
+    );
+  }
+
+  siteDescription() {
+    return (
       <div
         className="md-div"
-                dangerouslySetInnerHTML={mdToHtml(
-                  this.state.siteRes.site.description
-                )}
+        dangerouslySetInnerHTML={mdToHtml(this.state.siteRes.site.description)}
       />
-            </div>
-          </div>
-        )}
-      </div>
     );
   }
 
   landing() {
     return (
-      <div class="card bg-transparent border-secondary">
-        <div class="card-body">
+      <>
         <h5>
           {i18n.t('powered_by')}
           <svg class="icon mx-2">
@@ -426,15 +460,13 @@ export class Main extends Component<any, MainState> {
             </a>
           </T>
         </p>
-        </div>
-      </div>
+      </>
     );
   }
 
   posts() {
     return (
       <div class="main-content-wrapper">
-        {this.selects()}
         {this.state.loading ? (
           <h5>
             <svg class="icon icon-spinner spin">
@@ -443,6 +475,7 @@ export class Main extends Component<any, MainState> {
           </h5>
         ) : (
           <div>
+            {this.selects()}
             {this.listings()}
             {this.paginator()}
           </div>

ui/src/components/post-listing.tsx

@@ -312,7 +312,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <div class="row">
             <div className="col-12">
               <div className="post-title">
-                <h5 className="mb-0 d-inline">
+                <h5 className="mb-1 d-inline-block">
                   {this.props.showBody && post.url ? (
                     <a
                       className="text-body"
@@ -434,7 +434,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           </div>
           <div class="row">
             <div className="details col-12">
-              <ul class="list-inline mb-0 text-muted small">
+              <ul class="list-inline mb-1 text-muted small">
                 <li className="list-inline-item">
                   <span>{i18n.t('by')} </span>
                   <UserListing
@@ -501,9 +501,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                     </li>
                   </>
                 )}
-                <li className="list-inline-item">•</li>
+              </ul>
+              <ul class="list-inline mb-1 text-muted small">
+                <li className="list-inline-item">
+                  <Link
+                    className="text-muted"
+                    title={i18n.t('number_of_comments', {
+                      count: post.number_of_comments,
+                    })}
+                    to={`/post/${post.id}`}
+                  >
+                    <svg class="mr-1 icon icon-inline">
+                      <use xlinkHref="#icon-message-square"></use>
+                    </svg>
+                    {i18n.t('number_of_comments', {
+                      count: post.number_of_comments,
+                    })}
+                  </Link>
+                </li>
                 {this.state.upvotes !== this.state.score && (
                   <>
+                    <li className="list-inline-item">•</li>
                     <span
                       class="unselectable pointer mr-2"
                       data-tippy-content={this.pointsTippy}
@@ -525,23 +543,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         </span>
                       </li>
                     </span>
-                    <li className="list-inline-item">•</li>
                   </>
                 )}
-                <li className="list-inline-item">
-                  <Link
-                    className="text-muted"
-                    title={i18n.t('number_of_comments', {
-                      count: post.number_of_comments,
-                    })}
-                    to={`/post/${post.id}`}
-                  >
-                    <svg class="mr-1 icon icon-inline">
-                      <use xlinkHref="#icon-message-square"></use>
-                    </svg>
-                    {post.number_of_comments}
-                  </Link>
-                </li>
               </ul>
               {this.props.post.duplicates && (
                 <ul class="list-inline mb-1 small text-muted">

ui/src/components/post.tsx

@@ -232,7 +232,7 @@ export class Post extends Component<any, PostState> {
   sortRadios() {
     return (
       <>
-        <div class="btn-group btn-group-toggle mr-3 mb-2">
+        <div class="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
           <label
             className={`btn btn-outline-secondary pointer ${
               this.state.commentSort === CommentSortType.Hot && 'active'
@@ -286,7 +286,7 @@ export class Post extends Component<any, PostState> {
             />
           </label>
         </div>
-        <div class="btn-group btn-group-toggle mb-2">
+        <div class="btn-group btn-group-toggle flex-wrap mb-2">
           <label
             className={`btn btn-outline-secondary pointer ${
               this.state.commentViewType === CommentViewType.Chat && 'active'

ui/src/components/search.tsx

@@ -196,14 +196,14 @@ export class Search extends Component<any, SearchState> {
       >
         <input
           type="text"
-          class="form-control mr-2"
+          class="form-control mr-2 mb-2"
           value={this.state.searchText}
           placeholder={`${i18n.t('search')}...`}
           onInput={linkEvent(this, this.handleQChange)}
           required
           minLength={3}
         />
-        <button type="submit" class="btn btn-secondary mr-2">
+        <button type="submit" class="btn btn-secondary mr-2 mb-2">
           {this.state.loading ? (
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
@@ -222,7 +222,7 @@ export class Search extends Component<any, SearchState> {
         <select
           value={this.state.type_}
           onChange={linkEvent(this, this.handleTypeChange)}
-          class="custom-select w-auto"
+          class="custom-select w-auto mb-2"
         >
           <option disabled>{i18n.t('type')}</option>
           <option value={SearchType.All}>{i18n.t('all')}</option>

ui/src/components/sidebar.tsx

@@ -9,7 +9,7 @@ import {
   UserView,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { mdToHtml, getUnixTime, hostname } from '../utils';
+import { mdToHtml, getUnixTime } from '../utils';
 import { CommunityForm } from './community-form';
 import { UserListing } from './user-listing';
 import { CommunityLink } from './community-link';
@@ -63,21 +63,30 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   sidebar() {
-    let community = this.props.community;
-    let name_: string, link: string;
-
-    if (community.local) {
-      name_ = community.name;
-      link = `/c/${community.name}`;
-    } else {
-      name_ = `${community.name}@${hostname(community.actor_id)}`;
-      link = community.actor_id;
-    }
     return (
       <div>
+        <div class="card bg-transparent border-secondary mb-3">
+          <div class="card-header bg-transparent border-secondary">
+            {this.communityTitle()}
+            {this.adminButtons()}
+          </div>
+          <div class="card-body">{this.subscribes()}</div>
+        </div>
         <div class="card bg-transparent border-secondary mb-3">
           <div class="card-body">
-            <h5 className="mb-0">
+            {this.description()}
+            {this.badges()}
+            {this.mods()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  communityTitle() {
+    let community = this.props.community;
+    return (
+      <h5 className="mb-2">
         <span>{community.title}</span>
         {community.removed && (
           <small className="ml-2 text-muted font-italic">
@@ -89,8 +98,129 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             {i18n.t('deleted')}
           </small>
         )}
+        {community.nsfw && (
+          <small className="ml-2 text-muted font-italic">
+            {i18n.t('nsfw')}
+          </small>
+        )}
       </h5>
+    );
+  }
+
+  badges() {
+    let community = this.props.community;
+    return (
+      <ul class="my-1 list-inline">
+        {/*
+              <li className="list-inline-item badge badge-light">
+                {i18n.t('number_online', { count: this.props.online })}
+              </li>
+              */}
+        <li className="list-inline-item badge badge-light">
+          {i18n.t('number_of_subscribers', {
+            count: community.number_of_subscribers,
+          })}
+        </li>
+        <li className="list-inline-item badge badge-light">
+          {i18n.t('number_of_posts', {
+            count: community.number_of_posts,
+          })}
+        </li>
+        <li className="list-inline-item badge badge-light">
+          {i18n.t('number_of_comments', {
+            count: community.number_of_comments,
+          })}
+        </li>
+        <li className="list-inline-item">
+          <Link className="badge badge-light" to="/communities">
+            {community.category_name}
+          </Link>
+        </li>
+        <li className="list-inline-item">
+          <Link
+            className="badge badge-light"
+            to={`/modlog/community/${this.props.community.id}`}
+          >
+            {i18n.t('modlog')}
+          </Link>
+        </li>
+        <li className="list-inline-item badge badge-light">
           <CommunityLink community={community} realLink />
+        </li>
+      </ul>
+    );
+  }
+
+  mods() {
+    return (
+      <ul class="list-inline small">
+        <li class="list-inline-item">{i18n.t('mods')}: </li>
+        {this.props.moderators.map(mod => (
+          <li class="list-inline-item">
+            <UserListing
+              user={{
+                name: mod.user_name,
+                avatar: mod.avatar,
+                id: mod.user_id,
+                local: mod.user_local,
+                actor_id: mod.user_actor_id,
+              }}
+            />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  subscribes() {
+    let community = this.props.community;
+    return (
+      <div class="d-flex flex-wrap">
+        <Link
+          class={`btn btn-secondary flex-fill mr-2 mb-2 ${
+            community.deleted || community.removed ? 'no-click' : ''
+          }`}
+          to={`/create_post?community=${community.name}`}
+        >
+          {i18n.t('create_a_post')}
+        </Link>
+        {community.subscribed ? (
+          <a
+            class="btn btn-secondary flex-fill mb-2"
+            href="#"
+            onClick={linkEvent(community.id, this.handleUnsubscribe)}
+          >
+            {i18n.t('unsubscribe')}
+          </a>
+        ) : (
+          <a
+            class="btn btn-secondary flex-fill mb-2"
+            href="#"
+            onClick={linkEvent(community.id, this.handleSubscribe)}
+          >
+            {i18n.t('subscribe')}
+          </a>
+        )}
+      </div>
+    );
+  }
+
+  description() {
+    let community = this.props.community;
+    return (
+      community.description && (
+        <div
+          className="md-div"
+          dangerouslySetInnerHTML={mdToHtml(community.description)}
+        />
+      )
+    );
+  }
+
+  adminButtons() {
+    let community = this.props.community;
+    return (
+      <>
         <ul class="list-inline mb-1 text-muted font-weight-bold">
           {this.canMod && (
             <>
@@ -111,9 +241,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                     class="pointer"
                     onClick={linkEvent(this, this.handleDeleteClick)}
                     data-tippy-content={
-                          !community.deleted
-                            ? i18n.t('delete')
-                            : i18n.t('restore')
+                      !community.deleted ? i18n.t('delete') : i18n.t('restore')
                     }
                   >
                     <svg
@@ -175,96 +303,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             </div>
           </form>
         )}
-            <ul class="my-1 list-inline">
-              {/*
-              <li className="list-inline-item badge badge-light">
-                {i18n.t('number_online', { count: this.props.online })}
-              </li>
-              */}
-              <li className="list-inline-item badge badge-light">
-                {i18n.t('number_of_subscribers', {
-                  count: community.number_of_subscribers,
-                })}
-              </li>
-              <li className="list-inline-item badge badge-light">
-                {i18n.t('number_of_posts', {
-                  count: community.number_of_posts,
-                })}
-              </li>
-              <li className="list-inline-item badge badge-light">
-                {i18n.t('number_of_comments', {
-                  count: community.number_of_comments,
-                })}
-              </li>
-              <li className="list-inline-item">
-                <Link className="badge badge-light" to="/communities">
-                  {community.category_name}
-                </Link>
-              </li>
-              <li className="list-inline-item">
-                <Link
-                  className="badge badge-light"
-                  to={`/modlog/community/${this.props.community.id}`}
-                >
-                  {i18n.t('modlog')}
-                </Link>
-              </li>
-            </ul>
-            <ul class="list-inline small">
-              <li class="list-inline-item">{i18n.t('mods')}: </li>
-              {this.props.moderators.map(mod => (
-                <li class="list-inline-item">
-                  <UserListing
-                    user={{
-                      name: mod.user_name,
-                      avatar: mod.avatar,
-                      id: mod.user_id,
-                      local: mod.user_local,
-                      actor_id: mod.user_actor_id,
-                    }}
-                  />
-                </li>
-              ))}
-            </ul>
-            {/* TODO the to= needs to be able to handle community_ids as well, since they're federated */}
-            <Link
-              class={`btn btn-secondary btn-block mb-3 ${
-                (community.deleted || community.removed) && 'no-click'
-              }`}
-              to={`/create_post?community=${community.name}`}
-            >
-              {i18n.t('create_a_post')}
-            </Link>
-            <div>
-              {community.subscribed ? (
-                <button
-                  class="btn btn-secondary btn-block"
-                  onClick={linkEvent(community.id, this.handleUnsubscribe)}
-                >
-                  {i18n.t('unsubscribe')}
-                </button>
-              ) : (
-                <button
-                  class="btn btn-secondary btn-block"
-                  onClick={linkEvent(community.id, this.handleSubscribe)}
-                >
-                  {i18n.t('subscribe')}
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
-        {community.description && (
-          <div class="card bg-transparent border-secondary">
-            <div class="card-body">
-              <div
-                className="md-div"
-                dangerouslySetInnerHTML={mdToHtml(community.description)}
-              />
-            </div>
-          </div>
-        )}
-      </div>
+      </>
     );
   }
 
@@ -293,6 +332,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   handleUnsubscribe(communityId: number) {
+    event.preventDefault();
     let form: FollowCommunityForm = {
       community_id: communityId,
       follow: false,
@@ -301,6 +341,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   handleSubscribe(communityId: number) {
+    event.preventDefault();
     let form: FollowCommunityForm = {
       community_id: communityId,
       follow: true,

ui/src/components/sort-select.tsx

@@ -35,7 +35,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
         <select
           value={this.state.sort}
           onChange={linkEvent(this, this.handleSortChange)}
-          class="custom-select w-auto mr-2"
+          class="custom-select w-auto mr-2 mb-2"
         >
           <option disabled>{i18n.t('sort_type')}</option>
           {!this.props.hideHot && (

ui/src/components/user.tsx

@@ -274,7 +274,7 @@ export class User extends Component<any, UserState> {
 
   viewRadios() {
     return (
-      <div class="btn-group btn-group-toggle">
+      <div class="btn-group btn-group-toggle flex-wrap mb-2">
         <label
           className={`btn btn-outline-secondary pointer 
             ${this.state.view == UserDetailsView.Overview && 'active'}