diff --git a/Changelog.md b/Changelog.md
index 0024688c6..1acd2cdb8 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -5,6 +5,7 @@
* Improve `web+diaspora://` handler description [#7909](https://github.com/diaspora/diaspora/pull/7909)
* Move comment timestamp next to author name [#7905](https://github.com/diaspora/diaspora/pull/7905)
* Sharpen small and medium thumbnails [#7924](https://github.com/diaspora/diaspora/pull/7924)
+* Show full-res image in Desktop's full-screen image view [#7890](https://github.com/diaspora/diaspora/pull/7890)
## Bug fixes
* Ignore invalid URLs for camo [#7922](https://github.com/diaspora/diaspora/pull/7922)
diff --git a/app/assets/javascripts/app/views/gallery_view.js b/app/assets/javascripts/app/views/gallery_view.js
index 6af577419..73a8a70c1 100644
--- a/app/assets/javascripts/app/views/gallery_view.js
+++ b/app/assets/javascripts/app/views/gallery_view.js
@@ -31,12 +31,20 @@ app.views.Gallery = app.views.Base.extend({
return {
index: link,
event: event,
- hidePageScrollbars: false,
- disableScroll: true,
continuous: true,
toggleControlsOnReturn: false,
onopened: this.preventHideControls,
- slideshowInterval: 2000
+ slideshowInterval: 2000,
+ onslidecomplete: function(index, slide) {
+ // If the image is very tall (more than twice its width), then it is scrollable instead of resized
+ var image = slide.firstElementChild;
+ if (image.naturalHeight > window.innerHeight && image.naturalHeight > image.naturalWidth * 2) {
+ image.classList.add("too-tall");
+ } else {
+ var margins = 95; // Margins are 80px for thumbnails height and 15px for top image margin
+ image.style = "max-height: " + (window.innerHeight - margins) + "px";
+ }
+ }
};
}
});
diff --git a/app/assets/stylesheets/gallery.scss b/app/assets/stylesheets/gallery.scss
index 3cfcb2d2b..3966bea20 100644
--- a/app/assets/stylesheets/gallery.scss
+++ b/app/assets/stylesheets/gallery.scss
@@ -1,12 +1,24 @@
-$thumbnail-size: 12px;
-$thumbnail-margin: 2px;
-$thumbnail-active-size: $thumbnail-size + $thumbnail-margin;
+$thumbnail-size: 50px;
+$margin: 15px;
#blueimp-gallery {
.slides {
- height: calc(100% - 40px);
- padding: 20px 0 0 0;
margin: 0;
+
+ .slide {
+ overflow-y: auto;
+ }
+
+ .slide-content {
+ bottom: $margin * 2 + $thumbnail-size;
+ top: $margin;
+ }
+
+ .too-tall {
+ margin-bottom: $margin * 2 + $thumbnail-size;
+ max-height: none;
+ position: static;
+ }
}
[class^="entypo-"], [class*="entypo-"] {
@@ -37,24 +49,28 @@ $thumbnail-active-size: $thumbnail-size + $thumbnail-margin;
}
.indicator {
- margin: 8px 0;
- position: unset;
- height: $thumbnail-size + 5px;
+ bottom: 0;
+
li {
- border: none;
- margin: $thumbnail-margin;
+ border: 0;
+ border-radius: $thumbnail-size / 2;
+ height: $thumbnail-size;
+ margin: 6px;
+ margin-bottom: $margin;
vertical-align: middle;
width: $thumbnail-size;
- height: $thumbnail-size;
- border-radius: $thumbnail-size / 2;
- &.active, &:hover{
- margin: $thumbnail-margin / 2;
- width: $thumbnail-active-size;
- height: $thumbnail-active-size;
- border-radius: $thumbnail-active-size / 2;
- transition: linear 0.2s;
- transition-property: height, width, margin;
+ &.active,
+ &:hover {
+ opacity: 1;
+ }
+
+ &:hover::after {
+ opacity: 0; // We don't want another thumbnail
+ }
+
+ &:only-child {
+ display: none;
}
}
}
diff --git a/app/assets/templates/photo_tpl.jst.hbs b/app/assets/templates/photo_tpl.jst.hbs
index 683aa3de2..388ddaf0b 100644
--- a/app/assets/templates/photo_tpl.jst.hbs
+++ b/app/assets/templates/photo_tpl.jst.hbs
@@ -19,7 +19,7 @@
{{/if}}
-
+
diff --git a/app/assets/templates/status-message_tpl.jst.hbs b/app/assets/templates/status-message_tpl.jst.hbs
index 6ca21236e..b97035df9 100644
--- a/app/assets/templates/status-message_tpl.jst.hbs
+++ b/app/assets/templates/status-message_tpl.jst.hbs
@@ -25,13 +25,13 @@
{{#if largePhoto}}