Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added highlighting on entry from direct links #1046

Merged
merged 2 commits into from
Nov 25, 2023
Merged

added highlighting on entry from direct links #1046

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f3cd17
added highlighting on timeline from direct links
LoneCoder21 Nov 20, 2023
d18afcc
Use purple highlight, remove icon highlighting, add minor glow effect…
molly Nov 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions src/components/timeline/Entry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
import { InView } from "react-intersection-observer";
import Link from "next/link";
import TimelineEntryContent from "./TimelineEntryContent";
import { useSearchParams } from "next/navigation";

export default function Entry({
entry,
Expand All @@ -40,6 +41,7 @@ export default function Entry({
}) {
const ref = useRef();
const router = useRouter();
const searchParams = useSearchParams();
const isBrowserRendering = useIsBrowserRendering();

const [showCopiedPopup, setShowCopiedPopup] = useState(false);
Expand Down Expand Up @@ -106,6 +108,11 @@ export default function Entry({
[entry.readableId, router.route]
);

const isEntryHighlighted = useMemo(
() => entry.readableId === searchParams.get("id"),
[entry.readableId, searchParams]
);

const renderIcon = () => {
if (entry.faicon) {
return (
Expand Down Expand Up @@ -431,11 +438,20 @@ export default function Entry({
className={`timeline-entry ${className}`}
ref={shouldScrollToElement ? ref : null}
>
<div className={`timeline-icon ${entry.color || "purple"}`}>
<div
className={clsx(
"timeline-icon",
entry.color || "purple"
)}
>
{renderIcon()}
</div>

<div className="timeline-description">
<div
className={clsx("timeline-description", {
highlighted: isEntryHighlighted,
})}
>
<div className="entry-wrapper">
{renderTimestampAndLinkIcons()}
<h2>
Expand Down
4 changes: 4 additions & 0 deletions src/styles/_tokens.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ $dark-filter-text: $dark-main-color
/* Other colors ---------------------------------*/
$timeline-line-color: #cccccc
$timeline-icon-color: #ffffff
$timeline-highlight-color: $accent
$timeline-highlight-glow-color: lighten($accent, 20%)

$dark-timeline-line-color: #444444
$dark-timeline-icon-color: #cccccc
$dark-timeline-highlight-color: $dark-link-color
$dark-timeline-highlight-glow-color: rgba(255, 255, 255, 0.5)
70 changes: 53 additions & 17 deletions src/styles/main.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,13 @@ article.timeline
pointer-events: auto
border: 1px solid $timeline-line-color

&.highlighted
border: 3px solid $timeline-highlight-color
box-shadow: 0px 0px 10px 0px $timeline-highlight-glow-color

&::after
border-color: $timeline-highlight-color

&::after
background-color: $card-background
border-color: $timeline-line-color
Expand Down Expand Up @@ -696,10 +703,16 @@ table

/* RESPONSIVENESS */
@media only screen and (min-width: #{$md-breakpoint + 1}px)
.timeline-entry.even .timeline-description:after
right: -8px
border-top-width: 1px
border-right-width: 1px
.timeline-entry.even
.timeline-description:after
right: -8px
border-top-width: 1px
border-right-width: 1px

.timeline-description.highlighted:after
right: -9px
border-top-width: 3px
border-right-width: 3px

header.page-header.timeline-page
min-height: 250px
Expand Down Expand Up @@ -731,10 +744,16 @@ table
width: 80%

@media only screen and (max-width: #{$md-breakpoint}px) and (min-width: #{$xs-breakpoint + 1}px)
.timeline-entry.even .timeline-description:after
left: -8px
border-bottom-width: 1px
border-left-width: 1px
.timeline-entry.even
.timeline-description:after
left: -8px
border-bottom-width: 1px
border-left-width: 1px

.timeline-description.highlighted:after
right: -9px
border-top-width: 3px
border-right-width: 3px

@media only screen and (min-width: #{$xs-breakpoint + 1}px)
.timeline-description:after
Expand All @@ -748,10 +767,16 @@ table
border-style: solid
box-sizing: border-box

.timeline-entry.odd .timeline-description:after
left: -8px
border-bottom-width: 1px
border-left-width: 1px
.timeline-entry.odd
.timeline-description:after
left: -8px
border-bottom-width: 1px
border-left-width: 1px

.timeline-description.highlighted:after
left: -9px
border-bottom-width: 3px
border-left-width: 3px

.image-right
width: clamp(150px, 40%, 400px)
Expand Down Expand Up @@ -976,6 +1001,10 @@ table
background-color: $dark-card-background
border-color: $dark-timeline-line-color

&.highlighted
border-color: $dark-timeline-highlight-color
box-shadow: 0px 0px 10px 0px $dark-timeline-highlight-glow-color

h2
button .permalink-popup
color: $dark-main-color
Expand Down Expand Up @@ -1007,18 +1036,25 @@ table
@each $name, $color in $icon-colors
&.#{$name}
background-color: darken($color, 20%)

.load-top
button, a.button
color: $dark-timeline-icon-color
background-color: darken($accent, 20%)

.timeline.dots::before
background: linear-gradient(180deg, $dark-timeline-line-color 25%, $dark-main-background 25%, $dark-main-background 50%, $dark-timeline-line-color 50%, $dark-timeline-line-color 75%, $dark-main-background 75%, $dark-main-background 100%)
background: linear-gradient(180deg, $dark-timeline-line-color 25%, $dark-main-background 25%, $dark-main-background 50%, $dark-timeline-line-color 50%, $dark-timeline-line-color 75%, $dark-main-background 75%, $dark-main-background 100%)

.timeline-description:after
background-color: $dark-card-background
border-color: $dark-timeline-line-color
.timeline-description
&:after
background-color: $dark-card-background
border-color: $dark-timeline-line-color

&.highlighted
border-color: $dark-timeline-highlight-color

&::after
border-color: $dark-timeline-highlight-color

// Contribute
table
Expand Down