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

add even spacing to sections + a bit more padding to category nav

Browse Source
This commit is contained in:
Mads Rasmussen
2016-05-31 21:29:00 +02:00
parent 86eaacc5d2
commit 5858823252
2 changed files with 68 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,9 +9,12 @@
padding: 20px 60px;
}
.umb-packages-section {
margin-bottom: 40px;
}
.umb-packages-search {
width: 100%;
margin-bottom: 40px;
background: @grayLighter;
border-radius: 3px;
padding: 30px;
@@ -258,7 +261,6 @@
display: flex;
user-select: center;
flex-wrap: wrap;
margin-bottom: 30px;
}
.umb-packages-category {
@@ -275,7 +277,7 @@
border-top: 1px solid @grayLight;
border-bottom: 1px solid @grayLight;
border-right: 1px solid @grayLight;
padding: 5px;
padding: 10px 0;
}
.umb-packages-category:hover,

120
src/Umbraco.Web.UI.Client/src/views/packagesNew/views/repo.html
View File

@@ -1,78 +1,84 @@
<div class="umb-packages-view-wrapper" ng-controller="Umbraco.Editors.Packages.RepoController as vm">
<div class="umb-packages-search">
<input class="-full-width-input" type="text" name="name" value="" placeholder="Search for packages">
<div class="umb-packages-section">
<div class="umb-packages-search">
<input class="-full-width-input" type="text" name="name" value="" placeholder="Search for packages">
</div>
</div>
<div class="umb-packages-categories">
<a
href=""
class="umb-packages-category"
ng-click="vm.selectCategory(category)"
ng-repeat="category in vm.categories"
ng-class="{'-active': category.active, '-first': $first, '-last': $last}">
<div>{{ category.name }}</div>
</a>
<div class="umb-packages-section">
<div class="umb-packages-categories">
<a
href=""
class="umb-packages-category"
ng-click="vm.selectCategory(category, vm.categories)"
ng-repeat="category in vm.categories"
ng-class="{'-active': category.active, '-first': $first, '-last': $last}">
<div>{{ category.name }}</div>
</a>
</div>
</div>
<h4><strong>Popular</strong></h4>
<div class="umb-packages clearfix">
<div class="umb-packages-section">
<h4><strong>Popular</strong></h4>
<div class="umb-packages clearfix">
<div class="umb-package" ng-repeat="package in vm.packages">
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
<div class="umb-package" ng-repeat="package in vm.packages">
<a class="umb-package-link" href="" 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-numbers">
<small class="umb-package-downloads">
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
</small>
<small class="umb-package-karma">
<i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
</small>
<div class="umb-package-icon">
<img ng-src="{{package.icon}}" alt="" />
</div>
</div>
</a>
</div> <!-- end package -->
<div class="umb-package-info">
<div class="umb-package-name">{{ package.name }}</div>
</div> <!-- end packages -->
<div class="umb-package-numbers">
<small class="umb-package-downloads">
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
</small>
<small class="umb-package-karma">
<i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
</small>
</div>
</div>
</a>
</div> <!-- end package -->
<h4><strong>Latest</strong></h4>
<div class="umb-packages clearfix">
</div> <!-- end packages -->
</div>
<div class="umb-package" ng-repeat="package in vm.packages">
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
<div class="umb-packages-section">
<h4><strong>Latest</strong></h4>
<div class="umb-packages clearfix">
<div class="umb-package-icon">
<img src="{{ package.icon }}" alt="" />
</div>
<div class="umb-package" ng-repeat="package in vm.packages">
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
<div class="umb-package-info">
<h4 class="umb-package-name">
{{ package.name }}
</h4>
<div class="umb-package-numbers">
<small class="umb-package-downloads">
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
</small>
<small class="umb-package-karma">
<i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
</small>
<div class="umb-package-icon">
<img src="{{ package.icon }}" alt="" />
</div>
</div>
</a>
</div> <!-- end package -->
<div class="umb-package-info">
<h4 class="umb-package-name">
{{ package.name }}
</h4>
</div> <!-- end packages -->
<div class="umb-package-numbers">
<small class="umb-package-downloads">
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
</small>
<small class="umb-package-karma">
<i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
</small>
</div>
</div>
</a>
</div> <!-- end package -->
</div> <!-- end packages -->
</div>
</div>