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:
Kurt Hutten
2020-11-19 07:14:39 +11:00
parent c11a2a5a65
commit 6e124a9102
2 changed files with 11 additions and 4 deletions

View File

@@ -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>

View File

@@ -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;