Skip to content

Commit f045767

Browse files
jadekeinajadekeina
authored
fix: Responsive tuto (#244)
* I fixed the design of the Tutorial * Fixed the responsive tuto * Fixed the responsive tuto * Clean Up the PR
1 parent 6448959 commit f045767

File tree

5 files changed

+45
-45
lines changed

5 files changed

+45
-45
lines changed

‎src/Iframes/TutorialV1/Tuto/Components/Steps.svelte

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@
2424
}
2525
$: console.log('Current Step:', $currentStepStore);
2626
</script>
27-
<div class="tw-flex tw-flex-col tw-items-center tw-w-full tw-pt-20 tw-pb-24 ">
27+
<div class="tw-flex tw-flex-col tw-w-full tw-pt-20 tw-pb-24 ">
2828

2929

3030

31-
<div class="header tw-p-3 tw-flex tw-justify-around tw-fixed tw-top-14 tw-w-full tw-h-3 tw-overflow-visible ">
31+
<div class="header tw-p-3 tw-flex tw-justify-center tw-absolute tw-top-7 sm:tw-top-14 tw-w-full tw-h-3 tw-overflow-visible ">
3232
<nav class="tw-flex tw-gap-2 tw-py-4 tw-text-sm tw-font-medium tw-items-center">
3333
{#each steps as step, index}
3434
<button
@@ -37,7 +37,7 @@
3737
class:tw-text-white={index === $currentStepStore}>
3838
{step}
3939
{#if index === $currentStepStore}
40-
<span class="tw-left-0 tw-h-[4px] tw-w-[8em] tw-bg-blue-500 tw-rounded-full tw-flex tw-justify-self-center tw-mt-3"></span>
40+
<span class="tw-start-0 tw-h-[4px] tw-w-[8em] tw-bg-blue-500 tw-rounded-full tw-flex tw-justify-self-center tw-mt-3"></span>
4141
{/if}
4242
</button>
4343
{/each}
@@ -53,26 +53,26 @@
5353
</div> -->
5454

5555
{#if $currentStepStore === 0}
56-
<div class="tw-flex tw-w-full ">
57-
<button class=" tw-w-full tw-justify-center tw-mx-6 tw-h-[50px] tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
58-
<span class="tw-px-4 tw-absolute tw-left-4"></span> {i18next.t('tuto.skipTutorial')}
56+
<div class="tw-flex tw-w-full tw-flex-col sm:tw-flex-row ">
57+
<button class=" tw-w-full hover:tw-bg-[#ffffff] tw-justify-center tw-rounded-[8px] tw-mx-0 sm:tw-mx tw-h-[50px] tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
58+
<span class="tw-px-4 tw-absolute tw-start-4"></span> {i18next.t('tuto.skipTutorial')}
5959
</button>
60-
<button class=" tw-w-full tw-bg-[#4156F6] tw-rounded-[8px] tw-h-[50px] tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={next}>
61-
<span class="tw-px-4 tw-absolute tw-left-4"></span> {i18next.t('tuto.startTutorial')}
60+
<button class=" tw-w-full tw-bg-[#4156F6] tw-rounded-[8px] tw-h-[50px] tw-justify-center tw-mx-0 tw-relative tw-cursor-pointer" on:click|stopPropagation={next}>
61+
<span class="tw-px-4 tw-absolute tw-start-4"></span> {i18next.t('tuto.startTutorial')}
6262
</button>
6363
</div>
6464

6565
{:else if $currentStepStore === 3}
6666

67-
<button class="tw-bg-[#4156F6] tw-rounded-[8px] tw-w-full tw-h-[50px] tw-justify-center tw-mx-4 tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
67+
<button class="tw-bg-[#4156F6] tw-rounded-[8px] tw-w-full tw-h-[50px] tw-justify-center tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
6868
{i18next.t('tuto.finish')}
69-
<span class="tw-px-4 tw-absolute tw-right-4"></span>
69+
<span class="tw-px-4 tw-absolute tw-end-4"></span>
7070
</button>
7171

7272
{:else}
7373
<button class="tw-bg-[#4156F6] tw-rounded-[8px] tw-w-full tw-h-[50px] tw-justify-center tw-mx-4 tw-relative tw-cursor-pointer" on:click|stopPropagation={next}>
7474
{i18next.t('tuto.next')}
75-
<span class="tw-px-4 tw-absolute tw-right-4"></span>
75+
<span class="tw-px-4 tw-absolute tw-end-4"></span>
7676
</button>
7777
{/if}
7878
</div>

‎src/Iframes/TutorialV1/Tuto/Components/Steps/Step1.svelte

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,25 @@
33
</script>
44

55

6-
<div class=" tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-10 tw-mb-5 tw-text-white tw-h-auto tw-px-5">
6+
<div class=" tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-10 tw-mb-5 tw-text-white tw-h-auto tw-px-4 sm:tw-px-10">
77

88

99

10-
<h1>{i18next.t('tuto.step1.title')}</h1>
11-
<div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
10+
<h1 class="xs:tw-text-xl" >{i18next.t('tuto.step1.title')}</h1>
11+
<div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-my-10"></div>
1212

13-
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-[5em] tw-gap-[15px] tw-py-1 tw-w-full tw-h-full ">
14-
<img src="resources/images/tutov1/move/wokamove.png" alt="Walk" class="tw-w-[100px] tw-h-auto tw-mb-2 " />
15-
<img src="resources/images/tutov1/move/ZQSD.png" alt="Walk" class="tw-w-[30em] tw-h-auto tw-mb-2" />
16-
<p class="tw-text-xl tw-p-0">{i18next.t('tuto.step1.use')} <strong> {i18next.t('tuto.step1.arowkeys')} </strong> {i18next.t('tuto.step1.or')} <strong> {i18next.t('tuto.step1.wasd')} </strong> {i18next.t('tuto.step1.aroundTheMap')}</p>
13+
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-4 tw-py-1 tw-w-10/12 md:tw-w-full tw-h-full ">
14+
<img src="resources/images/tutov1/move/wokamove.png" alt="Walk" class="tw-w-[80px] sm:tw-w-[100px] tw-h-auto tw-mb-2 " />
15+
<img src="resources/images/tutov1/move/ZQSD.png" alt="Walk" class="tw-w-full tw-max-w-[300px] sm:tw-max-w-[30em] tw-h-auto tw-mb-2" />
16+
<p class="tw-text-base sm:tw-text-xl tw-text-center tw-p-0">{i18next.t('tuto.step1.use')} <strong> {i18next.t('tuto.step1.arowkeys')} </strong> {i18next.t('tuto.step1.or')} <strong> {i18next.t('tuto.step1.wasd')} </strong> {i18next.t('tuto.step1.aroundTheMap')}</p>
1717

1818

19-
<p class=" tw-p-0"> <strong> {i18next.t('tuto.step1.tip')}</strong> {i18next.t('tuto.step1.describeTip')}</p>
19+
<p class="tw-text-sm sm:tw-text-base tw-text-center tw-p-0"> <strong> {i18next.t('tuto.step1.tip')}</strong> {i18next.t('tuto.step1.describeTip')}</p>
2020
</div>
2121

22-
<div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
23-
<img src="resources/images/tutov1/move/CamOFF.png" alt="Walk" class="tw-w-[120px] tw-h-auto tw-mb-2 tw-opacity-75" />
24-
<p class="tw-text-l tw-p-0 tw-opacity-75">{i18next.t('tuto.step1.silentZone')}</p>
22+
<div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-my-10"></div>
23+
<img src="resources/images/tutov1/move/CamOFF.png" alt="Walk" class="tw-w-[80px] sm:tw-w-[120px] tw-h-auto tw-mb-2 tw-opacity-75" />
24+
<p class="tw-text-sm sm:tw-text-base tw-w-10/12 md:tw-w-full tw-text-center tw-p-0 tw-opacity-75">{i18next.t('tuto.step1.silentZone')}</p>
2525

2626
<!-- <div class="video">
2727
<video class="tw-w-full tw-rounded-lg"

‎src/Iframes/TutorialV1/Tuto/Components/Steps/Step2.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@
77
<div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
88

99

10-
<img src="resources/images/tutov1/interact/Bubble.png" alt="Walk" class="tw-w-[20em] tw-h-auto tw-mb-2 " />
10+
<img src="resources/images/tutov1/interact/Bubble.png" alt="Walk" class="tw-w-[15em] md:tw-w-[20em] tw-h-auto tw-mb-2 " />
1111
<p class="tw-text-xl tw-p-0"> <strong> {i18next.t("tuto.step2.describe")} </strong> {i18next.t("tuto.step2.describe2")}</p>
1212
<div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
1313

1414

1515
<div class="tw-flex tw-gap-3">
16-
<div> <img src="resources/images/tutov1/interact/Lock.png" alt="Walk" class="tw-w-[15em] tw-h-auto tw-mb-2 " />
16+
<div> <img src="resources/images/tutov1/interact/Lock.png" alt="Walk" class="tw-w-[10em] md:tw-w-[20em] tw-h-auto tw-mb-2 " />
1717
<p class="tw-text-l tw-p-0">{i18next.t("tuto.step2.describe3")}</p>
1818
</div>
1919

2020
<div>
21-
<img src="resources/images/tutov1/interact/ShareScreen.png" alt="Walk" class="tw-w-[15em] tw-h-auto tw-mb-2 " />
21+
<img src="resources/images/tutov1/interact/ShareScreen.png" alt="Walk" class="tw-w-[10em] md:tw-w-[20em] tw-h-auto tw-mb-2 " />
2222
<p class="tw-text-l tw-p-0">{i18next.t("tuto.step2.describe4")}</p>
2323
</div>
2424

‎src/Iframes/TutorialV1/Tuto/Components/Steps/Step3.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,19 @@
99
<div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
1010

1111

12-
<img src="resources/images/tutov1/discover/Object.png" alt="Walk" class="tw-w-[100px] tw-h-auto tw-mb-2 " />
12+
<img src="resources/images/tutov1/discover/Object.png" alt="Walk" class="tw-w-[80px] md:tw-w-[100px] tw-h-auto tw-mb-2 " />
1313
<p class="tw-p-3 tw-text-xl"><strong> {i18next.t("tuto.step3.interact")} </strong> {i18next.t("tuto.step3.likeSign")} {i18next.t("tuto.step3.sometimes")} <strong> {i18next.t("tuto.step3.closer")}</strong> </p>
1414
<div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
1515

1616

17-
<div class="tw-flex tw-gap-3">
17+
<div class="tw-flex tw-gap-3 justify-center">
1818
<div>
19-
<img src="resources/images/tutov1/discover/GlobalMessage.png" alt="Walk" class="tw-w-[15em] tw-h-auto tw-mb-2 " />
19+
<img src="resources/images/tutov1/discover/GlobalMessage.png" alt="Walk" class="tw-w-[10em] md:tw-w-[20em] tw-h-auto tw-mb-2 " />
2020
<p class="tw-p-3 tw-text-s">{i18next.t("tuto.step3.describe3")}</p>
2121
</div>
2222

2323
<div>
24-
<img src="resources/images/tutov1/discover/Silent.png" alt="Walk" class="tw-w-[10em] tw-h-auto tw-mb-2 " />
24+
<img src="resources/images/tutov1/discover/Silent.png" alt="Walk" class="tw-w-[8em] md:tw-w-[14em] tw-h-auto tw-mb-2 " />
2525
<p class="tw-p-3 tw-text-s">{i18next.t("tuto.step3.describe4")}</p>
2626
</div>
2727

‎src/Iframes/TutorialV1/Tuto/Components/Steps/Welcome.svelte

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,36 @@ import i18next from "i18next";
55
</script>
66

77

8-
<div class="tw-flex tw-mt-10 tw-flex-col tw-items-center tw-justify-center tw-mb-5 tw-text-white tw-px-8">
8+
<div class="tw-flex tw-flex-col tw-items-center tw-mt-10 tw-mb-5 tw-text-white tw-h-auto tw-px-4 sm:tw-px-10 tw-overflow-x-hidden tw-w-full tw-max-w-full">
99

1010
<h1>{i18next.t('tuto.welcome.title')}</h1>
11-
<p> {i18next.t('tuto.welcome.subtitle')} </p>
12-
<div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
11+
<p class="tw-w-10/12 sm:tw-w-full-"> {i18next.t('tuto.welcome.subtitle')} </p>
12+
<div class="tw-bg-white/10 tw-h-[1px] tw-w-11/12 md:tw-w-full tw-m-10"></div>
1313

1414

1515

16-
<div class="tw-mt-[4em]">
16+
<div class="tw-mt-[4em] tw-mb-[5em]">
1717

18-
<p class="tw-text-[130px]"> 👋</p>
19-
<p class="tw-mt-2 tw-text-xl "> <strong> {i18next.t('tuto.welcome.describe')} </strong> {i18next.t('tuto.welcome.describe2')}</p>
20-
<p class="tw-text-xl">{i18next.t('tuto.welcome.describe3')}</p>
18+
<p class="tw-text-[80px] md:tw-text-[130px]"> 👋</p>
19+
<p class="tw-mt-2 tw-text-sm md:tw-text-xl tw-mx-10 "> <strong> {i18next.t('tuto.welcome.describe')} </strong> {i18next.t('tuto.welcome.describe2')}</p>
20+
<p class="tw-text-sm md:tw-text-xl">{i18next.t('tuto.welcome.describe3')}</p>
2121

22-
<div class="tw-flex tw-flex-col tw-gap-[15px] tw-py-1 tw-w-full tw-h-full">
22+
<div class="tw-flex tw-flex-col tw-gap-[15px] tw-py-1 tw-w-full tw-h-full tw-items-center tw-justify-center">
2323
<!-- <div class="tw-flex-shrink-0">
2424
<img src="resources/images/tutov1/welcome/Move.png" alt="Walk" class="tw-w-[100px] tw-h-auto tw-mb-2" />
2525
</div> -->
26-
<div class="tw-bg-white/5 tw-relative tw-flex tw-items-center tw-p-4 tw-rounded-[16px] tw-w-full tw-h-[75px] tw-p-[24px] hover:tw-bg-white/10 ">
27-
<img src="resources/images/tutov1/welcome/Move.png" alt="Walk" class="tw-w-[120px] tw-left-[-4px] tw-h-auto tw-absolute tw-mb-2 tw-self-start tw-top-0 " />
28-
<span class="tw-font-bold tw-flex-1 tw-text-center tw-text-xl"> {i18next.t('tuto.welcome.bloc1')} </span>
26+
<div class="tw-bg-white/5 tw-relative tw-flex tw-items-center tw-p-4 tw-rounded-[16px] tw-w-10/12 md:tw-w-full tw-h-[75px] tw-p-[24px] hover:tw-bg-white/10 ">
27+
<img src="resources/images/tutov1/welcome/Move.png" alt="Walk" class="tw-w-[120px] tw-h-auto tw-absolute tw-start-2 tw-top-1 " />
28+
<span class="tw-font-bold tw-flex-1 tw-text-center tw-text-sm md:tw-text-xl "> {i18next.t('tuto.welcome.bloc1')} </span>
2929
</div>
3030

31-
<div class="tw-bg-white/5 tw-relative tw-flex tw-items-center tw-p-4 tw-rounded-[16px] tw-w-full tw-p-[24px] hover:tw-bg-white/10 tw-overflow-hidden ">
32-
<img src="resources/images/tutov1/welcome/Talk.png" alt="Walk" class="tw-w-[140px] tw-left-[-4px] tw-h-auto tw-absolute tw-mb-2 tw-self-start tw-top-0 " />
33-
<span class="tw-font-bold tw-flex-1 tw-text-center tw-text-xl"> {i18next.t('tuto.welcome.bloc2')} </span>
31+
<div class="tw-bg-white/5 tw-relative tw-flex tw-items-center tw-p-4 tw-rounded-[16px] tw-w-10/12 md:tw-w-full tw-p-[24px] hover:tw-bg-white/10 tw-overflow-hidden ">
32+
<img src="resources/images/tutov1/welcome/Talk.png" alt="Walk" class="tw-w-[120px] tw-start-[-4px] tw-h-auto tw-absolute tw-mb-2 tw-self-start tw-top-0 " />
33+
<span class="tw-font-bold tw-flex-1 tw-text-center tw-text-sm md:tw-text-xl"> {i18next.t('tuto.welcome.bloc2')} </span>
3434
</div>
35-
<div class="tw-bg-white/5 tw-relative tw-flex tw-items-center tw-p-4 tw-rounded-[16px] tw-w-full tw-p-[24px] hover:tw-bg-white/10 ">
35+
<div class="tw-bg-white/5 tw-relative tw-flex tw-items-center tw-p-4 tw-rounded-[16px] tw-w-10/12 md:tw-w-full tw-p-[24px] hover:tw-bg-white/10 ">
3636
<img src="resources/images/tutov1/welcome/laptop.png" alt="Walk" class="tw-w-[4em] tw-h-auto tw-absolute tw-mb-2 tw-self-start tw-top-0 " />
37-
<span class="tw-font-bold tw-flex-1 tw-text-center tw-text-xl"> {i18next.t('tuto.welcome.bloc3')} </span>
37+
<span class="tw-font-bold tw-flex-1 tw-text-center tw-text-sm md:tw-text-xl"> {i18next.t('tuto.welcome.bloc3')} </span>
3838
</div>
3939

4040
</div>

0 commit comments

Comments
 (0)