From 62e56408f44447be01d61dc784d3bcfc94f0e635 Mon Sep 17 00:00:00 2001 From: rjoydip Date: Mon, 30 Mar 2020 15:54:38 +0530 Subject: [PATCH] fix: left sidebar hiding isssue --- components/Dashboard/index.js | 14 +++++++++++--- components/FilterPanel/index.js | 26 +++++++++++++------------- components/NetworkMapLegend/index.js | 4 +--- components/SidePanel/header.js | 2 +- components/SidePanel/index.js | 18 ++++++++++-------- images/filter/hide.png | Bin 0 -> 376 bytes images/index.js | 2 ++ 7 files changed, 38 insertions(+), 28 deletions(-) create mode 100644 images/filter/hide.png diff --git a/components/Dashboard/index.js b/components/Dashboard/index.js index 91f7455..18bda89 100644 --- a/components/Dashboard/index.js +++ b/components/Dashboard/index.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import styled from 'styled-components' import NoSSR from 'react-no-ssr' import { @@ -27,6 +27,14 @@ const Container = styled.div` ` const Dashboard = () => { + const [hideSidePanelFlag, setHideSidePanelFlag] = useState(false) + + const onFilterSelect = (name) => { + if (name === 'Hide') { + setHideSidePanelFlag(!hideSidePanelFlag) + } + } + return ( @@ -38,8 +46,8 @@ const Dashboard = () => { /> ) : null} - - + + {isBrowser ? ( {}, remove: () => {} }, ] //{ name: 'Travel', icon: abroad, add: addTravel, remove: removeTravel }, const HeaderContainer = styled.div` - padding-top: 10px; + padding: 10px 0px; background-color: #f2f2f2; - display: grid; - grid-template-rows: 7% 93%; + grid-template-rows: 15% 93%; overflow: auto; font-family: 'Lato', sans-serif; color: #7c7a7a; @@ -50,7 +50,6 @@ const HeaderContainer = styled.div` ` const FilterMenuContainer = styled.div` - display: grid; grid-template-rows: 10% 10% 10% 10% 60%; overflow: auto; font-family: 'Lato', sans-serif; @@ -66,14 +65,13 @@ const FilterMenuContainer = styled.div` const FilterCategory = ({ filter, onClick, selected }) => { const FilterContainer = styled.div` display: flex; + margin: 10px 0; flex-direction: column; align-items: center; justify-content: space-evenly; - height: '20vh'; - user-select: none; background-color: ${props => (props.selected ? '#d6d6d6' : '#F2F2F2')}; transition: all 0.2s ease-out; - cursor: pointer; + &:hover { background-color: #d7d7d7; } @@ -84,7 +82,7 @@ const FilterCategory = ({ filter, onClick, selected }) => { ` const FilterIcon = styled.img` - width: 40px; + width: 30px; ` return ( @@ -101,7 +99,8 @@ const FilterPanel = ({ updateGraph, selectFilter, filter, - states + states, + onFilterSelect, }) => { // const [selected, selectCategory] = React.useState('P2P') @@ -119,12 +118,13 @@ const FilterPanel = ({ selectFilter(name) newGraph = choosenFilter.add(newGraph, patients.byId, states) console.log(newGraph) + onFilterSelect(name) updateGraph(newGraph) } const FilterHeader = styled.div` text-align: center; text-transform: uppercase; - font-size: 14px; + font-size: 10px; @media screen and (max-width: 768px) { display: flex; @@ -150,7 +150,7 @@ const FilterPanel = ({ const mapStateToProps = state => { const { patients, graph, filter, states } = state - return { graph, patients, filter, states} + return { graph, patients, filter, states } } export default connect(mapStateToProps, { updateGraph, selectFilter })( diff --git a/components/NetworkMapLegend/index.js b/components/NetworkMapLegend/index.js index d8fb572..d8f8d4f 100644 --- a/components/NetworkMapLegend/index.js +++ b/components/NetworkMapLegend/index.js @@ -1,4 +1,3 @@ -import { useEffect } from 'react'; import styled from 'styled-components' import { male_hosp, @@ -12,7 +11,6 @@ import { const LegendContainer = styled.div` - position: absolute; top: 0; left: 30%; display: flex; @@ -24,7 +22,7 @@ const LegendContainer = styled.div` margin-left: 5px; margin-top: 5px; z-index: 2; - + width: 105px; @media screen and (max-width: 768px) { padding: 4px; diff --git a/components/SidePanel/header.js b/components/SidePanel/header.js index a2420a0..862ba24 100644 --- a/components/SidePanel/header.js +++ b/components/SidePanel/header.js @@ -14,7 +14,7 @@ const Container = styled.div` const Title = styled.div` text-transform: uppercase; font-weight: bold; - font-size: 14px; + font-size: 14 px; color: #858383; ` diff --git a/components/SidePanel/index.js b/components/SidePanel/index.js index 16b9503..bc3a0a5 100644 --- a/components/SidePanel/index.js +++ b/components/SidePanel/index.js @@ -5,17 +5,19 @@ import { connect } from 'react-redux' import Header from './header' import DataGrid from './datagrid' -const Container = styled.div` - background-color: #fafafa; - padding: 15px; - overflow: auto; -` - -const SidePanel = ({ patient, lastRefreshed }) => { +const SidePanel = ({ patient, lastRefreshed, hideSidePanel }) => { + const Container = styled.div` + background-color: #fafafa; + padding: 15px; + overflow: auto; + display: ${hideSidePanel ? 'none' : 'block'}; + ` return ( - {patient ?
: null} + {patient ? ( +
+ ) : null} {patient ? : null} ) diff --git a/images/filter/hide.png b/images/filter/hide.png new file mode 100644 index 0000000000000000000000000000000000000000..c07d6d70367de73c3bf4448a0fdd98e734abe8ef GIT binary patch literal 376 zcmV-;0f+vHP)HK~zYI?bKT<1z{A2@gHi-c8bU$Ii#Ggd}%kXwnItM#)S}4lALmk zFJZfwHSM8YG_x=LujYNGp4F^b>*YU9P8q9M{=vtvfzhJ!9n^4v*5Ko~4Zf0B-hu6q zykkBizYBhX{yg$_$>*o?h2Rso4}Ofkyz=!1@<}`dKR{1W`A0@RgO}j@=*}ZAVJ#zH z3_gq3;Cs!M&t>FQbmf&-GV-P1^LPusC7G%}rL_TT$vl5Hc;Ak;zZPhelJ8@g&V082 zRXO{grbB&epD`VLCeDQ>C`}o=A$!79@JUTrur!^LcGU0~a*{1Bd_|<`!C}a5)Njo3 zIM;BBfg(kEaTKy^j07LXW$<$h7Aew?vyg3O_$aP|SBexMX+uT*U!)m|qCfe6e$N*? WQ&??4N8EP+0000