qugalet/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2024-10-23 05:22:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

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

3
web/template/status.tmpl
View file

@ -6,7 +6,8 @@
{{if .SpoilerText}} {{if .SpoilerText}}
<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" /> <input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />
<div class="spoiler"> <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> </div>
{{end}} {{end}}
<div class="content"> <div class="content">