nogafam
/
fedilove-ui
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

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

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}
<button id={elementId}
type="button"
class="status-sensitive-media-button"
class={sensitiveMediaButtonClass}
aria-label="Hide sensitive media" >
<div class="svg-wrapper">
<div class={svgWrapperClass}>
<SvgIcon className={sensitiveMediaIconClass}
href="#fa-eye-slash" />
</div>
@ -14,7 +14,7 @@
{:else}
<button id={elementId}
type="button"
class="status-sensitive-media-button"
class={sensitiveMediaButtonClass}
aria-label="Show sensitive media" >
<div class="{customWarningClass}">
@ -22,7 +22,7 @@
Sensitive content. Click to show.
</div>
</div>
<div class="svg-wrapper">
<div class={svgWrapperClass}>
<SvgIcon className={sensitiveMediaIconClass} href="#fa-eye" />
</div>
</button>
@ -85,6 +85,10 @@
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 {
position: absolute;
right: 0;
@ -147,6 +151,10 @@
bottom: 0;
}
.status-sensitive-media-hidden .svg-wrapper.svg-wrapper-transparent {
top: 5px;
}
.status-sensitive-media-container.grouped-images .svg-wrapper {
border-radius: 6px;
}
@ -210,6 +218,14 @@
}
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(
'status-sensitive-media-warning',
canUseBlurhash ? 'status-sensitive-media-warning-transparent' : 'status-sensitive-media-warning-opaque'