ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

style filter menu grid item

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
webapp/components/FilterMenu/FilterMenu.vue
View File

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

2
webapp/pages/index.vue
View File

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