yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update button in package overview not to use flexbox and inner wrapper using flexbox instead

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2020-02-05 17:19:40 +01:00
committed by Sebastiaan Janssen
parent b21f5f59b0
commit 4fe5aaf8c4
2 changed files with 46 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
View File

@@ -59,15 +59,12 @@
.umb-package-link { .umb-package-link {
display: block; display: block;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;
border: 0 none; border: 1px solid transparent;
text-decoration: none !important; text-decoration: none !important;
transition: border-color 100ms ease; transition: border-color 100ms ease;
background-color: @white; background-color: @white;
@@ -78,8 +75,6 @@
} }
} }
// Icon // Icon
.umb-package-icon { .umb-package-icon {
display: flex; display: flex;
@@ -94,22 +89,20 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
min-height: 60px; min-height: 60px;
}
.umb-package-icon img { img {
max-width: 70px; max-width: 70px;
width: 70px; width: 70px;
height: auto; height: auto;
}
} }
// Info // Info
.umb-package-info { .umb-package-info {
padding: 15px; padding: 15px;
text-align: center; text-align: center;
} }
// Name // Name
.umb-package-name { .umb-package-name {
font-size: 14px; font-size: 14px;

74
src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html
View File

@@ -44,26 +44,29 @@
<div class="umb-package" ng-repeat="package in vm.popular"> <div class="umb-package" ng-repeat="package in vm.popular">
<button type="button" class="umb-package-link" ng-click="vm.showPackageDetails(package)"> <button type="button" class="umb-package-link" ng-click="vm.showPackageDetails(package)">
<div class="umb-package-icon"> <div class="flex flex-column">
<img ng-src="{{package.icon}}" alt="" /> <div class="umb-package-icon">
</div> <img ng-src="{{package.icon}}" alt="" />
<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 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> </div>
</button> </button>
</div> <!-- end package --> </div> <!-- end package -->
@@ -80,26 +83,29 @@
<div class="umb-package" ng-repeat="package in vm.packages"> <div class="umb-package" ng-repeat="package in vm.packages">
<button type="button" class="umb-package-link" ng-click="vm.showPackageDetails(package)"> <button type="button" class="umb-package-link" ng-click="vm.showPackageDetails(package)">
<div class="umb-package-icon"> <div class="flex flex-column">
<img ng-src="{{package.icon}}" alt="" /> <div class="umb-package-icon">
</div> <img ng-src="{{package.icon}}" alt="" />
<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 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> </div>
</button> </button>
</div> <!-- end package --> </div> <!-- end package -->