diff options
| author |  tobi <31960611+tsmethurst@users.noreply.github.com> | 2022-07-09 13:36:56 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com> | 2022-07-09 13:36:56 +0200 |
| commit | 8e68970258c38f0ed52796be4d9a447f268bed9c (patch) | |
| tree | 4e2e98505ab565b24aaa97c092761075be296e32 | |
| parent | [docs] document the migration between local and s3 (#692) (diff) | |
| download | gotosocial-8e68970258c38f0ed52796be4d9a447f268bed9c.tar.xz | |
[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
| -rw-r--r-- | web/source/css/status.css | 15 | ||||
| -rw-r--r-- | web/template/status.tmpl | 3 |
2 files changed, 14 insertions, 4 deletions
diff --git a/web/source/css/status.css b/web/source/css/status.css index db56b7a50..3f4b08edf 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -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; diff --git a/web/template/status.tmpl b/web/template/status.tmpl index a6dcc30f8..f03fdbef6 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -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"> |