7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-21 12:47:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Zoom in on real browser screenshot (#3925)

Browse Source 
* Screenshot in modal

* Update src/components/ScreenshotDialog.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Update src/pages/Details.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Added title

* Update ScreenshotDialog.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Add translations

---------

Co-authored-by: Frank Elsinga <frank@elsinga.de>
This commit is contained in:
Adam Hancock
2023-11-23 18:58:33 +00:00
committed by GitHub
parent dc42420193
commit ac452bbcb9
4 changed files with 71 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/Details.vue
View File

@@ -184,9 +184,10 @@
<!-- Screenshot -->
<div v-if="monitor.type === 'real-browser'" class="shadow-box">
<div class="row">
<div class="col-md-6">
<img :src="screenshotURL" alt style="width: 100%;">
<div class="col-md-6 zoom-cursor">
<img :src="screenshotURL" style="width: 100%;" alt="screenshot of the website" @click="showScreenshotDialog">
</div>
<ScreenshotDialog ref="screenshotDialog" :imageURL="screenshotURL" />
</div>
</div>
@@ -283,6 +284,7 @@ import "prismjs/components/prism-javascript";
import "prismjs/components/prism-css";
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import ScreenshotDialog from "../components/ScreenshotDialog.vue";
export default {
components: {
@@ -297,6 +299,7 @@ export default {
Tag,
CertificateInfo,
PrismEditor,
ScreenshotDialog
},
data() {
return {
@@ -476,6 +479,14 @@ export default {
this.$refs.confirmDelete.show();
},
/**
* Show Screenshot Dialog
* @returns {void}
*/
showScreenshotDialog() {
this.$refs.screenshotDialog.show();
},
/**
* Show dialog to confirm clearing events
* @returns {void}