Fix waveform height (#69)

* Fix waveform to full width * Fix waveform thumbnail height * Fix waveform image height * Set hardcoded height for image * Add dynamic imgWidth for waveform calc height * Change waveform image height * Update drop-shadow height
internetarchive · Jun 8, 2022 · caf2f89 · caf2f89
1 parent 89fbf74
commit caf2f89
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/styles/item-image-styles.ts b/src/styles/item-image-styles.ts
@@ -7,6 +7,7 @@ export const baseItemImageStyles = css`
   .drop-shadow {
     filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
     overflow: hidden;
+    height: 100%;
   }
 
   .list-box {
@@ -39,6 +40,10 @@ export const baseItemImageStyles = css`
 export const waveformGradientStyles = css`
   .waveform {
     mix-blend-mode: screen;
+    position: relative;
+    height: 62.5%;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   .waveform-grad0 {

diff --git a/src/tiles/item-image.ts b/src/tiles/item-image.ts
@@ -72,7 +72,7 @@ export class ItemImage extends LitElement {
 
   private get itemImageClass(): ClassInfo {
     return {
-      contain: !this.isCompactTile,
+      contain: !this.isCompactTile && !this.isWaveform,
       cover: this.isCompactTile,
       blur: this.model?.contentWarning || false,
       waveform: this.isWaveform,