diff --git a/.gitignore b/.gitignore index 886f99cb..dd821b80 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,4 @@ yarn-debug.log* yarn-error.log* .eslintcache +.vscode diff --git a/package.json b/package.json index e422d8f5..69601b9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rumpel-react", - "version": "4.2.2", + "version": "4.2.3", "private": true, "dependencies": { "@dataswift/hat-js": "^0.3.2", diff --git a/src/app.config.ts b/src/app.config.ts index b4e3e84d..a008a172 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -7,7 +7,7 @@ const externalLinks = { }; export const config = { - version: '4.2.2', + version: '4.2.3', name: environment.appName, tokenApp: environment.tokenName, tokenExpiryTime: 3, diff --git a/src/components/PrivateSpace/PrivateSpace.scss b/src/components/PrivateSpace/PrivateSpace.scss index 824847cd..dee80292 100644 --- a/src/components/PrivateSpace/PrivateSpace.scss +++ b/src/components/PrivateSpace/PrivateSpace.scss @@ -23,7 +23,6 @@ flex-direction: column; position: relative; z-index: 1; - height: 100%; overflow: auto; @media (max-width: 730px) { diff --git a/src/components/PrivateSpace/PrivateSpace.tsx b/src/components/PrivateSpace/PrivateSpace.tsx index 097e8c44..ffa286ca 100644 --- a/src/components/PrivateSpace/PrivateSpace.tsx +++ b/src/components/PrivateSpace/PrivateSpace.tsx @@ -1,12 +1,12 @@ import React, { ReactNode, useEffect, useRef, useState } from 'react'; -import { useLocation } from "react-router-dom"; -import { NavigationHeader } from "../headers/NavigationHeader/NavigationHeader"; -import { SideMenu } from "../SideMenu/SideMenu"; +import { useLocation } from 'react-router-dom'; +import { NavigationHeader } from '../headers/NavigationHeader/NavigationHeader'; +import { SideMenu } from '../SideMenu/SideMenu'; import './PrivateSpace.scss'; type Props = { - children: ReactNode; -} + children: ReactNode; +}; export const PrivateSpace: React.FC = ({ children }) => { const [hideSideMenu, setHideSideMenu] = useState(false); @@ -18,7 +18,7 @@ export const PrivateSpace: React.FC = ({ children }) => { setHideSideMenu(true); } }, []); - + useEffect(() => { content.current?.scrollTo(0, 0); }, [pathname]); @@ -31,13 +31,14 @@ export const PrivateSpace: React.FC = ({ children }) => { return (
- setHideSideMenu(!hideSideMenu)}/> + setHideSideMenu(!hideSideMenu)} />
- +
+ ref={content} + > {children}
diff --git a/src/components/headers/NavigationHeader/NavigationHeader.scss b/src/components/headers/NavigationHeader/NavigationHeader.scss index b38c5a51..cfde0a75 100644 --- a/src/components/headers/NavigationHeader/NavigationHeader.scss +++ b/src/components/headers/NavigationHeader/NavigationHeader.scss @@ -37,6 +37,7 @@ } .nav-header { + position: fixed; height: 60px; - box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12); + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); } diff --git a/src/features/feed/Feed.scss b/src/features/feed/Feed.scss index f03a8380..d58a73a5 100644 --- a/src/features/feed/Feed.scss +++ b/src/features/feed/Feed.scss @@ -1,4 +1,4 @@ -@import "../../assets/styles/branding"; +@import '../../assets/styles/branding'; .she-feed { overflow: auto; @@ -16,9 +16,10 @@ color: $ds-dusty-gray-color; max-width: 500px; - &:before, &:after { + &:before, + &:after { background-color: #e0e0e0; - content: " "; + content: ' '; display: inline-block; height: 1px; position: relative; @@ -97,8 +98,8 @@ .feed-user-actions { display: flex; flex-direction: column; - position: -webkit-sticky; /* Safari */ - position: sticky; + position: -webkit-fixed; /* Safari */ + position: fixed; margin: auto auto 0; /* Fix the issue with the small feed height */ bottom: 0; left: 0; @@ -120,7 +121,7 @@ cursor: pointer; border: 1px solid transparent; text-transform: uppercase; - flex: 1 1 auto; + flex: 1 1 auto; padding: 0; background-color: transparent; color: $app-accent-color; @@ -130,7 +131,7 @@ align-items: center; &:not(:last-child) { - border-right: 1px solid rgba(0, 0, 0, 0.20); + border-right: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0; } } diff --git a/src/features/feed/Feed.tsx b/src/features/feed/Feed.tsx index f5ad845b..3b9175ef 100644 --- a/src/features/feed/Feed.tsx +++ b/src/features/feed/Feed.tsx @@ -1,19 +1,19 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState } from 'react'; import './Feed.scss'; -import { FeedUserActions } from "./FeedUserActions"; -import { FeedFilteredData } from "./FeedFilteredDataList"; -import { InfiniteScrolling } from "../../components/InfiniteScrolling/InfiniteScrolling"; -import { resetSheFeedValues } from "./feedSlice"; -import { useDispatch } from "react-redux"; +import { FeedUserActions } from './FeedUserActions'; +import { FeedFilteredData } from './FeedFilteredDataList'; +import { InfiniteScrolling } from '../../components/InfiniteScrolling/InfiniteScrolling'; +import { resetSheFeedValues } from './feedSlice'; +import { useDispatch } from 'react-redux'; const Feed: React.FC = () => { - const [feedState, setFeedState] = useState("infinite-scrolling"); + const [feedState, setFeedState] = useState('infinite-scrolling'); const [selectedDates, setSelectedDates] = useState({ since: 0, until: 0 }); const dispatch = useDispatch(); useEffect(() => { if (selectedDates.since) { - setFeedState("filtering"); + setFeedState('filtering'); } }, [selectedDates]); @@ -27,18 +27,14 @@ const Feed: React.FC = () => { const onRefreshClick = () => { dispatch(resetSheFeedValues()); - setFeedState("infinite-scrolling"); + setFeedState('infinite-scrolling'); }; return (
- {feedState === 'filtering' && ( - - )} + {feedState === 'filtering' && } - {feedState === 'infinite-scrolling' && ( - - )} + {feedState === 'infinite-scrolling' && } setSelectedDates({ since: since, until: until })} onRefresh={onRefreshClick}