style filter menu grid item

This commit is contained in:
Alina Beck 2019-08-15 21:29:37 +01:00
parent 8ad1ad3769
commit da8491a559
2 changed files with 26 additions and 24 deletions

View File

@ -1,27 +1,24 @@
<template>
<ds-card v-show="hashtag" class="filter-menu-card">
<div>
<ds-space margin-bottom="x-small" />
<ds-flex>
<ds-flex-item>
<ds-heading size="h3">{{ $t('filter-menu.hashtag-search', { hashtag }) }}</ds-heading>
</ds-flex-item>
<ds-flex-item>
<div class="filter-menu-buttons">
<ds-button
v-tooltip="{
content: this.$t('filter-menu.clearSearch'),
placement: 'left',
delay: { show: 500 },
}"
name="clear-search-button"
icon="close"
@click="clearSearch"
/>
</div>
</ds-flex-item>
</ds-flex>
</div>
<ds-card class="filter-menu-card">
<ds-flex class="filter-menu-content">
<ds-flex-item>
<ds-heading size="h3">{{ $t('filter-menu.hashtag-search', { hashtag }) }}</ds-heading>
</ds-flex-item>
<ds-flex-item>
<div class="filter-menu-buttons">
<ds-button
v-tooltip="{
content: this.$t('filter-menu.clearSearch'),
placement: 'left',
delay: { show: 500 },
}"
name="clear-search-button"
icon="close"
@click="clearSearch"
/>
</div>
</ds-flex-item>
</ds-flex>
</ds-card>
</template>
@ -43,6 +40,11 @@ export default {
background-color: $background-color-soft;
}
.filter-menu-content {
height: 100%;
align-items: center;
}
.filter-menu-title {
display: flex;
align-items: center;

View File

@ -1,7 +1,7 @@
<template>
<div>
<ds-grid>
<ds-grid-item :row-span="2" column-span="fullWidth">
<ds-grid-item v-show="hashtag" :row-span="2" column-span="fullWidth">
<filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
</ds-grid-item>
<ds-grid-item :row-span="2" column-span="fullWidth">