Skip to content

Commit fb102fc

Browse files
sandragjacintosandragjacinto
committed
feat(syllabus): make is responsive to mobile and tablet
1 parent 6b0a70d commit fb102fc

File tree

10 files changed

+212
-125
lines changed

10 files changed

+212
-125
lines changed

‎src/assets/base.css‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,27 @@ html {
194194
margin-bottom: 1rem;
195195
margin-bottom: 1rem;
196196
font-weight: 600;
197-
nt-weight: 600;
197+
font-weight: 600;
198+
}
199+
200+
@media screen and (max-width: 1280px) {
201+
h1 {
202+
font-size: 1.75rem;
203+
margin-bottom: 1rem;
204+
font-weight: 600;
205+
}
206+
h2 {
207+
font-size: 1.5rem;
208+
margin-top: 1.5rem;
209+
margin-bottom: 1rem;
210+
font-weight: 600;
211+
}
212+
213+
h3 {
214+
font-size: 1.25rem;
215+
margin-top: 1.5rem;
216+
margin-bottom: 1rem;
217+
font-weight: 600;
218+
}
198219
}
199220
}

‎src/components/ModalWrapper.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,10 @@ const handleModalClose = () => {
3333
.modal {
3434
--bulma-modal-content-width: 50%;
3535
}
36+
37+
@media screen and (max-width: 1024px) {
38+
.modal {
39+
--bulma-modal-content-width: 90%;
40+
}
41+
}
3642
</style>

‎src/components/tutor/CursusInfo.vue‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@ const appendNewInputFile = () => {
9494

9595
<template>
9696
<div id="target-1" class="wrapper">
97-
<h1 class="title is-4">1 - {{ $t('tutor.firstStep.title') }}</h1>
98-
<p class="subtitle is-6">{{ $t('tutor.firstStep.description') }}</p>
97+
<h1 class="title is-4 is-size-5-mobile">1 - {{ $t('tutor.firstStep.title') }}</h1>
98+
<p class="subtitle is-6 is-size-6-mobile">{{ $t('tutor.firstStep.description') }}</p>
9999

100100
<!-- File Input Section -->
101101
<div class="is-flex is-flex-direction-column">
@@ -136,12 +136,14 @@ const appendNewInputFile = () => {
136136
</p>
137137

138138
<!-- Course Description Section -->
139-
<h2 class="title is-6 mt-4">
139+
<h2 class="title is-6 mt-4 is-size-6-mobile">
140140
{{ $t('tutor.firstStep.cursusDescriptionTitle') }}
141141
</h2>
142-
<p class="subtitle is-6">{{ $t('tutor.firstStep.cursusDescriptionDescription') }}</p>
142+
<p class="subtitle is-6 is-size-6-mobile">
143+
{{ $t('tutor.firstStep.cursusDescriptionDescription') }}
144+
</p>
143145

144-
<div class="is-flex is-flex-wrap-wrap is-justify-content-space-between descriptions">
146+
<div class="cursus-details">
145147
<div class="description">
146148
<label for="cursus-title">{{ $t('tutor.firstStep.cursusTitleLabel') }}</label>
147149
<input
@@ -248,8 +250,25 @@ const appendNewInputFile = () => {
248250
pointer-events: none;
249251
}
250252
251-
.descriptions {
253+
.cursus-details {
254+
display: flex;
255+
flex-wrap: wrap;
256+
justify-content: space-between;
252257
gap: 0.5rem;
253258
margin-bottom: 1rem;
254259
}
260+
261+
@media screen and (max-width: 768px) {
262+
.cursus-details {
263+
width: 100%;
264+
display: flex;
265+
flex-direction: column;
266+
justify-content: flex-start;
267+
}
268+
269+
.description {
270+
width: 100%;
271+
max-height: none;
272+
}
273+
}
255274
</style>

‎src/components/tutor/SecondStep.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ defineProps<{
1818
<template>
1919
<div id="target-3" class="wrapper" :class="{ disabled: disabled, visible: visible }">
2020
<div class="sources-wrapper" v-if="sources && sources.length">
21-
<h1 data-testId="documents-list-title" class="title is-4">
21+
<h1 data-testId="documents-list-title" class="title is-4 is-size-5-mobile mt-4">
2222
3 - {{ $t('tutor.secondStep.title') }}
2323
</h1>
2424
<p class="subtitle is-6">{{ $t('tutor.secondStep.description') }}</p>

‎src/components/tutor/StatusModal.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<ModalWrapper v-if="isLoading" :isOpen="isLoading" :onClose="stopAction">
3+
<div v-if="shouldRetryAction" class="box">
4+
<div class="is-flex is-flex-direction-column is-align-items-center is-justify-content-center">
5+
<h1 class="title is-size-4 is-size-5-mobile has-text-centered">
6+
<span class="mr-4"><ErrorDocumentIcon /></span>
7+
{{ $t('tutor.retry.title') }}
8+
</h1>
9+
10+
<p class="loader-text is-title is-size-4 is-size-5-mobile mx-6 px-6">
11+
{{ $t('tutor.retry.description') }}
12+
</p>
13+
<div class="is-flex is-gap-4">
14+
<button data-testid="tutor-back-button" class="button mt-6" @click="action">
15+
{{ $t('tutor.retry.button') }}
16+
</button>
17+
<button data-testid="tutor-back-button" class="button mt-6" @click="stopAction()">
18+
{{ $t('tutor.retry.stop') }}
19+
</button>
20+
</div>
21+
</div>
22+
</div>
23+
<div v-else class="box loading-modal has-text-centered">
24+
<h1 class="title is-size-4 is-size-5-mobile">
25+
{{ title }}
26+
</h1>
27+
<progress class="progress is-large is-primary mb-6" max="100">60%</progress>
28+
<p class="is-title is-size-5 is-size-6-mobile">{{ $t('tutor.loading.wait') }}</p>
29+
<p class="is-title is-size-5 is-size-6-mobile">
30+
{{ description }}
31+
</p>
32+
</div>
33+
</ModalWrapper>
34+
</template>
35+
36+
<script setup lang="ts">
37+
import ModalWrapper from '@/components/ModalWrapper.vue';
38+
import ErrorDocumentIcon from '@/components/icons/ErrorDocumentIcon.vue';
39+
40+
defineProps<{
41+
isLoading: boolean;
42+
shouldRetryAction: boolean;
43+
action: () => Promise<void>;
44+
stopAction: () => void;
45+
title: string;
46+
description: string;
47+
}>();
48+
</script>
49+
50+
<style scoped>
51+
.loading-modal {
52+
padding: 2rem;
53+
width: 100%;
54+
height: 100%;
55+
}
56+
</style>

‎src/components/tutor/StepsIndicator.vue‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const props = defineProps<{
1010
const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i + 1);
1111
</script>
1212
<template>
13-
<div class="is-flex">
13+
<div class="wrapper">
1414
<a
1515
href="#"
1616
class="step-indicator"
@@ -24,6 +24,16 @@ const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i +
2424
</div>
2525
</template>
2626
<style scoped>
27+
.wrapper {
28+
display: flex;
29+
justify-content: space-between;
30+
align-items: center;
31+
gap: 2rem;
32+
background-color: var(--neutral-10);
33+
padding: 0.5rem;
34+
border-radius: 1rem;
35+
}
36+
2737
.step-indicator {
2838
margin: 0 0.5rem;
2939
padding: 0 0.5rem;
@@ -45,10 +55,10 @@ const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i +
4555
color: var(--neutral-50);
4656
}
4757
48-
.is-flex {
49-
gap: 5rem;
50-
background-color: var(--neutral-10);
51-
padding: 0.5rem;
52-
border-radius: 1rem;
58+
@media screen and (max-width: 768px) {
59+
.wrapper {
60+
gap: 0.5rem;
61+
padding: 0.2rem;
62+
}
5363
}
5464
</style>

‎src/components/tutor/SummariesStep.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const handleTextEdit = (event, index) => {
5656
</script>
5757
<template>
5858
<div id="target-2" class="summaries-section" :class="{ disabled: disabled }">
59-
<h2 data-testid="tutor-summaries-title" class="title is-4 mt-4">
59+
<h2 data-testid="tutor-summaries-title" class="title is-4 is-size-5-mobile mt-4">
6060
2 - {{ $t('tutor.summaries.title') }}
6161
</h2>
6262
<p class="subtitle is-6">
@@ -66,20 +66,9 @@ const handleTextEdit = (event, index) => {
6666
<h2 class="title is-6 mt-4">
6767
{{ Object.values(files)[index]?.name || $t('tutor.summaries.noFileName') }}
6868
</h2>
69-
<div class="is-flex">
70-
<p
71-
:id="`summary_${index}`"
72-
class="input summary"
73-
:contenteditable="editableParagraphs[index]"
74-
@keydown="preventLineBreaks"
75-
@paste="sanitizePaste"
76-
@blur="handleTextEdit($event, index)"
77-
:class="{ validated: !editableParagraphs[index] }"
78-
>
79-
{{ summary }}
80-
</p>
81-
<div class="mt-2 ml-2">
82-
<button class="button is-white mt-2" @click="toggleEdit(index, true)">
69+
<div class="is-flex is-flex-wrap-wrap">
70+
<div class="mt-2 ml-auto is-flex is-align-items-center">
71+
<button class="button is-white" @click="toggleEdit(index, true)">
8372
<span class="icon is-small">
8473
<EditIcon />
8574
</span>
@@ -97,6 +86,17 @@ const handleTextEdit = (event, index) => {
9786
<span>{{ editableParagraphs[index] ? $t('validate') : $t('validated') }}</span>
9887
</button>
9988
</div>
89+
<p
90+
:id="`summary_${index}`"
91+
class="input summary"
92+
:contenteditable="editableParagraphs[index]"
93+
@keydown="preventLineBreaks"
94+
@paste="sanitizePaste"
95+
@blur="handleTextEdit($event, index)"
96+
:class="{ validated: !editableParagraphs[index] }"
97+
>
98+
{{ summary }}
99+
</p>
100100
</div>
101101
</div>
102102
<div class="is-flex is-justify-content-end mt-4">

‎src/components/tutor/ThirdStep.vue‎

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ const handleTextEdit = (event, index) => {
3333
</script>
3434
<template>
3535
<div id="target-4" class="wrapper" :class="{ disabled: disabled }">
36-
<h1 data-testid="thirdStepTitle" class="title is-4">4 - {{ $t('tutor.thirdStep.title') }}</h1>
36+
<h1 data-testid="thirdStepTitle" class="title is-4 is-size-5-mobile">
37+
4 - {{ $t('tutor.thirdStep.title') }}
38+
</h1>
3739
<p class="subtitle is-6">{{ $t('tutor.thirdStep.description') }}</p>
3840
<!-- syllabus -->
3941

@@ -60,25 +62,38 @@ const handleTextEdit = (event, index) => {
6062

6163
<textarea class="textarea" v-if="enableFeedback" v-model="feedback"></textarea>
6264

63-
<div class="is-flex is-justify-content-end mt-4 pb-6">
64-
<button class="button mr-auto" @click="restart">
65-
{{ $t('tutor.restartSyllabusCreation') }}
66-
</button>
67-
<button class="button" @click="toggleFeedback">
65+
<div class="actions">
66+
<button class="button feedback" @click="toggleFeedback">
6867
{{
6968
enableFeedback ? $t('tutor.thirdStep.sendFeedback') : $t('tutor.thirdStep.giveFeedback')
7069
}}
7170
</button>
72-
<button class="button is-primary ml-2" @click="action()">{{ $t('download') }}</button>
71+
<button class="button is-primary" @click="action()">{{ $t('download') }}</button>
72+
<button class="button" @click="restart">
73+
{{ $t('tutor.restartSyllabusCreation') }}
74+
</button>
7375
</div>
7476
</div>
7577
</template>
7678

7779
<style scoped>
80+
.actions {
81+
margin-top: 1rem;
82+
display: flex;
83+
justify-content: end;
84+
padding-bottom: 3rem;
85+
gap: 1rem;
86+
}
87+
88+
.button.feedback {
89+
margin-right: auto;
90+
}
91+
7892
.button > svg {
7993
height: 1rem;
8094
padding-right: 1rem;
8195
}
96+
8297
.wrapper {
8398
display: flex;
8499
height: 100%;
@@ -120,4 +135,25 @@ details:not([open]) {
120135
border: 2px solid var(--primary);
121136
background-color: var(--neutral-0);
122137
}
138+
139+
@media screen and (max-width: 1280px) {
140+
.actions {
141+
flex-direction: column;
142+
align-items: stretch;
143+
gap: 0.25rem;
144+
}
145+
.button.feedback {
146+
margin-right: 0;
147+
}
148+
149+
.syllabus {
150+
padding: 1rem;
151+
}
152+
153+
.content h2 {
154+
font-size: 1.25rem;
155+
margin-bottom: 0.75rem;
156+
font-weight: 600;
157+
}
158+
}
123159
</style>

0 commit comments

Comments
 (0)