From dc5ba0519dc07675c82da104287034acfeb54d81 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 20 Sep 2024 21:34:26 +0200
Subject: [PATCH] Hightlight sidebar
---
src/App/App.css | 4 ++++
src/components/ScrollLink.tsx | 4 ++--
src/utils/Highlight-functions.ts | 10 ++++++----
3 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index fa7ae102..6b9bedf4 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -74,6 +74,10 @@ html{
display: none;
}
+.scrolllink span{
+ color: var(--background) !important;
+}
+
.small-row{
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
diff --git a/src/components/ScrollLink.tsx b/src/components/ScrollLink.tsx
index 30855b7a..db9c4c62 100644
--- a/src/components/ScrollLink.tsx
+++ b/src/components/ScrollLink.tsx
@@ -36,8 +36,8 @@ export const ScrollLink: React.FC<ScrollLinkProps> = ({ targetId, label }) => {
};
return (
- <a href={`#${targetId}`} onClick={handleClick}>
- {label}
+ <a className="scrolllink" href={`#${targetId}`} onClick={handleClick}>
+ <span>{label}</span>
</a>
);
};
diff --git a/src/utils/Highlight-functions.ts b/src/utils/Highlight-functions.ts
index 65215a5f..8206b4d6 100644
--- a/src/utils/Highlight-functions.ts
+++ b/src/utils/Highlight-functions.ts
@@ -1,5 +1,5 @@
export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
- let TopDistance = 150;
+ let TopDistance = 170;
/* console.log("Starting highlight check...")
console.log("here come el...")
console.log(el)
@@ -10,12 +10,12 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
//console.log(el)
// console.log(el.getBoundingClientRect())
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
- subtitle.style.color = "#F57D22";
+ subtitle.style.color = "white";
subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
subtitle.style.borderColor = "#850F78";
subtitle.style.marginLeft = "5px";
subtitle.style.paddingRight = "5px";
- subtitle.style.fontWeight = "900";
+ subtitle.style.fontWeight = "700";
/* console.log("subtitle: ",subtitle)
console.log("style: ", subtitle.style)
@@ -74,12 +74,13 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
*/
export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
- let TopDistance = 150;
+ let TopDistance = 170;
if (el != null && subtitle != null){
//console.log("Highlighting Element: ", el, "Subtitle: ", subtitle);
//console.log(`Element position: top=${el.getBoundingClientRect().top}, bottom=${el.getBoundingClientRect().bottom}`);
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
(subtitle.childNodes[0] as HTMLElement).classList.add("active-sideitem");
+ subtitle.style.fontWeight = "900";
if(subtitle.childNodes[0].childNodes[1] != undefined){
(subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "block";
// console.log(`subtitle.childNodes[0].textContent ${subtitle.childNodes[0].textContent}`)
@@ -87,6 +88,7 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
}
} else {
(subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
+ subtitle.style.fontWeight = "normal";
if(subtitle.childNodes[0] != undefined){
(subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
if(subtitle.childNodes[0].childNodes[1] != undefined){
--
GitLab