-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement VAR for C24_WMDE_Desktop_DE_21
- adds "minimise banner on scroll" for VAR - there are now multiple emits of "bannerContentChanged" due to the resizing into Minimize banner, so the softclose test needs to be a little more flexible in its expectation - add tests for autoscroll feature on desktop https://phabricator.wikimedia.org/T381952
- Loading branch information
Showing
11 changed files
with
375 additions
and
53 deletions.
There are no files selected for viewing
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
47 changes: 0 additions & 47 deletions
47
banners/desktop/C24_WMDE_Desktop_DE_21/components/MainBanner_var.vue
This file was deleted.
Oops, something went wrong.
29 changes: 29 additions & 0 deletions
29
banners/desktop/C24_WMDE_Desktop_DE_21/components/MinimisedBanner.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,29 @@ | ||
| <template> | ||
| <div class="wmde-banner-minimised"> | ||
|
|
||
| <div class="wmde-banner-minimised-button-group"> | ||
| <button class="wmde-banner-minimised-maximise" @click.prevent="$emit( 'maximise' )">Vergrößern <ChevronDownIcon/></button> | ||
| <ButtonClose @close="$emit( 'close' )"/> | ||
| </div> | ||
|
|
||
| <div class="wmde-banner-minimised-content"> | ||
| <div class="wmde-banner-minimised-content-message"> | ||
| <MinimisedText/> | ||
| </div> | ||
| <div class="wmde-banner-minimised-content-button"> | ||
| <button class="wmde-banner-minimised-submit-button" @click.prevent="$emit( 'maximise-cta' )"> | ||
| Jetzt spenden | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <slot name="footer"/> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import MinimisedText from '../content/MinimisedText.vue'; | ||
| import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue'; | ||
| import ChevronDownIcon from '@src/components/Icons/ChevronDownIcon.vue'; | ||
| defineEmits( [ 'close', 'maximise', 'maximise-cta' ] ); | ||
| </script> |
26 changes: 26 additions & 0 deletions
26
banners/desktop/C24_WMDE_Desktop_DE_21/content/MinimisedText.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,26 @@ | ||
| <template> | ||
| <div class="wmde-banner-minimised-message"> | ||
| <InfoIconItalic/> | ||
| <p class="wmde-banner-minimised-title"> | ||
| {{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia in Deutschland nutzen. Die Zeit wird knapp! | ||
| </p> | ||
| <p> | ||
| Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann geben Sie jetzt etwas zurück. | ||
| </p> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { inject, onMounted, onUnmounted } from 'vue'; | ||
| import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent'; | ||
| import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime'; | ||
| import InfoIconItalic from '@src/components/Icons/InfoIconItalic.vue'; | ||
| const { getCurrentDateAndTime } = inject<DynamicContent>( 'dynamicCampaignText' ); | ||
| const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime ); | ||
| onMounted( startTimer ); | ||
| onUnmounted( stopTimer ); | ||
| </script> |
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
102 changes: 102 additions & 0 deletions
102
banners/desktop/C24_WMDE_Desktop_DE_21/styles/MinimisedBanner.scss
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,102 @@ | ||
| @use '../../../../src/themes/Treedip/variables/globals'; | ||
| @use '../../../../src/themes/Treedip/variables/fonts'; | ||
|
|
||
| .wmde-banner { | ||
| &-minimised { | ||
| --chevron-color: var( --minimised-control-fill ); | ||
|
|
||
| padding: 12px 24px 0; | ||
|
|
||
| &-content { | ||
| display: flex; | ||
|
|
||
| &-message { | ||
| display: flex; | ||
| flex: 1 1 auto; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| padding: 11px 15px 11px 34px; | ||
| font-size: 14px; | ||
|
|
||
| border: 5px solid var( --message-border ); | ||
| border-radius: 9px; | ||
|
|
||
| svg { | ||
| float: left; | ||
| margin: 10px 0 0 -22px; | ||
| } | ||
| } | ||
|
|
||
| &-button { | ||
| flex: 0 0 auto; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: end; | ||
| padding-left: 30px; | ||
| } | ||
| } | ||
|
|
||
| &-title { | ||
| font-family: fonts.$content; | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| &-submit-button { | ||
| width: 300px; | ||
| background: var( --minimised-button-background ); | ||
| color: var( --minimised-button-color ); | ||
| font-weight: bold; | ||
| line-height: 36px; | ||
| border: 0; | ||
| border-radius: 18px; | ||
| padding: 0 10px; | ||
| transition: background-color 500ms globals.$banner-easing; | ||
| cursor: pointer; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| background: var( --minimised-button-background-hover ); | ||
| } | ||
| } | ||
|
|
||
| &-button-group { | ||
| position: absolute; | ||
| z-index: 2; | ||
| top: 12px; | ||
| right: 24px; | ||
| height: 30px; | ||
| width: 300px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
|
|
||
| .wmde-banner-close { | ||
| position: static; | ||
| } | ||
| } | ||
|
|
||
| &-minimise, | ||
| &-maximise { | ||
| background: none; | ||
| border: 2px solid var( --minimised-control-border ); | ||
| border-radius: 15px; | ||
| cursor: pointer; | ||
| color: var( --minimised-control-color ); | ||
| padding-right: 8px; | ||
| margin-right: 8px; | ||
| font-size: 14px; | ||
| font-weight: bold; | ||
|
|
||
| svg { | ||
| width: 20px; | ||
| } | ||
| } | ||
|
|
||
| &-minimise { | ||
| svg { | ||
| transform: rotate( 180deg ); | ||
| margin-left: 3px; | ||
| } | ||
| } | ||
| } | ||
| } |
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
21 changes: 21 additions & 0 deletions
21
banners/desktop/C24_WMDE_Desktop_DE_21/useScrollMinimiser.ts
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,21 @@ | ||
| import { onMounted, onUnmounted, Ref, watch } from 'vue'; | ||
|
|
||
| export function useScrollMinimiser( switchThreshold: number, hasMinimised: Ref<boolean>, onScrollBelowThreshold: () => void ): void { | ||
| const scrollHandler = (): void => { | ||
| if ( window.scrollY > switchThreshold ) { | ||
| onScrollBelowThreshold(); | ||
| } | ||
| }; | ||
|
|
||
| onMounted( () => { | ||
| window.addEventListener( 'scroll', scrollHandler ); | ||
| } ); | ||
|
|
||
| onUnmounted( () => { | ||
| window.removeEventListener( 'scroll', scrollHandler ); | ||
| } ); | ||
|
|
||
| watch( hasMinimised, () => { | ||
| window.removeEventListener( 'scroll', scrollHandler ); | ||
| } ); | ||
| } |
Oops, something went wrong.