@pocketprep/ui-kit 3.4.3 → 3.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@pocketprep/ui-kit.js +6540 -6480
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +9 -9
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/lib/components/Quiz/Question/Paywall.vue +153 -0
- package/lib/components/Quiz/Question.vue +10 -111
- package/package.json +1 -1
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="uikit-question-paywall"
|
|
4
|
+
>
|
|
5
|
+
<div
|
|
6
|
+
v-dark="isDarkMode"
|
|
7
|
+
v-breakpoint:questionEl="breakpoints"
|
|
8
|
+
class="uikit-question-paywall__paywall"
|
|
9
|
+
:class="{ 'uikit-question-paywall__paywall--review': reviewMode }"
|
|
10
|
+
>
|
|
11
|
+
<img
|
|
12
|
+
v-breakpoint:questionEl="breakpoints"
|
|
13
|
+
:src="isDarkMode ? paywallImages['dark'] : paywallImages['light']"
|
|
14
|
+
alt=""
|
|
15
|
+
class="uikit-question-paywall__paywall-image"
|
|
16
|
+
>
|
|
17
|
+
<div
|
|
18
|
+
v-dark="isDarkMode"
|
|
19
|
+
v-breakpoint:questionEl="breakpoints"
|
|
20
|
+
class="uikit-question-paywall__paywall-text"
|
|
21
|
+
>
|
|
22
|
+
You need a Premium Subscription to view this question's answer and explanation.
|
|
23
|
+
</div>
|
|
24
|
+
<PocketButton
|
|
25
|
+
:is-dark-mode="isDarkMode"
|
|
26
|
+
class="uikit-question-paywall__paywall-button"
|
|
27
|
+
@click="emitUpgradeClick"
|
|
28
|
+
>
|
|
29
|
+
Upgrade to Premium
|
|
30
|
+
</PocketButton>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script lang="ts">
|
|
36
|
+
import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
|
|
37
|
+
import Icon from '../../Icons/Icon.vue'
|
|
38
|
+
import PocketButton from '../../Buttons/Button.vue'
|
|
39
|
+
import { dark, breakpoint } from '../../../directives'
|
|
40
|
+
import type { TBreakPointsObject } from './../question'
|
|
41
|
+
import PaywallImageLight from '../../../assets/question/paywall-light.png'
|
|
42
|
+
import PaywallImageDark from '../../../assets/question/paywall-dark.png'
|
|
43
|
+
|
|
44
|
+
@Component({
|
|
45
|
+
components: {
|
|
46
|
+
Icon,
|
|
47
|
+
PocketButton,
|
|
48
|
+
},
|
|
49
|
+
directives: {
|
|
50
|
+
dark,
|
|
51
|
+
breakpoint,
|
|
52
|
+
},
|
|
53
|
+
})
|
|
54
|
+
export default class Paywall extends Vue {
|
|
55
|
+
@Prop({ default: false }) reviewMode!: boolean
|
|
56
|
+
@Prop({ default: false }) isDarkMode!: boolean
|
|
57
|
+
@Prop({ default: null }) questionEl!: Element | null
|
|
58
|
+
@Prop({ default: {
|
|
59
|
+
'mobile': 767,
|
|
60
|
+
'tablet-portrait': 1023,
|
|
61
|
+
'tablet-landscape': 1439,
|
|
62
|
+
} }) breakpoints!: TBreakPointsObject
|
|
63
|
+
|
|
64
|
+
get paywallImages () {
|
|
65
|
+
return {
|
|
66
|
+
light: PaywallImageLight,
|
|
67
|
+
dark: PaywallImageDark,
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@Emit('upgradeClicked')
|
|
72
|
+
emitUpgradeClick () {
|
|
73
|
+
return true
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<style lang="scss">
|
|
80
|
+
@import '../../../styles/colors';
|
|
81
|
+
@import '../../../styles/breakpoints';
|
|
82
|
+
|
|
83
|
+
.uikit-question-paywall {
|
|
84
|
+
width: 100%;
|
|
85
|
+
display: flex;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
|
|
88
|
+
&__paywall {
|
|
89
|
+
width: 100%;
|
|
90
|
+
max-width: 500px;
|
|
91
|
+
background: $white;
|
|
92
|
+
border-radius: 8px;
|
|
93
|
+
border: 1px solid $steel;
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: center;
|
|
98
|
+
|
|
99
|
+
&--dark {
|
|
100
|
+
background: $brand-black;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&--tablet-portrait {
|
|
104
|
+
max-width: 430px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&--review {
|
|
108
|
+
margin-bottom: 20px;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&__paywall-image {
|
|
113
|
+
width: 305px;
|
|
114
|
+
height: 230px;
|
|
115
|
+
margin: 25px auto 21px;
|
|
116
|
+
|
|
117
|
+
&--mobile {
|
|
118
|
+
width: 262px;
|
|
119
|
+
height: 199px;
|
|
120
|
+
margin: 14px auto 18px;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&__paywall-text {
|
|
125
|
+
font-size: 18px;
|
|
126
|
+
line-height: 22px;
|
|
127
|
+
color: $brand-black;
|
|
128
|
+
margin-bottom: 24px;
|
|
129
|
+
font-weight: 600;
|
|
130
|
+
text-align: center;
|
|
131
|
+
max-width: 372px;
|
|
132
|
+
|
|
133
|
+
&--dark {
|
|
134
|
+
color: $white;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
&--tablet-portrait {
|
|
138
|
+
max-width: 302px;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&--mobile {
|
|
142
|
+
max-width: 293px;
|
|
143
|
+
margin-bottom: 22px;
|
|
144
|
+
font-size: 16px;
|
|
145
|
+
line-height: 19px;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
&__paywall-button {
|
|
150
|
+
margin-bottom: 36px;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
</style>
|
|
@@ -90,38 +90,15 @@
|
|
|
90
90
|
:passage-and-image-title="passageAndImageTitle"
|
|
91
91
|
@emitTogglePassageImageLongAlt="togglePassageImageLongAlt"
|
|
92
92
|
/>
|
|
93
|
-
<
|
|
93
|
+
<Paywall
|
|
94
94
|
v-if="showPaywall"
|
|
95
|
-
class="uikit-question__paywall
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
>
|
|
103
|
-
<img
|
|
104
|
-
v-breakpoint:questionEl="breakpoints"
|
|
105
|
-
:src="isDarkMode ? paywallImages['dark'] : paywallImages['light']"
|
|
106
|
-
alt=""
|
|
107
|
-
class="uikit-question__paywall-image"
|
|
108
|
-
>
|
|
109
|
-
<div
|
|
110
|
-
v-dark="isDarkMode"
|
|
111
|
-
v-breakpoint:questionEl="breakpoints"
|
|
112
|
-
class="uikit-question__paywall-text"
|
|
113
|
-
>
|
|
114
|
-
You need a Premium Subscription to view this question's answer and explanation.
|
|
115
|
-
</div>
|
|
116
|
-
<PocketButton
|
|
117
|
-
:is-dark-mode="isDarkMode"
|
|
118
|
-
class="uikit-question__paywall-button"
|
|
119
|
-
@click="emitUpgrade"
|
|
120
|
-
>
|
|
121
|
-
Upgrade to Premium
|
|
122
|
-
</PocketButton>
|
|
123
|
-
</div>
|
|
124
|
-
</div>
|
|
95
|
+
class="uikit-question__paywall"
|
|
96
|
+
:review-Mode="reviewMode"
|
|
97
|
+
:is-dark-mode="isDarkMode"
|
|
98
|
+
:question-el="questionEl"
|
|
99
|
+
:breakpoints="breakpoints"
|
|
100
|
+
@upgradeClicked="emitUpgrade"
|
|
101
|
+
/>
|
|
125
102
|
<div
|
|
126
103
|
v-if="showAnswers && isTeachReview && isUnanswered"
|
|
127
104
|
v-dark="isDarkMode"
|
|
@@ -840,11 +817,10 @@ import Table from '../Tables/Table.vue'
|
|
|
840
817
|
import OverflowTooltip from '../Tooltips/OverflowTooltip.vue'
|
|
841
818
|
import QuestionContext from '../Quiz/Question/QuestionContext.vue'
|
|
842
819
|
import PassageAndImageDropdown from '../Quiz/Question/PassageAndImageDropdown.vue'
|
|
820
|
+
import Paywall from '../Quiz/Question/Paywall.vue'
|
|
843
821
|
import type { Study } from '@pocketprep/types'
|
|
844
822
|
import { breakpoint, dark } from '../../directives'
|
|
845
823
|
import { studyModes } from '../../utils'
|
|
846
|
-
import PaywallImageLight from '../../assets/question/paywall-light.png'
|
|
847
|
-
import PaywallImageDark from '../../assets/question/paywall-dark.png'
|
|
848
824
|
import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TViewNames } from './question'
|
|
849
825
|
|
|
850
826
|
@Component({
|
|
@@ -855,6 +831,7 @@ import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TVi
|
|
|
855
831
|
OverflowTooltip,
|
|
856
832
|
QuestionContext,
|
|
857
833
|
PassageAndImageDropdown,
|
|
834
|
+
Paywall,
|
|
858
835
|
},
|
|
859
836
|
directives: {
|
|
860
837
|
breakpoint,
|
|
@@ -916,13 +893,6 @@ export default class Question extends Vue {
|
|
|
916
893
|
isSortDisabled: true,
|
|
917
894
|
}]
|
|
918
895
|
|
|
919
|
-
get paywallImages () {
|
|
920
|
-
return {
|
|
921
|
-
light: PaywallImageLight,
|
|
922
|
-
dark: PaywallImageDark,
|
|
923
|
-
}
|
|
924
|
-
}
|
|
925
|
-
|
|
926
896
|
get breakpoints () {
|
|
927
897
|
// Passing the container element (typically QuizContainer) allows us to bind to that element's width
|
|
928
898
|
if (this.containerEl) {
|
|
@@ -3022,76 +2992,5 @@ export default class Question extends Vue {
|
|
|
3022
2992
|
margin-top: 24px;
|
|
3023
2993
|
}
|
|
3024
2994
|
}
|
|
3025
|
-
|
|
3026
|
-
&__paywall-container {
|
|
3027
|
-
width: 100%;
|
|
3028
|
-
display: flex;
|
|
3029
|
-
justify-content: center;
|
|
3030
|
-
}
|
|
3031
|
-
|
|
3032
|
-
&__paywall {
|
|
3033
|
-
width: 100%;
|
|
3034
|
-
max-width: 500px;
|
|
3035
|
-
background: $white;
|
|
3036
|
-
border-radius: 8px;
|
|
3037
|
-
border: 1px solid $steel;
|
|
3038
|
-
display: flex;
|
|
3039
|
-
flex-direction: column;
|
|
3040
|
-
align-items: center;
|
|
3041
|
-
justify-content: center;
|
|
3042
|
-
|
|
3043
|
-
&--dark {
|
|
3044
|
-
background: $brand-black;
|
|
3045
|
-
}
|
|
3046
|
-
|
|
3047
|
-
&--tablet-portrait {
|
|
3048
|
-
max-width: 430px;
|
|
3049
|
-
}
|
|
3050
|
-
|
|
3051
|
-
&--review {
|
|
3052
|
-
margin-bottom: 20px;
|
|
3053
|
-
}
|
|
3054
|
-
}
|
|
3055
|
-
|
|
3056
|
-
&__paywall-image {
|
|
3057
|
-
width: 305px;
|
|
3058
|
-
height: 230px;
|
|
3059
|
-
margin: 25px auto 21px;
|
|
3060
|
-
|
|
3061
|
-
&--mobile {
|
|
3062
|
-
width: 262px;
|
|
3063
|
-
height: 199px;
|
|
3064
|
-
margin: 14px auto 18px;
|
|
3065
|
-
}
|
|
3066
|
-
}
|
|
3067
|
-
|
|
3068
|
-
&__paywall-text {
|
|
3069
|
-
font-size: 18px;
|
|
3070
|
-
line-height: 22px;
|
|
3071
|
-
color: $brand-black;
|
|
3072
|
-
margin-bottom: 24px;
|
|
3073
|
-
font-weight: 600;
|
|
3074
|
-
text-align: center;
|
|
3075
|
-
max-width: 372px;
|
|
3076
|
-
|
|
3077
|
-
&--dark {
|
|
3078
|
-
color: $white;
|
|
3079
|
-
}
|
|
3080
|
-
|
|
3081
|
-
&--tablet-portrait {
|
|
3082
|
-
max-width: 302px;
|
|
3083
|
-
}
|
|
3084
|
-
|
|
3085
|
-
&--mobile {
|
|
3086
|
-
max-width: 293px;
|
|
3087
|
-
margin-bottom: 22px;
|
|
3088
|
-
font-size: 16px;
|
|
3089
|
-
line-height: 19px;
|
|
3090
|
-
}
|
|
3091
|
-
}
|
|
3092
|
-
|
|
3093
|
-
&__paywall-button {
|
|
3094
|
-
margin-bottom: 36px;
|
|
3095
|
-
}
|
|
3096
2995
|
}
|
|
3097
2996
|
</style>
|