Unverified Commit e33466de authored by flaburgan's avatar flaburgan Committed by Dennis Schubert

Display raw images in gallery

closes #7890
parent cab0e010
......@@ -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)
......
......@@ -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";
}
}
};
}
});
$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;
}
}
}
......
......@@ -19,7 +19,7 @@
</div>
{{/if}}
<a href="{{sizes.large}}" class="thumbnail img-thumbnail photo-link gallery-picture">
<a href="{{sizes.raw}}" class="thumbnail img-thumbnail photo-link gallery-picture">
<img src="{{sizes.large}}" class="photo big-photo">
</a>
......
......@@ -25,13 +25,13 @@
{{#if largePhoto}}
<div class="photo-attachments nsfw-hidden">
{{#with largePhoto}}
<a href="{{sizes.large}}" class="stream-photo-link gallery-picture">
<a href="{{sizes.raw}}" class="stream-photo-link gallery-picture">
<img src="{{sizes.large}}" class="stream-photo big_stream_photo">
</a>
{{/with}}
{{#each smallPhotos}}
<a href="{{sizes.large}}" class="stream-photo-link gallery-picture">
<a href="{{sizes.raw}}" class="stream-photo-link gallery-picture">
<img src="{{sizes.small}}" class="stream-photo thumb_small">
</a>
{{/each}}
......
......@@ -20,7 +20,8 @@ class Photo < ApplicationRecord
{
small: photo.url(:thumb_small),
medium: photo.url(:thumb_medium),
large: photo.url(:scaled_full)
large: photo.url(:scaled_full),
raw: photo.url
}
}, :as => :sizes
t.add lambda { |photo|
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment