From c8e90b4abd7e4ed5734679e5dff3f91671e1a7c1 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Wed, 31 May 2017 09:40:22 -0400
Subject: [PATCH] (css) Improve sgImageGallery for small devices

Also include md-truncate directive from ng-material.
---
 .../js/Mailer/sgImageGallery.service.js          | 16 +++++++---------
 .../components/imagegallery/imagegallery.scss    |  4 ++--
 .../scss/components/truncate/_extends.scss       |  2 ++
 .../scss/components/truncate/truncate.scss       |  1 +
 UI/WebServerResources/scss/styles.scss           |  1 +
 5 files changed, 13 insertions(+), 11 deletions(-)
 create mode 100644 UI/WebServerResources/scss/components/truncate/_extends.scss
 create mode 100644 UI/WebServerResources/scss/components/truncate/truncate.scss

diff --git a/UI/WebServerResources/js/Mailer/sgImageGallery.service.js b/UI/WebServerResources/js/Mailer/sgImageGallery.service.js
index 331d1fd44..b972cb675 100644
--- a/UI/WebServerResources/js/Mailer/sgImageGallery.service.js
+++ b/UI/WebServerResources/js/Mailer/sgImageGallery.service.js
@@ -119,15 +119,13 @@
       template: [
         '<sg-image-gallery layout="column">',
         '  <div class="md-toolbar-tools" layout="row" layout-align="space-between center">',
-        '    <div>',
-        '      <md-button class="md-icon-button"',
-        '                  aria-label="' + l('Close') + '"',
-        '                  ng-click="$panelCtrl.close()">',
-        '        <md-icon>arrow_back</md-icon>',
-        '      </md-button>',
-        '      <md-icon class="md-primary">image</md-icon>',
-        '      <span ng-bind="$panelCtrl.selectedImage.filename"></span>',
-        '    </div>',
+        '    <md-button class="md-icon-button"',
+        '                aria-label="' + l('Close') + '"',
+        '                ng-click="$panelCtrl.close()">',
+        '      <md-icon>arrow_back</md-icon>',
+        '    </md-button>',
+        '    <md-icon class="md-primary">image</md-icon>',
+        '    <div md-truncate class="md-flex" ng-bind="$panelCtrl.selectedImage.filename"></div>',
         '    <md-button class="md-icon-button"',
         '                aria-label="' + l('Save Attachment') + '"',
         '                ng-href="{{$panelCtrl.selectedImage.urlAsAttachment}}">',
diff --git a/UI/WebServerResources/scss/components/imagegallery/imagegallery.scss b/UI/WebServerResources/scss/components/imagegallery/imagegallery.scss
index 0f92e9000..cea80db42 100644
--- a/UI/WebServerResources/scss/components/imagegallery/imagegallery.scss
+++ b/UI/WebServerResources/scss/components/imagegallery/imagegallery.scss
@@ -21,8 +21,8 @@ sg-image-gallery {
     cursor: pointer;
   }
   .sg-image {
-    max-height: 80vh;
-    max-width: 90vh;
+    max-height: 75vh;
+    max-width: 75vw;
   }
   .sg-image-thumbnails {
     align-self: center;
diff --git a/UI/WebServerResources/scss/components/truncate/_extends.scss b/UI/WebServerResources/scss/components/truncate/_extends.scss
new file mode 100644
index 000000000..a189ef83d
--- /dev/null
+++ b/UI/WebServerResources/scss/components/truncate/_extends.scss
@@ -0,0 +1,2 @@
+/*! toast/_extends.scss - */
+@import '../../../angular-material/src/components/truncate/truncate.scss';
diff --git a/UI/WebServerResources/scss/components/truncate/truncate.scss b/UI/WebServerResources/scss/components/truncate/truncate.scss
new file mode 100644
index 000000000..5f2a75b45
--- /dev/null
+++ b/UI/WebServerResources/scss/components/truncate/truncate.scss
@@ -0,0 +1 @@
+@import 'extends';
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index 87992865f..2fe8d39d9 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -60,6 +60,7 @@
 @import 'components/toast/toast';
 @import 'components/toolbar/toolbar';
 @import 'components/tooltip/tooltip';
+@import 'components/truncate/truncate';
 @import 'components/virtualRepeat/virtual-repeat';
 @import 'components/whiteframe/whiteframe';