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

refactor: favor CSS over syleguide components

Browse Source
This commit is contained in:
mattwr18 2020-03-30 18:11:19 +02:00
parent 5cc3ef5faa
commit ff44fdb12c
1 changed files with 43 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
webapp/components/generic/SearchPost/SearchPost.vue
View File

@ -1,31 +1,19 @@
<template> <template>
<ds-flex class="search-post"> <section class="search-post">
<ds-flex-item class="search-option-label"> <p class="label">{{ option.title | truncate(70) }}</p>
<ds-text>{{ option.title | truncate(70) }}</ds-text> <span class="metadata">
</ds-flex-item> <span class="counts">
<ds-flex-item class="search-option-meta" width="280px"> {{ option.commentsCount }}
<ds-flex> <base-icon name="comments" />
<ds-flex-item> {{ option.shoutedCount }}
<ds-text size="small" color="softer" class="search-post-meta"> <base-icon name="bullhorn" />
<span class="comments-count"> </span>
{{ option.commentsCount }} <span>
<base-icon name="comments" /> {{ option.author.name | truncate(32) }} -
</span> {{ option.createdAt | dateTime('dd.MM.yyyy') }}
<span class="shouted-count"> </span>
{{ option.shoutedCount }} </span>
<base-icon name="bullhorn" /> </section>
</span>
</ds-text>
</ds-flex-item>
<ds-flex-item>
<ds-text size="small" color="softer" align="right" class="search-post-author">
{{ option.author.name | truncate(32) }} -
{{ option.createdAt | dateTime('dd.MM.yyyy') }}
</ds-text>
</ds-flex-item>
</ds-flex>
</ds-flex-item>
</ds-flex>
</template> </template>
<script> <script>
export default { export default {
@ -37,35 +25,35 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.search-post { .search-post {
width: 100%; display: flex;
}
.search-option-label { > .label {
align-self: center; flex-grow: 1;
padding-left: $space-x-small; padding-left: $space-x-small;
} font-size: $font-size-base;
.search-option-meta { }
align-self: center;
.ds-flex { > .metadata {
display: flex;
flex-direction: column; flex-direction: column;
white-space: nowrap;
padding-top: $space-xxx-small;
color: $text-color-softer;
font-size: $font-size-small;
> .counts {
display: flex;
flex-grow: 1;
justify-content: flex-end;
font-weight: $font-weight-bold;
> .base-icon {
margin-left: $space-xxx-small;
}
> .base-icon:first-child {
margin-right: $font-size-small;
}
}
} }
} }
.search-post-meta {
float: right;
padding-top: 2px;
white-space: nowrap;
word-wrap: none;
.base-icon {
vertical-align: sub;
}
}
.shouted-count {
width: 36px;
display: inline-block;
text-align: right;
font-weight: $font-weight-bold;
}
.comments-count {
text-align: right;
font-weight: $font-weight-bold;
}
</style> </style>