mobile-snap 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/cli.js +15 -8
- package/package.json +1 -1
package/bin/cli.js
CHANGED
|
@@ -502,21 +502,20 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
|
|
|
502
502
|
overflow: hidden;
|
|
503
503
|
}
|
|
504
504
|
body {
|
|
505
|
-
background:
|
|
505
|
+
background: transparent;
|
|
506
506
|
display: flex;
|
|
507
507
|
justify-content: center;
|
|
508
508
|
align-items: center;
|
|
509
|
-
|
|
510
|
-
height: 100vh;
|
|
509
|
+
min-height: 100vh;
|
|
511
510
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
512
511
|
}
|
|
513
512
|
.device-wrapper {
|
|
514
513
|
position: relative;
|
|
514
|
+
width: ${size.logical.width}px;
|
|
515
|
+
height: ${size.logical.height}px;
|
|
515
516
|
display: flex;
|
|
516
517
|
justify-content: center;
|
|
517
518
|
align-items: center;
|
|
518
|
-
transform: scale(0.85);
|
|
519
|
-
transform-origin: center;
|
|
520
519
|
background: transparent;
|
|
521
520
|
}
|
|
522
521
|
.device-frame {
|
|
@@ -527,6 +526,9 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
|
|
|
527
526
|
0 0 0 13px #2f2f31,
|
|
528
527
|
0 20px 50px rgba(0,0,0,0.6);
|
|
529
528
|
overflow: hidden;
|
|
529
|
+
transform: scale(0.88);
|
|
530
|
+
transform-origin: center;
|
|
531
|
+
flex-shrink: 0;
|
|
530
532
|
}
|
|
531
533
|
.device-frame.ios {
|
|
532
534
|
border-radius: 54px;
|
|
@@ -672,8 +674,13 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
|
|
|
672
674
|
</html>
|
|
673
675
|
`;
|
|
674
676
|
|
|
677
|
+
const extraWidth = 150;
|
|
678
|
+
const extraHeight = 150;
|
|
675
679
|
const context = await browser.newContext({
|
|
676
|
-
viewport:
|
|
680
|
+
viewport: {
|
|
681
|
+
width: size.logical.width + extraWidth,
|
|
682
|
+
height: size.logical.height + extraHeight
|
|
683
|
+
},
|
|
677
684
|
deviceScaleFactor: size.scale
|
|
678
685
|
});
|
|
679
686
|
|
|
@@ -681,8 +688,8 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
|
|
|
681
688
|
await page.setContent(htmlContent);
|
|
682
689
|
await page.waitForLoadState('networkidle');
|
|
683
690
|
|
|
684
|
-
const buffer = await page.screenshot({
|
|
685
|
-
omitBackground:
|
|
691
|
+
const buffer = await page.locator('.device-wrapper').screenshot({
|
|
692
|
+
omitBackground: true
|
|
686
693
|
});
|
|
687
694
|
|
|
688
695
|
await context.close();
|