From 98e33b77808e3d28a4c5e74c13c1338364bc78cd Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@getredash.com>
Date: Sun, 1 Sep 2019 16:59:11 +0300
Subject: [PATCH] Fix widget bottom element alignment (#4110)

---
 client/app/components/dashboards/widget.html  | 32 +++++----
 client/app/components/dashboards/widget.less  | 20 ++++--
 .../queries/visualization-embed.html          | 65 +++++++++----------
 3 files changed, 65 insertions(+), 52 deletions(-)

diff --git a/client/app/components/dashboards/widget.html b/client/app/components/dashboards/widget.html
index 5154b4a308..987909589e 100644
--- a/client/app/components/dashboards/widget.html
+++ b/client/app/components/dashboards/widget.html
@@ -64,22 +64,26 @@
       </div>
     </div>
 
-    <div class="body-row clearfix tile__bottom-control">
-      <a class="refresh-button hidden-print btn btn-sm btn-default btn-transparent" ng-click="$ctrl.refresh(1)" ng-if="!$ctrl.public && !!$ctrl.widget.getQueryResult()" data-test="RefreshButton">
-        <i class="zmdi zmdi-refresh" ng-class="{ 'zmdi-hc-spin': $ctrl.refreshClickButtonId === 1}"></i>
-        <span am-time-ago="$ctrl.widget.getQueryResult().getUpdatedAt()"></span>
-      </a>
-      <span class="small hidden-print" ng-if="$ctrl.public">
-        <i class="zmdi zmdi-time-restore"></i> <span am-time-ago="$ctrl.widget.getQueryResult().getUpdatedAt()"></span>
-      </span>
-      <span class="visible-print">
-        <i class="zmdi zmdi-time-restore"></i> {{$ctrl.widget.getQueryResult().getUpdatedAt() | dateTime}}
+    <div class="body-row tile__bottom-control">
+      <span>
+        <a class="refresh-button hidden-print btn btn-sm btn-default btn-transparent" ng-click="$ctrl.refresh(1)" ng-if="!$ctrl.public && !!$ctrl.widget.getQueryResult()" data-test="RefreshButton">
+          <i class="zmdi zmdi-refresh" ng-class="{ 'zmdi-hc-spin': $ctrl.refreshClickButtonId === 1}"></i>
+          <span am-time-ago="$ctrl.widget.getQueryResult().getUpdatedAt()"></span>
+        </a>
+        <span class="small hidden-print" ng-if="$ctrl.public">
+          <i class="zmdi zmdi-time-restore"></i> <span am-time-ago="$ctrl.widget.getQueryResult().getUpdatedAt()"></span>
+        </span>
+        <span class="visible-print">
+          <i class="zmdi zmdi-time-restore"></i> {{$ctrl.widget.getQueryResult().getUpdatedAt() | dateTime}}
+        </span>
       </span>
 
-      <button class="btn btn-sm btn-default pull-right hidden-print btn-transparent btn__refresh" ng-click="$ctrl.refresh(2)" ng-if="!$ctrl.public">
-        <i class="zmdi zmdi-refresh" ng-class="{ 'zmdi-hc-spin': $ctrl.refreshClickButtonId === 2}"></i>
-      </button>
-      <button class="btn btn-sm btn-default pull-right hidden-print btn-transparent btn__refresh" ng-click="$ctrl.expandVisualization()"><i class="zmdi zmdi-fullscreen"></i></button>
+      <span>
+        <button class="btn btn-sm btn-default hidden-print btn-transparent btn__refresh" ng-click="$ctrl.expandVisualization()"><i class="zmdi zmdi-fullscreen"></i></button>
+        <button class="btn btn-sm btn-default hidden-print btn-transparent btn__refresh" ng-click="$ctrl.refresh(2)" ng-if="!$ctrl.public">
+          <i class="zmdi zmdi-refresh" ng-class="{ 'zmdi-hc-spin': $ctrl.refreshClickButtonId === 2}"></i>
+        </button>
+      </span>
     </div>
   </div>
 
diff --git a/client/app/components/dashboards/widget.less b/client/app/components/dashboards/widget.less
index 9bff185bb2..d3e04b7520 100644
--- a/client/app/components/dashboards/widget.less
+++ b/client/app/components/dashboards/widget.less
@@ -200,10 +200,6 @@ visualization-name {
   }
 }
 
-.refresh-button {
-  margin-left: -6px;
-}
-
 .tile {
   .widget-menu-regular, .btn__refresh {
     opacity: 0 !important;
@@ -249,7 +245,21 @@ visualization-name {
 
   .tile__bottom-control {
     padding: 10px 15px;
-    line-height: 2;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .btn-transparent {
+      &:first-child {
+        margin-left: -10px;
+      }
+
+      &:last-child {
+        margin-right: -10px;
+      }
+    }
+
+
 
     a {
       color: fade(@redash-black, 65%);
diff --git a/client/app/components/queries/visualization-embed.html b/client/app/components/queries/visualization-embed.html
index 4a33cdc65f..df8fb8c8c3 100644
--- a/client/app/components/queries/visualization-embed.html
+++ b/client/app/components/queries/visualization-embed.html
@@ -24,40 +24,39 @@ <h3>
     </visualization-renderer>
   </div>
 
-  <div class="clearfix tile__bottom-control">
-    <div class="row">
-      <div class="col-xs-6">
-        <a class="small hidden-print" ng-click="$ctrl.refreshQueryResults()">
-          <i ng-class='{"zmdi-hc-spin": $ctrl.loading}' class="zmdi zmdi-refresh"></i>
-          <span am-time-ago="$ctrl.queryResult.getUpdatedAt()" ng-if="!$ctrl.loading"></span>
-          <rd-timer from="$ctrl.refreshStartedAt" ng-if="$ctrl.loading"></rd-timer>
-        </a>
-        <span class="small visible-print"><i class="zmdi zmdi-time-restore"></i> {{$ctrl.queryResult.getUpdatedAt() | dateTime}} UTC</span>
-      </div>
-      <div class="col-xs-6 text-right hidden-print" ng-if="!$ctrl.hideQueryLink">
-        <a class="btn btn-default btn-sm" ng-href="{{$ctrl.query.getUrl()}}" target="_blank" tooltip="Open in Redash">
-          <span class="zmdi zmdi-link"></span>
-        </a>
+  <div class="tile__bottom-control">
+    <span>
+      <a class="small hidden-print" ng-click="$ctrl.refreshQueryResults()">
+        <i ng-class='{"zmdi-hc-spin": $ctrl.loading}' class="zmdi zmdi-refresh"></i>
+        <span am-time-ago="$ctrl.queryResult.getUpdatedAt()" ng-if="!$ctrl.loading"></span>
+        <rd-timer from="$ctrl.refreshStartedAt" ng-if="$ctrl.loading"></rd-timer>
+      </a>
+      <span class="small visible-print"><i class="zmdi zmdi-time-restore"></i> {{$ctrl.queryResult.getUpdatedAt() | dateTime}} UTC</span>
+    </span>
+
+    <span class="hidden-print" ng-if="!$ctrl.hideQueryLink">
+      <a class="btn btn-default btn-sm" ng-href="{{$ctrl.query.getUrl()}}" target="_blank" tooltip="Open in Redash">
+        <span class="zmdi zmdi-link"></span>
+      </a>
 
-        <div class="btn-group dropup" uib-dropdown ng-if="!$ctrl.query.hasParameters()">
-          <button type="button" class="btn btn-default btn-sm dropdown-toggle" aria-haspopup="true" uib-dropdown-toggle
-                  aria-expanded="false">
-            Download Dataset <span class="caret"></span>
-          </button>
-          <ul class="dropdown-menu pull-right" uib-dropdown-menu>
-            <li>
-              <a ng-href="{{$ctrl.queryResult.getLink($ctrl.query.id, 'csv', $ctrl.apiKey)}}" download="{{$ctrl.queryResult.getName($ctrl.query.name, 'csv')}}" target="_self">
-                <span class="fa fa-file-o"></span> Download as CSV File
-              </a>
-            </li>
-            <li>
-              <a ng-href="{{$ctrl.queryResult.getLink($ctrl.query.id, 'xlsx', $ctrl.apiKey)}}" download="{{$ctrl.queryResult.getName($ctrl.query.name, 'xlsx')}}"  target="_self">
-                <span class="fa fa-file-excel-o"></span> Download as Excel File
-              </a>
-            </li>
-          </ul>
-        </div>
+      <div class="btn-group dropup" uib-dropdown ng-if="!$ctrl.query.hasParameters()">
+        <button type="button" class="btn btn-default btn-sm dropdown-toggle" aria-haspopup="true" uib-dropdown-toggle
+                aria-expanded="false">
+          Download Dataset <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu pull-right" uib-dropdown-menu>
+          <li>
+            <a ng-href="{{$ctrl.queryResult.getLink($ctrl.query.id, 'csv', $ctrl.apiKey)}}" download="{{$ctrl.queryResult.getName($ctrl.query.name, 'csv')}}" target="_self">
+              <span class="fa fa-file-o"></span> Download as CSV File
+            </a>
+          </li>
+          <li>
+            <a ng-href="{{$ctrl.queryResult.getLink($ctrl.query.id, 'xlsx', $ctrl.apiKey)}}" download="{{$ctrl.queryResult.getName($ctrl.query.name, 'xlsx')}}"  target="_self">
+              <span class="fa fa-file-excel-o"></span> Download as Excel File
+            </a>
+          </li>
+        </ul>
       </div>
-    </div>
+    </span>
   </div>
 </div>