Merge pull request #3388 from LiteFarmOrg/LF-4163/Animal_basics_layout

LF-4163: Animal basics layout adjustment
LiteFarmOrg · Aug 26, 2024 · d0413b0 · d0413b0
2 parents 5e6f2b7 + 7fc73df
commit d0413b0
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 18 deletions.
diff --git a/packages/webapp/public/locales/en/translation.json b/packages/webapp/public/locales/en/translation.json
@@ -4,7 +4,7 @@
     "ADD_ANIMALS_FLOW": "addition of animals",
     "ADD_ANIMALS_TITLE": "Add Animals",
     "ADD_DETAILS_INFO": "Fill in your animal details below or save and pick this up later on.",
-    "ADD_TO_INVENTORY": "Add animal to your inventory",
+    "ADD_TO_INVENTORY": "Add animals to your inventory",
     "ANIMAL_BASICS": "Animal basics",
     "ANIMAL_DETAILS": "Animal details",
     "ANIMALS_TOTAL_one": "{{count}} animal total",

diff --git a/packages/webapp/src/components/Animals/AddAnimalsFormCard/styles.module.scss b/packages/webapp/src/components/Animals/AddAnimalsFormCard/styles.module.scss
@@ -13,6 +13,8 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
+@import '../../../assets/mixin';
+
 .form {
   display: flex;
   flex-direction: column;
@@ -22,6 +24,11 @@
 .formHeader {
   display: flex;
   justify-content: space-between;
+  gap: 8px;
+
+  p {
+    @include truncateText();
+  }
 }
 
 .countAndSexDetailsWrapper {

diff --git a/packages/webapp/src/components/Animals/FixedHeaderContainer/index.tsx b/packages/webapp/src/components/Animals/FixedHeaderContainer/index.tsx
@@ -22,12 +22,17 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { matchPath } from 'react-router-dom';
 import clsx from 'clsx';
 import { Paper } from '@mui/material';
+import history from '../../../history';
+import { ADD_ANIMALS_URL } from '../../../util/siteMapConstants';
 import styles from './styles.module.scss';
 
 const PAPER_BORDER = 2;
 
+const CONTENT_FULL_WIDTH_ROUTES = [ADD_ANIMALS_URL];
+
 export enum ContainerKind {
   OVERFLOW,
   PAPER,
@@ -43,18 +48,26 @@ type FixedHeaderContainerProps = {
   };
 };
 
-type WrapperProps = Pick<FixedHeaderContainerProps, 'children' | 'classes'>;
+type WrapperProps = Pick<FixedHeaderContainerProps, 'children' | 'classes'> & {
+  hasMaxWidth: boolean;
+};
 type PaperWrapperProps = WrapperProps & { paperRef: RefObject<HTMLDivElement> | null };
 
-const PaperWrapper = ({ children, paperRef, classes = {} }: PaperWrapperProps) => (
-  <Paper component="div" ref={paperRef} className={clsx(styles.paper, classes.paper)}>
+const PaperWrapper = ({ children, paperRef, classes = {}, hasMaxWidth }: PaperWrapperProps) => (
+  <Paper
+    component="div"
+    ref={paperRef}
+    className={clsx(styles.paper, hasMaxWidth && styles.hasMaxWidth, classes.paper)}
+  >
     {children}
   </Paper>
 );
 
-const DivWrapper = ({ children, classes = {} }: WrapperProps) => (
+const DivWrapper = ({ children, classes = {}, hasMaxWidth }: WrapperProps) => (
   <div className={clsx(styles.overflowStyle, classes.divWrapper)}>
-    <div className={clsx(styles.childrenWrapper)}>{children}</div>
+    <div className={clsx(styles.childrenWrapper, hasMaxWidth && styles.hasMaxWidth)}>
+      {children}
+    </div>
   </div>
 );
 
@@ -66,6 +79,9 @@ const FixedHeaderContainer = ({
 }: FixedHeaderContainerProps) => {
   const [paperHeightInPx, setPaperHeightInPx] = useState<number | null>(null);
   const paperRef = useRef<HTMLDivElement>(null);
+  const isFullWidth = CONTENT_FULL_WIDTH_ROUTES.some((path) =>
+    matchPath(history.location.pathname, path),
+  );
 
   useLayoutEffect(() => {
     if (kind === ContainerKind.OVERFLOW) {
@@ -107,7 +123,7 @@ const FixedHeaderContainer = ({
   return (
     <div className={styles.wrapper}>
       {header}
-      <Wrapper paperRef={paperRef} classes={classes}>
+      <Wrapper paperRef={paperRef} classes={classes} hasMaxWidth={!isFullWidth}>
         {childrenWithProps}
       </Wrapper>
     </div>

diff --git a/packages/webapp/src/components/Animals/FixedHeaderContainer/styles.module.scss b/packages/webapp/src/components/Animals/FixedHeaderContainer/styles.module.scss
@@ -24,13 +24,16 @@
 
 .paper {
   width: 100%;
-  max-width: 1024px;
   overflow-y: auto;
   border: none;
   border-radius: 0;
   box-shadow: none;
   flex: 1;
 
+  &.hasMaxWidth {
+    max-width: 1024px;
+  }
+
   @include lg-breakpoint {
     margin: 16px auto;
     border-radius: 8px;
@@ -46,5 +49,8 @@
 
 .childrenWrapper {
   width: 100%;
-  max-width: 1024px;
+
+  &.hasMaxWidth {
+    max-width: 1024px;
+  }
 }
diff --git a/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalBasics/styles.module.scss b/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalBasics/styles.module.scss
@@ -18,20 +18,16 @@
 .cardContainer {
   padding: 16px;
   display: flex;
-  flex-flow: row wrap;
+  flex-wrap: wrap;
   gap: 16px;
 
   > div {
-    width: 400px;
+    flex: 1 1 480px;
+    min-width: 360px;
+    max-width: 480px;
   }
 
   @include xs-breakpoint {
-    flex-flow: column nowrap;
-    align-items: center;
-
-    > div {
-      width: 100%;
-      min-width: 350px;
-    }
+    justify-content: center;
   }
 }
diff --git a/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalDetails/styles.module.scss b/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalDetails/styles.module.scss
@@ -17,6 +17,8 @@
 
 .container {
   padding: 16px;
+  max-width: 1024px;
+  margin: 0 auto;
 }
 
 // Passed in classes to ExpandableItem