mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 15:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor .share-panel to .shr-panel because of iOS Safari quirk

Browse source
This commit is contained in:
schlagmichdoch 2023-12-09 17:28:05 +01:00
parent 2a97a8e5d9
commit bf6ac1f02c
3 changed files with 20 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -110,7 +110,7 @@
<div data-i18n-key="instructions.no-peers-subtitle" data-i18n-attrs="text"></div> <div data-i18n-key="instructions.no-peers-subtitle" data-i18n-attrs="text"></div>
</x-no-peers> </x-no-peers>
<x-instructions class="fade-in" data-i18n-key="instructions.x-instructions" data-i18n-attrs="desktop mobile data-drop-peer data-drop-bg"></x-instructions> <x-instructions class="fade-in" data-i18n-key="instructions.x-instructions" data-i18n-attrs="desktop mobile data-drop-peer data-drop-bg"></x-instructions>
<div class="share-panel panel column" hidden> <div class="shr-panel panel column" hidden>
<div class="row"> <div class="row">
<div class="thumb center"> <div class="thumb center">
<div class="text-thumb row" hidden> <div class="text-thumb row" hidden>

18
public/scripts/ui.js
View file

@ -6,15 +6,15 @@ class PeersUI {
this.$xInstructions = $$('x-instructions'); this.$xInstructions = $$('x-instructions');
this.$wsFallbackWarning = $('websocket-fallback'); this.$wsFallbackWarning = $('websocket-fallback');
this.$sharePanel = $$('.share-panel'); this.$sharePanel = $$('.shr-panel');
this.$shareModeImageThumb = $$('.share-panel .image-thumb'); this.$shareModeImageThumb = $$('.shr-panel .image-thumb');
this.$shareModeTextThumb = $$('.share-panel .text-thumb'); this.$shareModeTextThumb = $$('.shr-panel .text-thumb');
this.$shareModeFileThumb = $$('.share-panel .file-thumb'); this.$shareModeFileThumb = $$('.shr-panel .file-thumb');
this.$shareModeDescriptor = $$('.share-panel .share-descriptor'); this.$shareModeDescriptor = $$('.shr-panel .share-descriptor');
this.$shareModeDescriptorItem = $$('.share-panel .descriptor-item'); this.$shareModeDescriptorItem = $$('.shr-panel .descriptor-item');
this.$shareModeDescriptorOther = $$('.share-panel .descriptor-other'); this.$shareModeDescriptorOther = $$('.shr-panel .descriptor-other');
this.$shareModeCancelBtn = $$('.share-panel .cancel-btn'); this.$shareModeCancelBtn = $$('.shr-panel .cancel-btn');
this.$shareModeEditBtn = $$('.share-panel .edit-btn'); this.$shareModeEditBtn = $$('.shr-panel .edit-btn');
this.peers = {}; this.peers = {};

18
public/styles/deferred-styles.css
View file

@ -634,7 +634,9 @@ x-dialog .dialog-subheader {
pointer-events: none; pointer-events: none;
} }
.share-panel { /* Do not call it 'share-panel', 'share-pannel' or 'sharepanel' as iOS Safari does not show any element with these classnames... */
.shr-panel {
min-width: 250px; min-width: 250px;
max-width: calc(100vw - 20px); max-width: calc(100vw - 20px);
overflow: hidden; overflow: hidden;
@ -643,15 +645,15 @@ x-dialog .dialog-subheader {
background-image: linear-gradient(225deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color) 60%, black) 100%); background-image: linear-gradient(225deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color) 60%, black) 100%);
} }
.share-panel > div { .shr-panel > div {
margin: 4px 2px; margin: 4px 2px;
} }
.share-panel > div:not(:first-child) { .shr-panel > div:not(:first-child) {
margin-top: 2px; margin-top: 2px;
} }
.share-panel .thumb > div { .shr-panel .thumb > div {
width: 36px; width: 36px;
height: 36px; height: 36px;
background: white; background: white;
@ -659,23 +661,23 @@ x-dialog .dialog-subheader {
margin-right: 6px; margin-right: 6px;
} }
.share-panel .text-thumb svg { .shr-panel .text-thumb svg {
width: 18px; width: 18px;
height: 36px; height: 36px;
} }
.share-panel .file-thumb svg { .shr-panel .file-thumb svg {
width: 36px; width: 36px;
height: 36px; height: 36px;
} }
.share-panel .thumb .image-thumb { .shr-panel .thumb .image-thumb {
background-size: cover; background-size: cover;
border-radius: 6px; border-radius: 6px;
background-position: center; background-position: center;
} }
.share-panel .btn { .shr-panel .btn {
height: 36px; height: 36px;
} }