Home page responsive

package.json

@@ -29,6 +29,7 @@
     "react-markdown": "^6.0.2",
     "react-password-strength-bar": "^0.3.3",
     "react-quill": "^1.3.5",
+    "react-responsive": "^9.0.0-beta.4",
     "react-router-dom": "^5.2.0",
     "react-split": "^2.0.11",
     "react-suggestion-box": "^1.2.3",

src/components/app/App.jsx

@@ -29,6 +29,8 @@ import Header from './Header';
 import Footer from './Footer';
 import RootView from './RootView';
 import './App.scss';
+import useResponsive from "../../hooks/useResponsive"
+
 
 
 const AuthenticationRequiredRoute = ({component: Component, ...rest}) => (
@@ -63,6 +65,7 @@ const App = props => {
   })
 
   const isFHIR = isFHIRServer();
+  const { isTablePotrait } = useResponsive()
 
   return (
     <div>
@@ -71,7 +74,7 @@ const App = props => {
         <main className={menuOpen ? 'content menu-open' : 'content'}>
           <Switch>
             <Route exact path="/" component={isFHIR ? Fhir : RootView} />
-            <Route path="/search" component={isFHIR ? Fhir : Search} />
+            <Route path="/search" render={() => isFHIR ? <Fhir/> : <Search fixedFilters={isTablePotrait ? {isTable:false, isList:true}: {}} />}/>
             <AuthenticationRequiredRoute path="/imports" component={ImportHome} />
 
             { /* Concept Home */ }

src/components/app/Header.jsx

@@ -20,6 +20,8 @@ import UserOptions from '../users/UserOptions';
 import { OPTIONS, SITE_URL } from './MenuOptions.jsx';
 import Feedback from '../common/Feedback';
 import ServerConfigsChip from '../common/ServerConfigsChip';
+import useResponsive from "../../hooks/useResponsive"
+import { useLocation } from 'react-router-dom';
 
 const drawerWidth = 250;
 const useStyles = makeStyles((theme) => ({
@@ -94,6 +96,9 @@ const Header = props => {
       setNestedTools(false)
     setNestedCommunity(value)
   };
+  const { isTablePotrait } = useResponsive()
+  const location = useLocation()
+  const isSearchPage = location.pathname.includes("search")
 
   const toggleNestedTools = () => {
     const value = !nestedTools
@@ -111,11 +116,13 @@ const Header = props => {
 
   const toggleOpen = () => setOpen(prevOpen => {
     const newOpen = !prevOpen
-    props.onOpen(newOpen)
-    setTimeout(() => window.dispatchEvent(new CustomEvent("resize")), 300)
-    if(!newOpen) {
-      setNestedTools(false)
-      setNestedCommunity(false)
+    if (!isTablePotrait) {
+      props.onOpen(newOpen)
+      setTimeout(() => window.dispatchEvent(new CustomEvent("resize")), 300)
+      if(!newOpen) {
+        setNestedTools(false)
+        setNestedCommunity(false)
+      }
     }
     return newOpen
   })
@@ -131,7 +138,8 @@ const Header = props => {
         style={{backgroundColor: WHITE, color: BLACK, borderLeft: 'none'}}
         className={classes.appBar}
       >
-        <Toolbar style={{padding: '0 15px'}}>
+        <Toolbar style={isSearchPage?{padding: '0 15px', display:"flex", justifyContent:"space-between"}:{padding: '0 15px'}}>
+          <div style={{ display:"flex"}}>
           <IconButton
             color="primary"
             aria-label="open drawer"
@@ -146,6 +154,7 @@ const Header = props => {
               OCL
             </a>
           </Typography>
+          </div>
           <div className="col-sm-8">
             {
               !isAtGlobalSearch() &&
@@ -178,12 +187,16 @@ const Header = props => {
         open ?
         <Drawer
           className={classes.drawer}
-          variant="persistent"
+          variant={!isTablePotrait ? "persistent": null}
           anchor="left"
           open
           classes={{
             paper: classes.drawerPaper,
           }}
+          onClose={()=>{
+            if(!isTablePotrait) return
+            toggleOpen()
+          }}
           >
           <Toolbar />
           <div className={classes.drawerContainer}>
@@ -354,7 +367,6 @@ const Header = props => {
             <Feedback mainButtonLabel={false} containerClassName='feedback-div' />
           </List>
         </Drawer>
-
       }
     </React.Fragment>
   )

src/components/common/LayoutToggle.jsx

@@ -11,6 +11,7 @@ import { isAdminUser } from '../../common/utils';
 import {
   TABLE_LAYOUT_ID, LIST_LAYOUT_ID, SPLIT_LAYOUT_ID
 } from '../../common/constants'
+import useResponsive from "../../hooks/useResponsive"
 
 const OPTIONS = [
   {id: TABLE_LAYOUT_ID, name: 'Table View', icon: <TableIcon fontSize='inherit' />},
@@ -29,10 +30,12 @@ const LayoutToggle = ({ layoutId, onClick, size, includeSplitView }) => {
     onClick(id)
     toggleAnchor()
   }
+  const { isTablePotrait } = useResponsive()
+
 
   return (
     <React.Fragment>
-      <Tooltip arrow title='Switch view layouts'>
+      {!isTablePotrait && <Tooltip arrow title='Switch view layouts'>
         <Chip
           variant="outlined"
           icon={selectedLayout.icon}
@@ -43,7 +46,7 @@ const LayoutToggle = ({ layoutId, onClick, size, includeSplitView }) => {
           deleteIcon={<ArrowDropDownIcon fontSize="inherit" />}
           onDelete={toggleAnchor}
         />
-      </Tooltip>
+      </Tooltip>}
       <Menu
         id="layouts-menu"
         anchorEl={anchorEl}

src/components/common/VersionList.jsx

@@ -12,6 +12,7 @@ import LastUpdatedOnLabel from './LastUpdatedOnLabel';
 import Tip from './Tip';
 import SourceChildVersionAssociationWithContainer from './SourceChildVersionAssociationWithContainer';
 import RetiredChip from '../common/RetiredChip';
+import useResponsive from '../../hooks/useResponsive';
 
 
 const ACCORDIAN_HEADING_STYLES = {
@@ -48,6 +49,8 @@ const VersionList = ({ versions, resource }) => {
 
   const isAssociated = version => !isEmpty(version.source_versions) || !isEmpty(version.collection_versions)
 
+  const { isTabletLandscape } = useResponsive()
+
   return (
     <div className='col-md-12'>
       <div className='col-md-8 no-left-padding less-paded-accordian-header'>
@@ -145,7 +148,7 @@ const VersionList = ({ versions, resource }) => {
           </AccordionDetails>
         </Accordion>
       </div>
-      <div className='col-md-4 no-right-padding'>
+     {!isTabletLandscape && <div className='col-md-4 no-right-padding'>
         <Tip
           content={
             <p className="small">
@@ -154,7 +157,7 @@ const VersionList = ({ versions, resource }) => {
             </p>
           }
         />
-      </div>
+      </div>}
     </div>
   );
 }

src/components/search/ResourceTabs.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { CircularProgress, Tabs, Tab, AppBar, } from '@material-ui/core';
+import { CircularProgress, Tabs, Tab, AppBar, Button, Menu, MenuItem } from '@material-ui/core';
 import {
   LocalOffer as LocalOfferIcon, Link as LinkIcon, List as ListIcon,
   Loyalty as LoyaltyIcon, Home as HomeIcon, Person as PersonIcon,
+  ArrowDropDown as ArrowDropDownIcon
 } from '@material-ui/icons'
 import { get, startCase, invert } from 'lodash';
 import { BLUE, WHITE, GREEN, ORANGE, DARKGRAY } from '../../common/constants';
+import useResponsive from '../../hooks/useResponsive';
 
 const HEIGHT = '50px'
 
@@ -21,6 +23,8 @@ const RESOURCES = {
   concepts: 0, mappings: 1, sources: 2, collections: 3, organizations: 4, users: 5
 }
 
+const COLORS = [BLUE, BLUE, GREEN, GREEN, ORANGE, ORANGE]
+
 const ResourceTabs = props => {
   const activeResource = props.active;
   const getActiveIndex = () => {
@@ -47,7 +51,7 @@ const ResourceTabs = props => {
   }
 
   const getTabStyles = (index, color) => {
-    const styles = {...TAB_STYLES}
+    const styles = {...TAB_STYLES }
 
     if(value === index)
       return {color: color, ...styles}
@@ -87,6 +91,96 @@ const ResourceTabs = props => {
     />
   }
 
+  const { isTabletLandscape, isMobileLarge } = useResponsive()
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleOpenMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleCloseMenu = (_, newValue) => {
+    setAnchorEl(null);
+    if(newValue){
+      setValue(() => {
+        props.onClick(get(invert(RESOURCES), newValue))
+        return newValue
+      });
+    }
+  };
+
+  const getCurrentReource =(value)=>{
+    const icons = [LocalOfferIcon, LinkIcon, ListIcon, LoyaltyIcon, HomeIcon, PersonIcon]
+    const Icon = icons[value]
+    return (
+      <>
+        <Icon fontSize='small' style={getIconStyles(value, COLORS[value])} />
+        {getLabelComponent(Object.keys(RESOURCES).find(key => RESOURCES[key] === value), COLORS[value])}
+      </>
+    )
+  }
+
+
+  if(isMobileLarge){
+    return (
+      <div style={{margin:"10px 0"}}>
+        <Button
+          aria-controls="menu"
+          aria-haspopup="true"
+          variant="outlined"
+          endIcon={<ArrowDropDownIcon style={{marginLeft:"15px"}} />}
+          color="primary"
+          onClick={handleOpenMenu}
+        >
+         {getCurrentReource(value)}
+        </Button>
+        <Menu
+          id="simple-menu"
+          anchorEl={anchorEl}
+          keepMounted
+          open={Boolean(anchorEl)}
+          onClose={(e)=>handleCloseMenu(e, null)}
+        >
+          <MenuItem onClick={(e)=>handleCloseMenu(e, 0)}>
+            <>
+              <LocalOfferIcon fontSize='small' style={getIconStyles(0, BLUE)} />
+              {getLabelComponent('concepts', BLUE)}
+            </>
+          </MenuItem>
+          <MenuItem onClick={(e)=>handleCloseMenu(e, 1)}>
+            <>
+              <LinkIcon fontSize='small' style={getIconStyles(1, BLUE)} />
+              {getLabelComponent('mappings', BLUE)}
+            </>
+          </MenuItem>
+          <MenuItem onClick={(e)=>handleCloseMenu(e, 2)}>
+            <>
+              <ListIcon fontSize='small' style={getIconStyles(2, GREEN)} />
+              {getLabelComponent('sources', GREEN)}
+            </>
+          </MenuItem>
+          <MenuItem onClick={(e)=>handleCloseMenu(e, 3)}>
+            <>
+              <LoyaltyIcon fontSize='small' style={getIconStyles(3, GREEN)} />
+              {getLabelComponent('collections', GREEN)}
+            </>
+          </MenuItem>
+          <MenuItem onClick={(e)=>handleCloseMenu(e, 4)}>
+            <>
+              <HomeIcon fontSize='small' style={getIconStyles(4, ORANGE)} />
+              {getLabelComponent('organizations', ORANGE)}
+            </>
+          </MenuItem>
+          <MenuItem onClick={(e)=>handleCloseMenu(e, 5)}>
+            <>
+              <PersonIcon fontSize='small' style={getIconStyles(5, ORANGE)}/>
+              {getLabelComponent('users', ORANGE)}
+            </>
+          </MenuItem>
+        </Menu>
+      </div>
+    )
+  }
+
   return (
     <div style={{width: '100%'}}>
       <AppBar position="static" color="default" style={{backgroundColor: WHITE, boxShadow: 'none', borderTop: '1px solid lightgray', borderBottom: '1px solid lightgray'}}>
@@ -95,7 +189,7 @@ const ResourceTabs = props => {
           onChange={handleChange}
           indicatorColor="primary"
           textColor="primary"
-          variant="fullWidth"
+          variant={isTabletLandscape ? "scrollable" :"fullWidth"}
           style={{height: HEIGHT}}
           classes={{
             indicator: indicatorColorClass()

src/components/search/Search.jsx

@@ -32,6 +32,7 @@ import BestMatchSort from './BestMatchSort';
 import NumericalIDSort from './NumericalIDSort';
 import NavigationButtonGroup from './NavigationButtonGroup';
 import GenericFilterChip from './GenericFilterChip';
+import useResponsive from "../../hooks/useResponsive"
 
 const resourceResultStruct = {
   isLoading: false,
@@ -81,6 +82,8 @@ class Search extends React.Component {
     }
   }
 
+  isSearchPage = () => get(this.props, 'location.pathname').includes("search")
+
   getLayoutTypeName = () => {
     const { isList, isSplit } = this.state;
     if(isList)
@@ -530,7 +533,7 @@ class Search extends React.Component {
     const sortOn = sortDesc || sortAsc;
     const sortBy = sortDesc ? 'desc' : 'asc'
     return (
-      <span style={{display: 'inline-flex', alignItems: 'center', width: '135%', overflow: 'auto'}}>
+      <span style={this.isSearchPage() ? {display: 'inline-flex', alignItems: 'center', width: '95%', overflow: 'auto', flexWrap:"wrap", gap:"5px"}:{display: 'inline-flex', alignItems: 'center', width: '135%', overflow: 'auto'}}>
         {
           extraControls &&
           <span style={{paddingRight: '4px'}}>
@@ -778,4 +781,10 @@ class Search extends React.Component {
   }
 }
 
-export default withRouter(Search);
+const _Search = (props)=>{
+  const SearchComponent = withRouter(Search)
+  const { isTablePotrait } = useResponsive()
+  return <SearchComponent {...props} fixedFilters={isTablePotrait ? {isTable:false, isList:true}: {}}/>
+}
+
+export default _Search

src/hooks/useResponsive.js

@@ -0,0 +1,19 @@
+import { useMediaQuery } from "react-responsive";
+
+export default (customBreakPoint = 0) => {
+  const isTabletLandscape = useMediaQuery({ query: "(max-width: 1150px)" });
+  const isTablePotrait = useMediaQuery({ query: "(max-width: 900px)" });
+  const isMobileLarge = useMediaQuery({ query: "(max-width: 650px)" });
+  const isMobile = useMediaQuery({ query: "(max-width: 550px)" });
+  const isBreakPoint = useMediaQuery({
+    query: `(max-width: ${customBreakPoint}px)`,
+  });
+
+  return {
+    isTabletLandscape,
+    isTablePotrait,
+    isMobileLarge,
+    isMobile,
+    isBreakPoint,
+  };
+};