Fixed image preview stitch assist view. (works on chrome and FF)
This commit is contained in:
parent
0e256b5fab
commit
c75afd74f9
7 changed files with 47 additions and 12 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -8132,10 +8132,26 @@ video {
|
||||||
background: url("/images/default-user-avatar.png"); }
|
background: url("/images/default-user-avatar.png"); }
|
||||||
|
|
||||||
.stitch-preview-right {
|
.stitch-preview-right {
|
||||||
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, transparent 100%); }
|
border: solid 1px whitesmoke; }
|
||||||
|
.stitch-preview-right::after {
|
||||||
|
content: '';
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: linear-gradient(to right, transparent 0%, white 80%); }
|
||||||
|
|
||||||
.stitch-preview-left {
|
.stitch-preview-left {
|
||||||
mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.3) 0%, transparent 100%); }
|
border: solid 1px whitesmoke; }
|
||||||
|
.stitch-preview-left::after {
|
||||||
|
content: '';
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: linear-gradient(to left, transparent 0%, white 80%); }
|
||||||
|
|
||||||
.book-stitch-preview-right::after {
|
.book-stitch-preview-right::after {
|
||||||
content: '';
|
content: '';
|
||||||
|
|
|
@ -524,14 +524,33 @@ video{
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// top:0;
|
// top:0;
|
||||||
// right:0;
|
// right:0;
|
||||||
mask-image: linear-gradient(to right, rgba(0,0,0,.3) 0%, transparent 100%);
|
border: solid 1px whitesmoke;
|
||||||
|
&::after{
|
||||||
|
content: '';
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
// background-color: black;
|
||||||
|
width:100%;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
background: linear-gradient(to right, transparent 0%, white 80%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.stitch-preview-left{
|
.stitch-preview-left{
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// top:0;
|
// top:0;
|
||||||
// left:0;
|
// left:0;
|
||||||
mask-image: linear-gradient(to left, rgba(0,0,0,.3) 0%, transparent 100%);
|
border: solid 1px whitesmoke;
|
||||||
|
&::after{
|
||||||
|
content: '';
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
// background-color: black;
|
||||||
|
width:100%;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
background: linear-gradient(to left, transparent 0%, white 80%);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.book-stitch-preview-right{
|
.book-stitch-preview-right{
|
||||||
|
|
|
@ -128,7 +128,7 @@
|
||||||
<h1 class="subtitle is-3">{{pages[currentPage].text}}</h1>
|
<h1 class="subtitle is-3">{{pages[currentPage].text}}</h1>
|
||||||
<div class="is-relative is-flex is-justify-centered">
|
<div class="is-relative is-flex is-justify-centered">
|
||||||
<div
|
<div
|
||||||
class="stitch-preview-left"
|
class="stitch-preview-left is-relative"
|
||||||
v-if="currentPage != 0 && currentPage % 2 === 0 && book.ltr"
|
v-if="currentPage != 0 && currentPage % 2 === 0 && book.ltr"
|
||||||
:style="`width:${croppaWidth}px;height:${croppaHeight}px;`"
|
:style="`width:${croppaWidth}px;height:${croppaHeight}px;`"
|
||||||
>
|
>
|
||||||
|
@ -149,7 +149,7 @@
|
||||||
@loading-end="onCroppaImageLoaded()"
|
@loading-end="onCroppaImageLoaded()"
|
||||||
></croppa>
|
></croppa>
|
||||||
<div
|
<div
|
||||||
class="stitch-preview-right"
|
class="stitch-preview-right is-relative"
|
||||||
v-if="currentPage != 0 && currentPage % 2 === 0 && !book.ltr"
|
v-if="currentPage != 0 && currentPage % 2 === 0 && !book.ltr"
|
||||||
:style="`width:${croppaWidth}px;height:${croppaHeight}px;`"
|
:style="`width:${croppaWidth}px;height:${croppaHeight}px;`"
|
||||||
>
|
>
|
||||||
|
|
Reference in a new issue