Responsive filter flyout [SCI-6494] (#4098)

* Responsive filter flyout [SCI-6494]

* Correct delimiter [SCI-6494]
This commit is contained in:
ajugo 2022-05-25 10:42:54 +02:00 committed by GitHub
parent bacb1547f2
commit b77394a7b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 4 deletions

View file

@ -120,7 +120,7 @@
padding: 1em;
.apply-button {
margin-left: auto !important;
margin-left: auto;
}
.filters-columns-list {
@ -232,6 +232,49 @@
}
}
@media (max-width: 992px) {
.filters-container {
width: 200px;
.filter-container {
.filter-attributes {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.operator-selector {
.dropdown-selector-container {
width: 125px;
}
}
.date-time-picker {
display: flex;
flex-wrap: wrap;
}
.between-delimiter {
height: 10px;
margin: 5px auto;
transform: rotate(90deg);
}
}
}
.footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
.apply-button {
margin-left: 0;
margin-top: .5em;
}
}
}
}
.task-option {
background-image: image-url("icon_small/task-black.svg");
background-position: left center;

View file

@ -19,7 +19,7 @@
/>
</div>
</div>
<button class="btn btn-light clear-filters-btn" @click="clearFilters()">
<button class="btn btn-light clear-filters-btn prevent-shrink" @click="clearFilters()">
<i class="fas fa-times-circle"></i>
{{ i18n.t('repositories.show.filters.clear') }}
</button>
@ -36,7 +36,7 @@
</div>
<div class="footer">
<div id="filtersColumnsDropdown" class="dropup filters-columns-dropdown" @click="toggleColumnsFilters">
<button class="btn btn-secondary add-filter" >
<button class="btn btn-secondary add-filter prevent-shrink" >
<i class="fas fa-plus"></i>
{{ i18n.t('repositories.show.filters.add_filter') }}
</button>
@ -50,7 +50,7 @@
/>
</div>
</div>
<button @click="$emit('filters:apply')" class="btn btn-primary apply-button">
<button @click="$emit('filters:apply')" class="btn btn-primary apply-button prevent-shrink">
{{ i18n.t('repositories.show.filters.apply') }}
</button>
</div>