yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added button back

Browse Source
This commit is contained in:
Simon Busborg
2016-05-26 16:31:56 +02:00
parent 8a744b52fe
commit 3cc8a71a60
3 changed files with 143 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
View File

@@ -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;
}

82
src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.controller.js
View File

@@ -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"
}
];

45
src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.html
View File

@@ -17,7 +17,7 @@
<umb-editor-container>
<div class="umb-packages-search">
<input class="-full-width-input" type="text" name="name" value="" placeholder="Search for packages">
</div>
<div class="umb-packages-categories">
@@ -27,14 +27,15 @@
</a>
</div>
<h5>Popular</h5>
<div class="umb-packages">
<div class="umb-package" ng-repeat="package in vm.packages">
<a class="umb-package-link" href="#">
<div class="umb-package-icon">
<!-- {{ package.icon }} -->
<img src="https://d30y9cdsu7xlg0.cloudfront.net/noun-svg/82522.svg?Expires=1464267230&Signature=CY9MWZomFHWHZSuRpkweLqIXgLV8~kjjfYyf24UyAGctSwRHzzL94Dh510NbWEJZuvm5LzNaiJziJkmBovHCKspGgnCVwLZgiJ7zKo1DwXXaiHqYkTlnb0CuB2D59vO3d7u6esc2d6sRjN1zz8iLYK21TZTiZ9pFCLpqFIsW2uA_&Key-Pair-Id=APKAI5ZVHAXN65CHVU2Q" alt="" />
<img src="{{ package.icon }}" alt="" />
</div>
<div class="umb-package-info">
@@ -50,11 +51,47 @@
Karma <strong>{{ package.karma }}</strong>
</small>
</div>
<div class="umb-era-button">
Install
</div>
</div>
</a>
</div> <!-- end package -->
</div>
</div> <!-- end packages -->
<h5>Latest</h5>
<div class="umb-packages">
<div class="umb-package" ng-repeat="package in vm.packages">
<a class="umb-package-link" href="#">
<div class="umb-package-icon">
<img src="{{ package.icon }}" alt="" />
</div>
<div class="umb-package-info">
<h4 class="umb-package-name">
{{ package.name }}
</h4>
<div class="umb-package-numbers">
<small class="umb-package-downloads">
Downloads <strong>{{ package.downloads }}</strong>
</small>
<small class="umb-package-karma">
Karma <strong>{{ package.karma }}</strong>
</small>
</div>
</div>
</a>
</div> <!-- end package -->
</div> <!-- end packages -->
</umb-editor-container>