Concept page mappings: style and visibility fixes

osma commented 3 months ago

Reasons for creating this PR

The layout and styling of concept mappings was wrong after opening the vocabulary home page and clicking on links that perform a partial page load. Also, when switching between concepts, the mappings didn't update immediately, so the wrong (stale) set of mappings could be shown.

This PR addresses the above problems by adjusting the template structure of the concept-mappings Vue component and making the display of the div element with the actual mappings conditional on the existence of mappings.

Link to relevant issue(s), if any

part of #1484

Description of the changes in this PR

make the display of the mappings div conditional on the existence of mappings (using a computed value for clarity)
when switching between concepts, clear the old mappings before starting to load new ones so that stale information is not displayed
adjust CSS classes of the concept-mappings component

Known problems or uncertainties in this PR

This PR is built on top of PR #1609 and includes the commits from that PR, so that should be merged first.
Should there be Cypress tests specific to these changes or are the existing tests enough?
There is now an extra useless div in the DOM structure. I couldn't figure out how to avoid it. I tried changing it to template instead in the Vue template, but it just ended up in the DOM as <template> and broke the functionality.

Checklist

[x] phpUnit tests pass locally with my changes
[ ] I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
[x] The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
[x] The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

codecov[bot] commented 3 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 70.58%. Comparing base (f22c504) to head (3e66b74). Report is 5 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #1613 +/- ## ========================================= Coverage 70.58% 70.58% Complexity 1647 1647 ========================================= Files 32 32 Lines 4321 4321 ========================================= Hits 3050 3050 Misses 1271 1271 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.