:zap: [Enhance] Screenshot with proper padding
Browse files- components/buttons_binder.js +13 -3
- index.html +1 -1
components/buttons_binder.js
CHANGED
|
@@ -206,11 +206,21 @@ class ScreenshotButtonBinder {
|
|
| 206 |
const button = $("#screenshot-button");
|
| 207 |
button.attr("title", "Take screenshot for whole chat");
|
| 208 |
button.click(() => {
|
| 209 |
-
let screenshot_padding =
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 210 |
html2canvas($("#messagers-container")[0], {
|
| 211 |
-
x: -screenshot_padding,
|
| 212 |
width:
|
| 213 |
-
$("#messagers-container").width() +
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 214 |
}).then((canvas) => {
|
| 215 |
var link = document.createElement("a");
|
| 216 |
let date = new Date();
|
|
|
|
| 206 |
const button = $("#screenshot-button");
|
| 207 |
button.attr("title", "Take screenshot for whole chat");
|
| 208 |
button.click(() => {
|
| 209 |
+
let screenshot_padding = 20;
|
| 210 |
+
let container_padding = 12;
|
| 211 |
+
let right_offset = 0;
|
| 212 |
+
if (window.innerWidth < 768) {
|
| 213 |
+
right_offset = 48;
|
| 214 |
+
}
|
| 215 |
html2canvas($("#messagers-container")[0], {
|
| 216 |
+
x: -(container_padding + screenshot_padding),
|
| 217 |
width:
|
| 218 |
+
$("#messagers-container").width() +
|
| 219 |
+
container_padding * 2 +
|
| 220 |
+
screenshot_padding * 2 +
|
| 221 |
+
right_offset,
|
| 222 |
+
// default padding is 0.75em (12px)
|
| 223 |
+
// p-1 (4px)(0.25em); p-2 (8px)(0.5em); p-3 (16px)(1em);
|
| 224 |
}).then((canvas) => {
|
| 225 |
var link = document.createElement("a");
|
| 226 |
let date = new Date();
|
index.html
CHANGED
|
@@ -28,7 +28,7 @@
|
|
| 28 |
<body>
|
| 29 |
<div id="main-container">
|
| 30 |
<div id="chat-session-container" class="container">
|
| 31 |
-
<div id="messagers-container" class="container my-3"></div>
|
| 32 |
</div>
|
| 33 |
<div id="user-interactions" class="container fixed-bottom mb-3">
|
| 34 |
<div class="row mt-2 no-gutters">
|
|
|
|
| 28 |
<body>
|
| 29 |
<div id="main-container">
|
| 30 |
<div id="chat-session-container" class="container">
|
| 31 |
+
<div id="messagers-container" class="container my-3 py-1"></div>
|
| 32 |
</div>
|
| 33 |
<div id="user-interactions" class="container fixed-bottom mb-3">
|
| 34 |
<div class="row mt-2 no-gutters">
|