From 8d4f8ad25107a98e920ab18e32b828c2e5597e54 Mon Sep 17 00:00:00 2001 From: Vadym Yatsyuk Date: Wed, 19 May 2021 19:42:02 +0200 Subject: [PATCH] update to latest dependency version, update css --- package-lock.json | 6 +- package.json | 4 +- src/app/pdf-viewer/pdf-viewer.component.scss | 100 ++++++++----------- 3 files changed, 46 insertions(+), 64 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5be080af4..8a0f74dc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9653,9 +9653,9 @@ } }, "pdfjs-dist": { - "version": "2.6.347", - "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz", - "integrity": "sha512-QC+h7hG2su9v/nU1wEI3SnpPIrqJODL7GTDFvR74ANKGq1AFJW16PH8VWnhpiTi9YcLSFV9xLeWSgq+ckHLdVQ==" + "version": "2.7.570", + "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.7.570.tgz", + "integrity": "sha512-/ZkA1FwkEOyDaq11JhMLazdwQAA0F9uwrP7h/1L9Akt9KWh1G5/tkzS+bPuUELq2s2GDFnaT+kooN/aSjT7DXQ==" }, "pend": { "version": "1.2.0", diff --git a/package.json b/package.json index 50d779568..fd92f1136 100644 --- a/package.json +++ b/package.json @@ -39,11 +39,11 @@ }, "homepage": "https://github.com/VadimDez/ng2-pdf-viewer#readme", "dependencies": { - "pdfjs-dist": "~2.6.347", + "pdfjs-dist": "~2.7.570", "tslib": "^2.0.0" }, "peerDependencies": { - "pdfjs-dist": ">=2.6.347" + "pdfjs-dist": "~2.7.570" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1101.2", diff --git a/src/app/pdf-viewer/pdf-viewer.component.scss b/src/app/pdf-viewer/pdf-viewer.component.scss index 3a5d9d41e..b90c28c8d 100644 --- a/src/app/pdf-viewer/pdf-viewer.component.scss +++ b/src/app/pdf-viewer/pdf-viewer.component.scss @@ -1,7 +1,8 @@ .ng2-pdf-viewer-container { overflow-x: auto; - position: relative; + position: absolute; height: 100%; + width:100%; -webkit-overflow-scrolling: touch; } @@ -21,57 +22,56 @@ position: absolute; white-space: pre; cursor: text; - -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } .highlight { margin: -1px; padding: 1px; - background-color: rgb(180, 0, 170); + background-color: rgba(180, 0, 170, 1); border-radius: 4px; &.begin { - border-radius: 4px 0px 0px 4px; + border-radius: 4px 0 0 4px; } &.end { - border-radius: 0px 4px 4px 0px; + border-radius: 0 4px 4px 0; } &.middle { - border-radius: 0px; + border-radius: 0; } &.selected { - background-color: rgb(0, 100, 0); + background-color: rgba(0, 100, 0, 1); } } ::-moz-selection { - background: rgb(0, 0, 255); + background: rgba(0, 0, 255, 1); } ::selection { - background: rgb(0, 0, 255); + background: rgba(0, 0, 255, 1); } .endOfContent { display: block; position: absolute; - left: 0px; + left: 0; top: 100%; - right: 0px; - bottom: 0px; + right: 0; + bottom: 0; z-index: -1; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; - + &.active { - top: 0px; + top: 0; } } } @@ -79,6 +79,7 @@ .annotationLayer { section { position: absolute; + text-align: initial; } .linkAnnotation > a, @@ -94,8 +95,8 @@ .linkAnnotation > a:hover, .buttonWidgetAnnotation.pushButton > a:hover { opacity: 0.2; - background: #ff0; - box-shadow: 0px 2px 10px #ff0; + background: rgba(255, 255, 0, 1); + box-shadow: 0 2px 10px rgba(255, 255, 0, 1); } .textAnnotation img { @@ -148,7 +149,7 @@ .choiceWidgetAnnotation select option { padding: 0; } - + .buttonWidgetAnnotation.radioButton input { border-radius: 50%; } @@ -159,7 +160,7 @@ font-size: 9px; resize: none; } - + input[disabled], textarea[disabled] { background: none; @@ -186,18 +187,18 @@ .textWidgetAnnotation { input:hover, textarea:hover { - border: 1px solid #000; + border: 1px solid rgba(0, 0, 0, 1); } } .choiceWidgetAnnotation select:hover { - border: 1px solid #000; + border: 1px solid rgba(0, 0, 0, 1); } - + .buttonWidgetAnnotation { &.checkBox input:hover, &.radioButton input:hover { - border: 1px solid #000; + border: 1px solid rgba(0, 0, 0, 1); } } @@ -208,7 +209,7 @@ border: 1px solid transparent; } } - + .choiceWidgetAnnotation select:focus { background: none; border: 1px solid transparent; @@ -218,16 +219,16 @@ &.checkBox input:checked { &:before, &:after { - background-color: #000; - content: ''; + background-color: rgba(0, 0, 0, 1); + content: ""; display: block; position: absolute; } } &.radioButton input:checked:before { - background-color: #000; - content: ''; + background-color: rgba(0, 0, 0, 1); + content: ""; display: block; position: absolute; } @@ -241,12 +242,10 @@ } &:before { - -webkit-transform: rotate(45deg); transform: rotate(45deg); } - + &:after { - -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } @@ -295,14 +294,15 @@ position: absolute; z-index: 200; max-width: 20em; - background-color: #ffff99; - box-shadow: 0px 2px 5px #888; + background-color: rgba(255, 255, 153, 1); + box-shadow: 0 2px 5px rgba(136, 136, 136, 1); border-radius: 2px; padding: 6px; margin-left: 5px; cursor: pointer; font: message-box; font-size: 9px; + white-space: normal; word-wrap: break-word; > * { @@ -311,10 +311,6 @@ h1 { display: inline-block; - // font-size: 1em; - // border-bottom: 1px solid #000000; - // margin: 0; - // padding-bottom: 0.2em; } span { @@ -323,7 +319,7 @@ } p { - border-top: 1px solid #333; + border-top: 1px solid rgba(51, 51, 51, 1); margin-top: 2px; padding-top: 2px; } @@ -356,34 +352,23 @@ direction: ltr; width: 816px; height: 1056px; - margin: 1px auto -8px auto; + margin: 1px auto -8px; position: relative; overflow: visible; - // https://stackoverflow.com/questions/21025212/border-image-not-showing-in-safari - // "transparent" makes the border not show up in Safari. But adding a light transparent color did - // rgba(0,0,0,0.01). But there needs to be an alpha value larger than 0. - border: 9px solid rgba(0, 0, 0, 0.01); - box-sizing: initial; + border: 9px solid transparent; background-clip: content-box; - -webkit-border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAA6UlEQVR4Xl2Pi2rEMAwE16fm1f7/r14v7w4rI0IzLAF7hLxNevBSEMEF5+OilNCsRd8ZMyn+a4NmsOT8WJw1lFbSYgGFzF2bLFoLjTClWjKKGRWpDYAGXUnZ4uhbBUzF3Oe/GG/ue2fn4GgsyXhNgysV2JnrhKEMg4fEZcALmiKbNhBBRFpSyDOj1G4QOVly6O1FV54ZZq8OVygrciDt6JazRgi1ljTPH0gbrPmHPXAbCiDd4GawIjip1TPh9tt2sz24qaCjr/jAb/GBFTbq9KZ7Ke/Cqt8nayUikZKsWZK7Fe6bg5dOUt8fZHWG2BHc+6EAAAAASUVORK5CYII=') - 9 9 repeat; -o-border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAA6UlEQVR4Xl2Pi2rEMAwE16fm1f7/r14v7w4rI0IzLAF7hLxNevBSEMEF5+OilNCsRd8ZMyn+a4NmsOT8WJw1lFbSYgGFzF2bLFoLjTClWjKKGRWpDYAGXUnZ4uhbBUzF3Oe/GG/ue2fn4GgsyXhNgysV2JnrhKEMg4fEZcALmiKbNhBBRFpSyDOj1G4QOVly6O1FV54ZZq8OVygrciDt6JazRgi1ljTPH0gbrPmHPXAbCiDd4GawIjip1TPh9tt2sz24qaCjr/jAb/GBFTbq9KZ7Ke/Cqt8nayUikZKsWZK7Fe6bg5dOUt8fZHWG2BHc+6EAAAAASUVORK5CYII=') 9 9 repeat; border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAA6UlEQVR4Xl2Pi2rEMAwE16fm1f7/r14v7w4rI0IzLAF7hLxNevBSEMEF5+OilNCsRd8ZMyn+a4NmsOT8WJw1lFbSYgGFzF2bLFoLjTClWjKKGRWpDYAGXUnZ4uhbBUzF3Oe/GG/ue2fn4GgsyXhNgysV2JnrhKEMg4fEZcALmiKbNhBBRFpSyDOj1G4QOVly6O1FV54ZZq8OVygrciDt6JazRgi1ljTPH0gbrPmHPXAbCiDd4GawIjip1TPh9tt2sz24qaCjr/jAb/GBFTbq9KZ7Ke/Cqt8nayUikZKsWZK7Fe6bg5dOUt8fZHWG2BHc+6EAAAAASUVORK5CYII=') 9 9 repeat; - background-color: white; + background-color: rgba(255, 255, 255, 1); } &.removePageBorders .page { - margin: 0px auto 10px auto; + margin: 0 auto 10px; border: none; } - padding-bottom: 10px; - &.removePageBorders { - padding-bottom: 0; - } - &.singlePageView { display: inline-block; @@ -484,25 +469,22 @@ .pdfViewer { margin-left: 0; margin-right: 0; - + .page, .spread { display: block; } - + .page, &.removePageBorders .page { margin-left: auto; margin-right: auto; } } - - &:-ms-fullscreen .pdfViewer .page { - margin-bottom: 100% !important; - } - + &:-webkit-full-screen .pdfViewer .page, &:-moz-full-screen .pdfViewer .page, + &:-ms-fullscreen .pdfViewer .page, &:fullscreen .pdfViewer .page { margin-bottom: 100%; border: 0;