Merge pull request #79 from AplinkosMinisterija/77-patikrinti-student…

…es-vedamus-duomenis scroll fix
AplinkosMinisterija · May 31, 2024 · 7f92f71 · 7f92f71
2 parents 12459da + 8fface9
commit 7f92f71
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 78 deletions.
diff --git a/src/components/cards/ToolCard.tsx b/src/components/cards/ToolCard.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { Tool } from '../../utils/types';
 import Icon, { IconName } from '../other/Icon';
+import { ToolTypeType } from '../../utils';
 
 interface ToolCardProps {
   tool: Tool;
@@ -11,6 +12,9 @@ const ToolCard = ({ tool, onClick }: ToolCardProps) => {
   const location = isInWater ? tool.toolsGroup?.buildEvent.location : undefined;
 
   const isEstuary = location?.name?.includes('baras');
+  const toolInfo =
+    tool.toolType.type == ToolTypeType.NET && tool.data.eyeSize ? `, ${tool.data.eyeSize} mm` : '';
+  const toolLabel = tool.toolType.label + toolInfo;
 
   return (
     <Container onClick={onClick}>
@@ -20,7 +24,7 @@ const ToolCard = ({ tool, onClick }: ToolCardProps) => {
         {isInWater && !isEstuary && <Icon name={IconName.tools} />}
       </IconContainer>
       <div>
-        <ToolName>{tool.toolType.label}</ToolName>
+        <ToolName>{toolLabel}</ToolName>
         <div>{tool.sealNr}</div>
       </div>
     </Container>

diff --git a/src/components/containers/ResearchesList.tsx b/src/components/containers/ResearchesList.tsx
@@ -2,10 +2,9 @@ import { isEmpty } from 'lodash';
 import React, { useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import { slugs, useInfinityLoad } from '../../utils';
+import { device, slugs, useInfinityLoad } from '../../utils';
 import api from '../../utils/api';
 import Button from '../buttons/Button';
-import { Grid } from '../other/CommonStyles';
 import LoaderComponent from '../other/LoaderComponent';
 import { NotFound } from '../other/NotFound';
 import ResearchCard from '../other/ResearchCard';
@@ -34,7 +33,7 @@ const Researches = () => {
             <React.Fragment key={pageIndex}>
               {page.data.map((research: any) => (
                 <ResearchCard
-                  key={research?.id!}
+                  key={research.id}
                   research={research}
                   onClick={() => navigate(slugs.updateResearch(research.id!))}
                 />
@@ -49,27 +48,62 @@ const Researches = () => {
   };
 
   return (
-    <Grid $columns={1}>
+    <Container>
       <>
         {renderContent()}
-        <Button onClick={() => navigate(slugs.newResearch)}>{'Naujas mokslinis tyrimas'}</Button>
+        <Footer>
+          <StyledButton onClick={() => navigate(slugs.newResearch)}>
+            {'Naujas mokslinis tyrimas'}
+          </StyledButton>
+        </Footer>
       </>
-    </Grid>
+    </Container>
   );
 };
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  width: 100%;
+`;
+
 const Invisible = styled.div`
   width: 10px;
   height: 16px;
 `;
 
 const InnerContainer = styled.div`
-  overflow-y: auto;
   width: 100%;
-  height: 700px;
+  height: 100%;
   display: flex;
   gap: 12px;
   flex-direction: column;
+  overflow: scroll;
+  padding-bottom: 60px;
+  @media ${device.desktop} {
+    padding-bottom: 0;
+  }
+`;
+
+const StyledButton = styled(Button)`
+  width: 720px;
+`;
+
+const Footer = styled.div`
+  display: flex;
+  padding: 16px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  box-sizing: border-box;
+  justify-content: center;
+  @media ${device.desktop} {
+    width: calc(100% - 320px);
+    bottom: 16px;
+  }
 `;
 
 export default Researches;
diff --git a/src/components/layouts/DefaultLayout.tsx b/src/components/layouts/DefaultLayout.tsx
@@ -2,85 +2,25 @@ import styled from 'styled-components';
 import { device, useGetCurrentRoute, useWindowSize } from '../../utils';
 import Div100vh from 'react-div-100vh';
 import SideBar from './SideBar';
-import BackHeader from '../headers/BackHeader';
-import LogoHeader from '../headers/LogoHeader';
+import ScrollableContentLayout from './ScrollableContentLayout';
 
 const DefaultLayout = ({ children, onScroll = () => {} }: any) => {
   const isMobile = useWindowSize(device.mobileL);
   const currentRoute = useGetCurrentRoute();
   return (
     <Container>
       {!isMobile && <SideBar />}
-      <ScrollableContainer onScroll={onScroll}>
-        <InnerContainer>
-          {currentRoute?.back ? <BackHeader /> : <LogoHeader />}
-          <Content>
-            {currentRoute?.title && <Title>{currentRoute?.title}</Title>}
-            {currentRoute?.title && <Subtitle>{currentRoute?.title}</Subtitle>}
-            {children}
-          </Content>
-        </InnerContainer>
-      </ScrollableContainer>
+      <ScrollableContentLayout currentRoute={currentRoute} onScroll={onScroll}>
+        {children}
+      </ScrollableContentLayout>
     </Container>
   );
 };
 export default DefaultLayout;
 
-const Title = styled.div`
-  color: ${({ theme }) => theme.colors.text.primary};
-  font-size: 3.2rem;
-  font-weight: 800;
-  text-align: center;
-`;
-
-const Subtitle = styled.div`
-  color: ${({ theme }) => theme.colors.text.primary};
-  line-height: 26px;
-  margin-top: 4px;
-  font-size: 1.6rem;
-  margin-bottom: 32px;
-`;
-
-const Content = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 100%;
-  align-self: center;
-  align-items: center;
-  padding: 0 16px 0 16px;
-  background-color: white;
-  @media ${device.desktop} {
-    max-width: 800px;
-    border-radius: 16px;
-    margin: 0 auto;
-    padding: 40px;
-    overflow-y: auto;
-    height: fit-content;
-  }
-`;
-
 const Container = styled(Div100vh)`
   width: 100vw;
   display: flex;
-`;
-
-const ScrollableContainer = styled.div`
-  width: 100%;
-  min-height: 100%;
-  overflow-y: scroll;
-  background-color: white;
-`;
-
-const InnerContainer = styled.div`
-  display: flex;
-  width: 100%;
-  min-height: 100%;
-  flex-direction: column;
-  align-items: center;
-  @media ${device.desktop} {
-    padding: 40px 16px;
-    height: fit-content;
-    background-color: #f7f7f7;
-  }
+  height: 100vh;
+  overflow: hidden;
 `;
diff --git a/src/components/layouts/ScrollableContentLayout.tsx b/src/components/layouts/ScrollableContentLayout.tsx
@@ -0,0 +1,59 @@
+import BackHeader from '../headers/BackHeader';
+import LogoHeader from '../headers/LogoHeader';
+import styled from 'styled-components';
+import { device } from '../../utils';
+import { Subtitle, Title } from '../other/CommonStyles';
+
+const ScrollableContentLayout = ({ currentRoute, children, onScroll }: any) => {
+  return (
+    <ScrollableContainer onScroll={onScroll}>
+      <InnerContainer>
+        {currentRoute?.back ? <BackHeader /> : <LogoHeader />}
+        <Content>
+          {currentRoute?.title && <Title>{currentRoute?.title}</Title>}
+          {currentRoute?.title && <Subtitle>{currentRoute?.title}</Subtitle>}
+          {children}
+        </Content>
+      </InnerContainer>
+    </ScrollableContainer>
+  );
+};
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 16px 0 16px;
+  background-color: white;
+  align-items: center;
+  @media ${device.desktop} {
+    max-width: 800px;
+    border-radius: 16px;
+    margin: 0 auto;
+    padding: 40px;
+    overflow-y: auto;
+    height: fit-content;
+  }
+`;
+
+const ScrollableContainer = styled.div`
+  width: 100%;
+  min-height: 100%;
+  overflow-y: scroll;
+  background-color: white;
+`;
+
+const InnerContainer = styled.div`
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  flex-direction: column;
+  align-items: center;
+  @media ${device.desktop} {
+    padding: 40px 16px;
+    height: fit-content;
+    background-color: #f7f7f7;
+  }
+`;
+
+export default ScrollableContentLayout;
diff --git a/src/components/other/CommonStyles.tsx b/src/components/other/CommonStyles.tsx
@@ -5,6 +5,7 @@ export const Title = styled.div`
   color: ${({ theme }) => theme.colors.text.primary};
   font-size: 3.2rem;
   font-weight: 800;
+  text-align: center;
 `;
 
 export const FormTitle = styled.div`

diff --git a/src/pages/Research.tsx b/src/pages/Research.tsx
@@ -1,12 +1,10 @@
 import ResearchesList from '../components/containers/ResearchesList';
 import ResearchForm from '../components/forms/ResearchForm';
 import DefaultLayout from '../components/layouts/DefaultLayout';
-import { useGetCurrentRoute } from '../utils';
-import { slugs } from '../utils/routes';
+import { useGetCurrentRoute, slugs } from '../utils';
 export const Research = () => {
   const currentRoute = useGetCurrentRoute();
 
-  //TODO: bereikalinga funkcija
   const renderContainer = () => {
     if (!currentRoute?.slug) return <></>;