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

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

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