Develop to release (#597)

* UserStory#207 newest section mobile (#567) * edit mobile newest section * edit mobile newest section * edit mobile newest section * edit mobile newest section * edit mobile newest section * edit mobile view * edit mobile view * edit mobile view * edit mobile view * edit mobile view * edit mobile view * edit mobile view * edit mobile view * edit main page mobile version * edit main page mobile version * edit main page mobile version * edit main page mobile version * edit main page mobile version * edit main page mobile version * edit main page mobile version * edit sonarLint errors * Editor bug fix (#566) * editor_bugFix * editor_bugFix * edit mobile view * edit text max lengths * edit text max lengths * edit text max lengths * edit editors test * Change load more icon (#565) * Fix carousel responsiveness (#568) * Fix clickable link margin (#569) * header_Hot_Fix (#571) * Edit main page mobile (#574) * edit_main_page_mobile * edit_main_page_mobile * edit_main_page_mobile * edit_main_page_mobile * edit_main_page_mobile * edit_main_page_mobile * edit_main_page_mobile * edit_main_page_mobile * Fixed width of video content (#573) * In component ArticleCreation changed langToken from post to article and in NoteCreation from article to post. (#579) * fix label in tab article (#578) * Fix header and footer responsiveness on laptops (#575) * Fix header and footer responsiveness on laptops * Hide the avatar on tablets * editor bug fix & hide footer on mobile version (#577) * editor bug fix & hide footer on mobile version * editor bug fix & hide footer on mobile version * fix conflict * Materials page mobile design (#576) * Add MaterialsViewMobile component and connect it * Remove margin from page (on mobile width) * Change width of the preview cards (mobile width) * Add filters button * Add FiltersMenu component * Adjust Media Post Preview Card width in mobile design * Add new word to locale * Change color of direction chip on mobile * Add dividers to checkboxes in mobile * Movd selected types and filters to separate variable * Adjust MaterialsView styles for mobile * Update FiltersMenu * Update MaterialsViewMobile * Update FiltersButton * Adjust styles * Fix content display on mobile devices * Add new word to locales * Add dynamic header and load more button * Remove redundant inline styles * Update PostList styles * Fix style bugs * Add svg arrow, fix grid props bug * Update filters button cross * Change width of selected types slider * Edit accountmenu view (#589) * change name to icon in account menu * add styling to account nemu icon * remove unused vars * stylize the button "all" on mobile (#588) * make_editor_remind_field_highlighted (#585) * Edit sticky app bar & header (#583) * edit_sticky_appBar_&_header * edit_sticky_appBar_&_header * edit_sticky_appBar_&_header * fixed typo * In LoginMode.css I set the property padding to 0 for congratulation-sub-text and for congratulation-title-text and for еру second class I set padding-top to 50px, for congratulation-container height to 430px. Also i added cross button forco congratulation pop-up. (#587) * Create mobile version for footer (#590) * Update LoadMoreButton on mobile (#584) * remove default image (#592) * edit editor modal (#591) Co-authored-by: Nikita <47755204+niksonax@users.noreply.github.com> Co-authored-by: Danylo Shevchenko <60629098+shedanny@users.noreply.github.com> Co-authored-by: NabokinAlexandr <56695491+NabokinAlexandr@users.noreply.github.com> Co-authored-by: daniloflek <58514722+daniloflek@users.noreply.github.com> Co-authored-by: OksanLan <75547527+OksanLan@users.noreply.github.com> Co-authored-by: Dmytro Pavliuk <pavlyukdm@gmail.com> Co-authored-by: Ivan Danyliuk <80050483+IvanDanyliuk@users.noreply.github.com>
ita-social-projects · Sep 29, 2021 · 050414f · 050414f
1 parent bd5af12
commit 050414f
Show file tree

Hide file tree

Showing 28 changed files with 365 additions and 216 deletions.
diff --git a/src/components/AutoPaginationPostList/AutoPaginationPostList.tsx b/src/components/AutoPaginationPostList/AutoPaginationPostList.tsx
@@ -30,9 +30,9 @@ export const AutoPaginationPostList: React.FC<IAutoPaginationPostListProps> = ({
 
   return (
     <div>
-      <PostsList postsList={posts.slice(0, posts.length - 5)} />
+      <PostsList postsList={posts.slice(0, posts.length - 1)} />
       <div ref={lastElement}>
-        <PostsList postsList={posts.slice(-5)} />
+        <PostsList postsList={posts.slice(-1)} />
       </div>
     </div>
   );

diff --git a/src/components/Editor/CustomModules/BackgroundImageContainer/BackgroundImageContainer.tsx b/src/components/Editor/CustomModules/BackgroundImageContainer/BackgroundImageContainer.tsx
@@ -57,9 +57,9 @@ export const BackgroundImageContainer: React.FC<IBackgroundImageContainerProps>
 
   return (
     <Box mt={2} display="flex" flexDirection="column" alignItems="start">
-      <Typography variant="h5">{`${title}:`}</Typography>
+      <Typography className={classes.addImage} variant="h5">{`${title}:`}</Typography>
       {reminder && (
-        <Typography variant="h6">{t(langTokens.editor.warn)}</Typography>
+        <Typography className={classes.requiredField} variant="h6">{t(langTokens.editor.warn)}</Typography>
       )}
       <Box mb={2}>
         {notCarousel && (

diff --git a/...omponents/Editor/CustomModules/BackgroundImageContainer/backgroundImageContainer.style.ts b/...omponents/Editor/CustomModules/BackgroundImageContainer/backgroundImageContainer.style.ts
@@ -55,4 +55,15 @@ export const useStyles = makeStyles((theme) => ({
       cursor: 'pointer',
     },
   },
+  requiredField: {
+    '&::before': {
+      content: '"*"',
+      color: 'red',
+      display: 'inline',
+      fontSize: '27px',
+    },
+  },
+  addImage: {
+    marginBottom: theme.spacing(1),
+  },
 }));
diff --git a/src/components/Header/AccountMenu.styles.ts b/src/components/Header/AccountMenu.styles.ts
@@ -15,4 +15,8 @@ export const useStyles = makeStyles((theme) => ({
   menu: {
     marginTop: theme.spacing(2),
   },
+  icon: {
+    width: theme.spacing(8),
+    height: theme.spacing(8),
+  },
 }));
diff --git a/src/components/Header/AccountMenu.tsx b/src/components/Header/AccountMenu.tsx
@@ -2,6 +2,7 @@ import React, { useContext, useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { Button, Typography, Avatar } from '@material-ui/core';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import { useTranslation } from 'react-i18next';
 import { useStyles } from './AccountMenu.styles';
 import {
@@ -79,13 +80,8 @@ export const AccountMenu: React.FC = () => {
         ) : (
           <AccountIcon className={classes.avatar} />
         )}
-        {!tablet ? (
-          <Typography className={classes.name} variant="h5">
-            {user.data && user.data.firstName}
-          </Typography>
-        ) : (
-          ''
-        )}
+        {user.data && <ArrowDropDownIcon className={classes.icon} />}
+
       </Button>
 
       <StyledMenu

diff --git a/src/components/Header/Header.styles.ts b/src/components/Header/Header.styles.ts
@@ -9,6 +9,10 @@ export const useStyles = makeStyles(
     headerMobile: {
       height: 85,
       backgroundColor: theme.palette.common.black,
+      position: 'sticky',
+      top: 0,
+      left: 0,
+      zIndex:1500,
     },
     container: {
       height: '100%',

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,14 +1,5 @@
 import React, { useContext, useState } from 'react';
-import {
-  Box,
-  Button,
-  Container,
-  Input,
-  Menu,
-  MenuItem,
-  Toolbar,
-  Typography,
-} from '@material-ui/core';
+import { Box, Button, Container, Input, Menu, MenuItem, Slide, Toolbar, Typography } from '@material-ui/core';
 import { Link, NavLink, Route } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import SearchIcon from '@material-ui/icons/Search';
@@ -21,6 +12,8 @@ import i18n, { langTokens } from '../../locales/localizationInit';
 import { IHeaderProps } from './types';
 import { ScreenContext } from '../../old/provider/MobileProvider/ScreenContext';
 import { BurgerMenu } from '../BurgerMenu/BurgerMenu';
+import { useActions } from '../../shared/hooks';
+import { makeHeaderInvisible, makeHeaderVisible } from '../../models/headerVisibility';
 
 export const navElems: IHeaderProps[] = [
   {
@@ -45,92 +38,120 @@ export const Header: React.FC = () => {
   const { t } = useTranslation();
   const { authenticated } = useContext(AuthContext);
 
+  const [visible, setVisible] = useState<boolean>(true);
+  const [oldPageOffsetY, setOldPageOffsetY] = useState<number>(0);
   const [searchInput, setSearchInput] = useState<null | Element>(null);
   const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false);
 
   const { mobile } = useContext(ScreenContext);
 
+  const [boundMakeHeaderVisible, boundMakeHeaderInvisible] = useActions([
+    makeHeaderVisible,
+    makeHeaderInvisible,
+  ]);
+
+  const transitionDuration = {
+    enter: 200,
+    exit: 200,
+  };
+
+  window.onscroll = () => {
+    setOldPageOffsetY(visualViewport.pageTop);
+    if (visualViewport.pageTop >= oldPageOffsetY) {
+      setVisible(false);
+      boundMakeHeaderInvisible();
+    } else {
+      setVisible(true);
+      boundMakeHeaderVisible();
+    }
+  };
+
   return (
-    <div id="header" className={mobile ? classes.headerMobile : classes.header}>
-      <Container className={classes.container}>
-        <Toolbar className={classes.toolbar}>
-          {mobile && (
-            <BurgerMenu
-              navigation={navElems}
-              mobileMenuOpen={mobileMenuOpen}
-              setMobileMenuOpen={(b) => setMobileMenuOpen(b)}
-            />
-          )}
-          <Box display="flex">
-            {!mobileMenuOpen && !searchInput && (
-              <Link to="/">
-                <Typography
-                  className={mobile ? classes.logoMobile : classes.logo}
-                  variant="h1"
-                >
-                  {t(langTokens.common.projectName)}
-                </Typography>
-              </Link>
+    <Slide in={!mobile || visible} timeout={transitionDuration}>
+      <div
+        id="header"
+        className={mobile ? classes.headerMobile : classes.header}
+      >
+        <Container className={classes.container}>
+          <Toolbar className={classes.toolbar}>
+            {mobile && (
+              <BurgerMenu
+                navigation={navElems}
+                mobileMenuOpen={mobileMenuOpen}
+                setMobileMenuOpen={(b) => setMobileMenuOpen(b)}
+              />
             )}
-            {!mobile && (
-              <Box className={classes.tabs}>
-                {navElems.map((item) => (
-                  <NavLink
-                    to={item.url}
-                    key={item.id}
-                    className={classes.tab}
-                    exact
+            <Box display="flex">
+              {!mobileMenuOpen && !searchInput && (
+                <Link to="/">
+                  <Typography
+                    className={mobile ? classes.logoMobile : classes.logo}
+                    variant="h1"
                   >
-                    <Typography variant="h5" className={classes.tabLabel}>
-                      {item.label}
-                    </Typography>
-                  </NavLink>
-                ))}
-              </Box>
-            )}
-          </Box>
-          {!mobile && (
-            <Box className={classes.actionsContainer}>
-              {authenticated && <PostCreationMenu />}
-              {authenticated ? (
-                <AccountMenu />
-              ) : (
-                <Route path="/opendoctorgate">
-                  <LoginModal />
-                </Route>
+                    {t(langTokens.common.projectName)}
+                  </Typography>
+                </Link>
+              )}
+              {!mobile && (
+                <Box className={classes.tabs}>
+                  {navElems.map((item) => (
+                    <NavLink
+                      to={item.url}
+                      key={item.id}
+                      className={classes.tab}
+                      exact
+                    >
+                      <Typography variant="h5" className={classes.tabLabel}>
+                        {item.label}
+                      </Typography>
+                    </NavLink>
+                  ))}
+                </Box>
               )}
             </Box>
-          )}
-          {mobile && (
-            <div>
-              <Button
-                aria-controls="simple-menu"
-                aria-haspopup="true"
-                onClick={(e) => setSearchInput(e.currentTarget)}
-              >
-                <SearchIcon className={classes.searchIcon} />
-              </Button>
-              <Menu
-                classes={{ list: classes.label, paper: classes.paper }}
-                id="simple-menu"
-                anchorEl={searchInput}
-                keepMounted
-                open={Boolean(searchInput)}
-                onClose={() => setSearchInput(null)}
-              >
-                <MenuItem className={classes.searchInputWrapper}>
-                  <Input
-                    disableUnderline
-                    className={classes.searchInput}
-                    placeholder={t(langTokens.common.inputSearchPlaceholder)}
-                  />
-                  <SearchIcon className={classes.searchInputIcon} />
-                </MenuItem>
-              </Menu>
-            </div>
-          )}
-        </Toolbar>
-      </Container>
-    </div>
+            {!mobile && (
+              <Box className={classes.actionsContainer}>
+                {authenticated && <PostCreationMenu />}
+                {authenticated ? (
+                  <AccountMenu />
+                ) : (
+                  <Route path="/opendoctorgate">
+                    <LoginModal />
+                  </Route>
+                )}
+              </Box>
+            )}
+            {mobile && (
+              <div>
+                <Button
+                  aria-controls="simple-menu"
+                  aria-haspopup="true"
+                  onClick={(e) => setSearchInput(e.currentTarget)}
+                >
+                  <SearchIcon className={classes.searchIcon} />
+                </Button>
+                <Menu
+                  classes={{ list: classes.label, paper: classes.paper }}
+                  id="simple-menu"
+                  anchorEl={searchInput}
+                  keepMounted
+                  open={Boolean(searchInput)}
+                  onClose={() => setSearchInput(null)}
+                >
+                  <MenuItem className={classes.searchInputWrapper}>
+                    <Input
+                      disableUnderline
+                      className={classes.searchInput}
+                      placeholder={t(langTokens.common.inputSearchPlaceholder)}
+                    />
+                    <SearchIcon className={classes.searchInputIcon} />
+                  </MenuItem>
+                </Menu>
+              </div>
+            )}
+          </Toolbar>
+        </Container>
+      </div>
+    </Slide>
   );
 };