commit: 3d013630aee48863cda5ece9ddf9a291703eb1af
parent 589ab6510c1effc909ee9f6b64cd7791d3f55ee7
Author: Shpuld Shpludson <shp@cock.li>
Date: Mon, 22 Feb 2021 15:14:23 +0000
Merge branch 'fix/scroll-lock-jumpiness' into 'develop'
Fix some UI jumpiness on scroll lock
See merge request pleroma/pleroma-fe!1343
Diffstat:
3 files changed, 17 insertions(+), 0 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Fixed
- Button to remove uploaded media in post status form is now properly placed and sized.
- Fixed shoutbox not working in mobile layout
+- Fixed some UI jumpiness when opening images particularly in chat view
### Changed
- Display 'people voted' instead of 'votes' for multi-choice polls
diff --git a/src/App.scss b/src/App.scss
@@ -586,6 +586,7 @@ nav {
color: var(--faint, $fallback--faint);
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
box-shadow: var(--topBarShadow);
+ box-sizing: border-box;
}
.fade-enter-active, .fade-leave-active {
@@ -878,6 +879,11 @@ nav {
overflow: hidden;
height: 100%;
+ // Get rid of scrollbar on body as scrolling happens on different element
+ body {
+ overflow: hidden;
+ }
+
// Ensures the fixed position of the mobile browser bars on scroll up / down events.
// Prevents the mobile browser bars from overlapping or hiding the message posting form.
@media all and (max-width: 800px) {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
@@ -73,11 +73,21 @@
}
}
+@keyframes media-fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
.modal-image {
max-width: 90%;
max-height: 90%;
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
image-orientation: from-image; // NOTE: only FF supports this
+ animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
}
.modal-view-button-arrow {
