fix: futher improve card styling on mobile

fix: crash on massive fonts on mobile
ThaUnknown · Jul 11, 2024 · 3d807eb · 3d807eb
1 parent 087075a
commit 3d807eb
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 9 deletions.
diff --git a/common/components/cards/SmallCard.svelte b/common/components/cards/SmallCard.svelte
@@ -45,11 +45,11 @@
       {media.title.userPreferred}
     </div>
     <div class='d-flex flex-row mt-auto pt-10 font-weight-medium justify-content-between w-full text-muted'>
-      <div class='d-flex align-items-center' style='margin-left: -3px'>
+      <div class='d-flex align-items-center pr-5' style='margin-left: -2px'>
         <span class='material-symbols-outlined font-size-24 pr-5'>calendar_month</span>
         {media.seasonYear || 'N/A'}
       </div>
-      <div class='d-flex align-items-center'>
+      <div class='d-flex align-items-center text-nowrap text-right'>
         {formatMap[media.format]}
         <span class='material-symbols-outlined font-size-24 pl-5'>monitor</span>
       </div>
@@ -58,9 +58,6 @@
 </div>
 
 <style>
-  .first-check:first-child :global(.absolute-container) {
-    left: -48% !important
-  }
   .first-check:hover {
     z-index: 30;
     /* fixes transform scaling on click causing z-index issues */

diff --git a/common/css.css b/common/css.css
@@ -51,7 +51,7 @@
 
 a[href]:active, button:not([disabled]):active, fieldset:not([disabled]):active, input:not([disabled]):active, optgroup:not([disabled]):active, option:not([disabled]):active, select:not([disabled]):active, textarea:not([disabled]):active, details:active, [tabindex]:not([tabindex="-1"]):active, [contenteditable]:active, [controls]:active {
   transition: transform 0.1s ease-in-out;
-  transform: scale(0.95);
+  transform: scale(0.95) !important;
 }
 
 .btn-secondary {

diff --git a/common/modules/parser.js b/common/modules/parser.js
@@ -1,6 +1,7 @@
 import Metadata from 'matroska-metadata'
 import { arr2text } from 'uint8-util'
 import { fontRx } from './util.js'
+import { SUPPORTS } from '@/modules/support.js'
 
 export default class Parser {
   parsed = false
@@ -34,7 +35,10 @@ export default class Parser {
       for (const file of files) {
         if (fontRx.test(file.filename) || file.mimetype?.toLowerCase().includes('font')) {
           // this is cursed, but required, as capacitor-node's IPC hangs for 2mins when runnig on 32bit android when sending uint8's
-          this.client.dispatch('file', { data: arr2text(file.data) })
+          const data = arr2text(file.data)
+          // IPC crashes if the message is >16MB, wild
+          if (SUPPORTS.isAndroid && data.length > 15_000_000) continue
+          this.client.dispatch('file', { data })
         }
       }
     })

diff --git a/common/modules/webtorrent.js b/common/modules/webtorrent.js
@@ -4,7 +4,7 @@ import HTTPTracker from 'bittorrent-tracker/lib/client/http-tracker.js'
 import { hex2bin, arr2hex, text2arr } from 'uint8-util'
 import Parser from './parser.js'
 import { defaults, fontRx, subRx, videoRx } from './util.js'
-import { SUPPORTS } from './support.js'
+import { SUPPORTS } from '@/modules/support.js'
 
 // HACK: this is https only, but electron doesnt run in https, weirdge
 if (!globalThis.FileSystemFileHandle) globalThis.FileSystemFileHandle = false

diff --git a/common/views/Home/Section.svelte b/common/views/Home/Section.svelte
@@ -50,6 +50,9 @@
 </div>
 
 <style>
+  .gallery :global(.first-check:first-child) :global(.absolute-container) {
+    left: -48% !important
+  }
   .text-muted:hover {
     color: var(--dm-link-text-color-hover) !important;
   }

diff --git a/common/views/Search.svelte b/common/views/Search.svelte
@@ -80,7 +80,7 @@
 
 <style>
   .d-grid:has(.item.small-card) {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important
+    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important
   }
   .d-grid:has(.card.full-card) {
     grid-template-columns: repeat(auto-fill, minmax(52rem, 1fr)) !important