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"
shouldAnimateHover
iconName="chevron-down"
onClick={() => {}}
onClick={() => {
document.getElementById('comment-section').scrollIntoView()
}}
>
Comments 11
{userPart.Part.Comment.length} Comments
</Button>
<Link
to={routes.ide({
@@ -155,7 +157,10 @@ const PartProfile = ({
{!isEditable && (
<>
<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
</h3>

View File

@@ -48,7 +48,9 @@
/* stop pop over from scrolling */
overflow: visible !important;
}
html {
scroll-behavior: smooth;
}
body {
/* TODO can I use a tailwind class here? */
background-color: #f7fafc;