From 3cc8a71a60fa12158ffb28c70e7ea0ed5fdac306 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Thu, 26 May 2016 16:31:56 +0200 Subject: [PATCH] added button back --- .../src/less/components/umb-packages.less | 103 ++++++++++++------ .../src/views/packagesNew/edit.controller.js | 82 ++++++-------- .../src/views/packagesNew/edit.html | 45 +++++++- 3 files changed, 143 insertions(+), 87 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 bca3d7cbd7..b226517bbf 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 @@ -1,3 +1,25 @@ +.umb-packages-search { + width: 100%; + + margin-top: 40px; + margin-bottom: 30px; +} + +.umb-packages-search input { + border-width: 2px; + border-radius: 3px; + min-height: 44px; + + padding: 4px 10px; + font-size: 16px; + border-color: #ececec; + + &:hover, &:focus { + border-color: @grayLight; + } +} + + .umb-packages { display: flex; flex-wrap: wrap; @@ -8,33 +30,10 @@ // List .umb-package { - flex: 0 0 100%; + height: 260px; + width: 200px; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 20px; - - box-sizing: border-box; - - @media (min-width: 768px) { - flex: 0 0 50%; - } - - @media (min-width: 1024px) { - flex: 0 0 33.33%; - } - - @media (min-width: 1260px) { - flex: 0 0 25%; - } - - @media (min-width: 1600px) { - flex: 0 0 20%; - } - - @media (min-width: 2000px) { - flex: 0 0 16.66%; - } + padding: 20px; } @@ -43,8 +42,11 @@ display: flex; flex-wrap: wrap; flex-direction: column; + justify-content: center; + + height: 100%; + width: 100%; - background: whitesmoke; border: 2px solid #ececec; border-radius: 3px; @@ -66,40 +68,62 @@ justify-content: center; align-items: center; - padding: 10px; + padding-top: 10px; + padding-right: 10px; + padding-left: 10px; + text-align: center; - border-bottom: 2px solid #ececec; background-color: white; - min-height: 120px; + min-height: 80px; } .umb-package-icon img { - opacity: .1; + max-width: 70px; + height: auto; } // Info .umb-package-info { - padding-top: 10px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; + + text-align: center; } // Name .umb-package-name { + max-width: 250px; + font-weight: bold; + margin-bottom: 10px; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + line-height: normal; } // Numbers .umb-package-numbers { display: flex; flex-wrap: wrap; + flex-direction: column; + justify-content: center; opacity: .6; + + margin-bottom: 20px; +} + +.umb-package-numbers small { + padding: 0 5px; + display: block; } .umb-package-link:hover .umb-package-numbers { @@ -180,15 +204,22 @@ flex: 1 0 auto; max-width: 25%; background-color: @blue; - padding: 10px; - font-size: 12px; + padding: 40px 10px; + font-size: 13px; border-radius: 3px; color: @white; - font-weight: bold; box-sizing: border-box; flex: 1 0 auto; margin: 5px; justify-content: center; + + text-transform: uppercase; + letter-spacing: 1.3px; + + &:hover { + background-color: @blueDark; + box-shadow: 0 3px 8px rgba(0,0,0,0.2); + } } .umb-packages-category:hover, @@ -200,4 +231,6 @@ .umb-packages-category-icon { font-size: 20px; margin-right: 5px; + + display: none; } diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.controller.js index 4ce5597429..e082448933 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.controller.js @@ -37,60 +37,46 @@ vm.packages = [ { - "name": "Test App", - "description": "lorem flaxis slk asjasd ks", + "name": "uSightly", + "description": "An HTML5 audio player based on jPlayer", "karma": "1", - "downloads": "2", - "icon": "flax" + "downloads": "1672", + "icon":"https://our.umbraco.org/media/wiki/150283/635768313097111400_usightlylogopng.png?bgcolor=fff&height=154&width=281&format=png" }, { - "name": "Tessti flaxi", - "description": "loremlaksjd lkajs dasjasd ks", - "karma": "10", - "downloads": "22", - "icon": "flaxo" + "name": "Kill IE6", + "description": "A simple port of the IE6 warning script (http://code.google.com/p/ie6-upgrade-warning/) to use in your Umbraco websites.", + "karma": "11", + "downloads": "688", + "icon":"https://our.umbraco.org/media/wiki/9138/634697622367666000_offroadcode-100x100.png?bgcolor=fff&height=154&width=281&format=png" }, { - "name": "Walla", - "description": "lorem flaxis slk asjasd ks", + "name": "Examine Media Indexer", + "description": "CogUmbracoExamineMediaIndexer", + "karma": "3", + "downloads": "1329", + "icon":"https://our.umbraco.org/media/wiki/50703/634782902373558000_cogworks.jpg?bgcolor=fff&height=154&width=281&format=png" + }, + { + "name": "SVG Icon Picker", + "description": "A picker, for picking icons from an SVG spritesheet.", + "karma": "5", + "downloads": "8", + "icon":"https://our.umbraco.org/media/wiki/154472/635997115126742822_logopng.png?bgcolor=fff&height=154&width=281&format=png" + }, + { + "name": "Pipeline CRM", + "description": "Pipeline is a social CRM that lives in Umbraco back-office. It tracks opportunities and helps teams collaborate with timelines and tasks. It stores information about your customers and your interactions with them. It integrates with your website, capturing opportunities from forms and powering personal portals.", + "karma": "3", + "downloads": "105", + "icon":"https://our.umbraco.org/media/wiki/152476/635917291068518788_pipeline-crm-logopng.png?bgcolor=fff&height=154&width=281&format=png" + }, + { + "name": "CodeMirror", + "description": "CodeMirror Editor for Umbraco", "karma": "1", - "downloads": "2", - "icon": "flax" - }, - { - "name": "Walla", - "description": "lorem flaxis slk asjasd ks", - "karma": "1", - "downloads": "2", - "icon": "flax" - }, - { - "name": "Test App", - "description": "lorem flaxis slk asjasd ks", - "karma": "1", - "downloads": "2", - "icon": "flax" - }, - { - "name": "Tessti flaxi", - "description": "loremlaksjd lkajs dasjasd ks", - "karma": "10", - "downloads": "22", - "icon": "flaxo" - }, - { - "name": "Walla", - "description": "lorem flaxis slk asjasd ks", - "karma": "1", - "downloads": "2", - "icon": "flax" - }, - { - "name": "Walla", - "description": "lorem flaxis slk asjasd ks", - "karma": "1", - "downloads": "2", - "icon": "flax" + "downloads": "70", + "icon":"https://our.umbraco.org/media/wiki/151028/635810233171153461_logopng.png?bgcolor=fff&height=154&width=281&format=png" } ]; diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.html b/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.html index c34c9487f2..cf9c68e7d9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.html @@ -17,7 +17,7 @@
- +
@@ -27,14 +27,15 @@
+ +
Popular
- - +
@@ -50,11 +51,47 @@ Karma {{ package.karma }}
+ +
+ Install +
+
- + + + +
Latest
+
+ +
+ + +
+ +
+ +
+

+ {{ package.name }} +

+ +
+ + Downloads {{ package.downloads }} + + + Karma {{ package.karma }} + +
+ +
+ +
+ +