added icons and versions

This commit is contained in:
Simon Busborg
2016-05-27 11:59:19 +02:00
parent 140218b0ed
commit db21aef150
3 changed files with 43 additions and 12 deletions

View File

@@ -47,6 +47,8 @@
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
width: 100%;
@@ -118,22 +120,44 @@
.umb-package-numbers {
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex-direction: row;
justify-content: center;
opacity: .6;
margin-top: 10px;
}
.umb-package-numbers small {
padding: 0 5px;
display: block;
display: flex;
align-items: center;
justify-content: center;
}
.umb-package-numbers i {
font-size: 14px;
}
.umb-package-link:hover .umb-package-numbers {
opacity: 1;
}
.umb-package-link:hover .umb-package-numbers .icon-hearts {
color: red !important;
}
// Version
.umb-package-version {
display: inline-flex;
font-size: 11px;
font-weight: bold;
padding: 1px 5px;
background: #ececec;
border-radius: 3px;
color: black;
}
/* umb-buttons-era */
.umb-era-button {

View File

@@ -41,42 +41,48 @@
"description": "An HTML5 audio player based on jPlayer",
"karma": "1",
"downloads": "1672",
"icon":"https://our.umbraco.org/media/wiki/150283/635768313097111400_usightlylogopng.png?bgcolor=fff&height=154&width=281&format=png"
"icon":"https://our.umbraco.org/media/wiki/150283/635768313097111400_usightlylogopng.png?bgcolor=fff&height=154&width=281&format=png",
"version":"No good"
},
{
"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"
"icon":"https://our.umbraco.org/media/wiki/9138/634697622367666000_offroadcode-100x100.png?bgcolor=fff&height=154&width=281&format=png",
"version":"Fits perfectly"
},
{
"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"
"icon":"https://our.umbraco.org/media/wiki/50703/634782902373558000_cogworks.jpg?bgcolor=fff&height=154&width=281&format=png",
"version":"Fits perfectly"
},
{
"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"
"icon":"https://our.umbraco.org/media/wiki/154472/635997115126742822_logopng.png?bgcolor=fff&height=154&width=281&format=png",
"version":"Fits perfectly"
},
{
"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"
"icon":"https://our.umbraco.org/media/wiki/152476/635917291068518788_pipeline-crm-logopng.png?bgcolor=fff&height=154&width=281&format=png",
"version":"Fits perfectly"
},
{
"name": "CodeMirror",
"description": "CodeMirror Editor for Umbraco",
"karma": "1",
"downloads": "70",
"icon":"https://our.umbraco.org/media/wiki/151028/635810233171153461_logopng.png?bgcolor=fff&height=154&width=281&format=png"
"icon":"https://our.umbraco.org/media/wiki/151028/635810233171153461_logopng.png?bgcolor=fff&height=154&width=281&format=png",
"version":"No good"
}
];

View File

@@ -40,12 +40,13 @@
<div class="umb-package-info">
<div class="umb-package-name">{{ package.name }}</div>
<div class="umb-package-numbers">
<small class="umb-package-downloads">
Downloads <strong>{{ package.downloads }}</strong>
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
</small>
<small class="umb-package-karma">
Karma <strong>{{ package.karma }}</strong>
<i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
</small>
</div>
@@ -73,10 +74,10 @@
<div class="umb-package-numbers">
<small class="umb-package-downloads">
Downloads <strong>{{ package.downloads }}</strong>
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
</small>
<small class="umb-package-karma">
Karma <strong>{{ package.karma }}</strong>
<i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
</small>
</div>