garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

add css classes to elements to ease css customization

Browse Source
This commit is contained in:
Athou
2025-04-23 13:56:11 +02:00
parent d6a1f1ae15
commit d417655a86
7 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
commafeed-client/src/components/content/FeedEntry.tsx
View File

@@ -187,7 +187,7 @@ export function FeedEntry(props: FeedEntryProps) {
<Box className={classes.body}>
<FeedEntryBody entry={props.entry} />
</Box>
<Divider variant="dashed" my={paddingY} />
<Divider variant="dashed" my={paddingY} className="cf-footer-divider" />
<FeedEntryFooter entry={props.entry} />
</Box>
)}

2
commafeed-client/src/components/content/FeedEntryFooter.tsx
View File

@@ -37,7 +37,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
)
return (
<Group justify="space-between">
<Group justify="space-between" className="cf-footer">
<Group gap={spacing}>
{props.entry.markable && (
<ActionButton

8
commafeed-client/src/components/content/header/FeedEntryHeader.tsx
View File

@@ -29,8 +29,8 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
read: props.entry.read,
})
return (
<Box>
<Flex align="flex-start" justify="space-between">
<Box className="cf-header">
<Flex align="flex-start" justify="space-between" className="cf-header-title">
<Flex align="flex-start" className={classes.main}>
{props.showStarIcon && (
<Box ml={-5}>
@@ -41,7 +41,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
</Flex>
{props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
</Flex>
<Flex align="center">
<Flex align="center" className="cf-header-subtitle">
<FeedFavicon url={props.entry.iconUrl} />
<Space w={6} />
<Box c="dimmed">
@@ -51,7 +51,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
</Box>
</Flex>
{props.expanded && (
<Box c="dimmed">
<Box className="cf-header-details">
{props.entry.author && <span>by {props.entry.author}</span>}
{props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
{props.entry.categories && <span>{props.entry.categories}</span>}