@ -3,45 +3,32 @@
< div class = "status-body" >
< slot name = "header" / >
< div
v - if = " longSubject "
class = "s tatus-content -wrapper"
: class = "{ 'tall-s tatus': !showingLongSubject }"
v - if = " status.summary_html "
class = "s ummary -wrapper"
: class = "{ 'tall-s ubject': (longSubject && !showingLongSubject) }"
>
< a
v - if = "!showingLongSubject"
class = "tall-status-hider"
: class = "{ 'tall-status-hider_focused': focused }"
href = "#"
@ click . prevent = "showingLongSubject=true"
>
{ { $t ( "general.show_more" ) } }
< span
v - if = "hasImageAttachments"
class = "icon-picture"
/ >
< span
v - if = "hasVideoAttachments"
class = "icon-video"
/ >
< span
v - if = "status.card"
class = "icon-link"
/ >
< / a >
< div
class = " status-content media-body"
class = "media-body summary"
@ click . prevent = "linkClicked"
v - html = " contentH tml"
v - html = "status.summary_html"
/ >
< a
v - if = " showingLongSubject"
v - if = "longSubject && showingLongSubject"
href = "#"
class = " status-un hider"
class = "tall-subject-hider"
@ click . prevent = "showingLongSubject=false"
> { { $t ( "general.show_less" ) } } < / a >
> { { $t ( "status.hide_full_subject" ) } } < / a >
< a
v - else - if = "longSubject"
class = "tall-subject-hider"
: class = "{ 'tall-subject-hider_focused': focused }"
href = "#"
@ click . prevent = "showingLongSubject=true"
>
{ { $t ( "status.show_full_subject" ) } }
< / a >
< / div >
< div
v - else
: class = "{'tall-status': hideTallStatus}"
class = "status-content-wrapper"
>
@ -51,31 +38,43 @@
: class = "{ 'tall-status-hider_focused': focused }"
href = "#"
@ click . prevent = "toggleShowMore"
> { { $t ( "general.show_more" ) } } < / a >
>
{ { $t ( "general.show_more" ) } }
< / a >
< div
v - if = "!hideSubjectStatus"
class = "status-content media-body"
@ click . prevent = "linkClicked"
v - html = "contentHtml"
/ >
< div
v - else
class = "status-content media-body"
@ click . prevent = "linkClicked"
v - html = "status.summary_html"
v - html = "postBodyHtml"
/ >
< a
v - if = "hideSubjectStatus"
href = "#"
class = "cw-status-hider"
@ click . prevent = "toggleShowMore"
> { { $t ( "general.show_more" ) } } < / a >
>
{ { $t ( "status.show_content" ) } }
< span
v - if = "hasImageAttachments"
class = "icon-picture"
/ >
< span
v - if = "hasVideoAttachments"
class = "icon-video"
/ >
< span
v - if = "status.card"
class = "icon-link"
/ >
< / a >
< a
v - if = "showingMore"
href = "#"
class = "status-unhider"
@ click . prevent = "toggleShowMore"
> { { $t ( "general.show_less" ) } } < / a >
>
{ { tallStatus ? $t ( "general.show_less" ) : $t ( "status.hide_content" ) } }
< / a >
< / div >
< div v-if ="status.poll && status.poll.options" >
@ -129,6 +128,12 @@ $status-margin: 0.75em;
flex : 1 ;
min - width : 0 ;
. status - content - wrapper {
display : flex ;
flex - direction : column ;
flex - wrap : nowrap ;
}
. tall - status {
position : relative ;
height : 220 px ;
@ -136,7 +141,7 @@ $status-margin: 0.75em;
overflow - y : hidden ;
z - index : 1 ;
. status - content {
height: 1 00% ;
min- height: 0;
mask : linear - gradient ( to top , white , transparent ) bottom / 100 % 70 px no - repeat ,
linear - gradient ( to top , white , white ) ;
/* Autoprefixed seem to ignore this one, and also syntax is different */
@ -176,6 +181,38 @@ $status-margin: 0.75em;
}
}
. summary - wrapper {
margin - bottom : 0.5 em ;
border - style : solid ;
border - width : 0 0 1 px 0 ;
border - color : var ( -- border , $fallback -- border ) ;
flex - grow : 0 ;
}
. summary {
font - style : italic ;
padding - bottom : 0.5 em ;
}
. tall - subject {
position : relative ;
. summary {
max - height : 2 em ;
overflow : hidden ;
white - space : nowrap ;
text - overflow : ellipsis ;
}
}
. tall - subject - hider {
display : inline - block ;
word - break : break - all ;
/ / p o s i t i o n : a b s o l u t e ;
width : 100 % ;
text - align : center ;
padding - bottom : 0.5 em ;
}
. status - content {
font - family : var ( -- postFont , sans - serif ) ;
line - height : 1.4 em ;