data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: tweak position of sensitive media button in blurhash mode (#1390)

Browse source
This commit is contained in:
Nolan Lawson 2019-08-17 14:36:07 -07:00 committed by GitHub
parent aca1067568
commit daa1978945
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/routes/_components/status/StatusMediaAttachments.html
View file

@ -4,9 +4,9 @@
{#if sensitiveShown} {#if sensitiveShown}
<button id={elementId} <button id={elementId}
type="button" type="button"
class="status-sensitive-media-button" class={sensitiveMediaButtonClass}
aria-label="Hide sensitive media" > aria-label="Hide sensitive media" >
<div class="svg-wrapper"> <div class={svgWrapperClass}>
<SvgIcon className={sensitiveMediaIconClass} <SvgIcon className={sensitiveMediaIconClass}
href="#fa-eye-slash" /> href="#fa-eye-slash" />
</div> </div>
@ -14,7 +14,7 @@
{:else} {:else}
<button id={elementId} <button id={elementId}
type="button" type="button"
class="status-sensitive-media-button" class={sensitiveMediaButtonClass}
aria-label="Show sensitive media" > aria-label="Show sensitive media" >
<div class="{customWarningClass}"> <div class="{customWarningClass}">
@ -22,7 +22,7 @@
Sensitive content. Click to show. Sensitive content. Click to show.
</div> </div>
</div> </div>
<div class="svg-wrapper"> <div class={svgWrapperClass}>
<SvgIcon className={sensitiveMediaIconClass} href="#fa-eye" /> <SvgIcon className={sensitiveMediaIconClass} href="#fa-eye" />
</div> </div>
</button> </button>
@ -85,6 +85,10 @@
z-index: 90; z-index: 90;
} }
.status-sensitive-media-shown .status-sensitive-media-button.status-sensitive-media-button-transparent {
top: 5px;
}
.status-sensitive-media-hidden .status-sensitive-media-button { .status-sensitive-media-hidden .status-sensitive-media-button {
position: absolute; position: absolute;
right: 0; right: 0;
@ -147,6 +151,10 @@
bottom: 0; bottom: 0;
} }
.status-sensitive-media-hidden .svg-wrapper.svg-wrapper-transparent {
top: 5px;
}
.status-sensitive-media-container.grouped-images .svg-wrapper { .status-sensitive-media-container.grouped-images .svg-wrapper {
border-radius: 6px; border-radius: 6px;
} }
@ -210,6 +218,14 @@
} }
return `padding-bottom: ${Math.ceil(mediaAttachments.length / 2) * 29}%;` return `padding-bottom: ${Math.ceil(mediaAttachments.length / 2) * 29}%;`
}, },
sensitiveMediaButtonClass: ({ canUseBlurhash }) => classname(
'status-sensitive-media-button',
canUseBlurhash && 'status-sensitive-media-button-transparent'
),
svgWrapperClass: ({ canUseBlurhash }) => classname(
'svg-wrapper',
canUseBlurhash && 'svg-wrapper-transparent'
),
customWarningClass: ({ canUseBlurhash }) => classname( customWarningClass: ({ canUseBlurhash }) => classname(
'status-sensitive-media-warning', 'status-sensitive-media-warning',
canUseBlurhash ? 'status-sensitive-media-warning-transparent' : 'status-sensitive-media-warning-opaque' canUseBlurhash ? 'status-sensitive-media-warning-transparent' : 'status-sensitive-media-warning-opaque'