fix: mobile responsiveness

kleros · Sep 10, 2023 · f27a98d · f27a98d
1 parent caafd1d
commit f27a98d
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 71 deletions.
diff --git a/web/src/components/CasesDisplay/CasesGrid.tsx b/web/src/components/CasesDisplay/CasesGrid.tsx
@@ -1,22 +1,26 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import { StandardPagination } from "@kleros/ui-components-library";
-import { smallScreenStyle } from "styles/smallScreenStyle";
+import { tabletScreenStyle } from "styles/tabletScreenStyle";
 import { useFiltersContext } from "context/FilterProvider";
 import { CasesPageQuery } from "queries/useCasesQuery";
 import DisputeCard from "components/DisputeCard";
 import CasesListHeader from "./CasesListHeader";
 
 const GridContainer = styled.div`
   display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(3, minmax(50px, 1fr));
-  justify-content: center;
+  row-gap: 16px;
+  column-gap: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  justify-content: space-between;
   align-items: center;
-  gap: 8px;
-  ${smallScreenStyle(css`
+  justify-items: center;
+  ${tabletScreenStyle(css`
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
   `)}
 `;
 const ListContainer = styled.div`

diff --git a/web/src/components/CasesDisplay/CasesListHeader.tsx b/web/src/components/CasesDisplay/CasesListHeader.tsx
@@ -5,14 +5,15 @@ import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
 
 const Container = styled.div`
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
   gap: 40vw;
   width: 100%;
+  height: 100%;
 `;
 
 const CasesData = styled.div`
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   width: 100%;
   gap: 48px;

diff --git a/web/src/components/DisputeCard/DisputeInfo.tsx b/web/src/components/DisputeCard/DisputeInfo.tsx
@@ -1,17 +1,18 @@
 import React from "react";
 import styled from "styled-components";
+import { useFiltersContext } from "context/FilterProvider";
 import { Periods } from "consts/periods";
 import BookmarkIcon from "svgs/icons/bookmark.svg";
 import CalendarIcon from "svgs/icons/calendar.svg";
 import LawBalanceIcon from "svgs/icons/law-balance.svg";
 import PileCoinsIcon from "svgs/icons/pile-coins.svg";
 import Field from "../Field";
 
-const Container = styled.div<{ isCard: boolean }>`
+const Container = styled.div<{ isList: boolean }>`
   display: flex;
-  flex-direction: ${({ isCard }) => (isCard ? "column" : "row")};
-  gap: ${({ isCard }) => (isCard ? "8px" : "48px")};
-  justify-content: ${({ isCard }) => (isCard ? "center" : "space-between")};
+  flex-direction: ${({ isList }) => (isList ? "row" : "column")};
+  gap: ${({ isList }) => (isList ? "48px" : "8px")};
+  justify-content: ${({ isList }) => (isList ? "space-between" : "center")};
   align-items: center;
   width: 100%;
   height: 100%;
@@ -37,7 +38,6 @@ export interface IDisputeInfo {
   rewards?: string;
   period?: Periods;
   date?: number;
-  isCard?: boolean;
 }
 
 const formatDate = (date: number) => {
@@ -47,20 +47,18 @@ const formatDate = (date: number) => {
   return formattedDate;
 };
 
-const DisputeInfo: React.FC<IDisputeInfo> = ({ courtId, court, category, rewards, period, date, isCard = true }) => {
+const DisputeInfo: React.FC<IDisputeInfo> = ({ courtId, court, category, rewards, period, date }) => {
+  const { isList } = useFiltersContext();
   return (
-    <Container isCard={isCard}>
-      {court && courtId && (
-        <Field isCard={false} icon={LawBalanceIcon} name="Court" value={court} link={`/courts/${courtId}`} />
-      )}
-      {category && <Field isCard={false} icon={BookmarkIcon} name="Category" value={category} />}
-      {rewards && <Field isCard={false} icon={PileCoinsIcon} name="Juror Rewards" value={rewards} />}
+    <Container isList={isList}>
+      {court && courtId && <Field icon={LawBalanceIcon} name="Court" value={court} link={`/courts/${courtId}`} />}
+      {category && <Field icon={BookmarkIcon} name="Category" value={category} />}
+      {rewards && <Field icon={PileCoinsIcon} name="Juror Rewards" value={rewards} />}
       {typeof period !== "undefined" && date && (
         <Field
-          isCard={false}
           icon={CalendarIcon}
           name={getPeriodPhrase(period)}
-          value={isCard ? new Date(date * 1000).toLocaleString() : formatDate(date)}
+          value={!isList ? new Date(date * 1000).toLocaleString() : formatDate(date)}
         />
       )}
     </Container>

diff --git a/web/src/components/DisputeCard/index.tsx b/web/src/components/DisputeCard/index.tsx
@@ -16,7 +16,7 @@ import { isUndefined } from "utils/index";
 const StyledCard = styled(Card)`
   max-width: 380px;
   min-width: 312px;
-  width: auto;
+  width: 380px;
   height: 260px;
 `;
 const StyledListItem = styled(Card)`
@@ -111,7 +111,6 @@ const DisputeCard: React.FC<CasesPageQuery["disputes"][number]> = ({
               <h3>{title}</h3>
             </ListTitle>
             <DisputeInfo
-              isCard={false}
               courtId={court?.id}
               court={courtName}
               period={currentPeriodIndex}

diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { useFiltersContext } from "context/FilterProvider";
 
 const FieldContainer = styled.div<FieldContainerProps>`
   width: ${({ width = "100%" }) => width};
@@ -10,7 +11,7 @@ const FieldContainer = styled.div<FieldContainerProps>`
   white-space: nowrap;
   .value {
     flex-grow: 1;
-    text-align: ${({ isCard }) => (isCard ? "end" : "center")};
+    text-align: ${({ isList }) => (isList ? "center" : "end")};
     color: ${({ theme }) => theme.primaryText};
   }
   svg {
@@ -28,7 +29,7 @@ const FieldContainer = styled.div<FieldContainerProps>`
 
 type FieldContainerProps = {
   width?: string;
-  isCard?: boolean;
+  isList?: boolean;
 };
 
 interface IField {
@@ -37,25 +38,27 @@ interface IField {
   value: string;
   link?: string;
   width?: string;
-  isCard?: boolean;
 }
 
-const Field: React.FC<IField> = ({ icon: Icon, name, value, link, width, isCard = true }) => (
-  <FieldContainer isCard={isCard} width={width}>
-    {isCard && (
-      <>
-        <Icon />
-        <label>{name}:</label>
-      </>
-    )}
-    {link ? (
-      <Link className="link value" to={link}>
-        {value}
-      </Link>
-    ) : (
-      <label className="value">{value}</label>
-    )}
-  </FieldContainer>
-);
+const Field: React.FC<IField> = ({ icon: Icon, name, value, link, width }) => {
+  const { isList } = useFiltersContext();
+  return (
+    <FieldContainer isList={isList} width={width}>
+      {!isList && (
+        <>
+          <Icon />
+          <label>{name}:</label>
+        </>
+      )}
+      {link ? (
+        <Link className="link value" to={link}>
+          {value}
+        </Link>
+      ) : (
+        <label className="value">{value}</label>
+      )}
+    </FieldContainer>
+  );
+};
 
 export default Field;
diff --git a/web/src/hooks/useWindowWidth.ts b/web/src/hooks/useWindowWidth.ts
diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { Routes, Route } from "react-router-dom";
 import { useCasesQuery } from "queries/useCasesQuery";
-import { useWindowWidth } from "hooks/useWindowWidth";
+import { useWindowSize } from "react-use";
 import { BREAKPOINT_TABLET_SCREEN } from "styles/tabletScreenStyle";
 import CasesDisplay from "components/CasesDisplay";
 import CaseDetails from "./CaseDetails";
@@ -11,14 +11,16 @@ const Container = styled.div`
   width: 100%;
   min-height: calc(100vh - 144px);
   background-color: ${({ theme }) => theme.lightBackground};
-  padding: 32px;
+  padding: calc(32px + (132 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-top: calc(32px + (64 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-bottom: calc(64px + (96 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
 `;
 
 const Cases: React.FC = () => {
   const [currentPage, setCurrentPage] = useState(1);
-  const windowWidth = useWindowWidth();
+  const { width } = useWindowSize();
   const { isList, setIsList } = useFiltersContext();
-  const screenIsBig = windowWidth > BREAKPOINT_TABLET_SCREEN;
+  const screenIsBig = width > BREAKPOINT_TABLET_SCREEN;
   const casesPerPage = screenIsBig ? 9 : 3;
   const { data } = useCasesQuery(casesPerPage * (currentPage - 1), casesPerPage);
 

diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx
@@ -11,7 +11,9 @@ const Container = styled.div`
   width: 100%;
   min-height: calc(100vh - 144px);
   background-color: ${({ theme }) => theme.lightBackground};
-  padding: 32px;
+  padding: calc(32px + (132 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-top: calc(32px + (64 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-bottom: calc(64px + (96 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
 `;
 
 const StyledCasesDisplay = styled(CasesDisplay)`

diff --git a/web/src/pages/Home/LatestCases.tsx b/web/src/pages/Home/LatestCases.tsx
@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import { useCasesQuery } from "queries/useCasesQuery";
+import { useFiltersContext } from "context/FilterProvider";
 import DisputeCard from "components/DisputeCard";
 import { StyledSkeleton } from "components/StyledSkeleton";
 
@@ -16,6 +17,12 @@ const Container = styled.div`
 
 const LatestCases: React.FC = () => {
   const { data } = useCasesQuery(0);
+  const { setIsList } = useFiltersContext();
+
+  useEffect(() => {
+    setIsList(false);
+  }, []);
+
   return (
     <Container>
       <h1>Latest Cases</h1>

diff --git a/web/src/styles/tabletScreenStyle.ts b/web/src/styles/tabletScreenStyle.ts
@@ -1,9 +1,9 @@
-import { css, DefaultTheme, FlattenInterpolation, ThemeProps } from "styled-components";
+import { css, FlattenSimpleInterpolation } from "styled-components";
 
 export const BREAKPOINT_TABLET_SCREEN = 1024;
 
-export const tabletScreenStyle = (styleFn: () => FlattenInterpolation<ThemeProps<DefaultTheme>>) => css`
+export const tabletScreenStyle = (style: FlattenSimpleInterpolation) => css`
   @media (max-width: ${BREAKPOINT_TABLET_SCREEN}px) {
-    ${() => styleFn()}
+    ${style}
   }
 `;