This repository has no description
shift profile to be horizontal based
author
damedotblog
date
(Feb 18, 2025, 8:45 PM -0500)
commit
f194707d
f194707d78a8d10145b1c2be5eee8d28b39a1ea9
parent
a5a4c904
a5a4c904227d810ebd9f85d7a58c9a36b2303b2d
+47
-43
+7
-5
src/components/UserProfile/UserProfile.css
+7
-5
src/components/UserProfile/UserProfile.css
···
77
77
text-align: center;
78
78
margin-bottom: 40px;
79
79
margin-top: 55px;
80
+
display: flex;
81
+
margin-left: 20px;
82
+
margin-right: 20px;
83
+
gap: 60px
80
84
}
81
85
82
86
···
133
137
}
134
138
135
139
.user-profile-data {
136
-
flex-direction: row;
137
140
justify-content: center;
138
141
gap: 35px;
139
-
margin-top: 9.5px;
140
-
margin-bottom: 16px;
141
142
}
142
143
143
144
.circular-badge {
···
175
176
.user-profile-badges h3 {
176
177
margin: 0px;
177
178
font-size: 0.8em;
179
+
font-weight: 500;
178
180
}
179
181
180
182
.circular-badge {
···
193
195
}
194
196
195
197
.share-button-container {
196
-
margin-top: 10px;
198
+
align-content: center;
197
199
}
198
200
199
201
.toggle-switch {
···
249
251
display: flex;
250
252
align-items: center;
251
253
width: 100%;
252
-
max-width: 300px;
253
254
margin: 0 auto;
254
255
padding: 1rem;
256
+
max-width: 200px;
255
257
}
256
258
257
259
.score-gauge {
+40
-38
src/components/UserProfile/UserProfile.js
+40
-38
src/components/UserProfile/UserProfile.js
···
40
40
41
41
const getLayouts = () => ({
42
42
lg: [
43
-
{ i: "NarrativeCard", x: 0, y: 0, w: 1, h: CARD_HEIGHT, static: false },
44
-
{ i: "ScoreBreakdownCard", x: 1, y: 0, w: 1, h: CARD_HEIGHT, static: false },
43
+
{ i: "ScoreBreakdownCard", x: 0, y: 0, w: 1, h: CARD_HEIGHT, static: false },
44
+
{ i: "NarrativeCard", x: 1, y: 0, w: 1, h: CARD_HEIGHT, static: false },
45
45
{ i: "ProfileCard", x: 0, y: CARD_HEIGHT, w: 1, h: CARD_HEIGHT, static: false },
46
46
{ i: "PostTypeCard", x: 1, y: CARD_HEIGHT, w: 1, h: CARD_HEIGHT, static: false },
47
47
{ i: "AltTextCard", x: 0, y: CARD_HEIGHT * 2, w: 1, h: CARD_HEIGHT, static: false },
48
48
{ i: "ActivityCard", x: 1, y: CARD_HEIGHT * 2, w: 1, h: CARD_HEIGHT, static: false }
49
49
],
50
50
md: [
51
-
{ i: "NarrativeCard", x: 0, y: 0, w: 1, h: CARD_HEIGHT, static: false },
52
-
{ i: "ScoreBreakdownCard", x: 1, y: 0, w: 1, h: CARD_HEIGHT, static: false },
51
+
{ i: "ScoreBreakdownCard", x: 0, y: 0, w: 1, h: CARD_HEIGHT, static: false },
52
+
{ i: "NarrativeCard", x: 1, y: 0, w: 1, h: CARD_HEIGHT, static: false },
53
53
{ i: "ProfileCard", x: 0, y: CARD_HEIGHT, w: 1, h: CARD_HEIGHT, static: false },
54
54
{ i: "PostTypeCard", x: 1, y: CARD_HEIGHT, w: 1, h: CARD_HEIGHT, static: false },
55
55
{ i: "AltTextCard", x: 0, y: CARD_HEIGHT * 2, w: 1, h: CARD_HEIGHT, static: false },
56
56
{ i: "ActivityCard", x: 1, y: CARD_HEIGHT * 2, w: 1, h: CARD_HEIGHT, static: false }
57
57
],
58
58
sm: [
59
-
{ i: "NarrativeCard", x: 0, y: 0, w: 1, h: 4, static: false },
60
59
{ i: "ScoreBreakdownCard", x: 0, y: 8, w: 1, h: 6, static: false },
60
+
{ i: "NarrativeCard", x: 0, y: 0, w: 1, h: 4, static: false },
61
61
{ i: "ProfileCard", x: 0, y: 14, w: 1, h: 5, static: false },
62
62
{ i: "PostTypeCard", x: 0, y: 22, w: 1, h: 6, static: false },
63
63
{ i: "AltTextCard", x: 0, y: 26, w: 1, h: 5, static: false },
64
64
{ i: "ActivityCard", x: 0, y: 30, w: 1, h: 6, static: false }
65
65
],
66
66
xs: [
67
+
{ i: "ScoreBreakdownCard", x: 0, y: 8, w: 1, h: 6, static: false },
67
68
{ i: "NarrativeCard", x: 0, y: 0, w: 1, h: 6, static: false },
68
-
{ i: "ScoreBreakdownCard", x: 0, y: 8, w: 1, h: 6, static: false },
69
69
{ i: "ProfileCard", x: 0, y: 14, w: 1, h: 6, static: false },
70
70
{ i: "PostTypeCard", x: 0, y: 22, w: 1, h: 6, static: false },
71
71
{ i: "AltTextCard", x: 0, y: 26, w: 1, h: 6, static: false },
72
72
{ i: "ActivityCard", x: 0, y: 30, w: 1, h: 7, static: false }
73
73
],
74
74
xxs: [
75
-
{ i: "NarrativeCard", x: 0, y: 0, w: 1, h: 8, static: false },
76
75
{ i: "ScoreBreakdownCard", x: 0, y: 8, w: 1, h: 6, static: false },
76
+
{ i: "NarrativeCard", x: 0, y: 0, w: 1, h: 8, static: false },
77
77
{ i: "ProfileCard", x: 0, y: 14, w: 1, h: 7, static: false },
78
78
{ i: "PostTypeCard", x: 0, y: 22, w: 1, h: 6, static: false },
79
79
{ i: "AltTextCard", x: 0, y: 26, w: 1, h: 5, static: false },
···
247
247
size={205}
248
248
textColor="#004f84"
249
249
/>
250
-
<div className="user-profile-name">
251
-
<h1>{displayName}</h1>
252
-
<h2>@{resolvedHandle}</h2>
253
-
</div>
254
-
<div className="user-profile-age">
255
-
<h2>{Math.floor(selectedAccountData.ageInDays)} days old</h2>
256
-
</div>
257
-
<div className="user-profile-badges">
258
-
<h3>{selectedAccountData.socialStatus}</h3>
259
-
<h3>{selectedAccountData.postingStyle}</h3>
250
+
<div classname="user-profile-main">
251
+
<div className="user-profile-name">
252
+
<h1>{displayName}</h1>
253
+
<h2>@{resolvedHandle}</h2>
254
+
</div>
255
+
<div className="user-profile-age">
256
+
<h2>{Math.floor(selectedAccountData.ageInDays)} days old</h2>
257
+
</div>
258
+
<div className="user-profile-badges">
259
+
<h3>{selectedAccountData.socialStatus}</h3>
260
+
<h3>{selectedAccountData.postingStyle}</h3>
261
+
</div>
260
262
</div>
261
263
</div>
262
264
263
-
<div className="user-profile-header-rechart">
264
-
<ScoreGauge score={selectedAccountData.combinedScore} />
265
-
</div>
266
-
267
265
<div className="user-profile-data">
268
-
<div className="user-profile-score">
269
-
<p><strong>Combined Score: {selectedAccountData.combinedScore}</strong></p>
270
-
<p>Bluesky Score: {selectedAccountData.blueskyScore}</p>
271
-
<p>Atproto Score: {selectedAccountData.atprotoScore}</p>
266
+
<div className="user-profile-header-rechart">
267
+
<ScoreGauge score={selectedAccountData.combinedScore} />
272
268
</div>
273
-
<div className="user-profile-activity">
274
-
<p><strong>Overall Status: {selectedAccountData.activityAll.activityStatus}</strong></p>
275
-
<p>Bluesky Status: {selectedAccountData.activityAll.bskyActivityStatus}</p>
276
-
<p>Atproto Status: {selectedAccountData.activityAll.atprotoActivityStatus}</p>
269
+
<div className="user-profile-data-group">
270
+
<div className="user-profile-score">
271
+
<p>Bluesky Score: {selectedAccountData.blueskyScore}</p>
272
+
<p>Atproto Score: {selectedAccountData.atprotoScore}</p>
273
+
</div>
274
+
<div className="user-profile-activity">
275
+
<p>Bluesky Status: {selectedAccountData.activityAll.bskyActivityStatus}</p>
276
+
<p>Atproto Status: {selectedAccountData.activityAll.atprotoActivityStatus}</p>
277
+
</div>
277
278
</div>
278
279
</div>
279
280
280
-
<div className="toggle-switch">
281
+
{/* <div className="toggle-switch">
281
282
<button
282
283
className={`toggle-button ${selectedPeriod === '30' ? 'active' : ''}`}
283
284
onClick={() => setSelectedPeriod('30')}
···
290
291
>
291
292
Last 90 Days
292
293
</button>
293
-
</div>
294
+
</div> */}
295
+
294
296
<div className="share-button-container">
295
297
<button
296
298
className="share-button-profile"
297
299
type="button"
298
300
onClick={() => window.open(
299
301
`https://bsky.app/intent/compose?text=${encodeURIComponent(
300
-
`My @cred.blue score is ${selectedAccountData.combinedScore}/1000, and my account is ${Math.floor(selectedAccountData.ageInDays)} days old.\n\nOverall I'm ${selectedAccountData.activityAll.activityStatus} on the network.\n\nMy social status is classified as a "${selectedAccountData.socialStatus}" with a posting style of "${selectedAccountData.postingStyle}".\n\nDiscover your score here: cred.blue`
302
+
`My @cred.blue score is ${selectedAccountData.combinedScore}/1000, and my account is ${Math.floor(selectedAccountData.ageInDays)} days old.\n\nI'm ${selectedAccountData.activityAll.activityStatus} on the network.\n\nMy social status is "${selectedAccountData.socialStatus}" with a posting style of "${selectedAccountData.postingStyle}".\n\nCheck your score: cred.blue`
301
303
)}`, '_blank'
302
304
)}
303
305
>
···
313
315
cols={cols}
314
316
rowHeight={50}
315
317
margin={[20, 20]}
316
-
isDraggable={true}
318
+
isDraggable={false}
317
319
isResizable={false}
318
320
useCSSTransforms={true}
319
321
onLayoutChange={() => updateCardHeights()}
320
322
draggableHandle=".card-header" // Add this line to enable drag by header only
321
323
>
322
324
{/* Update your grid items to include a drag handle class in the Card component */}
323
-
<div key="NarrativeCard" className="grid-item" ref={el => cardRefs.current.NarrativeCard = el}>
324
-
<Card title="Summary">
325
-
<NarrativeCard />
326
-
</Card>
327
-
</div>
328
325
<div key="ScoreBreakdownCard" className="grid-item" ref={el => cardRefs.current.ScoreBreakdownCard = el}>
329
326
<Card title="Score Breakdown">
330
327
<ScoreBreakdownCard />
328
+
</Card>
329
+
</div>
330
+
<div key="NarrativeCard" className="grid-item" ref={el => cardRefs.current.NarrativeCard = el}>
331
+
<Card title="Summary">
332
+
<NarrativeCard />
331
333
</Card>
332
334
</div>
333
335
<div key="ProfileCard" className="grid-item" ref={el => cardRefs.current.ProfileCard = el}>