Added more responsive styles to filters (#9820)

This commit is contained in:
Keith Holliday
2018-01-22 08:20:34 -07:00
committed by GitHub
parent 7083dc7e05
commit ecfcf09184

View File

@@ -1,29 +1,29 @@
<template lang="pug">
.standard-page
.row.tasks-navigation
.col-4
.col-12.col-md-4
h1 Group's Tasks
// @TODO: Abstract to component!
.col-4
.col-12.col-md-4
.input-group
input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText")
.filter-panel(v-if="isFilterPanelOpen")
.tags-category.d-flex(v-for="tagsType in tagsByType", v-if="tagsType.tags.length > 0", :key="tagsType.key")
.tags-header
.tags-category(v-for="tagsType in tagsByType", v-if="tagsType.tags.length > 0", :key="tagsType.key")
.tags-header.col-12
strong(v-once) {{ $t(tagsType.key) }}
a.d-block(v-if="tagsType.key === 'tags' && !editingTags", @click="editTags()") {{ $t('editTags2') }}
.tags-list.container
.tags-list.container.col-12
.row(:class="{'no-gutters': !editingTags}")
template(v-if="editingTags && tagsType.key === 'tags'")
.col-6(v-for="(tag, tagIndex) in tagsSnap")
.col-12.col-md-6(v-for="(tag, tagIndex) in tagsSnap")
.inline-edit-input-group.tag-edit-item.input-group
input.tag-edit-input.inline-edit-input.form-control(type="text", :value="tag.name")
.input-group-append(@click="removeTag(tagIndex)")
.svg-icon.destroy-icon(v-html="icons.destroy")
.col-6
.col-12.col-md-6
input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event)", v-model="newTag")
template(v-else)
.col-6(v-for="(tag, tagIndex) in tagsType.tags")
.col-12.col-md-6(v-for="(tag, tagIndex) in tagsType.tags")
.custom-control.custom-checkbox
input.custom-control-input(
type="checkbox",
@@ -53,7 +53,7 @@
.d-flex.align-items-center
span(v-once) {{ $t('filter') }}
.svg-icon.filter-icon(v-html="icons.filter")
#create-dropdown.col-1.offset-3
#create-dropdown.col-12.col-md-1.offset-md-3
b-dropdown(:right="true", :variant="'success'")
div(slot="button-content")
.svg-icon.positive(v-html="icons.positive")
@@ -138,6 +138,7 @@
padding-left: 24px;
padding-right: 24px;
max-width: 40vw;
width: 100%;
z-index: 9999;
background: $white;
border-radius: 2px;