nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix photos galley when too many thumbnails by adding a scroll-x

Browse source 
fixes #7942

closes #7943
This commit is contained in:
flaburgan 2018-12-05 00:10:11 +01:00 committed by Benjamin Neff
parent c8a1f308c6
commit 3f700c3960
No known key found for this signature in database
GPG key ID: 971464C3F1A90194
3 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Changelog.md
View file

@ -6,6 +6,7 @@
## Bug fixes ## Bug fixes
* Do not autofollow back a user you are ignoring [#7913](https://github.com/diaspora/diaspora/pull/7913) * Do not autofollow back a user you are ignoring [#7913](https://github.com/diaspora/diaspora/pull/7913)
* Fix photos gallery when too many thumbnails are shown [#7943](https://github.com/diaspora/diaspora/pull/7943)
## Features ## Features
* Suppoert ignore users on mobile [#7884](https://github.com/diaspora/diaspora/pull/7884) * Suppoert ignore users on mobile [#7884](https://github.com/diaspora/diaspora/pull/7884)

2
app/assets/javascripts/app/views/gallery_view.js
View file

@ -41,7 +41,7 @@ app.views.Gallery = app.views.Base.extend({
if (image.naturalHeight > window.innerHeight && image.naturalHeight > image.naturalWidth * 2) { if (image.naturalHeight > window.innerHeight && image.naturalHeight > image.naturalWidth * 2) {
image.classList.add("too-tall"); image.classList.add("too-tall");
} else { } else {
var margins = 95; // Margins are 80px for thumbnails height and 15px for top image margin var margins = 110; // Margins are 80px for thumbnails height and 15px for top image margin + scroll-x height
image.style = "max-height: " + (window.innerHeight - margins) + "px"; image.style = "max-height: " + (window.innerHeight - margins) + "px";
} }
} }

6
app/assets/stylesheets/gallery.scss
View file

@ -50,15 +50,17 @@ $margin: 15px;
.indicator { .indicator {
bottom: 0; bottom: 0;
overflow-x: auto;
white-space: nowrap;
li { li {
border: 0; border: 0;
border-radius: $thumbnail-size / 2; border-radius: $thumbnail-size / 2;
height: $thumbnail-size; height: $thumbnail-size;
margin: 6px; margin: $margin 6px;
margin-bottom: $margin;
vertical-align: middle; vertical-align: middle;
width: $thumbnail-size; width: $thumbnail-size;
background-size: cover;
&.active, &.active,
&:hover { &:hover {