jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add categories and search mockup to appstore view

Browse Source
This commit is contained in:
Johannes Zellner
2015-06-03 21:01:23 +02:00
parent 9292eac737
commit f94f2e9d84
2 changed files with 94 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webadmin/src/theme.scss
+55 -11
View File
@@ -1,5 +1,5 @@
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-primary: darken(#428bca, 6.5%) !default; // #62bdfc
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
@@ -9,8 +9,8 @@ $body-bg: #E5E5E5;
$font-family-sans-serif: Roboto, Helvetica, Arial, sans-serif;
$navbar-default-link-color: #428BCA !default;
$navbar-default-link-hover-color: #337ab7 !default;
$navbar-default-link-active-color: #337ab7 !default;
$navbar-default-link-hover-color: #62bdfc !default;
$navbar-default-link-active-color: #62bdfc !default;
$navbar-default-brand-color: #777 !default;
$btn-default-bg: transparent !default;
@@ -62,6 +62,20 @@ $table-border-color: transparent !default;
float: none !important;
}
.row-no-margin {
margin: 0;
}
.row-no-margin:before,
.row-no-margin:after {
content: " ";
display: table;
}
.row-no-margin:after {
clear: both;
}
// ----------------------------
// Main classes
// ----------------------------
@@ -112,11 +126,6 @@ $table-border-color: transparent !default;
// Appstore view
// ----------------------------
.appstore-content {
max-width: 900px;
margin: 0 auto;
}
.appstore-item {
padding: 10px;
width: 300px;
@@ -144,14 +153,49 @@ $table-border-color: transparent !default;
}
.appstore-item-content-icon {
width: 25%;
width: 100px;
min-width: 100px;
max-width: 100px;
padding-left: 10px;
padding-right: 10px;
}
.appstore-item-content-description {
width: 75%;
max-width: 100px;
width: 160px;
min-width: 160px;
max-width: 160px;
}
.appstore-category-link {
padding: 10px;
margin: 0;
color: black;
}
.appstore-category-link > a {
color: inherit;
}
.appstore-category-link > a:hover,
.appstore-category-link > a:focus {
text-decoration: none;
color: inherit;
}
.appstore-category-link:hover,
.appstore-category-link:focus {
background-color: $navbar-default-link-hover-color;
cursor: pointer;
color: white;
}
.appstore-item-rating {
color: $navbar-default-link-hover-color;
}
.appstore-search {
width: 200px;
}
.scale {
webadmin/src/views/appstore.html
+39 -13
View File
@@ -73,23 +73,49 @@
</div>
</div>
<div class="appstore-content">
<div class="animateMeOpacity ng-hide" ng-show="ready">
<div class="col-lg-12">
<div>
<div class="row-no-margin animateMeOpacity ng-hide" ng-show="ready">
<div class="col-md-2">
</div>
<div class="col-md-8">
<br/>
<h1>Available Applications</h1>
<br/>
</div>
<div class="col-md-2">
<br/>
<div class="appstore-search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="animateMeOpacity ng-hide" ng-show="ready">
<div class="col-sm-1 appstore-item" ng-repeat="app in apps">
<div class="appstore-item-content highlight" ng-click="showInstall(app)">
<div class="appstore-item-content-icon col-same-height">
<img ng-src="{{app.iconUrl}}" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" class="app-icon"/>
</div>
<div class="appstore-item-content-description col-same-height">
<h4 class="appstore-item-content-title">{{ app.manifest.title }}</h4>
<div class="appstore-item-content-tagline text-muted">{{ app.manifest.tagline }}</div>
<div><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i></div>
<div class="row animateMeOpacity" ng-show="ready">
<div class="col-md-2">
<h3 class="appstore-category-link"><a href="#">Office</a></h3>
<h3 class="appstore-category-link"><a href="#">Productivity</a></h3>
<h3 class="appstore-category-link"><a href="#">Games</a></h3>
<h3 class="appstore-category-link"><a href="#">Personal</a></h3>
<h3 class="appstore-category-link"><a href="#">Content</a></h3>
</div>
<div class="col-md-10">
<div class="row-no-margin">
<div class="col-sm-1 appstore-item" ng-repeat="app in apps">
<div class="appstore-item-content highlight" ng-click="showInstall(app)">
<div class="appstore-item-content-icon col-same-height">
<img ng-src="{{app.iconUrl}}" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" class="app-icon"/>
</div>
<div class="appstore-item-content-description col-same-height">
<h4 class="appstore-item-content-title">{{ app.manifest.title }}</h4>
<div class="appstore-item-content-tagline text-muted">{{ app.manifest.tagline }}</div>
<div class="appstore-item-rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i></div>
</div>
</div>
</div>
</div>
</div>