therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed custom emoji in nickname. changed icons on right side to be more

Browse source 
streamlined. adjusted CSS so that all text in header of post is on same
baseline and all icons/images are middle-aligned.
This commit is contained in:
Henry Jameson 2018-08-13 14:46:28 +03:00
parent ce88f351f7
commit 4d112b70fd
13 changed files with 75 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/status/status.vue
View file

@ -11,8 +11,8 @@
<div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
<StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
<div class="media-body faint">
<a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
<a v-else :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
<a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
<a v-else :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
<i class='fa icon-retweet retweeted'></i>
{{$t('timeline.repeated')}}
</div>
@ -57,8 +57,10 @@
<router-link class="timeago" :to="{ name: 'conversation', params: { id: status.id } }">
<timeago :since="status.created_at" :auto-update="60"></timeago>
</router-link>
<span v-if="status.visibility"><i :class="visibilityIcon(status.visibility)"></i> </span>
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="icon-link-ext"></i></a>
<div class="visibility-icon" v-if="status.visibility">
<i :class="visibilityIcon(status.visibility)"></i>
</div>
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="icon-link-ext-alt"></i></a>
<template v-if="expandable">
<a href="#" @click.prevent="toggleExpanded"><i class="icon-plus-squared"></i></a>
</template>
@ -141,6 +143,7 @@
margin-top: 0.25em;
margin-left: 0.5em;
z-index: 50;
.status {
flex: 1;
border: 0;
@ -155,6 +158,7 @@
text-align: center;
border-width: 1px;
border-style: solid;
i {
font-size: 2em;
}
@ -196,6 +200,7 @@
.media-heading {
flex-wrap: nowrap;
line-height: 16px;
}
.media-heading-left {
@ -218,12 +223,20 @@
flex: 1 0;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: baseline;
.user-name {
margin-right: 0.2em;
img {
width: 14px;
height: 14px;
vertical-align: middle
}
}
}
.links {
display: flex;
padding-top: 1px;
margin-left: 0.2em;
font-size: 12px;
color: $fallback--link;
color: var(--link, $fallback--link);
@ -247,17 +260,18 @@
}
.media-heading-right {
display: inline-flex;
flex-shrink: 0;
display: flex;
flex-wrap: nowrap;
max-height: 1.5em;
margin-left: 0.25em;
margin-left: .25em;
.timeago {
margin-right: 0.2em;
font-size: 12px;
padding-top: 1px;
align-self: last baseline;
}
i {
> * {
margin-left: 0.2em;
}
}
@ -318,6 +332,7 @@
.retweet-info {
padding: 0.4em 0.6em 0 0.6em;
margin: 0;
.avatar {
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
@ -333,9 +348,20 @@
display: flex;
align-content: center;
flex-wrap: wrap;
.user-name {
font-weight: bold;
img {
width: 14px;
height: 14px;
vertical-align: middle;
}
}
i {
padding: 0 0.2em;
}
a {
max-width: 100%;
overflow: hidden;