Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added new classes for the tiles in collection overview. They should now be easily reusable for Databases and Applications

This commit is contained in:
Michael Hackstein 2014-02-11 09:58:09 +01:00
parent b76101de64
commit f87b594a1c
8 changed files with 190 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/apps/system/aardvark/frontend/css/collectionsItemView.css
View File

@ -29,13 +29,6 @@
margin:0;
}
.collectionName {
text-align:left;
font-weight: 300 !important;
position:absolute;
bottom:0px;
}
.thumbnail {
padding:0;
box-shadow: 0 0 0 !important;

27
js/apps/system/aardvark/frontend/js/templates/collectionsItemView.ejs
View File

@ -1,15 +1,14 @@
<div class="iconSet">
<span id="editCollection" class="icon_arangodb_settings2" alt="Edit collection properties" title="Edit collection properties"></span>
<% if(attributes.status === "loaded") { %>
<span class="icon_arangodb_info" title="Show collection properties"></span>
<%} else {%>
<span class="icon_arangodb_info disabled" alt="disabled"></span>
<%}%>
</div>
<div class="pull-right">
<span id="editCollection" class="ICON icon_arangodb_settings2" alt="Edit collection properties" title="Edit collection properties"></span>
</div>
<div class="plain">
<img src="<%= attributes.picture %>" height="50" width="50" alt="" class="icon">
<span class="badge badge-success <%= attributes.status %>"><div class="cornered"><%= attributes.status %></div></span>
<h5 class="collectionName">
<div class="pull-left"><%= attributes.name %></div>
</h5>
</div>
<div class="plain">
<img src="<%= attributes.picture %>" height="50" width="50" alt="" class="icon">
<span class="badge badge-success <%= attributes.status %>"><div class="cornered"><%= attributes.status %></div></span>
<h5 class="collectionName"><%= attributes.name %></h5>
</div>

3
js/apps/system/aardvark/frontend/js/views/collectionsItemView.js
View File

@ -7,7 +7,8 @@
window.CollectionListItemView = Backbone.View.extend({
tagName: "li",
className: "span3",
// className: "span3",
className: "tile",
template: templateEngine.createTemplate("collectionsItemView.ejs"),
initialize: function () {

4
js/apps/system/aardvark/frontend/js/views/collectionsView.js
View File

@ -31,7 +31,7 @@
var searchOptions = this.collection.searchOptions;
$('#collectionsThumbnailsIn', this.el).append(
'<li class="span3"><a href="#new" class="add">' +
'<li class="tile"><a href="#new" class="add">' +
'<span id="newCollection" class="pull-left icon_arangodb_roundplus arangoicon" />' +
'Add Collection</a></li>'
);
@ -43,6 +43,7 @@
}, this);
//append info icon for loaded collections
/*
$('.loaded').parent().prev().append(
'<span class="icon_arangodb_info spanInfo ICON" ' +
'title="Show collection properties"</span>'
@ -50,6 +51,7 @@
$('.unloaded').parent().prev().append(
'<span class="icon_arangodb_info spanDisabled ICON" alt="disabled"</span>'
);
*/
$('#searchInput').val(searchOptions.searchPhrase);
$('#searchInput').focus();

21
js/apps/system/aardvark/frontend/scss/_resizing.scss
View File

@ -1,13 +1,14 @@
div.resizecontainer {
margin: 0px auto;
}
div.resizecontainer:after {
clear: both;
content: ".";
display: block;
font-size: 0px;
height: 0px;
visibility: hidden;
&:after {
clear: both;
content: ".";
display: block;
font-size: 0px;
height: 0px;
visibility: hidden;
}
}
@media (max-width: 798px) {
@ -35,8 +36,8 @@ div.resizecontainer:after {
}
}
@for $i from 0 through 10 {
$min: 241px + $i * 243;
@for $i from 0 through 11 {
$min: 242px * $i;
@media (min-width: $min + 72) and (max-width: $min + 243 + 71) {
div.resizecontainer {
width: $min;

73
js/apps/system/aardvark/frontend/scss/_tiles.scss Normal file
View File

@ -0,0 +1,73 @@
div#collectionsThumbnailsIn {
margin-left: 0px;
}
li.tile {
@extend %pull-left;
position:relative;
text-align:center;
height:100px;
width: 230px;
margin: {
left: 6px;
right: 6px;
bottom: 13px;
}
@include box-shadow(none);
h5 {
font-size: 12px;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: $c_white;
background: $c_bar_bg;
padding: 4px 8px;
margin: 0;
}
div.iconSet {
position: absolute;
top: 5px;
right: 5px;
span {
@extend %clickable;
@extend %pull-right;
opacity: 0.5;
font-size: 18px;
padding-left: 7px;
&:hover {
opacity: 1.0;
}
&.disabled {
opacity: 0.2;
cursor: default;
}
}
}
.badge-success {
font-weight: 300;
}
.unloaded div {
border-bottom: 16px solid #FF8F35;
}
.deleted div {
border-bottom: 16px solid red;
}
}
.collectionName {
text-align:left;
font-weight: 300;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}

116
js/apps/system/aardvark/frontend/scss/generated.css
View File

@ -3,12 +3,15 @@ body, input, textarea, .page-title span, .pingback a.url {
font-family: 'Open Sans', sans-serif !important;
font-weight: 400; }
div.navlogo, ul.navlist li, ul.link-dropdown-menu, div.footer-left {
div.navlogo, ul.navlist li, ul.link-dropdown-menu, div.footer-left, li.tile {
float: left; }
div.navmenu, div.footer-right {
div.navmenu, div.footer-right, li.tile div.iconSet span {
float: right; }
li.tile div.iconSet span {
cursor: pointer; }
nav.navbar, footer.footer {
position: fixed;
left: 0px;
@ -20,14 +23,13 @@ nav.navbar, footer.footer {
div.resizecontainer {
margin: 0px auto; }
div.resizecontainer:after {
clear: both;
content: ".";
display: block;
font-size: 0px;
height: 0px;
visibility: hidden; }
div.resizecontainer:after {
clear: both;
content: ".";
display: block;
font-size: 0px;
height: 0px;
visibility: hidden; }
@media (max-width: 798px) {
#arangoCollectionUl {
@ -45,39 +47,42 @@ div.resizecontainer:after {
@media (min-width: 1042px) and (max-width: 1284px) {
#arangoCollectionUl a {
font-size: 13px; } }
@media (min-width: 313px) and (max-width: 555px) {
@media (min-width: 72px) and (max-width: 314px) {
div.resizecontainer {
width: 241px; } }
width: 0px; } }
@media (min-width: 314px) and (max-width: 556px) {
div.resizecontainer {
width: 242px; } }
@media (min-width: 556px) and (max-width: 798px) {
div.resizecontainer {
width: 484px; } }
@media (min-width: 799px) and (max-width: 1041px) {
@media (min-width: 798px) and (max-width: 1040px) {
div.resizecontainer {
width: 727px; } }
@media (min-width: 1042px) and (max-width: 1284px) {
width: 726px; } }
@media (min-width: 1040px) and (max-width: 1282px) {
div.resizecontainer {
width: 970px; } }
@media (min-width: 1285px) and (max-width: 1527px) {
width: 968px; } }
@media (min-width: 1282px) and (max-width: 1524px) {
div.resizecontainer {
width: 1213px; } }
@media (min-width: 1528px) and (max-width: 1770px) {
width: 1210px; } }
@media (min-width: 1524px) and (max-width: 1766px) {
div.resizecontainer {
width: 1456px; } }
@media (min-width: 1771px) and (max-width: 2013px) {
width: 1452px; } }
@media (min-width: 1766px) and (max-width: 2008px) {
div.resizecontainer {
width: 1699px; } }
@media (min-width: 2014px) and (max-width: 2256px) {
width: 1694px; } }
@media (min-width: 2008px) and (max-width: 2250px) {
div.resizecontainer {
width: 1942px; } }
@media (min-width: 2257px) and (max-width: 2499px) {
width: 1936px; } }
@media (min-width: 2250px) and (max-width: 2492px) {
div.resizecontainer {
width: 2185px; } }
@media (min-width: 2500px) and (max-width: 2742px) {
width: 2178px; } }
@media (min-width: 2492px) and (max-width: 2734px) {
div.resizecontainer {
width: 2428px; } }
@media (min-width: 2743px) and (max-width: 2985px) {
width: 2420px; } }
@media (min-width: 2734px) and (max-width: 2976px) {
div.resizecontainer {
width: 2671px; } }
width: 2662px; } }
div.centralRow {
margin-top: 65px;
margin-bottom: 65px; }
@ -177,3 +182,54 @@ footer.footer {
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 0; }
div#collectionsThumbnailsIn {
margin-left: 0px; }
li.tile {
position: relative;
text-align: center;
height: 100px;
width: 230px;
margin-left: 6px;
margin-right: 6px;
margin-bottom: 13px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
li.tile h5 {
font-size: 12px;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: white;
background: #686766;
padding: 4px 8px;
margin: 0; }
li.tile div.iconSet {
position: absolute;
top: 5px;
right: 5px; }
li.tile div.iconSet span {
opacity: 0.5;
font-size: 18px;
padding-left: 7px; }
li.tile div.iconSet span:hover {
opacity: 1.0; }
li.tile div.iconSet span.disabled {
opacity: 0.2;
cursor: default; }
li.tile .badge-success {
font-weight: 300; }
li.tile .unloaded div {
border-bottom: 16px solid #FF8F35; }
li.tile .deleted div {
border-bottom: 16px solid red; }
.collectionName {
text-align: left;
font-weight: 300;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px; }

2
js/apps/system/aardvark/frontend/scss/style.scss
View File

@ -14,3 +14,5 @@
@import "navbar";
// Footer
@import "footer";
// List tiles
@import "tiles";