mirrors
/
gotosocial
mirror of
1
Fork 0
Code Issues Releases Activity

[frontend] Fix up status 'show more' and z-index (#701) 

* put spoiler items in a flexbox

* make the whole status top of z index
this allows text to be selected properly

* allow status spoiler text to break across lines
This commit is contained in:
tobi 2022-07-09 13:36:56 +02:00 committed by GitHub
parent c2039a7e5e
commit 8e68970258
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/source/css/status.css
View File

@ -87,11 +87,17 @@ main {
}
.spoiler {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
.spoiler-text {
word-break: break-word;
}
label {
padding: 0.2rem 0.3rem;
margin-left: 0.4rem;
position: relative;
z-index: 2;
cursor: pointer;
font-size: 1rem;
}
@ -104,6 +110,9 @@ main {
margin-top: 0.5rem;
grid-column: span 2;
position: relative;
z-index: 2;
a {
color: $link_fg;
text-decoration: underline;

3
web/template/status.tmpl
View File

@ -6,7 +6,8 @@
{{if .SpoilerText}}
<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />
<div class="spoiler">
<span>{{.SpoilerText}}</span><label class="button spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label>
<span class="spoiler-text">{{.SpoilerText}}</span>
<label class="button spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label>
</div>
{{end}}
<div class="content">