mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-07-08 13:35:38 +00:00
feat(event): add banner shinies
This commit is contained in:
Sabe Jones
parent
4457b081fa
commit
fa197e1b57
7 changed files with 157 additions and 37 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 68 KiB |
|
|
@ -6,14 +6,14 @@
|
|||
v-once
|
||||
class="mx-auto mb-2"
|
||||
>
|
||||
{{ $t('g1g1Announcement') }}
|
||||
{{ $t('g1g1') }}
|
||||
</strong>
|
||||
<p
|
||||
<small
|
||||
v-once
|
||||
class="mx-4"
|
||||
class="mx-4 mb-3"
|
||||
>
|
||||
{{ $t('g1g1Details') }}
|
||||
</p>
|
||||
</small>
|
||||
<div
|
||||
class="btn-secondary mx-auto d-flex"
|
||||
@click="showSelectUser()"
|
||||
|
|
@ -41,19 +41,13 @@
|
|||
<style lang='scss' scoped>
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
p, strong {
|
||||
small, strong {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.notification {
|
||||
background-image: url('~@/assets/images/g1g1-notif.png');
|
||||
background-size: 378px 204px;
|
||||
width: 378px;
|
||||
height: 204px;
|
||||
height: 10rem;
|
||||
padding: 3rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -50,6 +50,33 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
|
||||
class="gift-promo-banner d-flex justify-content-around align-items-center px-4"
|
||||
>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-gifts left-gift"
|
||||
v-html="icons.gifts"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex flex-column announce-text text-center"
|
||||
>
|
||||
<strong> {{ $t('g1g1') }} </strong>
|
||||
<small
|
||||
class="px-1 mt-1"
|
||||
>
|
||||
{{ $t('g1g1Details') }}
|
||||
</small>
|
||||
</div>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-gifts right-gift"
|
||||
v-html="icons.gifts"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row text-center">
|
||||
<h2
|
||||
|
|
@ -282,6 +309,30 @@
|
|||
line-height: 1.71;
|
||||
}
|
||||
|
||||
.gift-promo-banner {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
background-image: linear-gradient(90deg, $teal-50 0%, $purple-400 100%);
|
||||
|
||||
.announce-text {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.left-gift {
|
||||
margin: auto 1rem auto auto;
|
||||
}
|
||||
|
||||
.right-gift {
|
||||
margin: auto auto auto 1rem;
|
||||
filter: flipH;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.svg-gifts {
|
||||
width: 4.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
background-image: linear-gradient(75deg, $purple-300, $purple-200 100%);
|
||||
width: 100%;
|
||||
|
|
@ -324,6 +375,7 @@ import twentyOneGems from '@/assets/svg/21-gems.svg';
|
|||
import fortyTwoGems from '@/assets/svg/42-gems.svg';
|
||||
import eightyFourGems from '@/assets/svg/84-gems.svg';
|
||||
import svgClose from '@/assets/svg/close.svg';
|
||||
import gifts from '@/assets/svg/gifts.svg';
|
||||
|
||||
import paymentsButtons from '@/components/payments/buttons/list';
|
||||
|
||||
|
|
@ -344,6 +396,7 @@ export default {
|
|||
'21gems': twentyOneGems,
|
||||
'42gems': fortyTwoGems,
|
||||
'84gems': eightyFourGems,
|
||||
gifts,
|
||||
}),
|
||||
selectedGemsBlock: null,
|
||||
alreadyTracked: false,
|
||||
|
|
|
|||
|
|
@ -2,10 +2,20 @@
|
|||
<b-modal
|
||||
id="select-user-modal"
|
||||
:hide-header="true"
|
||||
:hide-footer="true"
|
||||
:hide-footer="!currentEvent || currentEvent.promo !== 'g1g1'"
|
||||
@hide="onHide()"
|
||||
>
|
||||
<h2 class="ml-2">
|
||||
<div
|
||||
class="g1g1 d-flex flex-column text-center justify-content-center align-items-center"
|
||||
v-if="currentEvent && currentEvent.promo === 'g1g1'"
|
||||
>
|
||||
<h1> {{ $t('g1g1') }} </h1>
|
||||
<p> {{ $t('g1g1Returning') }} </p>
|
||||
</div>
|
||||
<h2
|
||||
class="ml-2"
|
||||
v-else
|
||||
>
|
||||
{{ $t('sendGift') }}
|
||||
</h2>
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
|
|
@ -18,8 +28,8 @@
|
|||
v-html="icons.close"
|
||||
></div>
|
||||
</div>
|
||||
<div class="ml-2 mr-auto">
|
||||
<strong> {{ $t('sendGiftToWhom') }} </strong>
|
||||
<div class="mx-auto mt-3">
|
||||
<h3> {{ $t('sendGiftToWhom') }} </h3>
|
||||
</div>
|
||||
<div
|
||||
class="form"
|
||||
|
|
@ -45,24 +55,54 @@
|
|||
>
|
||||
{{ $t('userWithUsernameOrUserIdNotFound') }}
|
||||
</div>
|
||||
<div class="d-flex justify-content-center align-items-middle mt-3">
|
||||
<a
|
||||
class="my-auto ml-auto mr-3 cancel-link"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('cancel') }}
|
||||
</a>
|
||||
<div class="d-flex flex-column justify-content-center align-items-middle mt-3">
|
||||
<button
|
||||
class="btn btn-primary my-auto mr-auto"
|
||||
class="btn btn-primary mx-auto mt-2"
|
||||
type="submit"
|
||||
:disabled="searchCannotSubmit"
|
||||
@click="selectUser()"
|
||||
>
|
||||
{{ $t('selectGift') }}
|
||||
<div
|
||||
v-if="currentEvent && currentEvent.promo === 'g1g1'"
|
||||
>
|
||||
{{ $t('selectSubscription') }}
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
>
|
||||
{{ $t('selectGift') }}
|
||||
</div>
|
||||
</button>
|
||||
<a
|
||||
class="cancel-link mx-auto mt-3"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('cancel') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="g1g1-fine-print text-center pt-3"
|
||||
slot="modal-footer"
|
||||
>
|
||||
<strong>
|
||||
{{ $t ('howItWorks') }}
|
||||
</strong>
|
||||
<p
|
||||
class="mx-5 mt-1"
|
||||
>
|
||||
{{ $t ('g1g1HowItWorks') }}
|
||||
</p>
|
||||
<strong>
|
||||
{{ $t ('limitations') }}
|
||||
</strong>
|
||||
<p
|
||||
class="mx-5 mt-1"
|
||||
>
|
||||
{{ $t ('g1g1Limitations') }}
|
||||
</p>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
|
|
@ -70,12 +110,22 @@
|
|||
@import '~@/assets/scss/mixins.scss';
|
||||
|
||||
#select-user-modal {
|
||||
@include centeredModal();
|
||||
.input-group {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
width: 29.5rem;
|
||||
margin-top: 25vh;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 0rem;
|
||||
|
||||
> * {
|
||||
margin: 0rem 0.25rem 0.25rem 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -84,11 +134,12 @@
|
|||
|
||||
a:not([href]) {
|
||||
color: $blue-10;
|
||||
font-size: 16px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.71;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 26.5rem;
|
||||
#selectUser {
|
||||
width: 22rem;
|
||||
border: 0px;
|
||||
color: $gray-50;
|
||||
}
|
||||
|
|
@ -103,17 +154,28 @@
|
|||
padding: 1.5rem;
|
||||
color: $white;
|
||||
|
||||
.heading {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
h1 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.4;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 0rem 6rem;
|
||||
p {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
margin-left: 4rem;
|
||||
margin-right: 4rem;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.g1g1-fine-print {
|
||||
color: $gray-100;
|
||||
background-color: $gray-700;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
color: $red-50;
|
||||
font-size: 90%;
|
||||
|
|
@ -149,6 +211,7 @@
|
|||
<script>
|
||||
import debounce from 'lodash/debounce';
|
||||
import isUUID from 'validator/lib/isUUID';
|
||||
import { mapState } from '@/libs/store';
|
||||
import closeIcon from '@/assets/svg/close.svg';
|
||||
|
||||
export default {
|
||||
|
|
@ -163,6 +226,9 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
searchCannotSubmit () {
|
||||
if (this.userSearchTerm.length < 1) return true;
|
||||
return typeof this.foundUser._id === 'undefined';
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@
|
|||
"leaderOnlyChallenges": "Only group leader can create challenges",
|
||||
"sendGift": "Send a Gift",
|
||||
"selectGift": "Select Gift",
|
||||
"selectSubscription": "Select Subscription",
|
||||
"sendGiftToWhom": "Who would you like to send a gift to?",
|
||||
"inviteFriends": "Invite Friends",
|
||||
"inviteByEmail": "Invite by Email",
|
||||
|
|
@ -164,7 +165,7 @@
|
|||
"userAlreadyInAParty": "UserID: <%= userId %>, User \"<%= username %>\" already in a party.",
|
||||
"userWithIDNotFound": "User with id \"<%= userId %>\" not found.",
|
||||
"userWithUsernameNotFound": "User with username \"<%= username %>\" not found.",
|
||||
"usernameOrUserId": "Username or User ID",
|
||||
"usernameOrUserId": "Enter @username or User ID",
|
||||
"userWithUsernameOrUserIdNotFound": "Username or User ID not found.",
|
||||
"userHasNoLocalRegistration": "User does not have a local registration (username, email, password).",
|
||||
"uuidsMustBeAnArray": "User ID invites must be an array.",
|
||||
|
|
|
|||
|
|
@ -188,5 +188,11 @@
|
|||
"winterPromoGiftDetails2": "Please note that if you or your gift recipient already have a recurring subscription, the gifted subscription will only start after that subscription is cancelled or has expired. Thanks so much for your support! <3",
|
||||
"discountBundle": "bundle",
|
||||
"g1g1Announcement": "<strong>Gift a subscription and get a subscription free</strong> event going on now!",
|
||||
"g1g1Details": "Gift a sub to a friend from their profile and you’ll receive the same sub for free!"
|
||||
"g1g1Details": "Gift a subscription to a friend, and you'll receive the same subscription for free!",
|
||||
"g1g1": "Gift One, Get One",
|
||||
"g1g1Returning": "In honor of the season, we’re bringing back a very special promotion. Now when you gift a subscription, you’ll receive the same in return!",
|
||||
"howItWorks": "How it Works",
|
||||
"g1g1HowItWorks": "Type in the username of the account you’d like to gift to. From there, pick the sub length you’d like to gift and check out. Your account will automatically be rewarded with the same level of subscription you just gifted.",
|
||||
"limitations": "Limitations",
|
||||
"g1g1Limitations": "This is a limited time event that starts on December 17th at 8:00 AM ET (13:00 UTC) and will end January 7th at 8:00 PM ET (1:00 UTC). This promotion only applies when you gift to another Habitican. If you or your gift recipient already have a subscription, the gifted subscription will add months of credit that will only be used after the current subscription is canceled or expires."
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue