@rpg-engine/long-bow 0.6.36 → 0.6.38
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/long-bow.cjs.development.js +7 -4
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +7 -4
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Stepper.tsx +3 -0
- package/src/components/Tutorial/TutorialStepper.tsx +29 -17
package/package.json
CHANGED
|
@@ -149,10 +149,13 @@ const StepperBodyContainer = styled.div`
|
|
|
149
149
|
display: flex;
|
|
150
150
|
align-items: center;
|
|
151
151
|
position: relative;
|
|
152
|
+
height: 100%; /* Ensure full height */
|
|
152
153
|
`;
|
|
153
154
|
|
|
154
155
|
const StepperBody = styled.div`
|
|
155
156
|
flex: 1;
|
|
157
|
+
min-height: 200px; /* Set an appropriate minimum height */
|
|
158
|
+
transition: height 0.3s ease-in-out; /* Smooth height transition */
|
|
156
159
|
`;
|
|
157
160
|
|
|
158
161
|
const ArrowContainer = styled.div<{ left?: boolean; right?: boolean }>`
|
|
@@ -26,27 +26,29 @@ export const TutorialStepper = React.memo(
|
|
|
26
26
|
component: (
|
|
27
27
|
<LessonContainer key={index} className="lesson-container">
|
|
28
28
|
<LessonTitle className="lesson-title">{lesson.title}</LessonTitle>
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
{lesson.image && (
|
|
30
|
+
<LessonImage className="lesson-image" style={imageStyle}>
|
|
31
|
+
{lesson.imageUrl ? (
|
|
32
|
+
<a
|
|
33
|
+
href={lesson.imageUrl}
|
|
34
|
+
target="_blank"
|
|
35
|
+
rel="noopener noreferrer"
|
|
36
|
+
>
|
|
37
|
+
<img
|
|
38
|
+
src={lesson.image}
|
|
39
|
+
alt={lesson.title || 'Tutorial image'}
|
|
40
|
+
loading="lazy"
|
|
41
|
+
/>
|
|
42
|
+
</a>
|
|
43
|
+
) : (
|
|
36
44
|
<img
|
|
37
45
|
src={lesson.image}
|
|
38
46
|
alt={lesson.title || 'Tutorial image'}
|
|
39
47
|
loading="lazy"
|
|
40
48
|
/>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
src={lesson.image}
|
|
45
|
-
alt={lesson.title || 'Tutorial image'}
|
|
46
|
-
loading="lazy"
|
|
47
|
-
/>
|
|
48
|
-
)}
|
|
49
|
-
</LessonImage>
|
|
49
|
+
)}
|
|
50
|
+
</LessonImage>
|
|
51
|
+
)}
|
|
50
52
|
<LessonFooter className="lesson-footer">
|
|
51
53
|
{lesson.body && (
|
|
52
54
|
<LessonBody
|
|
@@ -115,4 +117,14 @@ const LessonTitle = styled.h1`
|
|
|
115
117
|
font-size: 0.8rem !important;
|
|
116
118
|
`;
|
|
117
119
|
|
|
118
|
-
const LessonContainer = styled.div
|
|
120
|
+
const LessonContainer = styled.div`
|
|
121
|
+
display: flex;
|
|
122
|
+
flex-direction: column;
|
|
123
|
+
justify-content: space-between;
|
|
124
|
+
min-height: 200px; /* Match with StepperBody for consistent height */
|
|
125
|
+
|
|
126
|
+
p {
|
|
127
|
+
// make font size consistent with rest
|
|
128
|
+
font-size: 0.7rem !important;
|
|
129
|
+
}
|
|
130
|
+
`;
|