Skip to content

Commit 026d935

Browse files
renanjavarenanjava
committed
style: adding responsive ModalForm & DaysAndMonthsWorked components
1 parent e3fa260 commit 026d935

File tree

3 files changed

+225
-32
lines changed

3 files changed

+225
-32
lines changed

‎frontend/src/components/DaysAndMonthsWorked.vue‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="columns is-multiline mb-5">
3-
<div class="column is-3">
3+
<div class="column is-12-mobile is-6-tablet is-3-desktop">
44
<div class="card stats-card">
55
<div class="card-content">
66
<div class="level is-mobile mb-2">
@@ -23,7 +23,7 @@
2323
</div>
2424
</div>
2525

26-
<div class="column is-3">
26+
<div class="column is-12-mobile is-6-tablet is-3-desktop">
2727
<div class="card stats-card">
2828
<div class="card-content">
2929
<div class="level is-mobile mb-2">
@@ -68,9 +68,35 @@ export default defineComponent({
6868
.card {
6969
background-color: white !important;
7070
color: #363636 !important;
71+
height: 100%;
7172
}
7273
7374
.card-content {
7475
background-color: white !important;
7576
}
77+
78+
.stats-card {
79+
transition: transform 0.2s ease;
80+
}
81+
82+
.stats-card:hover {
83+
transform: translateY(-2px);
84+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
85+
}
86+
87+
@media screen and (max-width: 768px) {
88+
.title {
89+
font-size: 2rem !important;
90+
}
91+
92+
.card-content {
93+
padding: 1.25rem;
94+
}
95+
}
96+
97+
@media screen and (max-width: 480px) {
98+
.title {
99+
font-size: 1.75rem !important;
100+
}
101+
}
76102
</style>

‎frontend/src/components/ModalForm.vue‎

Lines changed: 192 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,58 @@
11
<template>
22
<div class="modal">
3-
<div class="modal-background"></div>
3+
<div class="modal-background" @click="$emit('closeModal')"></div>
44
<div class="modal-content">
5-
<form @submit.prevent="submitForms">
6-
<div v-for="field in formData" :key="field.name" class="field">
7-
<label class="label">{{ field.label }}</label>
8-
9-
<input
10-
v-if="field.type !== 'textarea' && field.type !== 'select'"
11-
:type="field.type"
12-
v-model="formValues[field.name]"
13-
:required="field.required"
14-
class="input"
15-
/>
16-
17-
<textarea
18-
v-else-if="field.type === 'textarea'"
19-
v-model="formValues[field.name]"
20-
:required="field.required"
21-
class="textarea"
22-
></textarea>
23-
24-
<div v-else-if="field.type === 'select' && event != 'edit'" class="select is-fullwidth">
25-
<select v-model="formValues[field.name]" :required="field.required">
26-
<option disabled value="">Selecione uma opção</option>
27-
<option v-for="option in field.options" :key="option.value" :value="option.value">
28-
{{ option.label }}
29-
</option>
30-
</select>
5+
<div class="box">
6+
<h2 class="title is-4 mb-5">
7+
{{ event === 'create' ? 'Criar' : 'Editar' }} {{ entityName }}
8+
</h2>
9+
10+
<form @submit.prevent="submitForms">
11+
<div v-for="field in formData" :key="field.name" class="field">
12+
<label class="label">{{ field.label }}</label>
13+
14+
<div class="control">
15+
<input
16+
v-if="field.type !== 'textarea' && field.type !== 'select'"
17+
:type="field.type"
18+
v-model="formValues[field.name]"
19+
:required="field.required"
20+
class="input"
21+
/>
22+
23+
<textarea
24+
v-else-if="field.type === 'textarea'"
25+
v-model="formValues[field.name]"
26+
:required="field.required"
27+
class="textarea"
28+
rows="4"
29+
></textarea>
30+
31+
<div
32+
v-else-if="field.type === 'select' && event != 'edit'"
33+
class="select is-fullwidth"
34+
>
35+
<select v-model="formValues[field.name]" :required="field.required">
36+
<option disabled value="">Selecione uma opção</option>
37+
<option v-for="option in field.options" :key="option.value" :value="option.value">
38+
{{ option.label }}
39+
</option>
40+
</select>
41+
</div>
42+
</div>
3143
</div>
32-
</div>
3344

34-
<button class="button is-primary is-fullwidth" type="submit">Salvar</button>
35-
</form>
45+
<div class="buttons is-right mt-5">
46+
<button class="button" type="button" @click="$emit('closeModal')">Cancelar</button>
47+
<button class="button is-primary" type="submit">
48+
<span class="icon is-small">
49+
<i class="fas fa-save"></i>
50+
</span>
51+
<span>Salvar</span>
52+
</button>
53+
</div>
54+
</form>
55+
</div>
3656
</div>
3757
<button class="modal-close is-large" aria-label="close" @click="$emit('closeModal')"></button>
3858
</div>
@@ -111,3 +131,145 @@ export default defineComponent({
111131
},
112132
})
113133
</script>
134+
135+
<style scoped>
136+
.modal {
137+
z-index: 9999;
138+
}
139+
140+
.modal-background {
141+
z-index: 9998;
142+
}
143+
144+
.modal-content {
145+
width: 90%;
146+
max-width: 640px;
147+
margin: 0 auto;
148+
z-index: 10000;
149+
position: relative;
150+
}
151+
152+
.modal-close {
153+
z-index: 10001;
154+
}
155+
156+
.box {
157+
padding: 2rem;
158+
max-height: 85vh;
159+
overflow-y: auto;
160+
}
161+
162+
.title {
163+
color: #363636;
164+
margin-bottom: 1.5rem;
165+
}
166+
167+
.field:not(:last-child) {
168+
margin-bottom: 1.25rem;
169+
}
170+
171+
.label {
172+
font-weight: 600;
173+
margin-bottom: 0.5rem;
174+
}
175+
176+
.input,
177+
.textarea,
178+
.select select {
179+
border-radius: 4px;
180+
transition: border-color 0.2s ease;
181+
}
182+
183+
.input:focus,
184+
.textarea:focus,
185+
.select select:focus {
186+
border-color: #3273dc;
187+
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
188+
}
189+
190+
.buttons {
191+
margin-top: 1.5rem;
192+
}
193+
194+
@media screen and (max-width: 768px) {
195+
.modal-content {
196+
width: 95%;
197+
margin: 1rem auto;
198+
}
199+
200+
.box {
201+
padding: 1.25rem;
202+
max-height: 90vh;
203+
}
204+
205+
.title {
206+
font-size: 1.25rem !important;
207+
}
208+
209+
.buttons {
210+
flex-direction: column-reverse;
211+
}
212+
213+
.buttons .button {
214+
width: 100%;
215+
margin: 0.25rem 0;
216+
}
217+
218+
.field:not(:last-child) {
219+
margin-bottom: 1rem;
220+
}
221+
}
222+
223+
@media screen and (min-width: 769px) and (max-width: 1023px) {
224+
.modal-content {
225+
width: 80%;
226+
}
227+
228+
.box {
229+
padding: 1.75rem;
230+
}
231+
}
232+
233+
@media screen and (max-width: 480px) {
234+
.modal-content {
235+
width: 98%;
236+
margin: 0.5rem auto;
237+
}
238+
239+
.box {
240+
padding: 1rem;
241+
}
242+
243+
.title {
244+
font-size: 1.1rem !important;
245+
}
246+
247+
.label {
248+
font-size: 0.9rem;
249+
}
250+
251+
.input,
252+
.textarea,
253+
.select select {
254+
font-size: 0.95rem;
255+
}
256+
}
257+
258+
.box::-webkit-scrollbar {
259+
width: 8px;
260+
}
261+
262+
.box::-webkit-scrollbar-track {
263+
background: #f1f1f1;
264+
border-radius: 4px;
265+
}
266+
267+
.box::-webkit-scrollbar-thumb {
268+
background: #c1c1c1;
269+
border-radius: 4px;
270+
}
271+
272+
.box::-webkit-scrollbar-thumb:hover {
273+
background: #a8a8a8;
274+
}
275+
</style>

‎frontend/src/components/SideBar.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,11 @@ export default defineComponent({
8686
})
8787
</script>
8888
<style scoped>
89+
.sidebar-custom {
90+
z-index: 100;
91+
position: relative;
92+
}
93+
8994
.hero-body,
9095
.container,
9196
.menu-item-custom {

0 commit comments

Comments
 (0)