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

76
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">
<ds-flex>
<ds-flex-item>
<ds-text size="small" color="softer" class="search-post-meta">
<span class="comments-count">
{{ option.commentsCount }} {{ option.commentsCount }}
<base-icon name="comments" /> <base-icon name="comments" />
</span>
<span class="shouted-count">
{{ option.shoutedCount }} {{ option.shoutedCount }}
<base-icon name="bullhorn" /> <base-icon name="bullhorn" />
</span> </span>
</ds-text> <span>
</ds-flex-item>
<ds-flex-item>
<ds-text size="small" color="softer" align="right" class="search-post-author">
{{ option.author.name | truncate(32) }} - {{ option.author.name | truncate(32) }} -
{{ option.createdAt | dateTime('dd.MM.yyyy') }} {{ option.createdAt | dateTime('dd.MM.yyyy') }}
</ds-text> </span>
</ds-flex-item> </span>
</ds-flex> </section>
</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; > .metadata {
.ds-flex { display: flex;
flex-direction: column; flex-direction: column;
}
}
.search-post-meta {
float: right;
padding-top: 2px;
white-space: nowrap; white-space: nowrap;
word-wrap: none; padding-top: $space-xxx-small;
.base-icon { color: $text-color-softer;
vertical-align: sub; font-size: $font-size-small;
}
} > .counts {
.shouted-count { display: flex;
width: 36px; flex-grow: 1;
display: inline-block; justify-content: flex-end;
text-align: right;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
> .base-icon {
margin-left: $space-xxx-small;
}
> .base-icon:first-child {
margin-right: $font-size-small;
}
}
} }
.comments-count {
text-align: right;
font-weight: $font-weight-bold;
} }
</style> </style>