Style updates for embedded items to reduce visual footprint.

This commit is contained in:
Jeremy Goecks
2012-02-29 12:53:48 -05:00
parent 351ff6bec3
commit 9b4bb79db2
4 changed files with 45 additions and 36 deletions
+7 -5
View File
@@ -1,5 +1,5 @@
.embedded-item{margin-top:0.5em;margin-left:auto;margin-right:auto;width:90%;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;border-radius:0.5em;}
.embedded-item.display {padding: 0.5em;}
.embedded-item{margin:0em auto;width:90%;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;border-radius:0.5em;}
.embedded-item.display{padding:2px;}
.embedded-item.history{background-color:#C1C9E5}
.embedded-item.history p{background:#C1C9E5 no-repeat 2px 2px;margin-top:0;margin-bottom:0;}
.embedded-item.dataset{background-color:#CFC}
@@ -9,9 +9,11 @@
.embedded-item.visualization{background-color:#BBBBBB}
.embedded-item.visualization p{background:#BBBBBB no-repeat 2px 2px;margin-top:0;margin-bottom:0;}
.embedded-item.placeholder{}
.embedded-item .item-content{max-height:25em;overflow:auto;display:none;}
.embedded-item .title{vertical-align:top;text-align:center;font-weight:bold;}
.embedded-item.placeholder .content{padding: 1em 1em;font-style:italic;text-align:center;}
.embedded-item .expanded-content{display:none;}
.embedded-item .item-content{max-height:25em;overflow:auto;}
.embedded-item.visualization .item-content{overflow:hidden;}
.embedded-item .title{vertical-align:top;text-align:center;font-weight:bold;padding-bottom:2px;}
.embedded-item.placeholder .content{padding: 0.5em 0.5em;font-style:italic;text-align:center;}
table.annotated-item{width:100%;border-collapse:collapse;}
table.annotated-item td,th{padding:0;}
table.annotated-item .annotation{padding-left:2em;width:40%;}
+30 -25
View File
@@ -1,16 +1,13 @@
.embedded-item {
margin-top: 0.5em
margin-left:auto;
margin-right:auto;
width:90%;
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
border-radius:0.5em;
.embedded-item {
margin: 0em auto;
width: 90%;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
}
.embedded-item.display {
padding: 0.5em;
padding: 2px;
}
.embedded-item.history {
@@ -54,39 +51,47 @@
.embedded-item.placeholder{}
.embedded-item .item-content {
max-height: 25em;
overflow: auto;
.embedded-item .expanded-content {
display: none;
}
.embedded-item .item-content {
max-height: 25em;
overflow: auto;
}
.embedded-item.visualization .item-content {
overflow: hidden;
}
.embedded-item .title {
vertical-align:top;
text-align:center;
vertical-align: top;
text-align: center;
font-weight: bold;
padding-bottom: 2px;
}
.embedded-item.placeholder .content {
padding: 1em 1em;
font-style:italic;
text-align:center;
padding: 0.5em 0.5em;
font-style: italic;
text-align: center;
}
table.annotated-item {
width:100%;
border-collapse:collapse;
width: 100%;
border-collapse: collapse;
}
table.annotated-item td,th {
padding:0;
padding: 0;
}
table.annotated-item .annotation {
padding-left:2em;
width:40%;
padding-left: 2em;
width: 40%;
}
table.annotated-item td.annotation {
vertical-align:text-top;
padding-top:1em;
vertical-align: text-top;
padding-top: 1em;
}
+3 -2
View File
@@ -9,12 +9,13 @@
<div class='embedded-item display ${get_class_display_name( item.__class__ ).lower()}'>
<div class='title'>
${self.render_title( item )}
<hr/>
</div>
<div class='summary-content'>
${self.render_summary_content( item, item_data )}
</div>
<div class='item-content'>
<div class='expanded-content'>
<hr/>
<div class='item-content'></div>
</div>
</div>
+5 -4
View File
@@ -24,7 +24,8 @@
error: function() { alert("Getting item content failed."); },
success: function( item_content ) {
container.find(".summary-content").hide("fast");
container.find(".item-content").html(item_content).show("fast");
container.find(".item-content").html(item_content);
container.find(".expanded-content").show("fast");
container.find(".toggle-expand").hide();
container.find(".toggle").show();
@@ -41,7 +42,7 @@
});
} else {
container.find(".summary-content").hide("fast");
container.find(".item-content").show("fast");
container.find(".expanded-content").show("fast");
container.find(".toggle-expand").hide();
container.find(".toggle").show();
}
@@ -49,7 +50,7 @@
// Hide embedded item.
var hide_embedded_item = function() {
container.find(".item-content").hide("fast");
container.find(".expanded-content").hide("fast");
container.find(".summary-content").show("fast");
container.find(".toggle").hide();
container.find(".toggle-expand").show();
@@ -72,7 +73,7 @@
// Setup toggle embed.
var toggle_embed = $(this).find('.toggle-embed');
toggle_embed.click( function() {
if (container.find(".item-content").is(":visible")) {
if (container.find(".expanded-content").is(":visible")) {
hide_embedded_item();
} else {
show_embedded_item();