From 5ba2967c15b839ecf9101302e543c63b3f37dea2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 31 May 2016 14:02:07 +0200 Subject: [PATCH] added design for package details --- .../src/less/components/umb-packages.less | 158 ++++++++++++++++++ .../views/packagesNew/details.controller.js | 76 +++++---- .../src/views/packagesNew/details.html | 126 ++++++++++++-- 3 files changed, 316 insertions(+), 44 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less index 6becc6805f..46516c48d4 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less @@ -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; +} diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/details.controller.js b/src/Umbraco.Web.UI.Client/src/views/packagesNew/details.controller.js index 834c894c0c..7f4a48ebb9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/details.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/details.controller.js @@ -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" + } ] }; diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/details.html b/src/Umbraco.Web.UI.Client/src/views/packagesNew/details.html index 595dc03868..fa69f55407 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/details.html +++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/details.html @@ -4,7 +4,7 @@
- + - 
{{ vm.package | json }}
+
+ +
+ +
+ +
+
+ + + +
+
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
{{ vm.package.information.owner }}
+
+ {{ vm.package.information.owner }} has {{ vm.package.information.ownerKarma }} karma points +
+
+
+
+ +
+
Information
+
+ +
+
Owner:
+
{{vm.package.information.owner}}
+
+ +
+
Contributors:
+ +
+ +
+
Created:
+
{{vm.package.information.created}}
+
+ +
+
Current version:
+
{{vm.package.information.created}}
+
+ +
+
.Net Version:
+
{{vm.package.information.netVersion}}
+
+ +
+
License:
+
{{vm.package.information.license}}
+
+ +
+
Downloads:
+
{{vm.package.information.downloads}}
+
+ +
+
Karma:
+
{{vm.package.information.karma}}
+
+ +
+
+ +
+
Compatibility
+
This project is compatible with the following versions as reported by community members who have downloaded this package:
+
+
+ {{compatibility.version}} + ({{compatibility.percentage}}%) +
+
+ +
+
+
+ +
+
External sources
+ + +
+ +
+ +
- - - - Breadcrumbs here - - - -