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 categories dropdown items

Browse Source 
- it's a vertical list, dealing with difficulties to make it horizontal
This commit is contained in:
Matt Rider 2019-07-05 14:34:54 -03:00
parent 3b6db5f631
commit 98080b597d
1 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
webapp/components/FilterPosts/FilterPosts.vue
View File

@ -1,34 +1,27 @@
<template>
<dropdown class="avatar-menu">
<dropdown ref="menu" :placement="placement" :offset="offset">
<a
slot="default"
slot-scope="{ toggleMenu }"
class="locale-menu"
href="#"
@click.prevent="toggleMenu()"
<dropdown ref="menu" :placement="placement" :offset="offset">
<a slot="default" slot-scope="{ toggleMenu }" href="#" @click.prevent="toggleMenu()">
<ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
<ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
</a>
<ds-menu slot="popover" slot-scope="{ toggleMenu }" :routes="routes">
<ds-menu-item
slot="menuitem"
slot-scope="item"
:route="item.route"
@click.stop.prevent="filterPosts(item.route.name, toggleMenu)"
class="categories-menu"
>
<ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
<ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
</a>
<ds-menu
slot="popover"
slot-scope="{ toggleMenu }"
class="locale-menu-popover"
:routes="routes"
>
<ds-menu-item
slot="menuitem"
slot-scope="item"
class="locale-menu-item"
:route="item.route"
@click.stop.prevent="filterPosts(item.route.name, toggleMenu)"
>
<ds-icon :name="item.route.icon" />
{{ item.route.name }}
</ds-menu-item>
</ds-menu>
</dropdown>
<ds-flex class="categories-list">
<ds-flex-item width="20%">
<ds-button :icon="item.route.icon" primary />
</ds-flex-item>
<ds-flex-item width="80%">
<ds-flex>{{ item.route.name }}</ds-flex>
</ds-flex-item>
</ds-flex>
</ds-menu-item>
</ds-menu>
</dropdown>
</template>
<script>
@ -85,3 +78,17 @@ export default {
},
}
</script>
<style lang="scss">
.categories-menu {
width: 300px;
}
.category-menu-item {
text-align: center;
padding-bottom: 20px;
}
.categories-list {
display: flex;
align-items: baseline;
}
</style>