@ -3,45 +3,32 @@
< div class = "status-body" >
< div class = "status-body" >
< slot name = "header" / >
< slot name = "header" / >
< div
< div
v - if = " longSubject "
v - if = " status.summary_html "
class = "s tatus-content -wrapper"
class = "s ummary -wrapper"
: class = "{ 'tall-s tatus': !showingLongSubject }"
: 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
< div
class = " status-content media-body"
class = "media-body summary"
@ click . prevent = "linkClicked"
@ click . prevent = "linkClicked"
v - html = " postBodyH tml"
v - html = "status.summary_html"
/ >
/ >
< a
< a
v - if = " showingLongSubject"
v - if = "longSubject && showingLongSubject"
href = "#"
href = "#"
class = " status-un hider"
class = "tall-subject-hider"
@ click . prevent = "showingLongSubject=false"
@ click . prevent = "showingLongSubject=false"
> { { $t ( "general.show_less" ) } } < / a >
> { { $t ( "general.show_less" ) } } < / a >
< a
v - else - if = "longSubject"
class = "tall-subject-hider"
: class = "{ 'tall-subject-hider_focused': focused }"
href = "#"
@ click . prevent = "showingLongSubject=true"
>
{ { $t ( "general.show_more" ) } }
< / a >
< / div >
< / div >
< div
< div
v - else
: class = "{'tall-status': hideTallStatus}"
: class = "{'tall-status': hideTallStatus}"
class = "status-content-wrapper"
class = "status-content-wrapper"
>
>
@ -51,13 +38,9 @@
: class = "{ 'tall-status-hider_focused': focused }"
: class = "{ 'tall-status-hider_focused': focused }"
href = "#"
href = "#"
@ click . prevent = "toggleShowMore"
@ click . prevent = "toggleShowMore"
> { { $t ( "general.show_more" ) } } < / a >
>
< div
{ { $t ( "general.show_more" ) } }
v - if = "status.summary_html"
< / a >
class = "status-content media-body summary"
@ click . prevent = "linkClicked"
v - html = "status.summary_html"
/ >
< div
< div
v - if = "!hideSubjectStatus"
v - if = "!hideSubjectStatus"
class = "status-content media-body"
class = "status-content media-body"
@ -69,7 +52,21 @@
href = "#"
href = "#"
class = "cw-status-hider"
class = "cw-status-hider"
@ click . prevent = "toggleShowMore"
@ click . prevent = "toggleShowMore"
> { { $t ( "general.show_more" ) } } < / a >
>
{ { $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 >
< a
< a
v - if = "showingMore"
v - if = "showingMore"
href = "#"
href = "#"
@ -129,6 +126,12 @@ $status-margin: 0.75em;
flex : 1 ;
flex : 1 ;
min - width : 0 ;
min - width : 0 ;
. status - content - wrapper {
display : flex ;
flex - direction : column ;
flex - wrap : nowrap ;
}
. tall - status {
. tall - status {
position : relative ;
position : relative ;
height : 220 px ;
height : 220 px ;
@ -136,7 +139,7 @@ $status-margin: 0.75em;
overflow - y : hidden ;
overflow - y : hidden ;
z - index : 1 ;
z - index : 1 ;
. status - content {
. status - content {
height: 1 00% ;
min- height: 0;
mask : linear - gradient ( to top , white , transparent ) bottom / 100 % 70 px no - repeat ,
mask : linear - gradient ( to top , white , transparent ) bottom / 100 % 70 px no - repeat ,
linear - gradient ( to top , white , white ) ;
linear - gradient ( to top , white , white ) ;
/* Autoprefixed seem to ignore this one, and also syntax is different */
/* Autoprefixed seem to ignore this one, and also syntax is different */
@ -176,15 +179,43 @@ $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 {
. status - content {
font - family : var ( -- postFont , sans - serif ) ;
font - family : var ( -- postFont , sans - serif ) ;
line - height : 1.4 em ;
line - height : 1.4 em ;
white - space : pre - wrap ;
white - space : pre - wrap ;
& . summary {
font - weight : bold ;
}
blockquote {
blockquote {
margin : 0.2 em 0 0.2 em 2 em ;
margin : 0.2 em 0 0.2 em 2 em ;
font - style : italic ;
font - style : italic ;