@rpg-engine/long-bow 0.6.39 → 0.6.41
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 +13 -13
- 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 +13 -13
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/images/farming-plant-seed.png +0 -0
- package/src/components/Tutorial/TutorialStepper.tsx +29 -21
- package/src/stories/TutorialStepper.stories.tsx +2 -1
package/package.json
CHANGED
|
Binary file
|
|
@@ -85,31 +85,11 @@ const LessonImageWrapper = styled.div`
|
|
|
85
85
|
width: 100%;
|
|
86
86
|
max-width: 500px;
|
|
87
87
|
margin: 1rem auto;
|
|
88
|
-
aspect-ratio:
|
|
89
|
-
overflow: hidden;
|
|
88
|
+
aspect-ratio: auto; /* Allow the image to define its own aspect ratio */
|
|
90
89
|
border-radius: 10px;
|
|
91
90
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
92
91
|
`;
|
|
93
92
|
|
|
94
|
-
const LessonImage = styled.div`
|
|
95
|
-
width: 100%;
|
|
96
|
-
height: 100%;
|
|
97
|
-
position: relative;
|
|
98
|
-
`;
|
|
99
|
-
|
|
100
|
-
const LessonContainer = styled.div`
|
|
101
|
-
display: flex;
|
|
102
|
-
flex-direction: column;
|
|
103
|
-
justify-content: flex-start;
|
|
104
|
-
min-height: 200px;
|
|
105
|
-
padding: 1rem;
|
|
106
|
-
padding-top: 0;
|
|
107
|
-
|
|
108
|
-
p {
|
|
109
|
-
font-size: 0.7rem !important;
|
|
110
|
-
}
|
|
111
|
-
`;
|
|
112
|
-
|
|
113
93
|
const LessonBody = styled.div``;
|
|
114
94
|
|
|
115
95
|
const Container = styled.div`
|
|
@@ -125,7 +105,35 @@ const LessonFooter = styled.div`
|
|
|
125
105
|
margin-top: 1rem;
|
|
126
106
|
`;
|
|
127
107
|
|
|
108
|
+
const LessonImage = styled.div`
|
|
109
|
+
display: flex;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
align-items: center;
|
|
112
|
+
width: 100%;
|
|
113
|
+
max-width: 500px;
|
|
114
|
+
margin: auto;
|
|
115
|
+
|
|
116
|
+
img {
|
|
117
|
+
width: 100%;
|
|
118
|
+
height: auto;
|
|
119
|
+
object-fit: contain; /* Ensures the entire image is visible */
|
|
120
|
+
border-radius: 10px;
|
|
121
|
+
}
|
|
122
|
+
`;
|
|
123
|
+
|
|
128
124
|
const LessonTitle = styled.h1`
|
|
129
125
|
color: ${uiColors.yellow} !important;
|
|
130
126
|
font-size: 0.8rem !important;
|
|
131
127
|
`;
|
|
128
|
+
|
|
129
|
+
const LessonContainer = styled.div`
|
|
130
|
+
display: flex;
|
|
131
|
+
flex-direction: column;
|
|
132
|
+
justify-content: space-between;
|
|
133
|
+
min-height: 200px; /* Match with StepperBody for consistent height */
|
|
134
|
+
|
|
135
|
+
p {
|
|
136
|
+
// make font size consistent with rest
|
|
137
|
+
font-size: 0.7rem !important;
|
|
138
|
+
}
|
|
139
|
+
`;
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
TutorialStepper,
|
|
8
8
|
} from '../components/Tutorial/TutorialStepper';
|
|
9
9
|
|
|
10
|
+
import tutorialImg3 from '../assets/images/farming-plant-seed.png';
|
|
10
11
|
import tutorialImg1 from '../assets/images/sewer.png';
|
|
11
12
|
import tutorialImg2 from '../assets/images/shortcuts.png';
|
|
12
13
|
|
|
@@ -33,7 +34,7 @@ const Template: Story<ITutorialStepperProps> = () => {
|
|
|
33
34
|
title: 'Body example',
|
|
34
35
|
body: `<p>This is a body example with a <a href="https://google.com" target="_blank">link</a> and a <strong>bold</strong> text.
|
|
35
36
|
</p>`,
|
|
36
|
-
image:
|
|
37
|
+
image: tutorialImg3,
|
|
37
38
|
},
|
|
38
39
|
];
|
|
39
40
|
|