added design for package details
This commit is contained in:
Mads Rasmussen
@@ -215,6 +215,11 @@
|
||||
background-color: @blueDark;
|
||||
}
|
||||
|
||||
.umb-era-button.-full-width {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* CATEGORIES */
|
||||
@@ -280,3 +285,156 @@
|
||||
opacity: 1;
|
||||
border-bottom: 2px solid @black;
|
||||
}
|
||||
|
||||
/* PACKAGE DETAILS */
|
||||
|
||||
.umb-package-details {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.umb-package-details__main-content {
|
||||
flex: 1 1 auto;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.umb-package-details__sidebar {
|
||||
flex: 0 0 350px;
|
||||
}
|
||||
|
||||
.umb-package-details__section {
|
||||
background: @grayLighter;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.umb-package-details__section-title {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.umb-package-details__section-description {
|
||||
font-size: 12px;
|
||||
line-height: 1.6em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.umb-package-details__information-item {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.umb-package-details__information-item-label {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.umb-package-details__information-item-label-2 {
|
||||
font-size: 12px;
|
||||
color: @grayMed;
|
||||
}
|
||||
|
||||
.umb-package-details__compatability {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.umb-package-details__compatability-label {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.umb-package-details__description {
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.umb-package-details__description p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
|
||||
.umb-package-details__link {
|
||||
color: #DA3287;
|
||||
}
|
||||
|
||||
.umb-package-details__link:hover {
|
||||
color: #B32D71;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Owner profile */
|
||||
|
||||
.umb-package-details__owner-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.umb-package-details__owner-profile-avatar {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.umb-package-details__owner-profile-name {
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.umb-package-details__owner-profile-karma {
|
||||
font-size: 12px;
|
||||
color: @grayMed;
|
||||
}
|
||||
|
||||
/* gallery */
|
||||
|
||||
.umb-gallery__thumbnails {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.umb-gallery__thumbnail {
|
||||
flex: 1 1 100px;
|
||||
border: 1px solid @grayLight;
|
||||
border-radius: 3px;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.umb-gallery__thumbnail:hover {
|
||||
cursor: pointer;
|
||||
border-color: @blue;
|
||||
}
|
||||
|
||||
/* Avatar */
|
||||
|
||||
.umb-avatar {
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
|
||||
.umb-progress-bar {
|
||||
background: @grayLight;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.umb-progress-bar__progress {
|
||||
background: #50C878;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@@ -9,55 +9,29 @@
|
||||
|
||||
vm.package = {
|
||||
"name": "Merchello",
|
||||
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim purus pulvinar odio iaculis, sit amet euismod arcu volutpat. Sed ut hendrerit sem. Vestibulum enim nisl, luctus quis cursus et, porttitor a ligula. Donec sed congue urna. Integer tincidunt ultrices lorem vitae suscipit. Sed non turpis massa. Donec et velit ante. Sed interdum lectus id lorem congue, sit amet lacinia ex placerat. In id orci sed augue cursus sodales.",
|
||||
"description": "<p>Merchello is a high performance, designer friendly, open source Umbraco ecommerce package built for the store owner.</p> <p><strong>What Merchello does for you</strong></p> <p>In version 1, Merchello supports a large variety of products with options that can be attached to a single warehouse, processes orders, manages taxes and shipping, and sends out email notifications to your customers. The beauty of Merchello is that while it oversees all of your products, orders, and store settings, it allows Umbraco to maintain your content. This seamless integration gives you the flexibility to build your store in any way imagineable on a robust platform capable of handling a wide variety of store sizes.</p> <p><strong>Find out more on our website</strong></p> <p><strong><a href="https://merchello.com">https://merchello.com</a></strong></p> <p><strong>Contribute</strong></p> <p>We would love and need your help. If you want to contribute to Merchello's core, the easiest way to get started is to fork the project on https://github.com/merchello/Merchello and open src/Merchello.sln in Visual Studio. We're excited to see what you do!</p> <p><strong>Starter Kit</strong></p> <p>We have built a simple starter kit for Merchello called Bazaar, and you can download it below in the package files tab.</p>",
|
||||
"compatibility": [
|
||||
{
|
||||
"version": "7.4.x",
|
||||
"compatibility": "100%"
|
||||
"percentage": "100"
|
||||
},
|
||||
{
|
||||
"version": "7.3.x",
|
||||
"compatibility": "86%"
|
||||
"percentage": "86"
|
||||
},
|
||||
{
|
||||
"version": "7.2.x",
|
||||
"compatibility": "93%"
|
||||
"percentage": "93"
|
||||
},
|
||||
{
|
||||
"version": "7.1.x",
|
||||
"compatibility": "100%"
|
||||
},
|
||||
{
|
||||
"version": "7.0.x",
|
||||
"compatibility": "untested"
|
||||
},
|
||||
{
|
||||
"version": "6.1.x",
|
||||
"compatibility": "untested"
|
||||
},
|
||||
{
|
||||
"version": "6.0.x",
|
||||
"compatibility": "untested"
|
||||
},
|
||||
{
|
||||
"version": "4.11.x",
|
||||
"compatibility": "untested"
|
||||
},
|
||||
{
|
||||
"version": "4.10.x",
|
||||
"compatibility": "untested"
|
||||
},
|
||||
{
|
||||
"version": "4.9.1",
|
||||
"compatibility": "untested"
|
||||
},
|
||||
{
|
||||
"version": "4.9.0",
|
||||
"compatibility": "untested"
|
||||
"percentage": "100"
|
||||
}
|
||||
],
|
||||
"information": {
|
||||
"owner": "Rusty Swayne",
|
||||
"ownerAvatar": "https://our.umbraco.org/media/upload/d476d257-a494-46d9-9a00-56c2f94a55c8/our-profile.jpg?width=200&height=200&mode=crop",
|
||||
"ownerKarma": "2673",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Lee"
|
||||
@@ -68,7 +42,7 @@
|
||||
],
|
||||
"created": "18/12/2013",
|
||||
"currentVersion": "2.0.0",
|
||||
".netVersion": "4.5",
|
||||
"netVersion": "4.5",
|
||||
"license": "MIT",
|
||||
"downloads": "4198",
|
||||
"karma": "53"
|
||||
@@ -82,6 +56,40 @@
|
||||
"name": "Issue tracker",
|
||||
"url": "http://issues.merchello.com/youtrack/oauth?state=%2Fyoutrack%2FrootGo"
|
||||
}
|
||||
],
|
||||
"images": [
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<form name="packagesForm" ng-submit="save()" novalidate>
|
||||
|
||||
<umb-editor-view footer="false" ng-if="!page.loading">
|
||||
<umb-editor-view ng-if="!page.loading">
|
||||
|
||||
<umb-editor-header
|
||||
name="vm.package.name"
|
||||
@@ -16,18 +16,124 @@
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<pre>{{ vm.package | json }}</pre>
|
||||
<div class="umb-package-details">
|
||||
|
||||
<div class="umb-package-details__main-content">
|
||||
|
||||
<div class="umb-package-details__description" ng-bind-html-unsafe="vm.package.description"></div>
|
||||
|
||||
<div class="umb-gallery">
|
||||
<div class="umb-gallery__thumbnails">
|
||||
<a class="umb-gallery__thumbnail" target="_blank" href="{{ image.source }}" ng-repeat="image in vm.package.images">
|
||||
<img ng-src="{{ image.thumbnail }}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__sidebar">
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<button class="umb-era-button -blue -full-width">Install package</button>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__owner-profile">
|
||||
<div class="umb-package-details__owner-profile-avatar">
|
||||
<img class="umb-avatar" ng-src="{{vm.package.information.ownerAvatar}}" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="umb-package-details__owner-profile-name">{{ vm.package.information.owner }}</div>
|
||||
<div class="umb-package-details__owner-profile-karma">
|
||||
{{ vm.package.information.owner }} has <strong>{{ vm.package.information.ownerKarma }}</strong> karma points
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__section-title">Information</div>
|
||||
<div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Owner:</div>
|
||||
<div>{{vm.package.information.owner}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Contributors:</div>
|
||||
<div ng-repeat="contributor in vm.package.information.contributors">
|
||||
<a class="umb-package-details__link" href="{{ contributor.profileUrl }}" target="_blank">{{ contributor.name }}<span ng-if="!$last">, </span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Created:</div>
|
||||
<div>{{vm.package.information.created}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Current version:</div>
|
||||
<div>{{vm.package.information.created}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">.Net Version:</div>
|
||||
<div>{{vm.package.information.netVersion}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">License:</div>
|
||||
<div>{{vm.package.information.license}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Downloads:</div>
|
||||
<div>{{vm.package.information.downloads}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Karma:</div>
|
||||
<div>{{vm.package.information.karma}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__section-title">Compatibility</div>
|
||||
<div class="umb-package-details__section-description">This project is compatible with the following versions as reported by community members who have downloaded this package:</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>
|
||||
<div class="umb-progress-bar">
|
||||
<span class="umb-progress-bar__progress" style="width: {{compatibility.percentage}}%"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__section-title">External sources</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>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
<umb-editor-footer>
|
||||
|
||||
<umb-editor-footer-content-left>
|
||||
Breadcrumbs here
|
||||
</umb-editor-footer-content-left>
|
||||
|
||||
</umb-editor-footer>
|
||||
|
||||
</umb-editor-view>
|
||||
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user