Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - fix display en medium size screen

Browse Source
This commit is contained in:
Sam 2023-04-08 12:00:02 +02:00
parent 143086ad6f
commit 0d3723fdd6
1 changed files with 91 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
fittrackee_client/src/components/Workouts/WorkoutsFilters.vue
View File

@ -2,7 +2,7 @@
<div class="workouts-filters"> <div class="workouts-filters">
<div class="box"> <div class="box">
<form v-on:submit.prevent="onSubmit" class="form"> <form v-on:submit.prevent="onSubmit" class="form">
<div class="form"> <div class="form-all-items">
<div class="form-items-group"> <div class="form-items-group">
<div class="form-item"> <div class="form-item">
<label> {{ $t('workouts.FROM') }}: </label> <label> {{ $t('workouts.FROM') }}: </label>
@ -44,10 +44,7 @@
</option> </option>
</select> </select>
</div> </div>
</div> <div class="form-item form-item-title">
<div class="form-items-group">
<div class="form-item">
<label> {{ $t('workouts.TITLE', 1) }}:</label> <label> {{ $t('workouts.TITLE', 1) }}:</label>
<div class="form-inputs-group"> <div class="form-inputs-group">
<input <input
@ -250,43 +247,48 @@
.workouts-filters { .workouts-filters {
.form { .form {
display: flex; .form-all-items {
flex-direction: column;
padding-top: 0;
.form-items-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: $default-padding * 0.5; padding-top: 0;
.form-item { .form-items-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: $default-padding * 0.5;
.form-inputs-group { .form-item {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: space-around;
align-items: center; .form-inputs-group {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
input {
width: 34%;
}
span {
padding: $default-padding * 0.5;
}
}
input { input {
width: 34%; height: 16px;
} }
select {
height: 38px;
padding: 0 $default-padding * 0.5;
}
}
.form-item-title {
padding-top: $default-padding;
input.title { input.title {
width: 100%; width: 100%;
} }
span {
padding: $default-padding * 0.5;
}
}
input {
height: 16px;
}
select {
height: 36px;
padding: 0 $default-padding * 0.5;
} }
} }
} }
@ -306,26 +308,35 @@
@media screen and (max-width: $medium-limit) { @media screen and (max-width: $medium-limit) {
.form { .form {
flex-direction: row; .form-all-items {
padding-top: $default-padding * 0.5; flex-direction: row;
padding-top: $default-padding * 0.5;
.form-items-group { .form-items-group {
padding: 0 $default-padding * 0.5; padding: 0 $default-padding * 0.5;
height: 100%; height: 100%;
.form-item { .form-item {
label { label, span {
font-size: 0.9em; font-size: 0.9em;
}
.form-inputs-group {
flex-direction: column;
justify-content: normal;
padding: 0;
input {
width: 85%;
}
span {
padding: 0;
}
}
} }
.form-inputs-group { .form-item-title {
flex-direction: column; padding-top: 0;
justify-content: normal;
padding: 0;
input {
width: 75%;
}
} }
} }
} }
@ -341,26 +352,30 @@
} }
@media screen and (max-width: $small-limit) { @media screen and (max-width: $small-limit) {
.form { .form {
flex-direction: column; .form-all-items {
padding-top: 0; flex-direction: column;
padding-top: 0;
.form-items-group { .form-items-group {
padding: $default-padding * 0.5; padding: $default-padding * 0.5;
.form-item { .form-item {
label { label {
font-size: 1em; font-size: 1em;
}
.form-inputs-group {
flex-direction: row;
justify-content: space-around;
align-items: center;
input {
width: 50%;
} }
span {
padding: $default-padding * 0.5; .form-inputs-group {
flex-direction: row;
justify-content: space-around;
align-items: center;
input {
width: 50%;
}
span {
padding: $default-padding * 0.5;
}
} }
} }
} }
@ -378,6 +393,20 @@
.form-button { .form-button {
flex-wrap: wrap; flex-wrap: wrap;
} }
.form {
.form-all-items {
.form-items-group {
.form-item-title {
padding-top: $default-padding;
input.title {
width: 100%;
}
}
}
}
}
} }
} }
</style> </style>