From c5b444807b5734a2938f221984d4a1071ffcfbb3 Mon Sep 17 00:00:00 2001
From: Attila Tajti <attila.tajti@gmail.com>
Date: Mon, 24 Apr 2017 11:33:08 +0200
Subject: [PATCH] app/publisher: variable width images in UI

Change the css to allow variable width images, keep constant height only.

Use a fixed limit maxThumbWidthRatio to limit thumbnail image width
for panoramic images.

Fixes #902

Change-Id: I60c16c63b018680885c67f00b47e2e96c8dba47e
---
 app/publisher/js/file.go    | 4 ++--
 app/publisher/js/members.go | 9 +++++----
 app/publisher/pics.css      | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/publisher/js/file.go b/app/publisher/js/file.go
index a17ea8a83..e35d246b3 100644
--- a/app/publisher/js/file.go
+++ b/app/publisher/js/file.go
@@ -539,10 +539,10 @@ func (fit *fileItem) setThumb(fic *fileItemContainer) {
 		return
 	}
 	if fic.isTopNode {
-		fit.thumb = fmt.Sprintf("%s/h%s/=i/%s/?mw=%d&mh=%d", fic.basePath, fit.contentRef.DigestPrefix(10), url.QueryEscape(fit.fileName), fic.thumbHeight, fic.thumbHeight)
+		fit.thumb = fmt.Sprintf("%s/h%s/=i/%s/?mw=%d&mh=%d", fic.basePath, fit.contentRef.DigestPrefix(10), url.QueryEscape(fit.fileName), maxThumbWidthRatio*fic.thumbHeight, fic.thumbHeight)
 		return
 	}
-	fit.thumb = fmt.Sprintf("%s/h%s/h%s/=i/%s/?mw=%d&mh=%d", fic.basePath, fit.pn.DigestPrefix(10), fit.contentRef.DigestPrefix(10), url.QueryEscape(fit.fileName), fic.thumbHeight, fic.thumbHeight)
+	fit.thumb = fmt.Sprintf("%s/h%s/h%s/=i/%s/?mw=%d&mh=%d", fic.basePath, fit.pn.DigestPrefix(10), fit.contentRef.DigestPrefix(10), url.QueryEscape(fit.fileName), maxThumbWidthRatio*fic.thumbHeight, fic.thumbHeight)
 }
 
 func (fit *fileItem) setDownload(fic *fileItemContainer) {
diff --git a/app/publisher/js/members.go b/app/publisher/js/members.go
index 0af1487af..a656f10cb 100644
--- a/app/publisher/js/members.go
+++ b/app/publisher/js/members.go
@@ -35,9 +35,10 @@ import (
 const (
 	bicMembersList = "ul#members" // jquery matching convenience
 	// TODO(mpl): derive precisely how much blobItemHeight should be from thumbHeight + various margins in css
-	thumbnailHeight = 200
-	blobItemHeight  = 250 // thumbHeight + some slack
-	getMembersLimit = 50  // how many more items to fetch in search queries
+	thumbnailHeight    = 200
+	maxThumbWidthRatio = 3   // maximum thumb width is height*maxThumbWidthRatio
+	blobItemHeight     = 250 // thumbHeight + some slack
+	getMembersLimit    = 50  // how many more items to fetch in search queries
 )
 
 var theBic *blobItemContainer
@@ -391,7 +392,7 @@ func (bi *blobItem) thumbnail(pathPrefix, basePath string, thumbHeight int) stri
 	switch {
 	case bi.isImage:
 		// TODO(mpl): should we/can we prefetch the image?
-		bi.thumb = fmt.Sprintf("%s/h%s/h%s/=i/%s/?mw=%d&mh=%d", basePath, bi.pn.DigestPrefix(10), bi.contentRef.DigestPrefix(10), url.QueryEscape(bi.fileName), thumbHeight, thumbHeight)
+		bi.thumb = fmt.Sprintf("%s/h%s/h%s/=i/%s/?mw=%d&mh=%d", basePath, bi.pn.DigestPrefix(10), bi.contentRef.DigestPrefix(10), url.QueryEscape(bi.fileName), maxThumbWidthRatio*thumbHeight, thumbHeight)
 	case bi.isDir:
 		bi.thumb = fmt.Sprintf("%s=s/folder.png", pathPrefix)
 	case bi.fileName != "": // isFile, but not image
diff --git a/app/publisher/pics.css b/app/publisher/pics.css
index be091a752..c4014b131 100644
--- a/app/publisher/pics.css
+++ b/app/publisher/pics.css
@@ -65,7 +65,7 @@ li img {
 	border-radius: 6px;
 	display: block;
 	max-height: 200px;
-	max-width: 200px;
+	max-width: 600px;
 	margin-bottom: 1em;
 }
 li .camlifile {