Skip to content

Commit d107a5e

Browse files
kyrerskyrers
authored
Merge pull request #97 from kleros/refactor/migrate-to-clamp
refactor: migrate complex CSS calculations to `clamp`
2 parents 1854e11 + 9413915 commit d107a5e

File tree

56 files changed

+172
-277
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+172
-277
lines changed

‎web/src/components/InfoCard.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
import clsx from "clsx";
12
import React from "react";
2-
import { responsiveSize } from "styles/responsiveSize";
33
import InfoCircle from "svgs/icons/info-circle.svg";
4-
import { cn } from "src/utils";
54

65
interface IInfoCard {
76
msg: string;
@@ -11,12 +10,11 @@ interface IInfoCard {
1110
const InfoCard: React.FC<IInfoCard> = ({ msg, className }) => {
1211
return (
1312
<div
14-
className={cn(
15-
"grid grid-cols-[16px_auto] items-center justify-start",
13+
className={clsx(
14+
"grid grid-cols-[16px_auto] gap-fluid-6-8-300 items-center justify-start",
1615
"text-start text-klerosUIComponentsSecondaryText",
1716
className
1817
)}
19-
style={{ gap: responsiveSize(6, 8, 300) }}
2018
>
2119
<InfoCircle />
2220
{msg}

‎web/src/components/InformationCards/ItemInformationCard/index.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Skeleton from "react-loading-skeleton";
44
import AliasDisplay from "components/RegistryInfo/AliasDisplay";
55
import ActionButton from "components/ActionButton";
66
import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
7-
import { responsiveSize } from "styles/responsiveSize";
87
import { Policies } from "../RegistryInformationCard/Policies";
98
import FieldsDisplay from "./FieldsDisplay";
109
import StatusDisplay from "../StatusDisplay";
@@ -61,10 +60,7 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
6160
<StatusDisplay {...{ status, disputed, registryAddress, latestRequestSubmissionTime }} />
6261
</div>
6362
</div>
64-
<hr
65-
className="border-none h-px bg-klerosUIComponentsStroke mx-8"
66-
style={{ marginBlock: responsiveSize(20, 28) }}
67-
/>
63+
<hr className="border-none h-px bg-klerosUIComponentsStroke mx-8 my-fluid-20-28" />
6864
<div className="flex px-8 pb-3 flex-wrap gap-3 justify-between">
6965
{registerer?.id ? (
7066
<div className={aliasContainerStyle}>

‎web/src/components/InformationCards/RegistryInformationCard/Policies.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from "react";
22

3-
import { responsiveSize } from "styles/responsiveSize";
4-
53
import Skeleton from "react-loading-skeleton";
64

75
import PolicyIcon from "svgs/icons/policy.svg";
@@ -26,14 +24,13 @@ export const Policies: React.FC<IPolicies> = ({ policyURI, isItem }) => {
2624
<div
2725
className={clsx(
2826
"flex flex-col justify-center lg:flex-row lg:justify-between",
29-
"w-full py-6 mt-4 bg-klerosUIComponentsMediumBlue leading-6"
27+
"w-full py-6 px-fluid-24-32 mt-4 bg-klerosUIComponentsMediumBlue leading-6"
3028
)}
31-
style={{ paddingInline: responsiveSize(24, 32) }}
3229
>
3330
<p className="text-sm leading-6 text-klerosUIComponentsPrimaryBlue mb-4 lg:mb-0">
3431
Make sure you read and understand the Policies
3532
</p>
36-
<div className="flex flex-wrap" style={{ gap: responsiveSize(16, 24) }}>
33+
<div className="flex flex-wrap gap-fluid-16-24">
3734
{!isItem ? (
3835
<>
3936
{parentRegistryDetails ? (

‎web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@ import Skeleton from "react-loading-skeleton";
44
import { RegistryDetails } from "context/RegistryDetailsContext";
55
import StatusDisplay from "../StatusDisplay";
66
import { DEFAULT_CHAIN, SUPPORTED_CHAINS } from "src/consts/chains";
7-
import { responsiveSize } from "src/styles/responsiveSize";
8-
import { cn, isUndefined } from "src/utils";
7+
import { isUndefined } from "src/utils";
98
import { DEFAULT_LIST_LOGO } from "src/consts";
109
import { getIpfsUrl } from "utils/getIpfsUrl";
1110
import { shortenAddress } from "utils/shortenAddress";
1211
import { Link } from "react-router-dom";
12+
import clsx from "clsx";
1313

14-
const landscapeColumnGapCalc = "lg:gap-x-[calc(24px+(32-24)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
1514
interface ITopInfo
1615
extends Pick<
1716
RegistryDetails,
@@ -33,11 +32,8 @@ const TopInfo: React.FC<ITopInfo> = ({
3332
const [imageSrc, setImageSrc] = useState(getIpfsUrl(logoURI ?? ""));
3433
useEffect(() => setImageSrc(getIpfsUrl(logoURI ?? "")), [logoURI]);
3534
return (
36-
<div
37-
className="flex flex-wrap justify-between gap-3 lg:flex-nowrap pb-3"
38-
style={{ paddingTop: responsiveSize(20, 24), paddingInline: responsiveSize(24, 32) }}
39-
>
40-
<div className="flex flex-col" style={{ rowGap: responsiveSize(8, 16) }}>
35+
<div className="flex flex-wrap justify-between gap-3 lg:flex-nowrap pb-3 pt-fluid-20-24 px-fluid-24-32">
36+
<div className="flex flex-col gap-y-fluid-8-16">
4137
<div className="flex flex-wrap items-center gap-4">
4238
{isUndefined(logoURI) ? (
4339
<Skeleton width={125} height={125} borderRadius="62.5px" className="mb-2" />
@@ -60,10 +56,9 @@ const TopInfo: React.FC<ITopInfo> = ({
6056
)}
6157
</div>
6258
<div
63-
className={cn(
59+
className={clsx(
6460
"flex flex-row flex-wrap shrink gap-8 items-start pt-5",
65-
"lg:shrink-0 lg:gap-y-0",
66-
landscapeColumnGapCalc
61+
"lg:shrink-0 lg:gap-x-fluid-24-32-900 lg:gap-y-0"
6762
)}
6863
>
6964
{id !== "" ? (

‎web/src/components/InformationCards/RegistryInformationCard/index.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from "react";
2-
import { responsiveSize } from "styles/responsiveSize";
32
import { Card, Copiable } from "@kleros/ui-components-library";
43
import AliasDisplay from "components/RegistryInfo/AliasDisplay";
54
import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
@@ -71,11 +70,8 @@ const RegistryInformationCard: React.FC<IInformationCard> = ({
7170
registryAddress: parentRegistryAddress,
7271
}}
7372
/>
74-
<hr
75-
className="border-none h-px bg-klerosUIComponentsStroke"
76-
style={{ marginBlock: responsiveSize(20, 28), marginInline: responsiveSize(24, 32) }}
77-
/>
78-
<div className="flex flex-wrap justify-between gap-5 pb-3" style={{ paddingInline: responsiveSize(24, 32) }}>
73+
<hr className="border-none h-px bg-klerosUIComponentsStroke my-fluid-20-28 mx-fluid-24-32" />
74+
<div className="flex flex-wrap justify-between gap-5 pb-3 px-fluid-24-32">
7975
<div className="flex flex-wrap gap-2 items-center leading-18px">
8076
<small className="text-sm font-semibold leading-18px text-klerosUIComponentsPrimaryText">Submitted by:</small>
8177
<Copiable copiableContent={registerer?.id ?? ""} tooltipProps={{ small: true }}>

‎web/src/components/ItemCard/index.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import React from "react";
22
import { Button, Card } from "@kleros/ui-components-library";
33
import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
4-
import { responsiveSize } from "styles/responsiveSize";
54
import StatusBanner, { mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
65
import ArrowIcon from "svgs/icons/arrow.svg";
76
import { ItemDetailsFragment } from "src/graphql/graphql";
87
import ItemField from "./ItemField";
9-
import { cn } from "src/utils";
108
import clsx from "clsx";
119

12-
const landscapeGridColsCalc =
13-
"lg:grid-cols-[1fr_calc(150px+(180-150)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]";
14-
const landscapeGapCalc = "lg:gap-[calc(16px+(36-16)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
10+
const landscapeGridColsCalc = "lg:grid-cols-[1fr_var(--spacing-fluid-150-180-900)_max-content]";
1511

1612
interface IItemCard extends ItemDetailsFragment {}
1713

@@ -28,19 +24,17 @@ const ItemCard: React.FC<IItemCard> = ({ id, status, disputed, props }) => {
2824
onClick={() => navigateAndScrollTop(`/lists/item/${id?.toString()}`)}
2925
>
3026
<div
31-
className={cn(
27+
className={clsx(
3228
"grid grid-rows-[repeat(3,min-content)] grid-cols-[1fr_min-content]",
33-
"w-full h-max p-4 gap-y-2 items-center",
29+
"w-full h-max p-4 gap-y-2 gap-x-fluid-12-32-900 items-center",
3430
"lg:h-16 lg:justify-between lg:grid-rows-[1fr] lg:py-0 lg:px-8",
3531
landscapeGridColsCalc
3632
)}
37-
style={{ columnGap: responsiveSize(12, 32, 900) }}
3833
>
3934
<div
40-
className={cn(
35+
className={clsx(
4136
"flex flex-col justify-between items-start gap-4 w-fit col-span-2",
42-
"lg:flex-row lg:items-center lg:col-span-1",
43-
landscapeGapCalc
37+
"lg:flex-row lg:items-center lg:col-span-1 lg:gap-fluid-16-36-900"
4438
)}
4539
>
4640
{sortedProps.map((prop) => prop.isIdentifier && <ItemField key={prop.label} {...prop} />)}

‎web/src/components/RegistryCard/RegistryInfo.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useEffect, useState } from "react";
2-
import { responsiveSize } from "styles/responsiveSize";
32
import Skeleton from "react-loading-skeleton";
43
import { Button } from "@kleros/ui-components-library";
54
import ArrowIcon from "svgs/icons/arrow.svg";
@@ -19,7 +18,7 @@ interface IListInfo {
1918
}
2019

2120
const landscapeGridColsCalc =
22-
"lg:grid-cols-[auto_1fr_calc(80px+(100-80)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_calc(100px+(150-100)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]";
21+
"lg:grid-cols-[auto_1fr_var(--spacing-fluid-80-100-900)_var(--spacing-fluid-100-150-900)_max-content]";
2322

2423
const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isListView = false }) => {
2524
const [imageLoaded, setImageLoaded] = useState(false);
@@ -35,15 +34,14 @@ const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isL
3534
className={cn(
3635
"flex flex-col justify-center items-center gap-2 h-[calc(100%-45px)]",
3736
isListView && [
38-
"grid grid-cols-[21px_max-content_1fr_max-content] grid-rows-[repeat(3,min-content)] gap-y-4",
37+
"grid grid-cols-[21px_max-content_1fr_max-content] grid-rows-[repeat(3,min-content)] gap-y-4 gap-x-fluid-8-24-900",
3938
"w-full h-max lg:h-16 p-4",
4039
"[&_img]:col-span-4",
4140
"lg:justify-between lg:grid-rows-[1fr] lg:px-8 lg:py-0",
4241
"lg:[&_img]:col-span-1",
4342
landscapeGridColsCalc,
4443
]
4544
)}
46-
style={{ columnGap: isListView ? responsiveSize(8, 24, 900) : undefined }}
4745
>
4846
{!imageLoaded ? (
4947
<Skeleton

‎web/src/components/StatDisplay.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,9 @@ interface IStatDisplay {
1010
color: IColors;
1111
}
1212

13-
const landscapeMarginBottomCalc = "lg:mb-[calc(16px+(30-16)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
14-
1513
const StatDisplay: React.FC<IStatDisplay> = ({ title, text, subtext, icon: Icon, color, ...props }) => {
1614
return (
17-
<div className={cn("flex items-center gap-2 max-w-[192px]", landscapeMarginBottomCalc)} {...props}>
15+
<div className="flex items-center gap-2 max-w-[192px] lg:mb-fluid-16-30" {...props}>
1816
<div
1917
className={cn(
2018
"flex items-center justify-center h-12 w-12 rounded-[50%]",

‎web/src/components/StyledSkeleton.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react";
22
import Skeleton from "react-loading-skeleton";
3-
import { responsiveSize } from "styles/responsiveSize";
43

54
export const HistorySkeletonCard = () => (
65
<div className="flex flex-col gap-2">
@@ -11,17 +10,13 @@ export const HistorySkeletonCard = () => (
1110
</div>
1211
);
1312

14-
export const SkeletonRegistryCard = () => (
15-
<div className="w-full">
16-
<Skeleton height={responsiveSize(270, 296)} />
17-
</div>
18-
);
13+
export const SkeletonRegistryCard = () => <Skeleton className="w-full h-fluid-270-296" />;
1914

2015
export const SkeletonJustificationCard = () => (
2116
<div className="flex flex-col gap-4 w-full">
22-
<Skeleton className="ml-auto" height={24} width={responsiveSize(100, 160)} />
17+
<Skeleton className="ml-auto w-fluid-100-160" height={24} />
2318
<Skeleton height={60} />
24-
<Skeleton height={24} width={responsiveSize(60, 80)} />
19+
<Skeleton className="w-fluid-60-80" height={24} />
2520
</div>
2621
);
2722

‎web/src/global.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,61 @@
2424
--max-width-landscape: 87.5rem;
2525
--shadow-custom: 0px 2px 3px rgba(0, 0, 0, 0.06);
2626
--leading-18px: 18px;
27+
28+
/*
29+
* Spacing utils for custom sizing
30+
* Default max screen width is 1250px
31+
* Default min screen width is 375px
32+
*/
33+
--spacing-scale-8-32-300: calc(8px + (32 - 8) * (100vw - 300px) / (1250 - 300));
34+
--spacing-scale-300-424-300: calc(300px + (424 - 300) * (100vw - 300px) / (1250 - 300));
35+
36+
/*
37+
* Spacing utils for responsive resizing
38+
* Default max screen width is 1250px
39+
* Default min screen width is 375px
40+
*/
41+
--spacing-fluid-0-16: clamp(0px, calc(0px + (16 - 0) * (100vw - 375px) / (1250 - 375)), 16px);
42+
--spacing-fluid-0-108: clamp(0px, calc(0px + (108 - 0) * (100vw - 375px) / (1250 - 375)), 108px);
43+
--spacing-fluid-0-132: clamp(0px, calc(0px + (132 - 0) * (100vw - 375px) / (1250 - 375)), 132px);
44+
--spacing-fluid-4-8: clamp(4px, calc(4px + (8 - 4) * (100vw - 375px) / (1250 - 375)), 8px);
45+
--spacing-fluid-6-8-300: clamp(6px, calc(6px + (8 - 6) * (100vw - 300px) / (1250 - 300)), 8px);
46+
--spacing-fluid-8-16: clamp(8px, calc(8px + (16 - 8) * (100vw - 375px) / (1250 - 375)), 16px);
47+
--spacing-fluid-8-24: clamp(8px, calc(8px + (24 - 8) * (100vw - 375px) / (1250 - 375)), 24px);
48+
--spacing-fluid-8-24-900: clamp(8px, calc(8px + (24 - 8) * (100vw - 900px) / (1250 - 900)), 24px);
49+
--spacing-fluid-8-32-300: clamp(8px, calc(8px + (32 - 8) * (100vw - 300px) / (1250 - 300)), 32px);
50+
--spacing-fluid-10-130: clamp(10px, calc(10px + (130 - 10) * (100vw - 375px) / (1250 - 375)), 130px);
51+
--spacing-fluid-12-32-300: clamp(12px, calc(12px + (32 - 12) * (100vw - 300px) / (1250 - 300)), 32px);
52+
--spacing-fluid-12-32-900: clamp(12px, calc(12px + (32 - 12) * (100vw - 900px) / (1250 - 900)), 32px);
53+
--spacing-fluid-16-24: clamp(16px, calc(16px + (24 - 16) * (100vw - 375px) / (1250 - 375)), 24px);
54+
--spacing-fluid-16-30: clamp(16px, calc(16px + (30 - 16) * (100vw - 375px) / (1250 - 375)), 30px);
55+
--spacing-fluid-16-36-900: clamp(16px, calc(16px + (36 - 16) * (100vw - 900px) / (1250 - 900)), 36px);
56+
--spacing-fluid-16-54: clamp(16px, calc(16px + (54 - 16) * (100vw - 375px) / (1250 - 375)), 54px);
57+
--spacing-fluid-20-24: clamp(20px, calc(20px + (24 - 20) * (100vw - 375px) / (1250 - 375)), 24px);
58+
--spacing-fluid-20-28: clamp(20px, calc(20px + (28 - 20) * (100vw - 375px) / (1250 - 375)), 28px);
59+
--spacing-fluid-24-28: clamp(24px, calc(24px + (28 - 24) * (100vw - 375px) / (1250 - 375)), 28px);
60+
--spacing-fluid-24-32: clamp(24px, calc(24px + (32 - 24) * (100vw - 375px) / (1250 - 375)), 32px);
61+
--spacing-fluid-24-48: clamp(24px, calc(24px + (48 - 24) * (100vw - 375px) / (1250 - 375)), 48px);
62+
--spacing-fluid-24-32-900: clamp(24px, calc(24px + (32 - 24) * (100vw - 900px) / (1250 - 900)), 32px);
63+
--spacing-fluid-24-136: clamp(24px, calc(24px + (136 - 24) * (100vw - 375px) / (1250 - 375)), 136px);
64+
--spacing-fluid-25-65: clamp(25px, calc(25px + (65 - 25) * (100vw - 375px) / (1250 - 375)), 65px);
65+
--spacing-fluid-32-24: clamp(24px, calc(32px + (24 - 32) * (100vw - 375px) / (1250 - 375)), 32px);
66+
--spacing-fluid-32-80: clamp(32px, calc(32px + (80 - 32) * (100vw - 375px) / (1250 - 375)), 80px);
67+
--spacing-fluid-60-80: clamp(60px, calc(60px + (80 - 60) * (100vw - 375px) / (1250 - 375)), 80px);
68+
--spacing-fluid-68-40: clamp(40px, calc(68px + (40 - 68) * (100vw - 375px) / (1250 - 375)), 68px);
69+
--spacing-fluid-76-96: clamp(76px, calc(76px + (96 - 76) * (100vw - 375px) / (1250 - 375)), 96px);
70+
--spacing-fluid-80-100-900: clamp(80px, calc(80px + (100 - 80) * (100vw - 900px) / (1250 - 900)), 100px);
71+
--spacing-fluid-100-130: clamp(100px, calc(100px + (130 - 100) * (100vw - 375px) / (1250 - 375)), 130px);
72+
--spacing-fluid-100-150-900: clamp(100px, calc(100px + (150 - 100) * (100vw - 900px) / (1250 - 900)), 150px);
73+
--spacing-fluid-100-160: clamp(100px, calc(100px + (160 - 100) * (100vw - 375px) / (1250 - 375)), 160px);
74+
--spacing-fluid-150-72: clamp(72px, calc(150px + (72 - 150) * (100vw - 375px) / (1250 - 375)), 150px);
75+
--spacing-fluid-150-180-900: clamp(150px, calc(150px + (180 - 150) * (100vw - 900px) / (1250 - 900)), 180px);
76+
--spacing-fluid-200-720: clamp(200px, calc(200px + (720 - 200) * (100vw - 375px) / (1250 - 375)), 720px);
77+
--spacing-fluid-270-296: clamp(270px, calc(270px + (296 - 270) * (100vw - 375px) / (1250 - 375)), 296px);
78+
--spacing-fluid-300-480: clamp(300px, calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)), 480px);
79+
--spacing-fluid-300-424-300: clamp(300px, calc(300px + (424 - 300) * (100vw - 300px) / (1250 - 300)), 424px);
80+
--spacing-fluid-342-618: clamp(342px, calc(342px + (618 - 342) * (100vw - 375px) / (1250 - 375)), 618px);
81+
--spacing-fluid-442-700-900: clamp(442px, calc(442px + (700 - 442) * (100vw - 900px) / (1250 - 900)), 700px);
2782
}
2883

2984
.dark {

0 commit comments

Comments
 (0)