[RFC] Improved media modal (#5956)
* Improved media modal ImageLoader: Impliment pinch zoom by CSS `transform: scale(X)` ImageLoader: Impliment panning by CSS `overflow: scroll` ImageLoader: Larger image MediaModal: Larger close button MediaModal: Close the modal by swiping vertically MediaModal: Show/hide close button and right/left navigation on tapping image MediaModal: Change the `pointer-event` CSS prpp to get more blank space to close the modal ImageLoader: Zoom/reset zoom on double tap MediaModal: disable vertical swiping while horizontally swiped ImageLoader: prevent propagating touchmove event to MediaModal MediaModal: Adjust size and potision of buttons ImageLoader: Adjust scroll potision on pinch zoom * Remove "swipe to close" and "double tap to zoom" features * remove unused prop and functions removed `onScroll` prop and `handleScroll` func in ImageLoader * separate zoom functionary to ZoomableImage component adjust styling of ImageLoader add styling for ZoomableImage * adjust size and potision of close button of media modal * Fix for gif video add `onClick` prop to ExtendedVideoPlayer specify `onClick` prop to video tag for switching nav of `MediaModal` add `.video-modal` class to scss to separate styling for `VideoModal` * fix styling for centering specify height of `ZoomableImage` by pixel clean styling for `ImageLoader` * fix lint errors * small fix * fixed designated parts
This commit is contained in:
Yuto Tokunaga
Eugen Rochko
parent
ef44c62d17
commit
4e929b2d17
6 changed files with 330 additions and 93 deletions
|
|
@ -1433,36 +1433,29 @@
|
|||
|
||||
.image-loader {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&.image-loader--loading {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
|
||||
.image-loader__preview-canvas {
|
||||
filter: blur(2px);
|
||||
}
|
||||
}
|
||||
|
||||
.image-loader__img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background-image: none;
|
||||
&.image-loader--amorphous .image-loader__preview-canvas {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.image-loader--amorphous {
|
||||
position: static;
|
||||
|
||||
.image-loader__preview-canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-loader__img {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.zoomable-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
|
|
@ -2799,29 +2792,6 @@ a.status-card {
|
|||
}
|
||||
}
|
||||
|
||||
.modal-container__nav {
|
||||
align-items: center;
|
||||
background: rgba($base-overlay-background, 0.5);
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
color: $primary-text-color;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 24px;
|
||||
height: 100%;
|
||||
padding: 30px 15px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.modal-container__nav--left {
|
||||
left: -61px;
|
||||
}
|
||||
|
||||
.modal-container__nav--right {
|
||||
right: -61px;
|
||||
}
|
||||
|
||||
.account--follows-info {
|
||||
color: $primary-text-color;
|
||||
position: absolute;
|
||||
|
|
@ -3418,29 +3388,27 @@ a.status-card {
|
|||
z-index: 9999;
|
||||
}
|
||||
|
||||
.video-modal {
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media-modal {
|
||||
max-width: 80vw;
|
||||
max-height: 80vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.extended-video-player,
|
||||
img,
|
||||
canvas,
|
||||
video {
|
||||
max-width: 80vw;
|
||||
max-height: 80vh;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.extended-video-player,
|
||||
video {
|
||||
display: flex;
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
img,
|
||||
canvas {
|
||||
display: block;
|
||||
|
|
@ -3449,12 +3417,65 @@ a.status-card {
|
|||
}
|
||||
|
||||
.react-swipeable-view-container {
|
||||
max-width: 80vw;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal__content {
|
||||
background: $base-overlay-background;
|
||||
.media-modal__closer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.media-modal__navigation {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s linear;
|
||||
will-change: opacity;
|
||||
|
||||
* {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&.media-modal__navigation--hidden {
|
||||
opacity: 0;
|
||||
|
||||
* {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal__nav {
|
||||
background: rgba($base-overlay-background, 0.5);
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
color: $primary-text-color;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
height: 20vmax;
|
||||
margin: auto 0;
|
||||
padding: 30px 15px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.media-modal__nav--left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.media-modal__nav--right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.media-modal__pagination {
|
||||
|
|
@ -3462,7 +3483,8 @@ a.status-card {
|
|||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -40px;
|
||||
bottom: 20px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.media-modal__page-dot {
|
||||
|
|
@ -3486,8 +3508,8 @@ a.status-card {
|
|||
|
||||
.media-modal__close {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue