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

perf: use more efficient CSS selectors for inline media (#1423)

Browse source
This commit is contained in:
Nolan Lawson 2019-08-22 09:10:02 -07:00 committed by GitHub
parent 8c6a701d6f
commit 7188454790
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/routes/_components/status/Media.html
View file

@ -1,7 +1,7 @@
{#if !blurhash && (type === 'video' || type === 'audio')} {#if !blurhash && (type === 'video' || type === 'audio')}
<button id={elementId} <button id={elementId}
type="button" type="button"
class="play-video-button focus-after {$largeInlineMedia ? '' : 'fixed-size'} {type === 'audio' ? 'play-audio-button' : ''}" class="inline-media play-video-button focus-after {$largeInlineMedia ? '' : 'fixed-size'} {type === 'audio' ? 'play-audio-button' : ''}"
aria-label="Play video: {description}" aria-label="Play video: {description}"
style="width: {inlineWidth}px; height: {inlineHeight}px;"> style="width: {inlineWidth}px; height: {inlineHeight}px;">
<PlayVideoIcon /> <PlayVideoIcon />
@ -22,7 +22,7 @@
{:else} {:else}
<button id={elementId} <button id={elementId}
type="button" type="button"
class="show-image-button focus-after {$largeInlineMedia ? '' : 'fixed-size'}" class="inline-media show-image-button focus-after {$largeInlineMedia ? '' : 'fixed-size'}"
aria-label="Show image: {description}" aria-label="Show image: {description}"
title={description} title={description}
on:mouseover="set({mouseover: event})" on:mouseover="set({mouseover: event})"

6
src/routes/_components/status/MediaAttachments.html
View file

@ -23,16 +23,16 @@
border-radius: 6px; border-radius: 6px;
} }
.status-media.grouped-images > :global(*) { .status-media.grouped-images > :global(.inline-media) {
padding-bottom: 56.25%; padding-bottom: 56.25%;
width: 100%; width: 100%;
} }
.status-media.grouped-images.two-cols > :global(*) { .status-media.grouped-images.two-cols > :global(.inline-media) {
padding-bottom: calc(112.5% + 5px); padding-bottom: calc(112.5% + 5px);
} }
.status-media.grouped-images.odd-cols > :global(:first-child) { .status-media.grouped-images.odd-cols > :global(.inline-media:first-child) {
grid-row-end: span 2; grid-row-end: span 2;
padding-bottom: calc(112.5% + 5px); padding-bottom: calc(112.5% + 5px);
background-color: blue; background-color: blue;