mirror of
https://github.com/dergigi/boris.git
synced 2025-12-23 17:44:19 +01:00
refactor: remove calendar icon from publication date
- Remove calendar icon (faCalendar) from publication date display - Display only the formatted date text - Remove icon-specific CSS styling (gap, svg styles) - Cleaner, more minimal date display in top-right corner
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import { faHighlighter, faClock, faCalendar } from '@fortawesome/free-solid-svg-icons'
|
import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
|
||||||
import { format } from 'date-fns'
|
import { format } from 'date-fns'
|
||||||
|
|
||||||
interface ReaderHeaderProps {
|
interface ReaderHeaderProps {
|
||||||
@@ -29,8 +29,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
|
|||||||
<img src={image} alt={title || 'Article image'} />
|
<img src={image} alt={title || 'Article image'} />
|
||||||
{formattedDate && (
|
{formattedDate && (
|
||||||
<div className="publish-date-topright">
|
<div className="publish-date-topright">
|
||||||
<FontAwesomeIcon icon={faCalendar} />
|
{formattedDate}
|
||||||
<span>{formattedDate}</span>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{title && (
|
{title && (
|
||||||
@@ -63,8 +62,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
|
|||||||
<div className="reader-header">
|
<div className="reader-header">
|
||||||
{formattedDate && (
|
{formattedDate && (
|
||||||
<div className="publish-date-topright">
|
<div className="publish-date-topright">
|
||||||
<FontAwesomeIcon icon={faCalendar} />
|
{formattedDate}
|
||||||
<span>{formattedDate}</span>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<h2 className="reader-title">{title}</h2>
|
<h2 className="reader-title">{title}</h2>
|
||||||
|
|||||||
@@ -543,24 +543,13 @@ body {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1rem;
|
top: 1rem;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.4rem;
|
|
||||||
font-size: 0.813rem;
|
font-size: 0.813rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 0.4rem 0.75rem;
|
padding: 0.4rem 0.75rem;
|
||||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 6px;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.publish-date-topright svg {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
opacity: 0.9;
|
|
||||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
|
||||||
}
|
|
||||||
|
|
||||||
.reading-time {
|
.reading-time {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user