maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make sure open preview cards don't collapse on scroll (#14482)

Browse source 
* don't close dropdown on scroll if already open

* fix minor alignment issue with author comments
This commit is contained in:
Suzanne Aitchison 2021-08-12 13:29:51 +01:00 • committed by GitHub
parent 82c24417e0
commit 86e4c39e31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/javascript/utilities/dropdownUtils.js
View file

@ -29,19 +29,24 @@ const handleDropdownRepositions = () => {
// Default to dropping downwards
element.classList.remove('reverse');
// We can't determine position on an element with display:none, so we "show" the dropdown with 0 opacity very temporarily
element.style.opacity = 0;
element.style.display = 'block';
const isWithinViewport = isInViewport({ element });
const isDropdownCurrentlyOpen = element.style.display === 'block';
// Revert the temporary changes to determine position
element.style.removeProperty('display');
element.style.removeProperty('opacity');
if (!isDropdownCurrentlyOpen) {
// We can't determine position on an element with display:none, so we "show" the dropdown with 0 opacity very temporarily
element.style.opacity = 0;
element.style.display = 'block';
}
if (!isWithinViewport) {
if (!isInViewport({ element })) {
// If the element isn't fully visible when dropping down, reverse the direction
element.classList.add('reverse');
}
if (!isDropdownCurrentlyOpen) {
// Revert the temporary changes to determine position
element.style.removeProperty('display');
element.style.removeProperty('opacity');
}
}
};

2
app/views/comments/_comment_header.html.erb
View file

@ -13,7 +13,7 @@
</button>
<%= render "/shared/profile_preview_card", actor: comment.user, id: "comment-profile-preview-content-#{comment.id}" %>
<% if commentable_author_is_op?(commentable, comment) %>
<span class="crayons-tooltip inline-block spec-op-author -mr-2" data-tooltip="<%= get_ama_or_op_banner(commentable) %>">
<span class="crayons-tooltip inline-block spec-op-author -ml-2" data-tooltip="<%= get_ama_or_op_banner(commentable) %>">
<%= inline_svg_tag("small-medal.svg", aria: true, class: "crayons-icon", title: get_ama_or_op_banner(commentable)) %>
</span>
<% end %>

2
cypress/integration/seededFlows/articleFlows/viewArticleDiscussion.spec.js
View file

@ -10,7 +10,7 @@ describe('View article discussion', () => {
});
});
it.skip('follows and unfollows a user from a comment preview card', () => {
it('follows and unfollows a user from a comment preview card', () => {
// Make sure the preview card is ready to be interacted with
cy.get('[data-initialized]');
cy.findByRole('button', { name: 'Admin McAdmin profile details' }).click();