issue-83 Add scroll to comments button
When the comments button is click, the comments section is scrolled into view.
This commit is contained in:
@@ -88,9 +88,11 @@ const PartProfile = ({
|
|||||||
className="mt-6 ml-auto hover:shadow-lg bg-gradient-to-r from-transparent to-indigo-100"
|
className="mt-6 ml-auto hover:shadow-lg bg-gradient-to-r from-transparent to-indigo-100"
|
||||||
shouldAnimateHover
|
shouldAnimateHover
|
||||||
iconName="chevron-down"
|
iconName="chevron-down"
|
||||||
onClick={() => {}}
|
onClick={() => {
|
||||||
|
document.getElementById('comment-section').scrollIntoView()
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Comments 11
|
{userPart.Part.Comment.length} Comments
|
||||||
</Button>
|
</Button>
|
||||||
<Link
|
<Link
|
||||||
to={routes.ide({
|
to={routes.ide({
|
||||||
@@ -155,7 +157,10 @@ const PartProfile = ({
|
|||||||
{!isEditable && (
|
{!isEditable && (
|
||||||
<>
|
<>
|
||||||
<div className="h-px bg-indigo-200 mt-8" />
|
<div className="h-px bg-indigo-200 mt-8" />
|
||||||
<h3 className="text-indigo-800 text-lg font-roboto tracking-wider mb-4">
|
<h3
|
||||||
|
className="text-indigo-800 text-lg font-roboto tracking-wider mb-4"
|
||||||
|
id="comment-section"
|
||||||
|
>
|
||||||
Comments
|
Comments
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
|
|||||||
@@ -48,7 +48,9 @@
|
|||||||
/* stop pop over from scrolling */
|
/* stop pop over from scrolling */
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
}
|
}
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
/* TODO can I use a tailwind class here? */
|
/* TODO can I use a tailwind class here? */
|
||||||
background-color: #f7fafc;
|
background-color: #f7fafc;
|
||||||
|
|||||||
Reference in New Issue
Block a user