From 4fe5aaf8c403310de8a62e33a00daa7cc7f3dd67 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@oerskov-gruppen.lan>
Date: Wed, 5 Feb 2020 17:19:40 +0100
Subject: [PATCH] Update button in package overview not to use flexbox and
 inner wrapper using flexbox instead

---
 .../src/less/components/umb-packages.less     | 19 ++---
 .../src/views/packages/views/repo.html        | 74 ++++++++++---------
 2 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
index b808e6574a..197a5eb176 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
@@ -59,15 +59,12 @@
 
 .umb-package-link {
     display: block;
-    flex-wrap: wrap;
-    flex-direction: column;
-    justify-content: center;
     position: relative;
     box-sizing: border-box;
     height: 100%;
     width: 100%;
     border-radius: 3px;
-    border: 0 none;
+    border: 1px solid transparent;
     text-decoration: none !important;
     transition: border-color 100ms ease;
     background-color: @white;
@@ -78,8 +75,6 @@
     }
 }
 
-
-
 // Icon
 .umb-package-icon {
     display: flex;
@@ -94,22 +89,20 @@
     border-top-right-radius: 3px;
     border-top-left-radius: 3px;
     min-height: 60px;
-}
 
-.umb-package-icon img {
-    max-width: 70px;
-    width: 70px;
-    height: auto;
+    img {
+        max-width: 70px;
+        width: 70px;
+        height: auto;
+    }
 }
 
-
 // Info
 .umb-package-info {
     padding: 15px;
     text-align: center;
 }
 
-
 // Name
 .umb-package-name {
     font-size: 14px;
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html
index 5c3c528740..039f9f2d02 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html
@@ -44,26 +44,29 @@
                     <div class="umb-package" ng-repeat="package in vm.popular">
                         <button type="button" class="umb-package-link" ng-click="vm.showPackageDetails(package)">
 
-                            <div class="umb-package-icon">
-                                <img ng-src="{{package.icon}}" alt="" />
-                            </div>
-
-                            <div class="umb-package-info">
-                                <div class="umb-package-name">{{package.name}}</div>
-                                <div class="umb-package-description">{{package.excerpt | limitTo: 40}}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>
-
-                                <div class="umb-package-numbers">
-                                    <small class="umb-package-downloads">
-                                        <i class="icon-download-alt" aria-hidden="true"></i>
-                                        <strong>{{package.downloads}}</strong>
-                                    </small>
-                                    <small class="umb-package-likes">
-                                        <i class="icon-hearts" aria-hidden="true"></i>
-                                        <strong>{{package.likes}}</strong>
-                                    </small>
+                            <div class="flex flex-column">
+                                <div class="umb-package-icon">
+                                    <img ng-src="{{package.icon}}" alt="" />
                                 </div>
 
+                                <div class="umb-package-info">
+                                    <div class="umb-package-name">{{package.name}}</div>
+                                    <div class="umb-package-description">{{package.excerpt | limitTo: 40}}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>
+
+                                    <div class="umb-package-numbers">
+                                        <small class="umb-package-downloads">
+                                            <i class="icon-download-alt" aria-hidden="true"></i>
+                                            <strong>{{package.downloads}}</strong>
+                                        </small>
+                                        <small class="umb-package-likes">
+                                            <i class="icon-hearts" aria-hidden="true"></i>
+                                            <strong>{{package.likes}}</strong>
+                                        </small>
+                                    </div>
+
+                                </div>
                             </div>
+
                         </button>
                     </div> <!-- end package -->
 
@@ -80,26 +83,29 @@
                     <div class="umb-package" ng-repeat="package in vm.packages">
                         <button type="button" class="umb-package-link" ng-click="vm.showPackageDetails(package)">
 
-                            <div class="umb-package-icon">
-                                <img ng-src="{{package.icon}}" alt="" />
-                            </div>
-
-                            <div class="umb-package-info">
-                                <div class="umb-package-name">{{ package.name }}</div>
-                                <div class="umb-package-description">{{ package.excerpt | limitTo: 40 }}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>
-
-                                <div class="umb-package-numbers">
-                                    <small class="umb-package-downloads">
-                                        <i class="icon-download-alt" aria-hidden="true"></i>
-                                        <strong>{{ package.downloads }}</strong>
-                                    </small>
-                                    <small class="umb-package-likes">
-                                        <i class="icon-hearts" aria-hidden="true"></i>
-                                        <strong>{{ package.likes }}</strong>
-                                    </small>
+                            <div class="flex flex-column">
+                                <div class="umb-package-icon">
+                                    <img ng-src="{{package.icon}}" alt="" />
                                 </div>
 
+                                <div class="umb-package-info">
+                                    <div class="umb-package-name">{{ package.name }}</div>
+                                    <div class="umb-package-description">{{ package.excerpt | limitTo: 40 }}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>
+
+                                    <div class="umb-package-numbers">
+                                        <small class="umb-package-downloads">
+                                            <i class="icon-download-alt" aria-hidden="true"></i>
+                                            <strong>{{ package.downloads }}</strong>
+                                        </small>
+                                        <small class="umb-package-likes">
+                                            <i class="icon-hearts" aria-hidden="true"></i>
+                                            <strong>{{ package.likes }}</strong>
+                                        </small>
+                                    </div>
+
+                                </div>
                             </div>
+                            
                         </button>
                     </div> <!-- end package -->