Merge branch 'ui-fixes' into 'master'
UI fixes Closes #753 et #754 See merge request framasoft/mobilizon!975
This commit is contained in:
commit
17e2fc616c
|
@ -1,14 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<article class="comment">
|
<article class="comment">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<figure class="image is-48x48" v-if="comment.actor.avatar">
|
<figure
|
||||||
|
class="image is-48x48"
|
||||||
|
v-if="comment.actor && comment.actor.avatar"
|
||||||
|
>
|
||||||
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
|
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
|
||||||
</figure>
|
</figure>
|
||||||
<b-icon v-else size="is-large" icon="account-circle" />
|
<b-icon v-else size="is-large" icon="account-circle" />
|
||||||
</div>
|
</div>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<div class="meta">
|
<div class="meta">
|
||||||
<span class="first-line name" v-if="!comment.deletedAt">
|
<span
|
||||||
|
class="first-line name"
|
||||||
|
v-if="comment.actor && !comment.deletedAt"
|
||||||
|
>
|
||||||
<strong>{{ comment.actor.name }}</strong>
|
<strong>{{ comment.actor.name }}</strong>
|
||||||
<small>@{{ usernameWithDomain(comment.actor) }}</small>
|
<small>@{{ usernameWithDomain(comment.actor) }}</small>
|
||||||
</span>
|
</span>
|
||||||
|
@ -17,7 +23,11 @@
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="icons"
|
class="icons"
|
||||||
v-if="!comment.deletedAt && comment.actor.id === currentActor.id"
|
v-if="
|
||||||
|
comment.actor &&
|
||||||
|
!comment.deletedAt &&
|
||||||
|
comment.actor.id === currentActor.id
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<b-dropdown aria-role="list">
|
<b-dropdown aria-role="list">
|
||||||
<b-icon slot="trigger" role="button" icon="dots-horizontal" />
|
<b-icon slot="trigger" role="button" icon="dots-horizontal" />
|
||||||
|
|
|
@ -24,7 +24,10 @@
|
||||||
<div class="title-info-wrapper">
|
<div class="title-info-wrapper">
|
||||||
<div class="title-and-date">
|
<div class="title-and-date">
|
||||||
<p class="discussion-minimalist-title">{{ discussion.title }}</p>
|
<p class="discussion-minimalist-title">{{ discussion.title }}</p>
|
||||||
<span :title="actualDate | formatDateTimeString">
|
<span
|
||||||
|
class="has-text-grey-dark"
|
||||||
|
:title="actualDate | formatDateTimeString"
|
||||||
|
>
|
||||||
{{
|
{{
|
||||||
formatDistanceToNowStrict(new Date(actualDate), {
|
formatDistanceToNowStrict(new Date(actualDate), {
|
||||||
locale: $dateFnsLocale,
|
locale: $dateFnsLocale,
|
||||||
|
@ -102,8 +105,8 @@ export default class DiscussionListItem extends Vue {
|
||||||
.discussion-minimalist-title {
|
.discussion-minimalist-title {
|
||||||
color: #3c376e;
|
color: #3c376e;
|
||||||
font-family: Roboto, Helvetica, Arial, serif;
|
font-family: Roboto, Helvetica, Arial, serif;
|
||||||
font-size: 16px;
|
font-size: 19px;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -113,6 +116,7 @@ export default class DiscussionListItem extends Vue {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -49,7 +49,7 @@ section {
|
||||||
|
|
||||||
.main-slot {
|
.main-slot {
|
||||||
min-height: 5rem;
|
min-height: 5rem;
|
||||||
padding: 5px;
|
padding: 2px 5px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue