Better layout of TimelinePost component: Moves post's timestamp above

its message and attachments so that its message has more horizontal space.

Signed-off-by: Cyrille Bollu <cyrpub@bollu.be>
pull/687/head
Cyrille Bollu 2019-08-19 15:46:36 +02:00
rodzic 8fc387b9ba
commit 1dd3363836
1 zmienionych plików z 25 dodań i 19 usunięć

Wyświetl plik

@ -7,20 +7,25 @@
:disable-tooltip="true" />
</div>
<div class="post-content">
<div class="post-author-wrapper">
<router-link v-if="item.actor_info" :to="{ name: 'profile', params: { account: item.local ? item.actor_info.preferredUsername : item.actor_info.account }}">
<span class="post-author">
{{ userDisplayName(item.actor_info) }}
</span>
<span class="post-author-id">
@{{ item.actor_info.account }}
</span>
</router-link>
<a v-else :href="item.attributedTo">
<span class="post-author-id">
{{ item.attributedTo }}
</span>
</a>
<div class="post-header">
<div class="post-author-wrapper">
<router-link v-if="item.actor_info" :to="{ name: 'profile', params: { account: item.local ? item.actor_info.preferredUsername : item.actor_info.account }}">
<span class="post-author">
{{ userDisplayName(item.actor_info) }}
</span>
<span class="post-author-id">
@{{ item.actor_info.account }}
</span>
</router-link>
<a v-else :href="item.attributedTo">
<span class="post-author-id">
{{ item.attributedTo }}
</span>
</a>
</div>
<div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp">
{{ relativeTimestamp }}
</div>
</div>
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="post-message" v-html="formatedMessage" />
@ -41,11 +46,6 @@
</div>
</div>
</div>
<div>
<div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp">
{{ relativeTimestamp }}
</div>
</div>
</div>
</template>
@ -246,6 +246,12 @@ export default {
flex-grow: 1;
}
.post-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.post-timestamp {
opacity: .7;
}