make header sticky, update scroll

InseeFr · Apr 13, 2021 · 51f490c · 51f490c
1 parent 292599a
commit 51f490c
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 8 deletions.
diff --git a/src/components/common/navigation/component.js b/src/components/common/navigation/component.js
@@ -70,7 +70,7 @@ const Navigation = ({ location, textSearch, setTextSearch, version, setOpenDrawe
 
   return (
     <>
-      <AppBar position="static" className={classes.appBar} elevation={0}>
+      <AppBar position="sticky" className={classes.appBar} elevation={0}>
         <Toolbar className={classes.appBar}>
           <Tooltip title={`Version : ${version}`}>
             <IconButton

diff --git a/src/components/panel-body/UEpage/navigation/component.js b/src/components/panel-body/UEpage/navigation/component.js
@@ -46,7 +46,12 @@ const Navigation = ({ match, refs }) => {
   };
 
   const scrollTo = ref => {
-    ref.current.scrollIntoView({ behavior: 'smooth' });
+    // headers element are 13.5 em high, 'normal' fontSize is 14px
+    const { offsetTop } = ref.current;
+    const fontSize = getComputedStyle(ref.current)['font-style'];
+    const fontValue = fontSize === 'normal' ? 14 : fontSize;
+    const topValue = parseFloat(offsetTop - fontValue * 13.5);
+    window.scrollTo({ behavior: 'smooth', top: topValue });
   };
 
   const transmit = async () => {

diff --git a/src/components/panel-body/UEpage/router.js b/src/components/panel-body/UEpage/router.js
@@ -15,7 +15,7 @@ import UeSubInfoTile from './ueSubInfoTile';
 
 const useStyles = makeStyles(() => ({
   ajustScroll: {
-    height: 'calc(100vh - 3em)',
+    height: 'calc(100vh - 13.5em)',
   },
   modal: {
     display: 'flex',
@@ -30,7 +30,6 @@ const useStyles = makeStyles(() => ({
     boxShadow: 'unset',
     backgroundColor: 'transparent',
   },
-  topSticky: { position: 'sticky', top: '0px' },
 }));
 
 const Router = ({ match, saveUE, refresh }) => {
@@ -85,7 +84,7 @@ const Router = ({ match, saveUE, refresh }) => {
 
   return (
     <>
-      <div className={classes.topSticky}>
+      <div>
         <StateLine />
         <Navigation refs={refs} match={match} />
         <div>

diff --git a/src/components/panel-body/UEpage/stateLine.js b/src/components/panel-body/UEpage/stateLine.js
@@ -30,7 +30,7 @@ const StateLine = () => {
       height: 'max-content',
       backgroundColor: theme.palette.primary.main,
       position: 'sticky',
-      top: '6em',
+      top: '5em',
     },
   }));
   const classes = useStyles();

diff --git a/src/components/panel-body/UEpage/ueSubInfoTile.js b/src/components/panel-body/UEpage/ueSubInfoTile.js
@@ -11,7 +11,6 @@ const useStyles = makeStyles(() => ({
     scrollMarginTop: '3em',
     padding: '1em',
     borderRadius: '15px',
-    minHeight: '400px',
   },
 }));
 

diff --git a/src/components/panel-body/home/component.js b/src/components/panel-body/home/component.js
@@ -12,7 +12,7 @@ const Home = ({ location, match }) => {
   const [openDrawer, setOpenDrawer] = useState(false);
 
   return (
-    <div className="home">
+    <div>
       <Navigation
         location={location}
         textSearch={textSearch}