-
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_06
- new footer (SmallPrintFooter) component that has it's own colors+layout - fix chevron color being too dark (->white again) - add title attributes to links with explanations https://phabricator.wikimedia.org/T375599
- Loading branch information
Showing
15 changed files
with
251 additions
and
61 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
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
11 changes: 4 additions & 7 deletions
11
banners/desktop/C24_WMDE_Desktop_DE_06/styles/MainBanner.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
47 changes: 0 additions & 47 deletions
47
banners/desktop/C24_WMDE_Desktop_DE_06/styles/MainBannerVar.scss
This file was deleted.
Oops, something went wrong.
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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,31 @@ | ||
| @mixin layout { | ||
| &-footer { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
|
|
||
| .first-row-items, | ||
| .second-row-items { | ||
| display: flex; | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| &-usage { | ||
| padding: 10px 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| &-bank { | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| .iban, | ||
| .bic { | ||
| white-space: nowrap; | ||
| } | ||
| } | ||
| } | ||
| } |
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,74 @@ | ||
| <template> | ||
| <div class="wmde-banner-footer"> | ||
| <div v-if="showFundsLink" class="wmde-banner-footer-usage"> | ||
| <div class="first-row-items"> | ||
| <div class="wmde-banner-footer-item"> | ||
| <a | ||
| id="application-of-funds-link" | ||
| class="wmde-banner-footer-usage-link t-use-of-funds-link" | ||
| @click.prevent="$emit( 'showFundsModal' )" | ||
| :title="$translate( 'use-of-funds-link-description' )" | ||
| > | ||
| {{ $translate( 'use-of-funds-link' ) }} | ||
| </a> | ||
| </div> | ||
| <div class="wmde-banner-footer-item wmde-banner-footer-faq-link-item"> | ||
| <span class="link-separator"> | </span> | ||
| <a | ||
| id="faq-page-link" | ||
| class="wmde-banner-footer-usage-link" | ||
| :href="faqPageLink" | ||
| target="_blank" | ||
| :title="$translate( 'faq-page-link-description' )" | ||
| > | ||
| {{ $translate( 'faq-page-link' ) }} | ||
| </a> | ||
| </div> | ||
| <div class="wmde-banner-footer-item bold text-explanation"> | ||
| <span class="link-separator "> | </span> | ||
| Eine Dauerspende ist jederzeit formlos kündbar. Sie gehen kein Risiko ein. | ||
| </div> | ||
| </div> | ||
| <div class="second-row-items"> | ||
| <div class="wmde-banner-footer-item"> | ||
| <span>Wikimedia Deutschland ist der gemeinnützige Verein hinter Wikipedia. Jede Spende ist steuerlich | ||
| absetzbar. Auf Wunsch erhalten Sie von uns eine Spendenquittung.</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="wmde-banner-footer-bank"> | ||
| <label class="wmde-banner-footer-bank-item account">{{ $translate('donation-account') }}: | ||
| <SelectionInput :value="'Wikimedia e. V.'"/> | ||
| </label> | ||
| <div class="wmde-banner-footer-bank-item iban-and-bic"> | ||
| <label class="wmde-banner-footer-bank-item iban">IBAN: | ||
| <SelectionInput | ||
| :value="'DE09 3702 0500 0003 2873 00'" | ||
| :focusedValue="'DE09370205000003287300'" | ||
| /> | ||
| </label> | ||
| <label class="wmde-banner-footer-bank-item bic">BIC: | ||
| <SelectionInput :value="'BFSWDE33BER'"/> | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import SelectionInput from '@src/components/Footer/SelectionInput.vue'; | ||
| interface Props { | ||
| faqPageLink: string, | ||
| showFundsLink?: boolean, | ||
| } | ||
| withDefaults( defineProps<Props>(), { | ||
| faqPageLink: '', | ||
| showFundsLink: true | ||
| } ); | ||
| defineEmits( [ 'showFundsModal' ] ); | ||
| </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
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
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,18 @@ | ||
| /* eslint-disable camelcase */ | ||
| import { TrackingParameters } from '@src/domain/TrackingParameters'; | ||
|
|
||
| const FAQ_PAGE_URL = 'https://spenden.wikimedia.de/faq'; | ||
|
|
||
| /** | ||
| * This function is used to create a link to the FAQ page with tracking parameters. | ||
| * | ||
| * @param {TrackingParameters} tracking | ||
| */ | ||
| export function createFAQPageURL( tracking: TrackingParameters ): string { | ||
| const urlParameters = new URLSearchParams( { | ||
| piwik_kwd: tracking.keyword + '_faq', | ||
| piwik_campaign: tracking.campaign + '_faq' | ||
| } ); | ||
|
|
||
| return `${FAQ_PAGE_URL}?${urlParameters}`; | ||
| } |
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,62 @@ | ||
| @use 'src/components/Footer/SmallPrintFooter'; | ||
| @use '../variables/breakpoints'; | ||
|
|
||
| $right-column-width: 300px !default; | ||
| $left-column-margin: 0 30px 0 0 !default; | ||
|
|
||
| .wmde-banner { | ||
| @include SmallPrintFooter.layout; | ||
|
|
||
| &-footer { | ||
| font-size: 12px; | ||
| line-height: 20px; | ||
| color: var( --footer-color ); | ||
| padding: 0; | ||
| margin-top: 0; | ||
|
|
||
| &-bank { | ||
| padding: 5px 10px 5px 0; | ||
| text-align: right; | ||
| &-item { | ||
| padding-left: 0.5em; | ||
|
|
||
| &.account .selection-input-text, | ||
| &.account .selection-input-input { | ||
| text-transform: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &-usage { | ||
| padding: 5px 0; | ||
| margin: $left-column-margin; | ||
| text-align: left; | ||
| &-link, | ||
| &-link:visited { | ||
| cursor: pointer; | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
|
|
||
| .link-separator { | ||
| margin-left: 3px; | ||
| margin-right: 3px; | ||
| } | ||
|
|
||
| .second-row-items { | ||
| display: none; | ||
|
|
||
| @include breakpoints.large-up { | ||
| display: flex; | ||
| } | ||
| } | ||
|
|
||
| &-faq-link-item { | ||
| display: none; | ||
|
|
||
| @include breakpoints.bigger-medium-up { | ||
| display: flex; | ||
| } | ||
| } | ||
| } | ||
| } |
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
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
Oops, something went wrong.