@ -43,8 +43,11 @@
< user -card -content :user ="status.user" > < / u s e r - c a r d - c o n t e n t >
< / div >
< div class = "user-content" >
< h4 class = "media-heading" >
{ { status . user . name } }
< div class = "media-heading" >
< div class = "name-and-links" >
< h4 > { { status . user . name } } < / h4 >
< div class = "links" >
< h4 >
< small > < router -link : to = "{ name: 'user-profile', params: { id: status.user.id } }" > { { status . user . screen _name } } < / r o u t e r - l i n k > < / s m a l l >
< small v-if ="status.in_reply_to_screen_name" > & gt ;
< router -link : to = "{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }" >
@ -59,22 +62,22 @@
-
< small >
< router -link : to = "{ name: 'conversation', params: { id: status.id } }" >
< timeago :since ="status.created_at" :auto-update ="60 "> < / timeago >
< timeago :since ="status.created_at" :auto-update ="60 " style = "opacity:0.8; "> < / timeago >
< / r o u t e r - l i n k >
< / small >
< template v-if ="expandable" >
-
< small >
< a href = "#" @click.prevent ="toggleExpanded" > < i class = "icon-plus-squared" > < / i > < / a >
< / small >
< / template >
< / h4 >
< / div >
< / div >
< div class = "heading-icons" >
< small v-if ="unmuted" >
< a href = "#" @click.prevent ="toggleMute" > < i class = "icon-eye-off" > < / i > < / a >
< / small >
< small v-if ="!status.is_local" class="source_url" >
< a :href ="status.external_url" target = "_blank" > < i class = "icon-binoculars" > < / i > < / a >
< / small >
< / h4 >
< a :href ="status.external_url" target = "_blank" v-if ="!status.is_local" class="source_url"><i class="fa icon-binoculars" > < / i > < / a >
< template v-if ="expandable" >
< a href = "#" @click.prevent ="toggleExpanded" class = "expand" > < i class = "fa icon-plus-squared" > < / i > < / a >
< / template >
< / div >
< / div >
< div @click.prevent ="linkClicked" class = "status-content" v-html ="status.statusnet_html" > < / div >
@ -110,20 +113,66 @@
< style lang = "scss" >
@ import '../../_variables.scss' ;
status - text - container {
display : block ;
}
. status - el {
hyphens : auto ;
overflow - wrap : break - word ;
word - wrap : break - word ;
word - break : break - word ;
border - left - width : 0 px ;
line - height : 18 px ;
. notify {
. avatar {
border - width : 3 px ;
border - style : solid ;
}
}
. media - body {
flex : 1 ;
padding - left : 0.5 em ;
}
. user - content {
min - height : 52 px ;
padding - top : 1 px ;
}
. media - heading {
display : flex ;
min - height : 1.4 em ;
margin - bottom : 0.3 em ;
small {
font - weight : lighter ;
}
h4 {
margin - right : 0.4 em ;
}
. name - and - links {
flex : 1 0 ;
display : flex ;
flex - wrap : wrap ;
. links {
}
}
}
. source _url {
float : right ;
margin - right : - 0.25 em ;
}
. expand {
margin - left : 0.5 em ;
margin - right : - 0.25 em ;
}
. greentext {
@ -144,6 +193,30 @@
margin - top : 0.2 em ;
margin - bottom : 0.5 em ;
}
. media - left {
img {
margin - top : 0.2 em ;
float : right ;
margin - right : 0.3 em ;
border - radius : 5 px ;
}
}
. retweet - info {
padding : 0.7 em 0 0 0.6 em ;
. media - left {
display : flex ;
i {
align - self : center ;
text - align : right ;
flex : 1 ;
padding - right : 0.3 em ;
}
}
}
}
. status - conversation {
@ -151,7 +224,14 @@
}
. status - actions {
padding - top : 5 px ;
padding - top : 0.15 em ;
width : 100 % ;
display : flex ;
div , favorite - button {
max - width : 5.5 em ;
flex : 1 ;
}
}
. icon - reply : hover {
@ -187,12 +267,13 @@
}
. status {
padding : 0. 65em 0.7 em 0.8 em 0.8 em ;
padding : 0. 4em 0.7 em 0.45 em 0.7 em ;
border - bottom : 1 px solid ;
border - bottom - color : inherit ;
border - left : 4 px rgba ( 255 , 48 , 16 , 0.65 ) ;
border - left - style : inherit ;
}
. muted {
padding : 0.1 em 0.7 em 0.1 em 0.8 em ;
button {