fix: Display problem on additionnal content - MEED-10137 - Meeds-io/meeds#3989 (#674)

Before this change, when adding articles to a card template and focusing on the additional content, then hovering the mouse over that additional content, a display problem occurred. To fix this problem, regardless of the focused element within the card, the card's hover state must be disabled. In this case, we add the class , and it displays when the card is focused. We apply the hover style only if this class is not displayed. After this change, if the content is displayed due to focus, moving the mouse will not change its state unexpectedly.

(cherry picked from commit 5c7f59f)

Author: akhanfir

content-webapp/src/main/webapp/skin/less/newsListView.less

@@ -1148,7 +1148,7 @@ p.caption-title:after {
     &:hover {
       cursor: pointer;
 
-      .upper-row {
+      .articleLinkDetails:not(.is-article-link-focused) .upper-row {
         transform: translateY(0);
       }
     }

content-webapp/src/main/webapp/vue-app/news-list-view/components/views/NewsCardsViewItem.vue

@@ -34,7 +34,8 @@
         class="article-illustration-img">
     </div>
     <div
-      class="text-area"
+      :class="{ 'is-article-link-focused': isArticleLinkFocused }"
+      class="text-area articleLinkDetails"
       tabindex="0"
       role="link"
       :aria-label="$t('news.illustration.link.title', {0: item.title})"