-
-
Notifications
You must be signed in to change notification settings - Fork 164
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix card arrow not being animated in sync
This commit fixes an UI inconsitency where the arrow did not animate in sync with with the card's expansion panel during the expansion process. The solution implemented involves the use of actual DOM element for the arrow, rather than a pseude-element, allowing for unified animation with the expansion panel. Changes: - Extraction of the expansion arrow into its own Vue component, `CardExpansionArrow`, improving maintainability and separation of concerns. - Transition to using a real DOM element for the expansion arrow, moving away from the `&:before` pseudo-class. This leads to simpler codebase, better separation of concerns and closer alignment with HTML semantics.
- Loading branch information
1 parent
49f22f0
commit 7b546c5
Showing
2 changed files
with
53 additions
and
28 deletions.
There are no files selected for viewing
32 changes: 32 additions & 0 deletions
32
src/presentation/components/Scripts/View/Cards/CardExpansionArrow.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<template> | ||
<div class="arrow-container"> | ||
<div class="arrow" /> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent } from 'vue'; | ||
export default defineComponent({ | ||
// Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125. | ||
}); | ||
</script> | ||
|
||
<style scoped lang="scss"> | ||
@use "@/presentation/assets/styles/main" as *; | ||
$arrow-size: $font-size-absolute-normal; | ||
.arrow-container { | ||
position: relative; | ||
.arrow { | ||
position: absolute; | ||
left: calc(50% - $arrow-size * 1.5); | ||
top: calc(-0.35 * $arrow-size); | ||
border: solid $color-primary-darker; | ||
border-width: 0 $arrow-size $arrow-size 0; | ||
padding: $arrow-size; | ||
transform: rotate(-135deg); | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters