From fe60d7abbc4f6754426c0aac007118f01738d678 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 14 Sep 2017 10:25:34 -0700
Subject: [PATCH 1/2] [Front-end] Fix CSS targeting

Fixes #1704
Pause/play and New Tab buttons now
display properly;
---
 platform/commonUI/general/res/sass/user-environ/_frame.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index 37dad0d21d..e05f30177e 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -142,7 +142,7 @@
 body.desktop .frame {
     // Hide local controls initially and show it them on hover when they're in an element that's in a frame context
     // Frame template is used because we need to target the lowest nested frame
-    .right {
+    .object-browse-bar .btn-bar {
         opacity: 0;
         pointer-events: none;
     }
@@ -150,7 +150,7 @@ body.desktop .frame {
     // Target the first descendant so that we only show the elements in the outermost container.
     // Handles the case where we have layouts in layouts.
     &:hover > .object-browse-bar {
-        .right {
+        .btn-bar {
             opacity: 1;
             pointer-events: inherit;
         }

From 42ddb38629cc172528d2f5f3866fd8b9012732c5 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 14 Sep 2017 10:37:41 -0700
Subject: [PATCH 2/2] [Front-end] Cleanups to imagery in frame

Fixes #1704
Imagery now lays out better when very small
in a Layout; refactored .left and .right classes;
---
 .../commonUI/general/res/sass/features/_imagery.scss     | 9 ++++++---
 platform/features/imagery/res/templates/imagery.html     | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss
index 945c99cb96..90198aae94 100644
--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/platform/commonUI/general/res/sass/features/_imagery.scss
@@ -44,14 +44,16 @@
 .l-image-main-controlbar {
 	font-size: 0.8em;
 	line-height: inherit;
-	.left, .right {
+	.l-datetime-w, .l-controls-w {
 		direction: rtl;
 		overflow: hidden;
 	}
-	.left {
+	.l-datetime-w {
+        @include ellipsize();
+        margin-right: $interiorMarginSm;
 		text-align: left;
 	}
-	.right {
+	.l-controls-w {
 		z-index: 2;
 	}
 	.l-date,
@@ -138,6 +140,7 @@
 /*************************************** LOCAL CONTROLS */
 .l-local-controls {
     max-width: 200px;
+    min-width: 100px;
     width: 35%;
     input[type="range"] {
         display: block;
diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html
index e67cf5ae16..8dfb4964b4 100644
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/platform/features/imagery/res/templates/imagery.html
@@ -33,12 +33,12 @@
         </div>
 
         <div class="l-image-main-controlbar flex-elem l-flex-row">
-            <div class="left flex-elem grows">
+            <div class="l-datetime-w flex-elem grows">
                 <a class="s-button show-thumbs sm hidden icon-thumbs-strip"
                     ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
                 <span class="l-time">{{imagery.getTime()}}</span>
             </div>
-            <div class="right flex-elem">
+            <div class="l-controls-w flex-elem">
                 <a class="s-button pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
                     ng-class="{ paused: imagery.paused() }"></a>