layout

Closer to the layout from the spec
The facets have been moved to the action panel, to the left of the page
the facets are now rendered in an area of the screen with a client class

11 files changed, 95 insertions, 36 deletions

diff --git a/install/static/Mainnav-background.png b/install/static/Mainnav-background.png
index c3fdab31..5487ca3c 100644
--- a/install/static/Mainnav-background.png
+++ b/install/static/Mainnav-background.png
diff --git a/install/static/Mainnav-offtab.png b/install/static/Mainnav-offtab.png
index cf6debc5..997863a2 100644
--- a/install/static/Mainnav-offtab.png
+++ b/install/static/Mainnav-offtab.png
diff --git a/install/static/Mainnav-ontab.png b/install/static/Mainnav-ontab.png
index 2589fddb..303402f7 100644
--- a/install/static/Mainnav-ontab.png
+++ b/install/static/Mainnav-ontab.png
diff --git a/install/static/Subnav-background.png b/install/static/Subnav-background.png
index 00afe1e9..d7dd26bf 100644
--- a/install/static/Subnav-background.png
+++ b/install/static/Subnav-background.png
diff --git a/install/static/associate.js b/install/static/associate.js
index be6747a3..ef3a72c1 100644
--- a/install/static/associate.js
+++ b/install/static/associate.js
@@ -407,32 +407,33 @@ function ipa_association_facet(spec) {
     };
 
     that.create = function(container) {
-        that.setup_views(container);
-    };
-
-    that.setup = function(container, unspecified) {
-
         that.pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
-        that.other_entity = $.bbq.getState(that.entity_name + '-enroll', true) || '';
+        that.other_entity =
+            $.bbq.getState(that.entity_name + '-enroll', true) || '';
 
         //TODO I18N
         var header_message = that.other_entity + '(s) enrolled in '  +
             that.entity_name + ' ' + that.pkey;
-        container.append( $('<h2/>',{ html:  header_message }) );
 
         $('<div/>', {
-            'id': that.entity_name+'-'+that.other_entity
+            'id': that.entity_name+'-'+that.other_entity,
+            html: $('<h2/>',{ html:  header_message })
         }).appendTo(container);
-
-        var table = ipa_association_widget({
+        that.table = ipa_association_widget({
             'id': that.entity_name+'-'+that.other_entity,
-            'name': that.other_entity, 'label': IPA.metadata[that.other_entity].label,
-            'entity_name': that.entity_name, 'other_entity': that.other_entity
+            'name': that.other_entity,
+            'label': IPA.metadata[that.other_entity].label,
+            'entity_name': that.entity_name,
+            'other_entity': that.other_entity
         });
 
-        table.create(container);
-        table.setup(container);
-        table.refresh(container);
+        that.table.create(container);
+
+    };
+
+    that.setup = function(container, unspecified) {
+        that.table.setup(container);
+        that.table.refresh(container);
     };
 
     return that;
diff --git a/install/static/details.js b/install/static/details.js
index efb896a6..4a024e98 100644
--- a/install/static/details.js
+++ b/install/static/details.js
@@ -339,10 +339,9 @@ function ipa_details_create(container)
     var entity_name = container.attr('id');
     container.attr('title', entity_name);
 
-    facet.setup_views(container);
 
     var details = $('<div/>', {
-        'class': 'details'
+        'class': 'content'
     }).appendTo(container);
 
     var buttons = $('<div/>', {
diff --git a/install/static/entity.js b/install/static/entity.js
index 1eadea6d..4ae979e7 100644
--- a/install/static/entity.js
+++ b/install/static/entity.js
@@ -311,7 +311,9 @@ function ipa_entity_setup(container, unspecified) {
 
     container.empty();
 
+    facet.setup_views(container);
     facet.create(container);
+    container.children().last().addClass('client');
     facet.setup(container, unspecified);
     facet.load(container, unspecified);
 }
@@ -320,7 +322,12 @@ function ipa_facet_setup_views(container) {
 
     var facet = this;
 
-    var ul = $('<ul/>', {'class': 'entity-views'}).appendTo(container);
+    var div = $('<div/>',
+                {
+                    "class":"action-panel",
+                    html: $('<h3>Actions</h3>'),
+                }).appendTo(container);
+    var ul = $('<ul/>', {'class': 'action'}).appendTo(div);
 
     var entity = IPA.get_entity(facet.entity_name);
 
@@ -331,7 +338,6 @@ function ipa_facet_setup_views(container) {
         if (other_facet.label) {
 
             var label = other_facet.label;
-            if (i > 0) label = '| '+label;
 
             ul.append($('<li/>', {
                 title: other_facet.name,
@@ -352,8 +358,6 @@ function ipa_facet_setup_views(container) {
                     var other_entity = other_entities[j];
                     var label = IPA.metadata[other_entity].label;
 
-                    if (i > 0 || j > 0) label = '| ' + label;
-
                     ul.append($('<li/>', {
                         title: other_entity,
                         text: label,
diff --git a/install/static/ipa.css b/install/static/ipa.css
index 30d8c80d..ee4c85a7 100644
--- a/install/static/ipa.css
+++ b/install/static/ipa.css
@@ -67,8 +67,8 @@ h1 {
     margin-top: 18px;
 }
 
-div#details {
-    float: left;
+div#content {
+    position: relative;
     width: 100%;
 }
 
@@ -94,12 +94,12 @@ ul#viewtype li a {
     font-weight: normal;
 }
 
-div.details div.details-buttons {
+div.content div.content-buttons {
     float: right;
     margin-right: 15px;
 }
 
-div.details div.details-buttons img {
+div.content div.content-buttons img {
     border: 0;
 }
 
@@ -180,19 +180,29 @@ span.attrhint {
 
 /*Navigation */
 .tabs1 .ui-tabs-nav{
-    padding: 0.1em;
+    margin: 0; padding: 2.9em .2em 0;
+    background-image: url(Mainnav-background.png);
+
 }
 
-.tabs1 .ui-tabs-nav {
-    background-image: url(Mainnav-background.png);
+
+.ui-tabs .ui-tabs-nav li { height: 30px;  margin: 0 0 1px 0;}
+
+
+.tabs1 .ui-tabs-nav li a{
+    height: 30px;
+    background-image: url(Mainnav-offtab.png);
+    color: black;
 }
 
+
 .tabs1 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited{
-    color:white;
+    color:black;
 }
 
-.tabs1 .ui-tabs-nav li.ui-tabs-selected {
+.tabs1 .ui-tabs-nav li.ui-tabs-selected a{
     background-image: url(Mainnav-ontab.png);
+    color: lightgreen;
 }
 
 .tabs1 .ui-tabs-panel { display: block; border-width: 0; padding: 0.1em 0.4em; background: none; }
@@ -200,17 +210,35 @@ span.attrhint {
 
 .tabs2 .ui-tabs-nav {
     background-image: url(Subnav-background.png);
+    margin: 0; padding: .1em .2em 0;
+
 }
 
+
 .tabs2 .ui-tabs-nav li a{
-    background-image: url(Subnav-offbutton.png);
+    height: 10%;
+    background-image: url(Subnav-background.png);
+    color: white;
+}
+
+.tabs2 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited{
+    color:white;
+}
+
+
+.tabs2 .ui-tabs-nav li{
+    height: 10%;
+    background-image: url(Subnav-background.png);
+    color: white;
 }
 
 .tabs2 .ui-tabs-nav li.ui-tabs-selected a{
+    -moz-border-radius: 15px;
+    border-radius: 15px;
     background-image: url(Subnav-onbutton.png);
+    color: white;
 }
 
-
 span.sub-nav-off > a:link, span.sub-nav-off >  a:visited{
     color:white;
 }
@@ -229,13 +257,40 @@ span.main-separator{
 /* Entity */
 
 .entity-container{
-    float: left;
+    position: relative;
     width: 80%;
+    height: 1000px;
     margin: 10px;
     padding: 10px;
     background: #e8e8e8;
 }
 
+.action-panel {
+    position:relative;
+    top:50px;
+    border-width: thin;
+    border-style: solid;
+    border-color: black;
+    float: left;
+}
+
+.action-panel h3{
+   border-width: thin;
+    border-style: solid;
+    border-color: black;
+    background: #e8e8e8;
+}
+
+.action-panel li {
+#    float: left;
+#    list-style-type: none;
+}
+
+.client {
+    float: left;
+}
+
+
 /* Search */
 
 .search-controls {
diff --git a/install/static/policy.js b/install/static/policy.js
index deefab0c..89fe16a7 100644
--- a/install/static/policy.js
+++ b/install/static/policy.js
@@ -250,7 +250,7 @@ function ipa_records_facet(spec){
     };
 
     function create(container) {
-        that.setup_views(container);
+//        that.setup_views(container);
     }
 
     function setup(container, unspecified){
diff --git a/install/static/search.js b/install/static/search.js
index ecdf56d2..f5d81587 100644
--- a/install/static/search.js
+++ b/install/static/search.js
@@ -34,7 +34,6 @@ function ipa_search_widget(spec) {
     that.create = function(container) {
 
         var div = $('#'+that.id);
-
         var search_controls = $('<div/>', {
             'class': 'search-controls'
         }).appendTo(div);
diff --git a/install/static/test/entity_tests.js b/install/static/test/entity_tests.js
index 5d98d7b1..5b2f36b2 100644
--- a/install/static/test/entity_tests.js
+++ b/install/static/test/entity_tests.js
@@ -97,7 +97,8 @@ test('Testing ipa_facet_setup_views().', function() {
 
     facet.setup_views(container);
 
-    var list = container.children();
+    //Container now has two divs, one for the action panel one for content
+    var list = container.children().last().children();
     var views = list.children();
 
     equals(