Skip to content

Commit 8386425

Browse files
pcarapic15pcarapic15
committed
Adjust padding for table charts section
1 parent 10612a0 commit 8386425

File tree

2 files changed

+109
-107
lines changed

2 files changed

+109
-107
lines changed

‎src/components/community-stats/LatestsNewsSubSection.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default function LatestsNewsSubSection() {
112112
};
113113

114114
return (
115-
<div className="flex justify-center bg-white mt-[72px]">
115+
<div className="flex justify-center bg-white mt-12 lg:mt-24">
116116
<div className="container w-full flex flex-col px-4 md:px-5 lg:px-0">
117117
<div className="flex justify-between items-center pb-8 md:pb-12">
118118
<h2 className="heading-600-lg text-[36px] md:text-5xl">

‎src/components/community-stats/SdvInNumbersSection.js

Lines changed: 108 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -105,121 +105,123 @@ export default function SdvInNumbersSection() {
105105
</Tab>
106106
))}
107107
</div>
108-
{(activeTab.label === "Downloads" || activeTab.label === "Users") && (
109-
<Table tableColDimensions={tableColDimensions}>
110-
<TableHeader>
111-
<div className="relative">
112-
<TableHeaderCell />
108+
<div className="mb-12 lg:mb-24 border border-red-300">
109+
{(activeTab.label === "Downloads" || activeTab.label === "Users") && (
110+
<Table tableColDimensions={tableColDimensions}>
111+
<TableHeader>
112+
<div className="relative">
113+
<TableHeaderCell />
113114

114-
{isMobile && (
115-
<div className="absolute right-0 top-0 h-full w-6 z-50 pointer-events-none">
116-
<div
117-
className="h-full w-full"
118-
style={{
119-
background:
120-
"linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.01) 100%)",
121-
boxShadow: "7px 0px 20px -10px rgba(0, 0, 54, 0.14)",
122-
}}
123-
/>
115+
{isMobile && (
116+
<div className="absolute right-0 top-0 h-full w-6 z-50 pointer-events-none">
117+
<div
118+
className="h-full w-full"
119+
style={{
120+
background:
121+
"linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.01) 100%)",
122+
boxShadow: "7px 0px 20px -10px rgba(0, 0, 54, 0.14)",
123+
}}
124+
/>
125+
</div>
126+
)}
127+
</div>
128+
{isMobile ? (
129+
<div
130+
onTouchStart={handleSwipeStart}
131+
onTouchMove={handleSwipeMove}
132+
className="touch-pan-x w-full"
133+
>
134+
<TableHeaderCell>
135+
{metricLabels[activeMetricIndex]}
136+
</TableHeaderCell>
124137
</div>
138+
) : (
139+
<>
140+
<TableHeaderCell>To date</TableHeaderCell>
141+
<TableHeaderCell>Year to date</TableHeaderCell>
142+
</>
125143
)}
126-
</div>
127-
{isMobile ? (
128-
<div
129-
onTouchStart={handleSwipeStart}
130-
onTouchMove={handleSwipeMove}
131-
className="touch-pan-x w-full"
132-
>
133-
<TableHeaderCell>
134-
{metricLabels[activeMetricIndex]}
135-
</TableHeaderCell>
136-
</div>
137-
) : (
138-
<>
139-
<TableHeaderCell>To date</TableHeaderCell>
140-
<TableHeaderCell>Year to date</TableHeaderCell>
141-
</>
142-
)}
143-
</TableHeader>
144-
145-
<TableBody>
146-
{data.map((row, idx) => {
147-
const isLast = idx === data.length - 1;
144+
</TableHeader>
148145

149-
return (
150-
<TableRow key={row.name} index={idx} isLast={isLast}>
151-
<div className="relative">
152-
<TableRowCell>
153-
<div className="flex font-semibold text-midnight-950 tracking-lg">
154-
{row.name}
155-
</div>
156-
</TableRowCell>
146+
<TableBody>
147+
{data.map((row, idx) => {
148+
const isLast = idx === data.length - 1;
157149

158-
{isMobile && (
159-
<div className="absolute right-0 top-0 h-full w-6 z-50 pointer-events-none">
160-
<div
161-
className="h-full w-full"
162-
style={{
163-
background:
164-
"linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.01) 100%)",
165-
boxShadow:
166-
"7px 0px 20px -10px rgba(0, 0, 54, 0.14)",
167-
}}
168-
/>
169-
</div>
170-
)}
171-
</div>
172-
{isMobile ? (
173-
<div
174-
onTouchStart={handleSwipeStart}
175-
onTouchMove={handleSwipeMove}
176-
className="w-full touch-pan-x"
177-
>
150+
return (
151+
<TableRow key={row.name} index={idx} isLast={isLast}>
152+
<div className="relative">
178153
<TableRowCell>
179-
<div
180-
className={`flex justify-end ${
181-
isLast
182-
? "font-bold text-midnight-950"
183-
: "font-normal"
184-
}`}
185-
>
186-
{row[metricKeys[activeMetricIndex]]}
154+
<div className="flex font-semibold text-midnight-950 tracking-lg">
155+
{row.name}
187156
</div>
188157
</TableRowCell>
189-
</div>
190-
) : (
191-
<>
192-
<TableRowCell>
193-
<div
194-
className={`flex justify-end ${
195-
isLast
196-
? "font-bold text-midnight-950"
197-
: "font-normal"
198-
}`}
199-
>
200-
{row.toDate}
201-
</div>
202-
</TableRowCell>
203-
<TableRowCell>
204-
<div
205-
className={`flex justify-end ${
206-
isLast
207-
? "font-bold text-midnight-950"
208-
: "font-normal"
209-
}`}
210-
>
211-
{row.yearToDate}
158+
159+
{isMobile && (
160+
<div className="absolute right-0 top-0 h-full w-6 z-50 pointer-events-none">
161+
<div
162+
className="h-full w-full"
163+
style={{
164+
background:
165+
"linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.01) 100%)",
166+
boxShadow:
167+
"7px 0px 20px -10px rgba(0, 0, 54, 0.14)",
168+
}}
169+
/>
212170
</div>
213-
</TableRowCell>
214-
</>
215-
)}
216-
</TableRow>
217-
);
218-
})}
219-
</TableBody>
220-
</Table>
221-
)}
222-
{activeTab.label === "Visualize" && <CustomPieChart />}
171+
)}
172+
</div>
173+
{isMobile ? (
174+
<div
175+
onTouchStart={handleSwipeStart}
176+
onTouchMove={handleSwipeMove}
177+
className="w-full touch-pan-x"
178+
>
179+
<TableRowCell>
180+
<div
181+
className={`flex justify-end ${
182+
isLast
183+
? "font-bold text-midnight-950"
184+
: "font-normal"
185+
}`}
186+
>
187+
{row[metricKeys[activeMetricIndex]]}
188+
</div>
189+
</TableRowCell>
190+
</div>
191+
) : (
192+
<>
193+
<TableRowCell>
194+
<div
195+
className={`flex justify-end ${
196+
isLast
197+
? "font-bold text-midnight-950"
198+
: "font-normal"
199+
}`}
200+
>
201+
{row.toDate}
202+
</div>
203+
</TableRowCell>
204+
<TableRowCell>
205+
<div
206+
className={`flex justify-end ${
207+
isLast
208+
? "font-bold text-midnight-950"
209+
: "font-normal"
210+
}`}
211+
>
212+
{row.yearToDate}
213+
</div>
214+
</TableRowCell>
215+
</>
216+
)}
217+
</TableRow>
218+
);
219+
})}
220+
</TableBody>
221+
</Table>
222+
)}
223+
{activeTab.label === "Visualize" && <CustomPieChart />}
224+
</div>
223225
<LatestsNewsSubSection />
224226
</div>
225227
</div>

0 commit comments

Comments
 (0)