From 9602a52801cca01d2e64058f6d4be330d5f75c42 Mon Sep 17 00:00:00 2001
From: Simon Busborg <simon@umbraco.com>
Date: Wed, 22 Jun 2016 13:52:49 +0200
Subject: [PATCH] added better utility for flexbox and changed classes in views

---
 .../src/less/utilities/umb-utility_flex.less  | 55 +++++++++++++------
 .../less/utilities/umb-utility_widths.less    | 23 ++++++++
 .../views/packager/views/install-local.html   |  4 +-
 .../src/views/packager/views/installed.html   |  4 +-
 .../src/views/packager/views/repo.html        | 10 ++--
 5 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less
index 747b4047d0..73f58dde8d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less
+++ b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less
@@ -1,20 +1,39 @@
-// Flex
-.flex {
-    display: flex;
+.flex { display: flex }
+.flex-inline { display: flex-inline }
+
+.flex-column  { flex-direction: column; }
+.flex-wrap    { flex-wrap: wrap; }
+
+.items-start    { align-items: flex-start; }
+.items-end      { align-items: flex-end; }
+.items-center   { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch  { align-items: stretch; }
+
+.self-start    { align-self: flex-start; }
+.self-end      { align-self: flex-end; }
+.self-center   { align-self: center; }
+.self-baseline { align-self: baseline; }
+.self-stretch  { align-self: stretch; }
+
+.justify-start   { justify-content: flex-start; }
+.justify-end     { justify-content: flex-end; }
+.justify-center  { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around  { justify-content: space-around; }
+
+.content-start   { align-content: flex-start; }
+.content-end     { align-content: flex-end; }
+.content-center  { align-content: center; }
+.content-between { align-content: space-between; }
+.content-around  { align-content: space-around; }
+.content-stretch { align-content: stretch; }
+
+/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
+.flex-auto {
+  flex: 1 1 auto;
+  min-width: 0; /* 1 */
+  min-height: 0; /* 1 */
 }
 
-.flex-inline {
-    display: inline-flex;
-}
-
-.flex-direction-column {
-    flex-direction: column;
-}
-
-.flex-justify-center {
-    justify-content: center;
-}
-
-.flex-align-center {
-    align-items: center;
-}
+.flex-none { flex: none; }
diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less
index 99ae7da380..c9fbba3798 100644
--- a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less
+++ b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less
@@ -1,4 +1,27 @@
 // Widths
+.width-1  { width: calc(1/12 * 100%); }
+.width-2  { width: calc(2/12 * 100%); }
+.width-3  { width: calc(3/12 * 100%); }
+.width-4  { width: calc(4/12 * 100%); }
+.width-5  { width: calc(5/12 * 100%); }
+.width-6  { width: calc(6/12 * 100%); }
+.width-7  { width: calc(7/12 * 100%); }
+.width-8  { width: calc(8/12 * 100%); }
+.width-9  { width: calc(9/12 * 100%); }
+.width-10 { width: calc(10/12 * 100%); }
+.width-11 { width: calc(11/12 * 100%); }
+.width-12 { width: 100%; }
+
 .width-100 {
     width: 100%;
 }
+
+.width {
+    float: left;
+    box-sizing: border-box;
+}
+
+.width-right {
+    float: right;
+    box-sizing: border-box;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html
index 25901d5e75..64e37713e9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html
@@ -82,7 +82,7 @@
                         <small ng-bind-html-unsafe="vm.localPackage.readMe"></small>
                     </div>
 
-                    <div class="umb-info-local-item mt-3 flex flex-align-center flex-direction-column" ng-if="vm.installState.status == '' && vm.localPackage.isCompatible">
+                    <div class="umb-info-local-item mt-3 flex items-center flex-column" ng-if="vm.installState.status == '' && vm.localPackage.isCompatible">
                         <label for="license-accepts" class="umb-package-installer-label">
                             <input type="checkbox" id="license-accepts" ng-model="vm.localPackage.packageLicenseAccept" required no-dirty-check>
                             <strong class="label-text">I accept <a href="{{ vm.localPackage.licenseUrl }}">terms of use</a></strong>
@@ -90,7 +90,7 @@
                         <button type="button"
                                 ng-class="{'-inactive' : localPackageForm.$invalid}"
                                 ng-disabled="localPackageForm.$invalid"
-                                class="umb-era-button -blue inline-flex mt-2"
+                                class="umb-era-button -blue flex-inline mt-2"
                                 ng-click="vm.installPackage()">
                                 Install package
                         </button>
diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html
index 307b6fdb02..25cf187e67 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html
@@ -74,7 +74,7 @@
                             <small> {{ vm.package.readme }} </small>
                         </div>
 
-                        <div class="umb-info-local-item mt-3 flex flex-align-center flex-direction-column" ng-if="vm.installState.status == ''">
+                        <div class="umb-info-local-item mt-3 flex items-center flex-column" ng-if="vm.installState.status == ''">
                             <label for="confirm-uninstall" class="umb-package-installer-label">
                                 <input type="checkbox" id="confirm-uninstall" ng-model="vm.package.confirmUninstall" required no-dirty-check>
                                 <strong class="label-text">Confirm package uninstall</strong>
@@ -82,7 +82,7 @@
                             <button type="button"
                                     ng-class="{'-inactive' : uninstallForm.$invalid}"
                                     ng-disabled="uninstallForm.$invalid"
-                                    class="umb-era-button -blue inline-flex mt-2"
+                                    class="umb-era-button -blue flex-inline mt-2"
                                     ng-click="vm.uninstallPackage(vm.package)">
                                 Uninstall package
                             </button>
diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
index 00f301f5d0..813babd460 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
@@ -98,11 +98,13 @@
 
             </div>
 
-
-            <div class="umb-package-section__no-results tc" ng-if="vm.packages.length === 0">
+            <!-- Empty state -->
+            <div class="umb-package-section__no-results tc" ng-if="vm.packages.length === 0 && vm.loading === false && vm.searchQuery !== ''">
                 <h4><strong>We couldn't find anything for '{{ vm.searchQuery }}'</strong></h4>
                 <p class="faded">Please try searching for another package or browse through the categories.</p>
             </div>
+
+
         </div>
 
     </div>
@@ -285,7 +287,7 @@
                         <small  ng-bind-html-unsafe="vm.localPackage.readMe"></small>
                     </div>
 
-                    <div class="umb-info-local-item mt-3 flex flex-align-center flex-direction-column" ng-if="vm.installState.status == '' && vm.localPackage.isCompatible">
+                    <div class="umb-info-local-item mt-3 flex items-center flex-column" ng-if="vm.installState.status == '' && vm.localPackage.isCompatible">
                         <label for="license-accept" class="umb-package-installer-label">
                             <input type="checkbox" id="license-accept" ng-model="vm.localPackage.packageLicenseAccept" required no-dirty-check>
                             <strong class="label-text">I accept <a href="{{ vm.localPackage.licenseUrl }}">terms of use</a></strong>
@@ -293,7 +295,7 @@
                         <button type="button"
                                 ng-class="{'-inactive' : localPackageForm.$invalid}"
                                 ng-disabled="localPackageForm.$invalid"
-                                class="umb-era-button -blue inline-flex mt-2"
+                                class="umb-era-button -blue flex-inline mt-2"
                                 ng-click="vm.installPackage(vm.localPackage)">
                             Install package
                         </button>