[64] Limit column size

src/channels/components/ChannelsFilterMenu/ChannelsFilterMenu.js

@@ -17,7 +17,7 @@ const ChannelsFilterMenu = ({
   manageFilter,
 }) => {
   return (
-    <Menu vertical color="blue">
+    <Menu vertical color="blue" size="small">
       <Menu.Item
         as={Link}
         name={ALL_CHANNELS}

src/channels/components/ChannelsList/ChannelsList.js

@@ -12,14 +12,24 @@ import * as getPublicChannelsActionCreators from '../../actions/GetPublicChannel
 import './ChannelsList.scss';
 
 const columns = [
-  {id: 'name', label: 'Name'},
+  {id: 'name', label: 'Name', width: 4, public: true},
   {
     id: 'description',
     label: 'Description',
+    width: 7,
+    public: true,
   },
   {
     id: 'visibility',
     label: 'Visibility',
+    width: 3,
+    public: true,
+  },
+  {
+    id: 'options',
+    label: 'Options',
+    width: 2,
+    public: false,
   },
 ];
 
@@ -89,6 +99,57 @@ const ChannelsList = ({
       );
     }
 
+    if (column.id === 'options' && isAuthenticated) {
+      return (
+        <>
+          {!channel.subscribed && (
+            <Popup
+              trigger={
+                <Button
+                  disabled={channel.id === subscribeId && loadingSubscribe}
+                  loading={channel.id === subscribeId && loadingSubscribe}
+                  icon="bell slash"
+                  size="mini"
+                  onClick={() => handleSubscribe(channel)}
+                />
+              }
+              position="top center"
+              content="Subscribe"
+            />
+          )}
+          {channel.subscribed && (
+            <Popup
+              trigger={
+                <Button
+                  disabled={channel.id === unsubscribeId && loadingUnsubscribe}
+                  loading={channel.id === unsubscribeId && loadingUnsubscribe}
+                  primary
+                  icon="bell"
+                  size="mini"
+                  onClick={() => handleUnsubscribe(channel)}
+                />
+              }
+              content="Unsubscribe"
+            />
+          )}
+          {channel.manage && (
+            <Popup
+              trigger={
+                <Button
+                  size="mini"
+                  icon="settings"
+                  onClick={() => {
+                    history.push(`/main/channels/${channel.id}`);
+                  }}
+                />
+              }
+              content="Manage"
+            />
+          )}
+        </>
+      );
+    }
+
     if (channel[column.id]) return channel[column.id].toString();
 
     return '';
@@ -96,69 +157,28 @@ const ChannelsList = ({
 
   return (
     <Segment className="channel-list" basic loading={loading}>
-      <Table striped>
+      <Table striped fixed>
         <Table.Header>
           <Table.Row>
-            {columns.map(column => (
-              <Table.HeaderCell key={column.id}>{column.label}</Table.HeaderCell>
-            ))}
-            {isAuthenticated && <Table.HeaderCell>Options</Table.HeaderCell>}
+            {columns.map(
+              column =>
+                (isAuthenticated || column.public) && (
+                  <Table.HeaderCell width={column.width} key={column.id}>
+                    {column.label}
+                  </Table.HeaderCell>
+                )
+            )}
           </Table.Row>
         </Table.Header>
         <Table.Body>
           {channels.map(channel => {
             return (
               <Table.Row key={channel.id}>
-                {columns.map(column => (
-                  <Table.Cell key={column.id}>{renderCellValue(channel, column)}</Table.Cell>
-                ))}
-                {isAuthenticated && (
-                  <Table.Cell singleLine>
-                    {!channel.subscribed && (
-                      <Popup
-                        trigger={
-                          <Button
-                            disabled={channel.id === subscribeId && loadingSubscribe}
-                            loading={channel.id === subscribeId && loadingSubscribe}
-                            icon="bell slash"
-                            size="mini"
-                            onClick={() => handleSubscribe(channel)}
-                          />
-                        }
-                        position="top center"
-                        content="Subscribe"
-                      />
-                    )}
-                    {channel.subscribed && (
-                      <Popup
-                        trigger={
-                          <Button
-                            disabled={channel.id === unsubscribeId && loadingUnsubscribe}
-                            loading={channel.id === unsubscribeId && loadingUnsubscribe}
-                            primary
-                            icon="bell"
-                            size="mini"
-                            onClick={() => handleUnsubscribe(channel)}
-                          />
-                        }
-                        content="Unsubscribe"
-                      />
-                    )}
-                    {channel.manage && (
-                      <Popup
-                        trigger={
-                          <Button
-                            size="mini"
-                            icon="settings"
-                            onClick={() => {
-                              history.push(`/main/channels/${channel.id}`);
-                            }}
-                          />
-                        }
-                        content="Manage"
-                      />
-                    )}
-                  </Table.Cell>
+                {columns.map(
+                  column =>
+                    (isAuthenticated || column.public) && (
+                      <Table.Cell key={column.id}>{renderCellValue(channel, column)}</Table.Cell>
+                    )
                 )}
               </Table.Row>
             );
@@ -166,7 +186,7 @@ const ChannelsList = ({
         </Table.Body>
         <Table.Footer>
           <Table.Row>
-            <Table.HeaderCell colSpan="5">
+            <Table.HeaderCell colSpan={isAuthenticated ? 4 : 3}>
               <Dropdown
                 fluid
                 value={getChannelsQuery.take}

src/channels/pages/AllChannelsPage/AllChannelsPage.js

 import React from 'react';
 import ChannelsList from 'channels/components/ChannelsList/ChannelsList';
 import {connect} from 'react-redux';
+import {Container, Grid, Segment} from 'semantic-ui-react';
 import ChannelsFilterMenu from '../../components/ChannelsFilterMenu/ChannelsFilterMenu';
 import SearchChannelComponent from '../../components/SearchChannelComponent/SearchChannelComponent';
 import AddChannel from '../../../components/channels/AddChannel';
 
 const AllChannelsPage = props => {
-  const {isAuthenticated, history} = props;
+  const {history} = props;
 
   return (
-    <div style={{margin: '100px', marginTop: '50px'}}>
-      <h2>CERN Notifications Service</h2>
-      <SearchChannelComponent />
-      <div style={{display: 'flex', flexDirection: 'row', marginTop: 25}}>
-        {isAuthenticated && (
-          <div style={{marginRight: 25}}>
-            <ChannelsFilterMenu />
-            <AddChannel />
-          </div>
-        )}
-        <div style={{width: '100%'}}>
-          <ChannelsList history={history} />
-        </div>
-      </div>
-    </div>
+    <Container>
+      <Segment basic>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column>
+              <h2>CERN Notifications Service</h2>
+              <SearchChannelComponent />
+            </Grid.Column>
+          </Grid.Row>
+          <Grid.Row>
+            <Grid.Column width={3}>
+              <ChannelsFilterMenu />
+              <AddChannel />
+            </Grid.Column>
+            <Grid.Column width={13}>
+              <ChannelsList history={history} />
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Segment>
+    </Container>
   );
 };
 
-const mapStateToProps = state => {
-  return {
-    isAuthenticated: state.auth.loggedIn,
-  };
-};
-
 const mapDispatchToProps = () => {
   return {};
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(AllChannelsPage);
+export default connect(null, mapDispatchToProps)(AllChannelsPage);