Skip to content

Commit

Permalink
feat: add responsividade horario
Browse files Browse the repository at this point in the history
  • Loading branch information
@ialexanderbrito
ialexanderbrito committed Apr 13, 2022
1 parent 9ea097a commit 1a3846f
Show file tree
Hide file tree
Showing 2 changed files with 221 additions and 57 deletions.
171 changes: 165 additions & 6 deletions src/pages/Horarios/Horarios.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,26 @@
flex-direction: column;
align-items: center;
justify-content: center;
height: 80vh;
background: var(--background);

h2 {
font-weight: bold;
color: var(--white);
}
}

.containerButtonTop {
display: flex;
width: 100%;
justify-content: center;
margin-bottom: 22px;
margin-top: 22px;
}

.containerButton {
display: flex;
width: 52rem;
justify-content: flex-end;
width: 100%;
justify-content: center;
margin-bottom: 22px;
margin-top: 22px;
}
Expand All @@ -35,9 +43,18 @@
.containerHorarios {
display: flex;
margin-bottom: 10px;
width: 60rem;
width: 100%;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
height: 20vh;
}

.containerTime {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 21rem;
}

.button {
Expand Down Expand Up @@ -74,7 +91,7 @@
}

.select {
width: 240px;
width: 314px;
height: 56px;
background: var(--input);
color: var(--gray-hard);
Expand Down Expand Up @@ -104,7 +121,7 @@
}

.time {
width: 240px;
width: 120px;
height: 56px;
background: var(--input);
color: var(--gray-hard);
Expand Down Expand Up @@ -168,13 +185,148 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

h2 {
font-weight: bold;
color: var(--white);
}
}

.containerButtonTop {
display: flex;
width: 70%;
justify-content: flex-end;
margin-bottom: 22px;
margin-top: 22px;
}

.containerButton {
display: flex;
width: 100%;
justify-content: flex-end;
margin-bottom: 22px;
margin-top: 22px;
}

.form {
width: 100%;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column-reverse;
}

.containerHorarios {
display: flex;
margin-bottom: 10px;
width: 50rem;
align-items: center;
justify-content: space-evenly;
flex-direction: row;
height: 10vh;
}

.button {
display: flex;
border: none;
background: transparent;
font-size: 18px;
color: var(--orange);
font-weight: bold;
cursor: pointer;
align-items: center;
justify-content: center;

&:hover {
filter: brightness(0.8);
transition: 0.4s;
}
}

.buttonRemove {
border: none;
background: #ca0b00;
cursor: pointer;
border-radius: 10px;
width: 45px;
height: 45px;
align-items: center;
justify-content: center;

&:hover {
filter: brightness(0.6);
transition: 0.4s;
}
}

.select {
width: 240px;
height: 56px;
background: var(--input);
color: var(--gray-hard);
border: none;
outline: 0;

border: 1px solid var(--input);

border-radius: 10px;

font-size: 16px;

text-indent: 10px;

&::placeholder {
color: var(--gray);
}

&:invalid {
border: 1px solid #ff0000;
}

&:focus {
color: var(--white);
border: 1px solid var(--orange);
}
}

.containerTime {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 40rem;
}

.time {
width: 240px;
height: 56px;
background: var(--input);
color: var(--gray-hard);
border: none;
outline: 0;

border: 1px solid var(--input);

border-radius: 10px;

font-size: 16px;

text-indent: 10px;

&::placeholder {
color: var(--gray);
}

&:invalid {
border: 1px solid #ff0000;
}

&:focus {
color: var(--white);
border: 1px solid var(--orange);
}
}

.perfilContainer {
display: flex;
justify-content: space-around;
Expand All @@ -192,4 +344,11 @@
flex-direction: column;
align-items: center;
}

.buttonContainer {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
}
107 changes: 56 additions & 51 deletions src/pages/Horarios/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function Horarios() {

<div className={styles.container}>
<h2>Adicionar horários</h2>
<div className={styles.containerButton}>
<div className={styles.containerButtonTop}>
<button type="button" onClick={() => addNewScheduleItem()} className={styles.button}>
Adicionar horario
<FiPlus />
Expand All @@ -44,59 +44,64 @@ export function Horarios() {
e.preventDefault();
formikHorarios.handleSubmit(e);
}}
className={styles.form}
style={{
width: '100%',
}}
>
{formikHorarios?.values?.schedules?.map((schedule, index) => (
<div key={index} className={styles.containerHorarios}>
<select
className={styles.select}
name={`schedules[${index}].week_day`}
value={schedule.week_day}
onChange={formikHorarios.handleChange}
>
<option value="">Selecione um dia da semana</option>
<option value={0}>Domingo</option>
<option value={1}>Segunda-feira</option>
<option value={2}>Terça-feira</option>
<option value={3}>Quarta-feira</option>
<option value={4}>Quinta-feira</option>
<option value={5}>Sexta-feira</option>
<option value={6}>Sábado</option>
</select>

<input
className={styles.time}
type="time"
name={`schedules[${index}].from`}
placeholder="De"
onChange={formikHorarios.handleChange}
onBlur={formikHorarios.handleBlur}
value={schedule.from}
/>
<div className={styles.form}>
{formikHorarios?.values?.schedules?.map((schedule, index) => (
<div key={index} className={styles.containerHorarios}>
<select
className={styles.select}
name={`schedules[${index}].week_day`}
value={schedule.week_day}
onChange={formikHorarios.handleChange}
>
<option value="">Selecione um dia da semana</option>
<option value={0}>Domingo</option>
<option value={1}>Segunda-feira</option>
<option value={2}>Terça-feira</option>
<option value={3}>Quarta-feira</option>
<option value={4}>Quinta-feira</option>
<option value={5}>Sexta-feira</option>
<option value={6}>Sábado</option>
</select>

<input
className={styles.time}
type="time"
name={`schedules[${index}].to`}
placeholder="Até"
onChange={formikHorarios.handleChange}
onBlur={formikHorarios.handleBlur}
value={schedule.to}
maxLength={100}
/>
<div className={styles.containerTime}>
<input
className={styles.time}
type="time"
name={`schedules[${index}].from`}
placeholder="De"
onChange={formikHorarios.handleChange}
onBlur={formikHorarios.handleBlur}
value={schedule.from}
/>

{formikHorarios.values.schedules.length > 1 && (
<button
className={styles.buttonRemove}
onClick={() => {
removeScheduleItem(index);
}}
>
<FiSlash color="#FFF" size={18} style={{ marginTop: '6px' }} />
</button>
)}
</div>
))}
<input
className={styles.time}
type="time"
name={`schedules[${index}].to`}
placeholder="Até"
onChange={formikHorarios.handleChange}
onBlur={formikHorarios.handleBlur}
value={schedule.to}
maxLength={100}
/>
{formikHorarios.values.schedules.length > 1 && (
<button
className={styles.buttonRemove}
onClick={() => {
removeScheduleItem(index);
}}
>
<FiSlash color="#FFF" size={18} style={{ marginTop: '6px' }} />
</button>
)}
</div>
</div>
))}
</div>
<div className={styles.containerButton} style={{ justifyContent: 'center' }}>
<Button type="submit">Salvar horários</Button>
</div>
Expand Down

0 comments on commit 1a3846f

Please sign in to comment.