From a59b1794e1cb1d0a64af2307085b547066c95b23 Mon Sep 17 00:00:00 2001 From: Devesh Date: Sun, 17 Oct 2021 18:22:07 +0530 Subject: [PATCH] Fixed Dashboard and Left section --- src/components/cms/BrowseSkill/BrowseSkill.js | 566 ++++++++++-------- 1 file changed, 315 insertions(+), 251 deletions(-) diff --git a/src/components/cms/BrowseSkill/BrowseSkill.js b/src/components/cms/BrowseSkill/BrowseSkill.js index e9accf5076..45c9c9ffc9 100644 --- a/src/components/cms/BrowseSkill/BrowseSkill.js +++ b/src/components/cms/BrowseSkill/BrowseSkill.js @@ -8,6 +8,7 @@ import SkillLoader from './skillLoader'; import skillActions from '../../../redux/actions/skills'; import uiActions from '../../../redux/actions/ui'; import FormControl from '@material-ui/core/FormControl'; +import { withStyles } from '@material-ui/core/styles'; import InputLabel from '@material-ui/core/InputLabel'; import Select from '../../shared/Select'; import _FormControlLabel from '@material-ui/core/FormControlLabel'; @@ -144,7 +145,7 @@ const Sidebar = styled.div` flex: 1 1 0; border-right: 1px solid #ddd; border-spacing: 1px; - @media (max-width: 768px) { + @media (max-width: 960px) { display: none; } `; @@ -251,6 +252,31 @@ const RadioGroup = styled(_RadioGroup)` } `; +const styles = (theme) => ({ + ['@media (max-width:960px)']: { + setNone: { + display: 'none', + }, + }, + correctWidth: { + position: 'fixed', + overflowY: 'scroll', + maxHeight: '75vh', + minWidth: '20%', + overflowX: 'hidden', + }, + ['@media (max-height:800px)']: { + correctWidth: { + maxHeight: '71vh', + }, + }, + ['@media (max-height:660px)']: { + correctWidth: { + maxHeight: '65vh', + }, + }, +}); + const params = new URLSearchParams(window.location.search); class BrowseSkill extends React.Component { @@ -601,9 +627,10 @@ class BrowseSkill extends React.Component { orderBy, filterType, loadingSkills, + classes, } = this.props; const { routeType, routeValue, history } = this.props; - let isMobile = isMobileView(768); + let isMobile = isMobileView(960); let backToHome = null; let renderMenu = null; let renderMobileMenu = null; @@ -863,262 +890,292 @@ class BrowseSkill extends React.Component { ); const { open } = this.state; return ( - - -
- + + {({ TransitionProps }) => ( + + + + + + + + + Create Skill + + + + + + Create Bot + + + + + + Add Device + + + + + + )} + +
+ + + {renderTimeFilter} + + + {routeType === 'category' ? ( +
+ + {'< SUSI Skills'} + + {routeValue} +
+ ) : ( +
+ SUSI Skills + {renderMenu} +
+ )} + + {/* Refine by rating section*/} + {renderRatingsFilter} + + + + + + - Create - - - {({ TransitionProps }) => ( - - - - - - - - - Create Skill - - - - - - Create Bot - - - - - - Add Device - - - - - - )} - - - - - {renderTimeFilter} - - - {routeType === 'category' ? ( -
- - {'< SUSI Skills'} - - {routeValue} -
+ {loadingSkills ? ( + ) : ( -
- SUSI Skills - {renderMenu} -
- )} - - {/* Refine by rating section*/} - {renderRatingsFilter} - - - - - {loadingSkills ? ( - - ) : ( - - {renderSkillSlideshow} - {routeType !== 'category' && isMobile && ( - - - {renderTimeFilter} - - SUSI Skills - {renderMenu} - - {renderRatingsFilter} - - - )} - - {metricsHidden ? ( -
- {noSkillFound} - - - {renderSkillCount} - - - {skills.length > 0 && ( - - {filterType !== '' && ( - - {renderOrderBy} - - )} - - - Sort By - - - {skills.length > 10 && ( - - Skills per page - + + Name (A-Z) + + + Top Rated + + + Most Rated + + + Newly Created + + + Recently updated + + + Feedback Count + + + This Week Usage + + + This Month Usage + + + + {skills.length > 10 && ( + + Skills per page + + + )} + - 10 - 20 - 50 - 100 - - + + } + icon={} + /> + + } + icon={} + /> + + )} - - } - icon={} - /> - } - icon={} - /> - - - )} - - -
- {viewType === 'list' ? ( - - ) : ( - - )} -
- {skills.length > this.props.entriesPerPage && ( - + +
- Page: {listPage} out of{' '} - {Math.ceil(skills.length / entriesPerPage)} + {viewType === 'list' ? ( + + ) : ( + + )}
-
- - - - - - - - )} -
- ) : ( - '' - )} -
{renderCardScrollList}
- {/* Check if mobile view is currently active*/} - {routeType === 'category' - ? backToHome - : isMobile && ( - - - {renderMobileMenu} - - + {skills.length > this.props.entriesPerPage && ( + +
+ Page: {listPage} out of{' '} + {Math.ceil(skills.length / entriesPerPage)} +
+
+ + + + + + + + )} + + ) : ( + '' )} - - - )} - +
{renderCardScrollList}
+ {/* Check if mobile view is currently active*/} + {routeType === 'category' + ? backToHome + : isMobile && ( + + + {renderMobileMenu} + + + )} + + + )} + + + ); } @@ -1138,4 +1195,11 @@ function mapDispatchToProps(dispatch) { }; } -export default connect(mapStateToProps, mapDispatchToProps)(BrowseSkill); +BrowseSkill.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default connect( + mapStateToProps, + mapDispatchToProps, +)(withStyles(styles, { withTheme: true })(BrowseSkill));