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 c3fdab317..5487ca3c5 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 cf6debc50..997863a29 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 2589fddb1..303402f73 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 00afe1e97..d7dd26bf1 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 be6747a32..ef3a72c1e 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 efb896a6c..4a024e986 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 1eadea6d9..4ae979e75 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 30d8c80d1..ee4c85a74 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 deefab0c6..89fe16a70 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 ecdf56d2b..f5d81587b 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 5d98d7b1b..5b2f36b2b 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(