fixing up styles to better fit new UI
This commit is contained in:
Mads Rasmussen
@@ -15,7 +15,7 @@
|
||||
height: 300px;
|
||||
border: 2px dashed @gray-8;
|
||||
border-radius: 3px;
|
||||
background: @gray-10;
|
||||
background: @white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -74,7 +74,6 @@
|
||||
|
||||
// Info state
|
||||
.umb-info-local-items {
|
||||
border: 2px solid @gray-8;
|
||||
border-radius: 3px;
|
||||
background: @gray-10;
|
||||
display: flex;
|
||||
@@ -84,6 +83,8 @@
|
||||
margin: 0 20px;
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
background: @white;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.16);
|
||||
}
|
||||
|
||||
.umb-info-local-items a {
|
||||
|
||||
@@ -23,9 +23,7 @@
|
||||
|
||||
.umb-packages-search {
|
||||
width: 100%;
|
||||
background: @gray-10;
|
||||
border-radius: 3px;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -49,60 +47,14 @@
|
||||
}
|
||||
|
||||
.umb-packages {
|
||||
margin: 0 -10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
// Cards
|
||||
.umb-package {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.umb-package {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.umb-package {
|
||||
flex: 0 0 33.33%;
|
||||
max-width: 33.33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.umb-package {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1700px) {
|
||||
.umb-package {
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1900px) {
|
||||
.umb-package {
|
||||
flex: 0 0 16.66%;
|
||||
max-width: 16.66%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2200px) {
|
||||
.umb-package {
|
||||
flex: 0 0 14.28%;
|
||||
max-width: 14.28%;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-package-link {
|
||||
@@ -114,10 +66,11 @@
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid @gray-9;
|
||||
border-radius: 3px;
|
||||
text-decoration: none !important;
|
||||
transition: border-color 100ms ease;
|
||||
background-color: @white;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
|
||||
|
||||
&:hover {
|
||||
border-color: @turquoise;
|
||||
@@ -151,15 +104,8 @@
|
||||
|
||||
// Info
|
||||
.umb-package-info {
|
||||
padding-right: 15px;
|
||||
padding-bottom: 15px;
|
||||
padding-left: 15px;
|
||||
padding-top: 15px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
background: @gray-10;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top: 1px solid @gray-9;
|
||||
}
|
||||
|
||||
|
||||
@@ -251,6 +197,7 @@
|
||||
border-bottom: 1px solid @gray-8;
|
||||
border-right: 1px solid @gray-8;
|
||||
padding: 10px 0;
|
||||
background: @white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
|
||||
<div class="umb-packages-section" ng-if="vm.searchQuery == ''">
|
||||
<h4><strong><localize key="packager_packagesPopular">Popular</localize></strong></h4>
|
||||
<div class="umb-packages clearfix">
|
||||
<div class="umb-packages">
|
||||
|
||||
<div class="umb-package" ng-repeat="package in vm.popular">
|
||||
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
|
||||
@@ -61,7 +61,7 @@
|
||||
<h4 ng-if="vm.searchQuery === ''"><strong><localize key="packager_packagesNew">New Releases</localize></strong></h4>
|
||||
<h4 ng-if="vm.searchQuery !== ''"><strong><localize key="packager_packageSearchResults">Results for</localize> '{{ vm.searchQuery }}'</strong></h4>
|
||||
|
||||
<div class="umb-packages clearfix">
|
||||
<div class="umb-packages">
|
||||
|
||||
<div class="umb-package" ng-repeat="package in vm.packages">
|
||||
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
|
||||
@@ -129,147 +129,153 @@
|
||||
|
||||
<div class="umb-package-details__main-content">
|
||||
|
||||
<div class="umb-packages-view-title">{{ vm.package.name }}</div>
|
||||
<umb-box>
|
||||
<umb-box-content>
|
||||
<div class="umb-packages-view-title">{{ vm.package.name }}</div>
|
||||
<div class="umb-package-details__description" ng-bind-html="vm.package.description"></div>
|
||||
<div class="umb-gallery">
|
||||
<div class="umb-gallery__thumbnails">
|
||||
<a class="umb-gallery__thumbnail" ng-repeat="image in vm.package.images" ng-click="vm.openLightbox($index, vm.package.images)">
|
||||
<img ng-src="{{ image.thumbnail }}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
<div class="umb-package-details__description" ng-bind-html="vm.package.description"></div>
|
||||
|
||||
<div class="umb-gallery">
|
||||
<div class="umb-gallery__thumbnails">
|
||||
<a class="umb-gallery__thumbnail" ng-repeat="image in vm.package.images" ng-click="vm.openLightbox($index, vm.package.images)">
|
||||
<img ng-src="{{ image.thumbnail }}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-lightbox
|
||||
ng-if="vm.lightbox.show"
|
||||
items="vm.lightbox.items"
|
||||
active-item-index="vm.lightbox.activeIndex"
|
||||
on-close="vm.closeLightbox">
|
||||
</umb-lightbox>
|
||||
<umb-lightbox
|
||||
ng-if="vm.lightbox.show"
|
||||
items="vm.lightbox.items"
|
||||
active-item-index="vm.lightbox.activeIndex"
|
||||
on-close="vm.closeLightbox">
|
||||
</umb-lightbox>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__sidebar">
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.package.isValid === true"
|
||||
type="button"
|
||||
button-style="[success,block]"
|
||||
size="m"
|
||||
action="vm.downloadPackage(vm.package)"
|
||||
label-key="packager_packageInstall">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.package.isValid === false"
|
||||
type="button"
|
||||
button-style="[block]"
|
||||
size="m"
|
||||
disabled="vm.package.isValid === false"
|
||||
label-key="packager_packageAlreadyInstalled">
|
||||
</umb-button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__owner-profile">
|
||||
|
||||
<div class="umb-package-details__owner-profile-avatar">
|
||||
<umb-avatar
|
||||
<umb-box>
|
||||
<umb-box-content>
|
||||
<umb-button
|
||||
ng-if="vm.package.isValid === true"
|
||||
type="button"
|
||||
button-style="[success,block]"
|
||||
size="m"
|
||||
img-src="{{ 'https://our.umbraco.org' + vm.package.ownerInfo.ownerAvatar }}">
|
||||
</umb-avatar>
|
||||
</div>
|
||||
action="vm.downloadPackage(vm.package)"
|
||||
label-key="packager_packageInstall">
|
||||
</umb-button>
|
||||
<umb-button
|
||||
ng-if="vm.package.isValid === false"
|
||||
type="button"
|
||||
button-style="[block]"
|
||||
size="m"
|
||||
disabled="vm.package.isValid === false"
|
||||
label-key="packager_packageAlreadyInstalled">
|
||||
</umb-button>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
<umb-box>
|
||||
<umb-box-content>
|
||||
<div class="umb-package-details__owner-profile">
|
||||
|
||||
<div class="umb-package-details__owner-profile-avatar">
|
||||
<umb-avatar
|
||||
size="m"
|
||||
img-src="{{ 'https://our.umbraco.org' + vm.package.ownerInfo.ownerAvatar }}">
|
||||
</umb-avatar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="umb-package-details__owner-profile-name">{{ vm.package.ownerInfo.owner }}</div>
|
||||
<div class="umb-package-details__owner-profile-karma">
|
||||
{{ vm.package.ownerInfo.owner }} <localize key="packager_packageHas">has</localize> <strong>{{ vm.package.ownerInfo.karma }}</strong> <localize key="packager_packageKarmaPoints">karma points</localize>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
<umb-box>
|
||||
<umb-box-content>
|
||||
<div class="umb-package-details__section-title"><localize key="packager_packageInfo">Information</localize></div>
|
||||
<div>
|
||||
<div class="umb-package-details__owner-profile-name">{{ vm.package.ownerInfo.owner }}</div>
|
||||
<div class="umb-package-details__owner-profile-karma">
|
||||
{{ vm.package.ownerInfo.owner }} <localize key="packager_packageHas">has</localize> <strong>{{ vm.package.ownerInfo.karma }}</strong> <localize key="packager_packageKarmaPoints">karma points</localize>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.owner">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageOwner">Owner</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.ownerInfo.owner}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.contributors">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageContrib">Contributors</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<span ng-repeat="contributor in vm.package.ownerInfo.contributors">{{ contributor }}<span ng-if="!$last">, </span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.created">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageCreated">Created</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.created | date:'yyyy-MM-dd HH:mm:ss'}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.latestVersion">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageCurrentVersion">Current version</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.latestVersion}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.information.netVersion">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageNetVersion">.NET Version</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.information.netVersion}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.licenseName">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageLicense">License</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.licenseName}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.downloads">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageDownloads">Downloads</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.downloads}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.karma">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageLikes">Likes</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.likes}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
<umb-box>
|
||||
<umb-box-content>
|
||||
<div class="umb-package-details__section-title"><localize key="packager_packageCompatibility">Compatibility</localize></div>
|
||||
<div class="umb-package-details__section-description"><localize key="packager_packageCompatibilityDescription">This package is compatible with the following versions of Umbraco, as reported by community members. Full compatability cannot be gauranteed for versions reported below 100%</localize></div>
|
||||
<div class="umb-package-details__compatability" ng-repeat="compatibility in vm.package.compatibility | filter:percentage > 0">
|
||||
<div class="umb-package-details__compatability-label">
|
||||
<span class="umb-package-details__information-item-label">{{compatibility.version}}</span>
|
||||
<span class="umb-package-details__information-item-label-2">({{compatibility.percentage}}%)</span>
|
||||
</div>
|
||||
<umb-progress-bar
|
||||
percentage="{{compatibility.percentage}}">
|
||||
</umb-progress-bar>
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
<umb-box ng-if="vm.package.externalSources">
|
||||
<umb-box-content>
|
||||
<div class="umb-package-details__section-title"><localize key="packager_packageExternalSources">External sources</localize></div>
|
||||
<div>
|
||||
<div class="umb-package-details__information-item" ng-repeat="externalSource in vm.package.externalSources">
|
||||
<a class="umb-package-details__link" target="_blank" href="{{ externalSource.url }}">
|
||||
<i class="icon-out"></i>
|
||||
{{ externalSource.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__section-title"><localize key="packager_packageInfo">Information</localize></div>
|
||||
<div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.owner">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageOwner">Owner</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.ownerInfo.owner}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.contributors">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageContrib">Contributors</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<span ng-repeat="contributor in vm.package.ownerInfo.contributors">{{ contributor }}<span ng-if="!$last">, </span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.created">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageCreated">Created</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.created | date:'yyyy-MM-dd HH:mm:ss'}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.latestVersion">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageCurrentVersion">Current version</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.latestVersion}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.information.netVersion">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageNetVersion">.NET Version</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.information.netVersion}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.licenseName">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageLicense">License</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.licenseName}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.downloads">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageDownloads">Downloads</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.downloads}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.karma">
|
||||
<div class="umb-package-details__information-item-label"><localize key="packager_packageLikes">Likes</localize>:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.likes}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__section-title"><localize key="packager_packageCompatibility">Compatibility</localize></div>
|
||||
<div class="umb-package-details__section-description"><localize key="packager_packageCompatibilityDescription">This package is compatible with the following versions of Umbraco, as reported by community members. Full compatability cannot be gauranteed for versions reported below 100%</localize></div>
|
||||
<div class="umb-package-details__compatability" ng-repeat="compatibility in vm.package.compatibility | filter:percentage > 0">
|
||||
<div class="umb-package-details__compatability-label">
|
||||
<span class="umb-package-details__information-item-label">{{compatibility.version}}</span>
|
||||
<span class="umb-package-details__information-item-label-2">({{compatibility.percentage}}%)</span>
|
||||
</div>
|
||||
|
||||
<umb-progress-bar
|
||||
percentage="{{compatibility.percentage}}">
|
||||
</umb-progress-bar>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section" ng-if="vm.package.externalSources">
|
||||
<div class="umb-package-details__section-title"><localize key="packager_packageExternalSources">External sources</localize></div>
|
||||
<div>
|
||||
<div class="umb-package-details__information-item" ng-repeat="externalSource in vm.package.externalSources">
|
||||
<a class="umb-package-details__link" target="_blank" href="{{ externalSource.url }}">
|
||||
<i class="icon-out"></i>
|
||||
{{ externalSource.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user