From eda52fe5f0e3fbee734c111d6433c9680e5a7eb4 Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jviotti@openmailbox.org>
Date: Fri, 2 Sep 2016 12:28:59 -0400
Subject: [PATCH] refactor(GUI): move `alert-ribbon` to the top of the page
 (#679)

This component is visually shown on the top of the window, however its
HTML code is placed below the "Flash" button, which is
counter-intuitive.

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
---
 lib/gui/pages/main/templates/main.tpl.html | 34 +++++++++++++---------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/lib/gui/pages/main/templates/main.tpl.html b/lib/gui/pages/main/templates/main.tpl.html
index 53c87a81..f0d3cfa6 100644
--- a/lib/gui/pages/main/templates/main.tpl.html
+++ b/lib/gui/pages/main/templates/main.tpl.html
@@ -1,4 +1,25 @@
 <div class="page-main row around-xs">
+
+  <div class="alert-ribbon" ng-class="{
+    'alert-ribbon--open': !main.state.wasLastFlashSuccessful()
+  }">
+    <span class="glyphicon glyphicon-warning-sign"></span>
+    <span ng-show="main.state.getLastFlashErrorCode() === 'ENOSPC'">
+      Not enough space on the drive.<br>
+      Please insert larger one and
+      <button class="button button-link" ng-click="main.restartAfterFailure()">try again</button>
+    </span>
+    <span ng-show="main.state.getLastFlashErrorCode() !== 'ENOSPC' && main.settings.get('validateWriteOnSuccess')">
+      Your removable drive may be corrupted.
+      <br>Try inserting a different one and
+      <button class="button button-link" ng-click="main.restartAfterFailure()">press "retry"</button>
+    </span>
+    <span ng-show="main.state.getLastFlashErrorCode() !== 'ENOSPC' && !main.settings.get('validateWriteOnSuccess')">
+      Oops, seems something went wrong.
+      Click <button class="button button-link" ng-click="main.restartAfterFailure()">here</button> to retry
+    </span>
+  </div>
+
   <div class="col-xs" ng-controller="ImageSelectionController as image">
     <div class="box text-center" os-dropzone="image.selectImage($file)">
       <svg-icon class="center-block" path="{{ main.selection.getImageLogo() || '../../../assets/image.svg' }}"></svg-icon>
@@ -96,19 +117,6 @@
             <span ng-bind="flash.getProgressButtonLabel()"></span>
         </progress-button>
 
-        <div class="alert-ribbon" ng-class="{ 'alert-ribbon--open': !main.state.wasLastFlashSuccessful() }">
-          <span class="glyphicon glyphicon-warning-sign"></span>
-          <span ng-show="main.state.getLastFlashErrorCode() === 'ENOSPC'">
-            Not enough space on the drive.<br>Please insert larger one and <button class="button button-link" ng-click="main.restartAfterFailure()">try again</button>
-          </span>
-          <span ng-show="main.state.getLastFlashErrorCode() !== 'ENOSPC' && main.settings.get('validateWriteOnSuccess')">
-            Your removable drive may be corrupted.<br>Try inserting a different one and <button class="button button-link" ng-click="main.restartAfterFailure()">press "retry"</button>
-          </span>
-          <span ng-show="main.state.getLastFlashErrorCode() !== 'ENOSPC' && !main.settings.get('validateWriteOnSuccess')">
-            Oops, seems something went wrong. Click <button class="button button-link" ng-click="main.restartAfterFailure()">here</button> to retry
-          </span>
-        </div>
-
         <button class="button button-warning button-brick" ng-hide="main.state.wasLastFlashSuccessful()" ng-click="main.restartAfterFailure()">
           <span class="glyphicon glyphicon-repeat"></span> Retry
         </button>