ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +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>
<ds-flex class="search-post">
<ds-flex-item class="search-option-label">
<ds-text>{{ option.title | truncate(70) }}</ds-text>
</ds-flex-item>
<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 }}
<base-icon name="comments" />
</span>
<span class="shouted-count">
{{ option.shoutedCount }}
<base-icon name="bullhorn" />
</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>
<section class="search-post">
<p class="label">{{ option.title | truncate(70) }}</p>
<span class="metadata">
<span class="counts">
{{ option.commentsCount }}
<base-icon name="comments" />
{{ option.shoutedCount }}
<base-icon name="bullhorn" />
</span>
<span>
{{ option.author.name | truncate(32) }} -
{{ option.createdAt | dateTime('dd.MM.yyyy') }}
</span>
</span>
</section>
</template>
<script>
export default {
@ -37,35 +25,35 @@ export default {
</script>
<style lang="scss">
.search-post {
width: 100%;
}
.search-option-label {
align-self: center;
padding-left: $space-x-small;
}
.search-option-meta {
align-self: center;
.ds-flex {
display: flex;
> .label {
flex-grow: 1;
padding-left: $space-x-small;
font-size: $font-size-base;
}
> .metadata {
display: flex;
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>