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 {
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;

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">
<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 -->