From 280b4bc00977d94ce6710e484480dfb21e1cf7d6 Mon Sep 17 00:00:00 2001
From: Caetan <caetan.tojeiro.carpente@cern.ch>
Date: Fri, 12 Aug 2022 10:45:45 +0200
Subject: [PATCH] [#192] Increase search page filters list width
---
.../ChannelsFilterMenu/ChannelsFilterMenu.js | 4 ++--
.../pages/AllChannelsPage/AllChannelsPage.js | 9 +++-----
.../AllChannelsPage/AllChannelsPage.scss | 23 ++++++++-----------
3 files changed, 15 insertions(+), 21 deletions(-)
diff --git a/src/channels/components/ChannelsFilterMenu/ChannelsFilterMenu.js b/src/channels/components/ChannelsFilterMenu/ChannelsFilterMenu.js
index fdfccf3c..27583099 100644
--- a/src/channels/components/ChannelsFilterMenu/ChannelsFilterMenu.js
+++ b/src/channels/components/ChannelsFilterMenu/ChannelsFilterMenu.js
@@ -20,7 +20,7 @@ const ChannelsFilterMenu = ({
}) => {
return (
<>
- <Menu vertical color="blue" size="small">
+ <Menu fluid vertical color="blue" size="small">
<Menu.Item
as={Link}
name={ALL_CHANNELS}
@@ -79,7 +79,7 @@ const ChannelsFilterMenu = ({
My subscriptions
</Menu.Item>
</Menu>
- <Menu vertical color="blue" size="small">
+ <Menu fluid vertical color="blue" size="small">
<Menu.Item
as={Link}
name={FAVORITE_CHANNELS}
diff --git a/src/channels/pages/AllChannelsPage/AllChannelsPage.js b/src/channels/pages/AllChannelsPage/AllChannelsPage.js
index fc4485ce..683a0fcb 100644
--- a/src/channels/pages/AllChannelsPage/AllChannelsPage.js
+++ b/src/channels/pages/AllChannelsPage/AllChannelsPage.js
@@ -10,7 +10,6 @@ import SearchChannelComponent from 'channels/components/SearchChannelComponent/S
import AddChannel from 'channels/components/AddChannel/AddChannel';
import AddMute from 'mutes/components/AddMute';
import * as getMutesActionCreator from 'mutes/actions/mutes';
-import * as getCategoriesActionCreator from 'channels/actions/GetCategories';
import * as getTagsActionCreator from 'channels/actions/GetTags';
import * as paginationActionCreators from 'channels/actions/PaginationActions';
import CategoryDropdown from 'common/components/CategoryDropdown/CategoryDropdown';
@@ -26,7 +25,6 @@ const AllChannelsPage = ({
globalMutes,
tags,
loadingTags,
- getCategories,
getTags,
getChannelsQuery,
setGetChannelsQuery,
@@ -62,7 +60,7 @@ const AllChannelsPage = ({
});
return (
- <Container>
+ <Container className="all-channels-page">
<Segment basic>
<Helmet>
<title>{TITLE}</title>
@@ -76,7 +74,7 @@ const AllChannelsPage = ({
</Grid.Row>
<Grid.Row>
{isAuthenticated && (
- <Grid.Column width={3} style={{minWidth: 200}}>
+ <Grid.Column width={4} style={{minWidth: 300}}>
<ChannelsFilterMenu />
<Header as="h4">Filter</Header>
<Form className="channel-filters">
@@ -115,7 +113,7 @@ const AllChannelsPage = ({
localStorage.setItem('ChannelListExpanded', (!expanded).toString());
}}
toggle
- label={{children: expanded ? 'Expanded' : 'Collapsed'}}
+ label="Expanded"
style={{marginBottom: '10px'}}
/>
<Header as="h4">Actions</Header>
@@ -155,7 +153,6 @@ const mapStateToProps = state => {
const mapDispatchToProps = dispatch => {
return {
...bindActionCreators(getMutesActionCreator, dispatch),
- ...bindActionCreators(getCategoriesActionCreator, dispatch),
...bindActionCreators(getTagsActionCreator, dispatch),
...bindActionCreators(paginationActionCreators, dispatch),
};
diff --git a/src/channels/pages/AllChannelsPage/AllChannelsPage.scss b/src/channels/pages/AllChannelsPage/AllChannelsPage.scss
index 5f9b257a..46bf4da1 100644
--- a/src/channels/pages/AllChannelsPage/AllChannelsPage.scss
+++ b/src/channels/pages/AllChannelsPage/AllChannelsPage.scss
@@ -1,18 +1,15 @@
-.channel-filters {
- &.ui.form {
- max-width: none;
-
- .field {
- margin: 0;
- }
+.all-channels-page {
+ @media only screen and (max-width: 1279px) {
+ width: 100% !important;
}
- width: 13rem;
- .CategorySegment .CategorySelector {
- width: 100%;
- }
+ .channel-filters {
+ &.ui.form {
+ max-width: none;
- .ui.selection.dropdown {
- min-width: 13rem;
+ .field {
+ margin: 0;
+ }
+ }
}
}
--
GitLab