Skip to content

Commit a723299

Browse files
fullenifulleni
committed
style: refine headline metadata appearance
- Smaller metadata text for better fit - Adjusted chip background opacity - Reduced spacing for compactness - Adjusted chip label padding
1 parent dd8c786 commit a723299

File tree

3 files changed

+99
-147
lines changed

3 files changed

+99
-147
lines changed

‎lib/shared/widgets/headline_tile_image_start.dart

Lines changed: 35 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -159,72 +159,62 @@ class _HeadlineMetadataRow extends StatelessWidget {
159159
Widget build(BuildContext context) {
160160
final formattedDate = formatRelativeTime(context, headline.publishedAt);
161161

162-
final metadataStyle = textTheme.bodySmall?.copyWith(
163-
color: colorScheme.onSurfaceVariant,
164-
);
165-
final chipLabelStyle = textTheme.labelSmall?.copyWith(
162+
// Use labelSmall as a base and make it smaller for metadata text
163+
final baseTextStyle = textTheme.labelSmall;
164+
final metadataStyle = baseTextStyle?.copyWith(
166165
color: colorScheme.onSurfaceVariant,
166+
fontSize: baseTextStyle.fontSize != null ? baseTextStyle.fontSize! * 0.85 : 10, // 15% smaller or fallback
167167
);
168+
// Use the same derived style for chip labels for consistency
169+
final chipLabelStyle = metadataStyle;
170+
168171
final chipBackgroundColor = colorScheme.surfaceContainerHighest.withOpacity(
169-
0.5,
172+
0.7,
170173
);
171-
const iconSize = 12.0; // Kept for date icon
174+
const iconSize = AppSpacing.sm;
172175

173176
return Wrap(
174-
spacing: AppSpacing.sm, // Reduced spacing for more compactness
175-
runSpacing: AppSpacing.xs,
177+
spacing: AppSpacing.xs,
178+
runSpacing: AppSpacing.xs,
176179
crossAxisAlignment: WrapCrossAlignment.center,
177180
children: [
178181
if (formattedDate.isNotEmpty)
179-
GestureDetector(
180-
onTap: () {
181-
ScaffoldMessenger.of(context)
182-
..hideCurrentSnackBar()
183-
..showSnackBar(
184-
SnackBar(content: Text('Tapped Date: $formattedDate')),
185-
);
186-
},
187-
child: Row(
188-
mainAxisSize: MainAxisSize.min,
189-
children: [
190-
Icon(
191-
Icons.calendar_today_outlined,
192-
size: iconSize,
193-
color: colorScheme.onSurfaceVariant,
194-
),
195-
const SizedBox(width: AppSpacing.xs),
196-
Text(formattedDate, style: metadataStyle),
197-
],
198-
),
182+
Row(
183+
mainAxisSize: MainAxisSize.min,
184+
children: [
185+
Icon(
186+
Icons.calendar_today_outlined,
187+
size: iconSize,
188+
color: colorScheme.onSurfaceVariant,
189+
),
190+
const SizedBox(width: AppSpacing.xs / 2), // Minimal space
191+
Text(formattedDate, style: metadataStyle),
192+
],
199193
),
200194
// Conditionally render Category Chip
201195
if (headline.category?.name != null &&
202196
!(currentContextEntityType == EntityType.category &&
203197
headline.category!.id == currentContextEntityId)) ...[
204-
if (formattedDate.isNotEmpty)
198+
if (formattedDate.isNotEmpty) // Add separator if date was present
205199
Padding(
206-
padding: const EdgeInsets.symmetric(
207-
horizontal: AppSpacing.xs / 2,
208-
),
200+
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2),
209201
child: Text('•', style: metadataStyle),
210202
),
211203
GestureDetector(
212204
onTap: () {
213205
if (headline.category != null) {
214206
context.push(
215207
Routes.categoryDetails,
216-
extra: EntityDetailsPageArguments(entity: headline.category),
208+
extra: EntityDetailsPageArguments(entity: headline.category!),
217209
);
218210
}
219211
},
220212
child: Chip(
221213
label: Text(headline.category!.name),
222214
labelStyle: chipLabelStyle,
223215
backgroundColor: chipBackgroundColor,
224-
padding: EdgeInsets.zero, // Changed
225-
labelPadding: const EdgeInsets.symmetric(
226-
horizontal: AppSpacing.xs,
227-
), // Added
216+
padding: EdgeInsets.zero, // Minimal padding around label
217+
labelPadding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2 ), // Reduced padding
228218
visualDensity: VisualDensity.compact,
229219
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
230220
),
@@ -234,33 +224,29 @@ class _HeadlineMetadataRow extends StatelessWidget {
234224
if (headline.source?.name != null &&
235225
!(currentContextEntityType == EntityType.source &&
236226
headline.source!.id == currentContextEntityId)) ...[
237-
if (formattedDate.isNotEmpty ||
238-
(headline.category?.name != null &&
239-
!(currentContextEntityType == EntityType.category &&
240-
headline.category!.id == currentContextEntityId)))
227+
// Add separator if date or category was present
228+
if (formattedDate.isNotEmpty || (headline.category?.name != null &&
229+
!(currentContextEntityType == EntityType.category &&
230+
headline.category!.id == currentContextEntityId)) )
241231
Padding(
242-
padding: const EdgeInsets.symmetric(
243-
horizontal: AppSpacing.xs / 2,
244-
),
232+
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2),
245233
child: Text('•', style: metadataStyle),
246234
),
247235
GestureDetector(
248236
onTap: () {
249237
if (headline.source != null) {
250238
context.push(
251239
Routes.sourceDetails,
252-
extra: EntityDetailsPageArguments(entity: headline.source),
240+
extra: EntityDetailsPageArguments(entity: headline.source!),
253241
);
254242
}
255243
},
256244
child: Chip(
257245
label: Text(headline.source!.name),
258246
labelStyle: chipLabelStyle,
259247
backgroundColor: chipBackgroundColor,
260-
padding: EdgeInsets.zero, // Changed
261-
labelPadding: const EdgeInsets.symmetric(
262-
horizontal: AppSpacing.xs,
263-
), // Added
248+
padding: EdgeInsets.zero, // Minimal padding around label
249+
labelPadding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2), // Reduced padding
264250
visualDensity: VisualDensity.compact,
265251
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
266252
),

‎lib/shared/widgets/headline_tile_image_top.dart

Lines changed: 32 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -170,72 +170,60 @@ class _HeadlineMetadataRow extends StatelessWidget {
170170
Widget build(BuildContext context) {
171171
final formattedDate = formatRelativeTime(context, headline.publishedAt);
172172

173-
final metadataStyle = textTheme.bodySmall?.copyWith(
174-
color: colorScheme.onSurfaceVariant,
175-
);
176-
final chipLabelStyle = textTheme.labelSmall?.copyWith(
173+
final baseTextStyle = textTheme.labelSmall;
174+
final metadataStyle = baseTextStyle?.copyWith(
177175
color: colorScheme.onSurfaceVariant,
176+
fontSize: baseTextStyle.fontSize != null ? baseTextStyle.fontSize! * 0.85 : 10,
178177
);
178+
final chipLabelStyle = metadataStyle;
179+
179180
final chipBackgroundColor = colorScheme.surfaceContainerHighest.withOpacity(
180-
0.5,
181+
0.7,
181182
);
182-
const iconSize = 12.0; // Kept for date icon
183+
const iconSize = AppSpacing.sm;
183184

184185
return Wrap(
185-
spacing: AppSpacing.sm, // Reduced spacing for more compactness
186-
runSpacing: AppSpacing.xs,
186+
spacing: AppSpacing.xs,
187+
runSpacing: AppSpacing.xs,
187188
crossAxisAlignment: WrapCrossAlignment.center,
188189
children: [
189190
if (formattedDate.isNotEmpty)
190-
GestureDetector(
191-
onTap: () {
192-
ScaffoldMessenger.of(context)
193-
..hideCurrentSnackBar()
194-
..showSnackBar(
195-
SnackBar(content: Text('Tapped Date: $formattedDate')),
196-
);
197-
},
198-
child: Row(
199-
mainAxisSize: MainAxisSize.min,
200-
children: [
201-
Icon(
202-
Icons.calendar_today_outlined,
203-
size: iconSize,
204-
color: colorScheme.onSurfaceVariant,
205-
),
206-
const SizedBox(width: AppSpacing.xs),
207-
Text(formattedDate, style: metadataStyle),
208-
],
209-
),
191+
Row(
192+
mainAxisSize: MainAxisSize.min,
193+
children: [
194+
Icon(
195+
Icons.calendar_today_outlined,
196+
size: iconSize,
197+
color: colorScheme.onSurfaceVariant,
198+
),
199+
const SizedBox(width: AppSpacing.xs / 2),
200+
Text(formattedDate, style: metadataStyle),
201+
],
210202
),
211203
// Conditionally render Category Chip
212204
if (headline.category?.name != null &&
213205
!(currentContextEntityType == EntityType.category &&
214206
headline.category!.id == currentContextEntityId)) ...[
215-
if (formattedDate.isNotEmpty)
207+
if (formattedDate.isNotEmpty)
216208
Padding(
217-
padding: const EdgeInsets.symmetric(
218-
horizontal: AppSpacing.xs / 2,
219-
),
209+
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2),
220210
child: Text('•', style: metadataStyle),
221211
),
222212
GestureDetector(
223213
onTap: () {
224214
if (headline.category != null) {
225215
context.push(
226216
Routes.categoryDetails,
227-
extra: EntityDetailsPageArguments(entity: headline.category),
217+
extra: EntityDetailsPageArguments(entity: headline.category!),
228218
);
229219
}
230220
},
231221
child: Chip(
232222
label: Text(headline.category!.name),
233223
labelStyle: chipLabelStyle,
234224
backgroundColor: chipBackgroundColor,
235-
padding: EdgeInsets.zero, // Changed
236-
labelPadding: const EdgeInsets.symmetric(
237-
horizontal: AppSpacing.xs,
238-
), // Added
225+
padding: EdgeInsets.zero,
226+
labelPadding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2 ),
239227
visualDensity: VisualDensity.compact,
240228
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
241229
),
@@ -245,33 +233,28 @@ class _HeadlineMetadataRow extends StatelessWidget {
245233
if (headline.source?.name != null &&
246234
!(currentContextEntityType == EntityType.source &&
247235
headline.source!.id == currentContextEntityId)) ...[
248-
if (formattedDate.isNotEmpty ||
249-
(headline.category?.name != null &&
250-
!(currentContextEntityType == EntityType.category &&
251-
headline.category!.id == currentContextEntityId)))
236+
if (formattedDate.isNotEmpty || (headline.category?.name != null &&
237+
!(currentContextEntityType == EntityType.category &&
238+
headline.category!.id == currentContextEntityId)) )
252239
Padding(
253-
padding: const EdgeInsets.symmetric(
254-
horizontal: AppSpacing.xs / 2,
255-
),
240+
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2),
256241
child: Text('•', style: metadataStyle),
257242
),
258243
GestureDetector(
259244
onTap: () {
260245
if (headline.source != null) {
261246
context.push(
262247
Routes.sourceDetails,
263-
extra: EntityDetailsPageArguments(entity: headline.source),
248+
extra: EntityDetailsPageArguments(entity: headline.source!),
264249
);
265250
}
266251
},
267252
child: Chip(
268253
label: Text(headline.source!.name),
269254
labelStyle: chipLabelStyle,
270255
backgroundColor: chipBackgroundColor,
271-
padding: EdgeInsets.zero, // Changed
272-
labelPadding: const EdgeInsets.symmetric(
273-
horizontal: AppSpacing.xs,
274-
), // Added
256+
padding: EdgeInsets.zero,
257+
labelPadding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2),
275258
visualDensity: VisualDensity.compact,
276259
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
277260
),

0 commit comments

Comments
 (0)