timtinkers.online
this repo has no description
Added helper function for summary font size (WIP)
+31
-3
+31
-3
components/WeeklySchedule.tsx
+31
-3
components/WeeklySchedule.tsx
···
115
115
return null;
116
116
};
117
117
118
+
const getSummaryFontSize = (summary: string | undefined): string => {
119
+
const baseFontSize = 1.1; // em
120
+
const idealLength = 10;
121
+
const minFontSize = 0.55; // em
122
+
const reductionStartLength = idealLength;
123
+
const reductionEndLength = 50; // Length at which minFontSize is reached
124
+
const fontSizeRange = baseFontSize - minFontSize;
125
+
const lengthRange = reductionEndLength - reductionStartLength;
126
+
127
+
if (!summary) return `${baseFontSize}em`;
128
+
129
+
const summaryLength = summary.length;
130
+
131
+
if (summaryLength <= idealLength) {
132
+
return `${baseFontSize}em`;
133
+
} else if (summaryLength >= reductionEndLength) {
134
+
return `${minFontSize}em`;
135
+
} else {
136
+
const lengthOverIdeal = summaryLength - reductionStartLength;
137
+
const fontSizeReduction = (lengthOverIdeal / lengthRange) *
138
+
fontSizeRange;
139
+
const calculatedFontSize = baseFontSize - fontSizeReduction;
140
+
return `${calculatedFontSize.toFixed(2)}em`; // Format to 2 decimal places for cleaner output
141
+
}
142
+
};
143
+
118
144
return (
119
145
<div
120
146
style={{
···
206
232
const hasEvent = !!event;
207
233
const eventBgColor = getEventBgColor(event);
208
234
const eventIcon = getEventIcon(event);
235
+
const summaryFontSize = getSummaryFontSize(event?.summary);
209
236
210
237
return (
211
238
<div
···
221
248
padding: "10px",
222
249
borderRadius: "15px",
223
250
marginBottom: "8px",
224
-
fontSize: "1.3em",
251
+
fontSize: "1.2em",
225
252
fontFamily: theme.fontFamily,
226
253
position: "relative",
227
254
}}
···
245
272
className="weekday"
246
273
style={{
247
274
fontWeight: "bold",
248
-
marginRight: "12px",
275
+
marginRight: "10px",
249
276
justifyContent: "flex-start",
250
277
flex: "1",
251
278
color: theme.dayColor,
···
261
288
justifyContent: "center",
262
289
textAlign: "center",
263
290
flex: 2,
264
-
marginRight: "12px",
291
+
marginRight: "10px",
265
292
wordWrap: "break-word",
266
293
color: theme.eventTextColor,
294
+
fontSize: summaryFontSize,
267
295
}}
268
296
>
269
297
{hasEvent ? event.summary : "-"}