From 323c1648ab5a97746c0df11f178d099b57b1e597 Mon Sep 17 00:00:00 2001
From: Alexandre Jarnoux <alex.jarnoux@gmail.com>
Date: Wed, 19 Oct 2016 17:12:09 +1100
Subject: [PATCH] [MNOE-153] Fix admin panel app selection on non-retina
 screens

---
 .../create-step-1/create-step-1.html          |  4 +-
 .../create-step-1/create-step-1.less          | 55 ++++++++++---------
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/frontend-admin/src/app/views/customers/create-step-1/create-step-1.html b/frontend-admin/src/app/views/customers/create-step-1/create-step-1.html
index 29ca06abf..35880bcc2 100644
--- a/frontend-admin/src/app/views/customers/create-step-1/create-step-1.html
+++ b/frontend-admin/src/app/views/customers/create-step-1/create-step-1.html
@@ -25,8 +25,8 @@ <h1>Create a new customer</h1>
             <input type="text" ng-model="vm.appSearch" placeholder="Search" class="form-control input-sm search-bar">
           </rd-widget-header>
           <rd-widget-body loading="!vm.marketplace">
-            <div class="row bs-row">
-              <div class="col-xs-6 col-sm-3 col-lg-2 app-icon" ng-repeat="app in vm.marketplace.apps | filter:{name: vm.appSearch}">
+            <div class="apps-container">
+              <div class="app-icon" ng-repeat="app in vm.marketplace.apps | filter:{name: vm.appSearch}">
                 <div class="app-icon-wrapper" ng-click="vm.toggleApp(app)">
                   <div class="checked" ng-show="app.checked">
                     <i class="fa fa-check fa-5x"></i>
diff --git a/frontend-admin/src/app/views/customers/create-step-1/create-step-1.less b/frontend-admin/src/app/views/customers/create-step-1/create-step-1.less
index 6adc1ecfd..ca87d955d 100644
--- a/frontend-admin/src/app/views/customers/create-step-1/create-step-1.less
+++ b/frontend-admin/src/app/views/customers/create-step-1/create-step-1.less
@@ -1,35 +1,40 @@
 #create-step-1 {
-  // 'checked' app in edit/add entity
-  .app-icon {
-    margin-bottom: 15px;
+  .apps-container {
+    display: flex;
+    flex-wrap: wrap;
 
-    .app-icon-wrapper {
-      position: relative;
+    .app-icon {
+      max-width: 120px;
+      margin: 10px;
 
-      .app-logo {
-        width: 100%;
-      }
+      .app-icon-wrapper {
+        position: relative;
+
+        .app-logo {
+          width: 100%;
+        }
 
-      .checked {
-        position: absolute;
-        border-radius: 6px;
-        background-color: rgba(47, 228, 50, 0.3);
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
+        .checked {
+          position: absolute;
+          border-radius: 6px;
+          background-color: rgba(47, 228, 50, 0.3);
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
 
-        // Center the tick
-        display: flex;
-        align-items: center;
-        justify-content: center;
+          // Center the tick
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
-    }
 
-    .app-title {
-      text-align: center;
-      margin-top: 5px;
-      .ellipsis;
+      .app-title {
+        text-align: center;
+        margin-top: 5px;
+        .ellipsis;
+      }
     }
   }
 }