diff --git a/src/styles/_imageview.scss b/src/styles/_imageview.scss index 459ed68..b376386 100644 --- a/src/styles/_imageview.scss +++ b/src/styles/_imageview.scss @@ -17,11 +17,11 @@ // ImageView -------------------------------------------------------------- // #image { position: absolute; - top: 30px; - right: 0; - bottom: 0; - left: 0; - transition: top .3s; + top: 60px; + right: 30px; + bottom: 30px; + left: 30px; + transition: top .3s, right .3s, bottom .3s, left .3s; will-change: transform; display: flex; @@ -31,10 +31,19 @@ animation-name: zoomIn; animation-duration: .3s; animation-timing-function: $timingBounce; + + @media (max-width: 640px) { + right: 20px; + bottom: 20px; + left: 20px; + } } &.full #image { top: 0; + right: 0; + bottom: 0; + left: 0; } #image > div { @@ -43,17 +52,12 @@ } #image img { - max-width: calc(100vw - 60px); - max-height: calc(100vh - 90px); + position: absolute; + max-width: 100%; + max-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); - transition: max-width .3s, max-height .3s; - } - - &.full #image img { - max-width: 100vw; - max-height: 100vh; } // Previous/Next Buttons -------------------------------------------------------------- // @@ -67,6 +71,10 @@ &--next { right: 0; } + @media (max-width: 640px) { + display: none; + } + a { position: fixed; top: 50%; diff --git a/src/styles/_mediaquery.scss b/src/styles/_mediaquery.scss deleted file mode 100644 index 365eccf..0000000 --- a/src/styles/_mediaquery.scss +++ /dev/null @@ -1,7 +0,0 @@ -@media only screen and (max-width: 640px) { - - #imageview .arrow_wrapper { - display: none !important; - } - -} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 250dca6..e4b9751 100755 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -77,5 +77,4 @@ input { @import 'sidebar'; @import 'loading'; @import 'message'; -@import 'multiselect'; -@import 'mediaquery'; \ No newline at end of file +@import 'multiselect'; \ No newline at end of file