remove forum tabs, improve breadcrumbs, fix category/post title case

pioneer/packages/joy-forum/src/CategoryList.tsx

@@ -387,19 +387,27 @@ function InnerCategoryList (props: CategoryListProps) {
   }
 
   return (
-    <Table celled selectable compact>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Category</Table.HeaderCell>
-          <Table.HeaderCell>Threads</Table.HeaderCell>
-          <Table.HeaderCell>Subcategories</Table.HeaderCell>
-          <Table.HeaderCell>Description</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>{categories.map((category, i) => (
-        <InnerViewCategory key={i} preview category={category} />
-      ))}</Table.Body>
-    </Table>
+    <>
+      {!parentId && (
+        <>
+          <CategoryCrumbs root />
+          <h1 className="ForumPageTitle">Top categories</h1>
+        </>
+      )}
+      <Table celled selectable compact>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Category</Table.HeaderCell>
+            <Table.HeaderCell>Threads</Table.HeaderCell>
+            <Table.HeaderCell>Subcategories</Table.HeaderCell>
+            <Table.HeaderCell>Description</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>{categories.map((category, i) => (
+          <InnerViewCategory key={i} preview category={category} />
+        ))}</Table.Body>
+      </Table>
+    </>
   );
 }
 

pioneer/packages/joy-forum/src/index.tsx

@@ -1,9 +1,9 @@
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
+import styled from 'styled-components';
 
 import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import Tabs, { TabItem } from '@polkadot/react-components/Tabs';
 
 import './index.css';
 
@@ -16,43 +16,22 @@ import { NewReply, EditReply } from './EditReply';
 import { CategoryList, ViewCategoryById } from './CategoryList';
 import { ViewThreadById } from './ViewThread';
 
+const ForumContentWrapper = styled.main`
+  padding-top: 1.5rem;
+`;
+
 type Props = AppProps & I18nProps & {};
 
 class App extends React.PureComponent<Props> {
-  private buildTabs (): TabItem[] {
-    const { t } = this.props;
-    return [
-      {
-        isRoot: true,
-        name: 'forum',
-        text: t('Forum')
-      },
-      {
-        // TODO show this tab only if current user is the sudo:
-        name: 'categories/new',
-        text: t('New category')
-      },
-      {
-        name: 'sudo',
-        text: t('Forum sudo')
-      }
-    ];
-  }
-
   render () {
     const { basePath } = this.props;
-    const tabs = this.buildTabs();
     return (
       <ForumProvider>
         <ForumSudoProvider>
-          <main className='forum--App'>
-            <header>
-              <Tabs basePath={basePath} items={tabs} />
-            </header>
+          <ForumContentWrapper className='forum--App'>
             <Switch>
-              <Route path={`${basePath}/sudo`} component={EditForumSudo} />
-
-              <Route path={`${basePath}/categories/new`} component={NewCategory} />
+              {/* <Route path={`${basePath}/sudo`} component={EditForumSudo} /> */}
+              {/* <Route path={`${basePath}/categories/new`} component={NewCategory} /> */}
               <Route path={`${basePath}/categories/:id/newSubcategory`} component={NewSubcategory} />
               <Route path={`${basePath}/categories/:id/newThread`} component={NewThread} />
               <Route path={`${basePath}/categories/:id/edit`} component={EditCategory} />
@@ -70,7 +49,7 @@ class App extends React.PureComponent<Props> {
 
               <Route component={CategoryList} />
             </Switch>
-          </main>
+          </ForumContentWrapper>
         </ForumSudoProvider>
       </ForumProvider>
     );

pioneer/packages/joy-forum/src/utils.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Pagination as SuiPagination } from 'semantic-ui-react';
+import { Breadcrumb, Pagination as SuiPagination } from 'semantic-ui-react';
+import styled from 'styled-components';
 
 import { Category, CategoryId, Thread, ThreadId } from '@joystream/types/forum';
 import { withForumCalls } from './calls';
@@ -36,6 +37,7 @@ type CategoryCrumbsProps = {
   category?: Category;
   threadId?: ThreadId;
   thread?: Thread;
+  root?: boolean;
 };
 
 function InnerCategoryCrumb (p: CategoryCrumbsProps) {
@@ -46,8 +48,8 @@ function InnerCategoryCrumb (p: CategoryCrumbsProps) {
       const url = `/forum/categories/${category.id.toString()}`;
       return <>
         {category.parent_id ? <CategoryCrumb categoryId={category.parent_id} /> : null}
-        <i className='right angle icon divider'></i>
-        <Link className='section' to={url}>{category.title}</Link>
+        <Breadcrumb.Divider icon="right angle" />
+        <Breadcrumb.Section as={Link} to={url}>{category.title}</Breadcrumb.Section>
       </>;
     } catch (err) {
       console.log('Failed to create a category breadcrumb', err);
@@ -72,8 +74,8 @@ function InnerThreadCrumb (p: CategoryCrumbsProps) {
       const url = `/forum/threads/${thread.id.toString()}`;
       return <>
         <CategoryCrumb categoryId={thread.category_id} />
-        <i className='right angle icon divider'></i>
-        <Link className='section' to={url}>{thread.title}</Link>
+        <Breadcrumb.Divider icon="right angle" />
+        <Breadcrumb.Section as={Link} to={url}>{thread.title}</Breadcrumb.Section>
       </>;
     } catch (err) {
       console.log('Failed to create a thread breadcrumb', err);
@@ -90,13 +92,26 @@ const ThreadCrumb = withMulti(
   )
 );
 
-export const CategoryCrumbs = (p: CategoryCrumbsProps) => {
+const StyledBreadcrumbs = styled(Breadcrumb)`
+  && {
+    font-size: 1.3rem;
+    line-height: 1.2;
+  }
+`;
+
+export const CategoryCrumbs = ({ categoryId, threadId, root }: CategoryCrumbsProps) => {
   return (
-    <div className='ui breadcrumb'>
-      <Link className='section' to='/forum'>Top categories</Link>
-      <CategoryCrumb categoryId={p.categoryId} />
-      <ThreadCrumb threadId={p.threadId} />
-    </div>
+    <StyledBreadcrumbs>
+      <Breadcrumb.Section>Forum</Breadcrumb.Section>
+      {!root && (
+        <>
+          <Breadcrumb.Divider icon="right angle" />
+          <Breadcrumb.Section as={Link} to="/forum">Top categories</Breadcrumb.Section>
+          <CategoryCrumb categoryId={categoryId} />
+          <ThreadCrumb threadId={threadId} />
+        </>
+      )}
+    </StyledBreadcrumbs>
   );
 };
 

pioneer/packages/react-components/src/styles/index.ts

@@ -124,10 +124,7 @@ export default createGlobalStyle`
     font-weight: 100;
   }
 
-  h1 {
-    text-transform: lowercase;
-
-    em {
+  h1 em {
       font-style: normal;
       text-transform: none;
     }