From 9704adfe44c915de97f416c18bcaeabea2c927ba Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Tue, 7 Jun 2011 20:48:20 -0500
Subject: Fixed resizing issues.

The UI has been modified to fix some resizing issues:

Previously the height of facet content was roughly calculated using
resize(). Now the height can be more accurately defined in CSS.

Previously the UI width was fixed. The HTML layout and background
images have been modified to support horizontal expansion if needed.
---
 install/ui/Makefile.am                             |   3 +
 install/ui/associate.js                            |  19 +-
 install/ui/background-center.png                   | Bin 0 -> 2839 bytes
 install/ui/background-left.png                     | Bin 0 -> 3193 bytes
 install/ui/background-right.png                    | Bin 0 -> 3211 bytes
 install/ui/details.js                              |  25 +-
 install/ui/dialog.js                               |   6 -
 install/ui/entity.js                               |  32 +-
 install/ui/index.html                              |  44 +-
 install/ui/ipa.css                                 | 853 +++++++++++++--------
 install/ui/navigation.js                           |  16 +-
 install/ui/search.js                               |  22 +-
 .../ui/test/functional/user-password-reset.html    |   4 +-
 install/ui/test/navigation_tests.js                |  16 +-
 install/ui/webui.js                                |  11 -
 install/ui/widget.js                               |  20 +-
 16 files changed, 617 insertions(+), 454 deletions(-)
 create mode 100755 install/ui/background-center.png
 create mode 100755 install/ui/background-left.png
 create mode 100755 install/ui/background-right.png

diff --git a/install/ui/Makefile.am b/install/ui/Makefile.am
index 5f77b0698..87607a1a0 100644
--- a/install/ui/Makefile.am
+++ b/install/ui/Makefile.am
@@ -12,6 +12,9 @@ app_DATA =                              \
 	add.js				\
 	associate.js			\
 	automount.js			\
+	background-center.png		\
+	background-left.png		\
+	background-right.png		\
 	caution.png			\
 	centered-bg.png                 \
 	check.png			\
diff --git a/install/ui/associate.js b/install/ui/associate.js
index f7ac1505e..c1e0b429f 100644
--- a/install/ui/associate.js
+++ b/install/ui/associate.js
@@ -717,10 +717,6 @@ IPA.association_facet = function (spec) {
         that.columns.put(column.name, column);
     };
 
-    that.resize = function(){
-        that.table.resize();
-    };
-
     that.create_column = function(spec) {
         var column = IPA.column(spec);
         if (spec.link_entity){
@@ -769,6 +765,7 @@ IPA.association_facet = function (spec) {
 
         that.table = IPA.table_widget({
             id: that.entity_name+'-'+that.other_entity,
+            'class': 'content-table',
             name: pkey_name,
             label: label,
             entity_name: that.entity_name,
@@ -863,18 +860,8 @@ IPA.association_facet = function (spec) {
 
     that.create_content = function(container) {
 
-        var span = $('<span/>', { 'name': 'association' }).appendTo(container);
-
-        that.table.create(span);
-    };
-
-    that.setup = function(container) {
-
-        that.facet_setup(container);
-
-        var span = $('span[name=association]', that.container);
-
-        that.table.setup(span);
+        that.table.create(container);
+        that.table.setup(container);
     };
 
     that.show = function() {
diff --git a/install/ui/background-center.png b/install/ui/background-center.png
new file mode 100755
index 000000000..92653e8b7
Binary files /dev/null and b/install/ui/background-center.png differ
diff --git a/install/ui/background-left.png b/install/ui/background-left.png
new file mode 100755
index 000000000..acd339424
Binary files /dev/null and b/install/ui/background-left.png differ
diff --git a/install/ui/background-right.png b/install/ui/background-right.png
new file mode 100755
index 000000000..ad7c63e7c
Binary files /dev/null and b/install/ui/background-right.png differ
diff --git a/install/ui/details.js b/install/ui/details.js
index 237de6024..c0b560cd6 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -407,8 +407,8 @@ IPA.details_facet = function(spec) {
 
     that.create_content = function(container) {
 
-        var details = $('<div/>', {
-            'name': 'details'
+        that.content = $('<div/>', {
+            'class': 'details-content'
         }).appendTo(container);
 
         var sections = that.sections.values;
@@ -418,7 +418,7 @@ IPA.details_facet = function(spec) {
             var header = $('<h2/>', {
                 name: section.name,
                 title: section.label
-            }).appendTo(details);
+            }).appendTo(that.content);
 
             var icon = $('<span/>', {
                 name: 'icon',
@@ -432,7 +432,7 @@ IPA.details_facet = function(spec) {
             var div = $('<div/>', {
                 name: section.name,
                 'class': 'details-section'
-            }).appendTo(details);
+            }).appendTo(that.content);
 
             header.click(function(section, div) {
                 return function() {
@@ -443,25 +443,26 @@ IPA.details_facet = function(spec) {
 
             section.create(div);
 
-            details.append('<hr/>');
+            if (i < sections.length-1) {
+                that.content.append('<hr/>');
+            }
         }
 
-
-        that.resize();
+        $('<span/>', {
+            name: 'summary',
+            'class': 'details-summary'
+        }).appendTo(container);
     };
 
-
     that.setup = function(container) {
 
         that.facet_setup(container);
 
-        var details = $('div[name=details]', that.container);
-
         var sections = that.sections.values;
         for (var i=0; i<sections.length; i++) {
             var section = sections[i];
 
-            var div = $('div.details-section[name='+section.name+']', that.container);
+            var div = $('.details-section[name='+section.name+']', that.container);
 
             section.setup(div);
         }
@@ -492,7 +493,7 @@ IPA.details_facet = function(spec) {
         var div = section.container;
 
         if (visible != div.is(":visible")) {
-            div.slideToggle('slow', that.resize);
+            div.slideToggle('slow');
         }
     };
 
diff --git a/install/ui/dialog.js b/install/ui/dialog.js
index 36bc49bb4..3bcb4556d 100644
--- a/install/ui/dialog.js
+++ b/install/ui/dialog.js
@@ -394,9 +394,6 @@ IPA.adder_dialog = function (spec) {
             height: '151px'
         });
 
-        that.available_table.resize = function(){
-        };
-
         var columns = that.columns.values;
         that.available_table.set_columns(columns);
 
@@ -408,9 +405,6 @@ IPA.adder_dialog = function (spec) {
             height: '151px'
         });
 
-        that.selected_table.resize = function(){
-        };
-
         that.selected_table.set_columns(columns);
 
         that.selected_table.init();
diff --git a/install/ui/entity.js b/install/ui/entity.js
index c3c5135b9..deb1bd4bc 100644
--- a/install/ui/entity.js
+++ b/install/ui/entity.js
@@ -112,7 +112,7 @@ IPA.facet = function (spec) {
     };
 
     that.show = function() {
-        that.container.css('display', 'inline');
+        that.container.css('display', 'block');
     };
 
     that.hide = function() {
@@ -130,15 +130,6 @@ IPA.facet = function (spec) {
         return $('.content', that.container);
     };
 
-    that.resize = function(){
-        var facet_content = $('.facet-content', that.container);
-        facet_content.css('overflow-y', 'auto');
-
-        var content_max_height = $(window).height() -
-            IPA.reserved_screen_size;
-        facet_content.css('height',content_max_height);
-    };
-
     that.on_error = function(xhr, text_status, error_thrown) {
         if (that.entity.redirect_facet) {
             var current_entity = that.entity;
@@ -202,10 +193,6 @@ IPA.table_facet = function(spec) {
         return that;
     };
 
-    that.resize = function(){
-        that.table.resize();
-    };
-
     var columns = spec.columns || [];
     for (var i=0; i<columns.length; i++) {
         var column_spec = columns[i];
@@ -557,7 +544,7 @@ IPA.entity_header = function(spec) {
         }
     };
 
-    that.facet_link = function(container, other_facet) {
+    that.create_facet_link = function(container, other_facet) {
 
         var li = $('<li/>', {
             title: other_facet.name,
@@ -579,13 +566,14 @@ IPA.entity_header = function(spec) {
         }).appendTo(li);
     };
 
-    that.facet_group = function(facet_group) {
+    that.create_facet_group = function(container, facet_group) {
 
         var section = $('<span/>', {
-            'class': 'facet-tab-group'
-        }).appendTo(that.facet_tabs);
+            'class': 'facet-group'
+        }).appendTo(container);
 
-        $('<label/>', {
+        $('<div/>', {
+            'class': 'facet-group-name',
             text: facet_group.label
         }).appendTo(section);
 
@@ -596,7 +584,7 @@ IPA.entity_header = function(spec) {
         var facets = facet_group.facets.values;
         for (var i=0; i<facets.length; i++) {
             var facet = facets[i];
-            that.facet_link(ul, facet);
+            that.create_facet_link(ul, facet);
         }
     };
 
@@ -617,7 +605,7 @@ IPA.entity_header = function(spec) {
             'class': 'entity-pkey'
         }));
 
-        var search_bar = $('<span/>', {
+        var search_bar = $('<div/>', {
             'class': 'entity-search'
         }).appendTo(container);
 
@@ -651,7 +639,7 @@ IPA.entity_header = function(spec) {
         for (var i=0; i<facet_groups.length; i++) {
             var facet_group = facet_groups[i];
             if (facet_group.facets.length) {
-                that.facet_group(facet_group);
+                that.create_facet_group(that.facet_tabs, facet_group);
             }
         }
     };
diff --git a/install/ui/index.html b/install/ui/index.html
index af8a1e109..6e85d28b3 100644
--- a/install/ui/index.html
+++ b/install/ui/index.html
@@ -46,22 +46,36 @@
     <link rel="icon" type="image/ico" href="favicon.ico">
 </head>
 
-<body> 
-  <div class="center-container">
-    <div class="header" >
-      <span class="header-logo">
-        <a href="#"><img src="ipalogo.png" /><img src="ipabanner.png" /></a>
-      </span>
-      <span id="header-network-activity-indicator" class="network-activity-indicator">
-        <img src="spinner_header.gif" />
-      </span>
-      <span id="loggedinas" class="header-loggedinas">
-        <a href="#"><span id="login_header">Logged in as</span>: <strong>user@FREEIPA.ORG</strong></a>
-      </span>
+<body>
+
+    <div id="container">
+
+        <div id="background">
+            <div id="background-header"></div>
+            <div id="background-navigation"></div>
+            <div id="background-left"></div>
+            <div id="background-center"></div>
+            <div id="background-right"></div>
+        </div>
+
+        <div id="header">
+            <span class="header-logo">
+                 <a href="#"><img src="ipalogo.png" /><img src="ipabanner.png" /></a>
+            </span>
+            <span id="header-network-activity-indicator" class="network-activity-indicator">
+                 <img src="spinner_header.gif" />
+            </span>
+            <span id="loggedinas" class="header-loggedinas">
+                 <a href="#"><span id="login_header">Logged in as</span>: <strong>user@FREEIPA.ORG</strong></a>
+            </span>
+        </div>
+
+        <div id="navigation"></div>
+
+        <div id="content"></div>
+
     </div>
-    <div id="navigation" class="tabs"></div>
-    <div id="content"></div>
-  </div>
+
 </body>
 
 </html>
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 8cac85cd0..cd7a9c6fe 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -11,16 +11,22 @@
 @font-face {font-family: "FreeWay"; src:url("FreeWay.otf");}
 @font-face {font-family: "FreeWayBold"; src:url("FreeWay-Bold.otf");}
 
-body{
-    overflow:hidden;
-    background-image:url("outer-bg.png");
-    background-repeat:repeat-x;
-    background-position:left top;
-    background-color:#FFFFFF;
+html {
+    height: 100%;
+}
+
+body {
+    overflow: auto;
+    background: url("outer-bg.png");
+    background-repeat: repeat-x;
+    background-position: left top;
+    background-color: #FFFFFF;
     border-width: 0;
-    font-family:"Liberation Sans",Arial,Sans;
-    font-size:11px;
+    font-family: "Liberation Sans",Arial,Sans;
+    font-size: 11px;
     margin: 0;
+    padding: 0;
+    height: 100%;
 }
 
 .network-activity-indicator {
@@ -28,11 +34,66 @@ body{
     padding: 5px;
 }
 
-.center-container {
-        margin-left: auto;
-        margin-right: auto;
-        width: 960px;
-    background: url("centered-bg.png") no-repeat scroll 0 12.2em transparent;
+/* ---- Container ---- */
+
+#container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 960px;
+    margin: 0 auto 0;
+}
+
+/* ---- Background ---- */
+
+#background-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 34px;
+    background: url("top-bg.png") #0C3B00;
+}
+
+#background-navigation {
+    position: absolute;
+    top: 34px;
+    left: 0;
+    right: 0;
+    height: 72px;
+    background: url("Mainnav-background.png");
+}
+
+#background-left {
+    position: absolute;
+    top: 106px;
+    left: 0;
+    width: 10px;
+    bottom: 0;
+    background: url("background-left.png");
+    background-repeat: no-repeat;
+}
+
+#background-center {
+    position: absolute;
+    top: 106px;
+    left: 10px;
+    right: 10px;
+    bottom: 0;
+    background: url("background-center.png");
+    background-repeat: repeat-x;
+}
+
+#background-right {
+    position: absolute;
+    top: 106px;
+    right: 0;
+    width: 10px;
+    bottom: 0;
+    background: url("background-right.png");
+    background-repeat: no-repeat;
 }
 
 .ui-widget {
@@ -79,57 +140,456 @@ body{
 }
 
 /*  ----  Header  ----  */
-div.header {
-    background: url("top-bg.png") #0C3B00;
-    width: 100%;
-    height: 3.1em;
+#header {
+    position: absolute;
+    top: 0;
+    left: 6px;
+    right: 6px;
+    height: 34px;
+    background: transparent;
 }
 
-div.header a {
+#header a {
     text-decoration: none;
 }
 
-div.header a:link {
+#header a:link {
     text-decoration: none;
     color: white;
 }
 
-div.header a:visited {
+#header a:visited {
     text-decoration: none;
     color: white;
 }
 
-div.header span.header-logo {
+#header span.header-logo {
     padding-left: 2em;
 }
 
-div.header span.header-logo a img {
+#header span.header-logo a img {
     border: 0;
 }
 
-div.header span.header-loggedinas {
-    width: 96em;
+/* ---- Logged-in As ---- */
+#loggedinas {
+    float: right;
+    line-height: 34px;
+    margin-right: 10px;
     color: #fff;
-    display: block;
-    padding-left: 71em;
-    margin-top: -2.6em;
-    margin-left: auto;
-    margin-right: 27.6em;
-    width: 20em;
 }
 
 /* ---- Navigation ---- */
+#navigation {
+    position: absolute;
+    top: 34px;
+    left: 6px;
+    right: 6px;
+    height: 102px;
+}
+
+#navigation.tabs-3 {
+    height: 150px;
+}
+
 div.tabs {
     width: 100%;
-    height: 100%;
     min-height: 4em;
     background: transparent;
 }
 
+/* ---- Tabs level 1 ---- */
+
+.tabs1 > .ui-tabs-nav {
+    background: transparent;
+}
+
+.tabs1 > .ui-tabs-nav > .ui-state-hover {
+	background: url("hover-tab.png");
+}
+
+.tabs1 > .ui-tabs-nav {
+    padding: 33px 0 0;
+    margin: 0;
+    border: none;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+}
+
+.tabs1 > .ui-tabs-nav li {
+    -moz-border-radius: 0 !important;
+        -webkit-border-radius: 0 !important;
+    background-image: url("Mainnav-offtab.png");
+    margin: 0 0.4em 0 0;
+    border-width: 0;
+    text-align: center;
+    vertical-align:baseline;
+        border: 1px solid #A0A0A0;
+ }
+
+.tabs1 > .ui-tabs-nav > li.ui-tabs-selected {
+    padding: 0 0;
+    background-image: url("Mainnav-ontab.png");
+    text-align: center;
+}
+
+.tabs1 > .ui-tabs-nav > li > a {
+    -moz-border-radius: 0 !important;
+        -webkit-border-radius: 0 !important;
+    font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
+    width: 5em;
+    height: 20px;
+    color: #858585;
+    margin: 0 auto;
+    text-align:center;
+    font-size:1.5em;
+        text-shadow: 1px 1px 0 #FFFFFF;
+}
+
+.tabs1 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited{
+    color: #858585;
+}
+
+.tabs1 .ui-tabs-nav li.ui-tabs-selected a{
+    color: #1e5e05;
+}
+
+.tabs1 .ui-tabs-panel {
+    display: block;
+    border-width: 0;
+    padding: 0 0 0 0;
+    background-color: transparent;
+}
+
+/* ---- Tabs level 2 ---- */
+
+.tabs2 {
+}
+
+.tabs2 > .ui-tabs-nav {
+    padding: 4px 10px 1px;
+    margin: 0;
+    height: 25px;
+    border: none;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    background: transparent;
+}
+
+.tabs2 .ui-tabs-nav li {
+    width:auto;
+    margin: 0;
+    background: none repeat scroll 0 0 transparent !important;
+    color: white;
+        border: none;
+}
+
+.tabs2 .ui-tabs-nav li.ui-tabs-selected  {
+    background: url("nav-arrow.png") no-repeat scroll center 2.2em transparent !important;
+    height: 3.1em;
+        border: none;
+        margin: 0;
+}
+
+.tabs2 .ui-tabs-nav li a {
+    width:auto;
+    padding: 0.3em 0.8em ;
+    -moz-border-radius: 2em !important;
+        -webkit-border-radius: 2em !important;
+    border-radius: 2em !important;
+    color: #333333;
+    font-size: 1em;
+    font-family: "Liberation Sans", Arial, Sans;
+        margin: 0 0.3em;
+}
+
+.tabs2 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited {
+    color: #333333;
+}
+
+.tabs2 .ui-tabs-nav li.ui-tabs-selected a,
+.tabs2 .ui-tabs-nav li a:hover {
+    background-color:#EEEEEE;
+    color: #164304;
+        text-shadow: 1px 1px 0 #FFFFFF;
+
+}
+
+/* ---- Tabs level 3 ---- */
+
+.tabs3 {
+    height: 28px;
+}
+
+.tabs3 > .ui-tabs-nav {
+    padding:  1em 2em 0.1em 2em;
+    border: none;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    background: transparent;
+}
+
+/* ---- Content ---- */
 #content {
-    min-height: 35em;
+    position: absolute;
+    top: 136px;
+    left: 6px;
+    right: 6px;
+    bottom: 10px;
+}
+
+#content.tabs-3 {
+    top: 175px;
+}
+
+/* ---- Entity ---- */
+
+.entity {
+    height: 100%;
+    position: relative;
+}
+
+.entity h1{
+    margin: 0 0 10px;
+/*
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+
+    -moz-border-radius: 0.5em 0.5em 0 0;
+        -webkit-border-radius: 0.5em 0.5em 0 0;
+    background: -moz-linear-gradient(center top , #EEEEEE, #DFDFDF) repeat scroll 0 0 transparent;
+    background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DFDFDF));
+*/
 }
 
+.entity-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 70px;
+    margin: 10px 10px 0;
+}
+
+.entity-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: gray;
+    display: block;
+}
+
+.entity-title h3 {
+    margin: 0;
+}
+
+.entity-title span {
+    display: inline;
+}
+
+.entity-pkey {
+    color:black;
+}
+
+.entity-search {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.back-link {
+    cursor: pointer;
+}
+
+.entity-tabs {
+    position: absolute;
+    height: 40px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1; /* need to be above facet header */
+}
+
+.facet-group {
+    float: left;
+/*    height: 3em; */
+    margin-right: 1em;
+    position: relative;
+    height: 100%;
+}
+
+.facet-group-name {
+    height: 15px;
+}
+
+.facet-tab {
+    height: 25px;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+}
+
+.facet-tab li {
+    display: inline-block;
+    height: 25px;
+    position: relative;
+}
+
+.facet-tab li a {
+    color: #42454a;
+    background-color: #dedbde;
+    border: 1px solid #c9c3ba;
+    border-bottom: none;
+    margin: 5px 0 0;
+    padding: 0 4px 0;
+    text-decoration: none;
+    display: inline-block;
+    line-height: 19px;
+}
+
+.facet-tab li a:hover {
+    background-color: #f1f0ee;
+}
+.facet-tab li a.selected {
+    color: #000;
+    background-color: #f1f0ee;
+    font-weight: bold;
+    margin: 0;
+    padding: 5px 4px 1px;
+}
+
+.facet-tab li.settings {
+    margin-left:1em;  margin-right:1em;
+}
+
+.entity-content {
+    position: absolute;
+    top: 80px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    font-size: 10px;
+    margin: 0 10px 0;
+}
+
+.entity-content div.content-buttons {
+    float: right;
+    margin-right: 1.5em;
+}
+
+.entity-content div.content-buttons img {
+    border: 0;
+}
+
+/* ---- Facet ---- */
+
+.facet {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.facet-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50px;
+
+    padding: 10px 10px 10px;
+
+    border-color: #C9C3BA;
+    border-style: solid;
+    border-width: 1px;
+
+    background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
+    background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
+}
+
+.facet-content {
+    position: absolute;
+    top: 75px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+}
+
+/* ---- Search ---- */
+
+.content-table {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.content-table tbody {
+    position: absolute;
+    top: 31px;
+    left: 3px;
+    right: 4px;
+    bottom: 32px;
+}
+
+.search-controls {
+    -moz-border-radius: .7em .7em 0 0;
+        -webkit-border-radius: .7em .7em 0 0;
+    height:2.5em;
+    background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
+        background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
+    position: relative;
+    padding: 1em 1.5em;
+    margin-top: .8em;
+}
+
+.search-table {
+    padding: 0;
+    width: 100%;
+    border: none;
+}
+
+.search-table > a:link, a:visted {
+    color:black;
+}
+
+.search-table thead tr th {
+    padding-left: 0.5em;
+    background-color:#f6f6f6;
+    color:#333333;
+    text-align: left;
+    border: 1px solid #dfdfdf;
+    height: 25px;
+}
+
+.search-table tbody td {
+    padding-left: 0.5em;
+}
+
+.search-table tfoot td {
+    padding-left: 0.5em;
+    border-top: 1px solid #dfdfdf;
+    height: 25px;
+}
+
+.search-table span[name=summary] {
+    float: left;
+    line-height: 25px;
+}
+
+.search-table span[name=pagination] {
+    float: right;
+}
+
+.search-table span[name=pagination] a {
+    cursor:pointer;
+}
+
+.search-table span[name=pagination] input[name=current_page] {
+    width: 22px;
+}
 
 ul#viewtype {
     padding-left: 2em;
@@ -196,6 +656,29 @@ hr {
     margin-top: 1em;
 }
 
+/* ---- Details ---- */
+
+.details-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 32px;
+    overflow: auto;
+    border: none;
+}
+
+.details-summary {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 29px;
+    border-top: 1px solid #DFDFDF;
+    padding-left: 0.5em;
+    line-height: 25px;
+}
+
 .details-section {
     margin-left: 4.5em;
     margin-right: 1.5em;
@@ -335,24 +818,6 @@ span.attrhint {
 }
 
 
-/*Navigation */
-.tabs1 .ui-tabs-nav .ui-state-hover {
-	background: url("hover-tab.png");
-}
-
-
-
-.tabs1 .ui-tabs-nav {
-    padding-left: 4px;
-    padding-top: 3em;
-    margin: 0;
-    border: none;
-    background-image: url("Mainnav-background.png");
-    -moz-border-radius: 0;
-        -webkit-border-radius: 0;
-    height: 3.5em;
-}
-
 .ui-tabs {
     padding:0;
 }
@@ -455,116 +920,11 @@ span.ui-icon-search {
     padding: 0.4em 1em 0.4em 2em !important;
 }
 
-[title="details"] {
-        margin-top: -.7em !important;
-        overflow: scroll;
-}
-
-
 [title=">>"] {
     margin-top: 1em !important;
 }
 
 
-.tabs1 .ui-tabs-nav li {
-    -moz-border-radius: 0 !important;
-        -webkit-border-radius: 0 !important;
-    background-image: url("Mainnav-offtab.png");
-    margin: 0 0.2em;
-    border-width: 0;
-    text-align: center;
-    vertical-align:baseline;
-        border: 1px solid #A0A0A0;
- }
-
-.tabs1 .ui-tabs-nav li.ui-tabs-selected {
-    padding: 0 0;
-    background-image: url("Mainnav-ontab.png");
-    text-align: center;
-    margin: 0 0.2em;
-}
-
-.tabs1 .ui-tabs-nav li a {
-    -moz-border-radius: 0 !important;
-        -webkit-border-radius: 0 !important;
-    font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
-    width: 5em;
-    padding: none;
-    color: #858585;
-    margin: 0 auto;
-    text-align:center;
-    font-size:1.5em;
-        text-shadow: 1px 1px 0 #FFFFFF;
-}
-
-
-.tabs1 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited{
-    color: #858585;
-}
-
-.tabs1 .ui-tabs-nav li.ui-tabs-selected a{
-    color: #1e5e05;
-}
-
-.tabs1 .ui-tabs-panel {
-    display: block;
-    border-width: 0;
-    padding: 0 0 0 0;
-    background-color: transparent;
-}
-
-.tabs2 .ui-tabs-nav {
-    padding:  0.2em 6em 0.1em 2em;
-    margin-top: 0em;
-    height:  25px;
-    background-image: url("Subnav-background.png");
-}
-
-.tabs3 .ui-tabs-nav {
-    padding:  1em 2em 0.1em 2em;
-    background: transparent;
-}
-
-.tabs2 .ui-tabs-nav li {
-    width:auto;
-    margin: 0;
-    background: none repeat scroll 0 0 transparent !important;
-    color: white;
-        border: none;
-}
-
-.tabs2 .ui-tabs-nav li.ui-tabs-selected  {
-    background: url("nav-arrow.png") no-repeat scroll center 2.2em transparent !important;
-    height: 3.1em;
-        border: none;
-        margin: 0;
-}
-
-
-.tabs2 .ui-tabs-nav li a {
-    width:auto;
-    padding: 0.3em 0.8em ;
-    -moz-border-radius: 2em !important;
-        -webkit-border-radius: 2em !important;
-    border-radius: 2em !important;
-    color: #333333;
-    font-size: 1em;
-    font-family: "Liberation Sans", Arial, Sans;
-        margin: 0 0.3em;
-}
-
-.tabs2 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited {
-    color: #333333;
-}
-
-.tabs2 .ui-tabs-nav li.ui-tabs-selected a,
-.tabs2 .ui-tabs-nav li a:hover {
-    background-color:#EEEEEE;
-    color: #164304;
-        text-shadow: 1px 1px 0 #FFFFFF;
-
-}
-
 span.sub-nav-off > a:link, span.sub-nav-off >  a:visited{
     color:white;
 }
@@ -578,23 +938,6 @@ span.main-separator{
     padding:0.1em;
 }
 
-/* Entity */
-
-
-.entity h1{
-    margin: 0 0 10px;
-/*
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-
-    -moz-border-radius: 0.5em 0.5em 0 0;
-        -webkit-border-radius: 0.5em 0.5em 0 0;
-    background: -moz-linear-gradient(center top , #EEEEEE, #DFDFDF) repeat scroll 0 0 transparent;
-    background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DFDFDF));
-*/
-}
-
-
 .action-button {
     background: none;
     background-image:none;
@@ -608,64 +951,6 @@ a.action-button-disabled {
 }
 
 
-/* Search */
-
-.search-controls {
-    -moz-border-radius: .7em .7em 0 0;
-        -webkit-border-radius: .7em .7em 0 0;
-    height:2.5em;
-    background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
-        background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
-    position: relative;
-    padding: 1em 1.5em;
-    margin-top: .8em;
-}
-
-.search-table > a:link,a:visted{
-    color:black;
-}
-
-.search-table{
-    padding: 0;
-    width:100%;
-    border: none;
-}
-
-.search-table td{
-    padding-left: 0.5em;
-}
-
-
-.search-table th{
-    padding-left: 0.5em;
-    background-color:#f6f6f6;
-    color:#333333;
-    text-align: left;
-    border: 1px solid #dfdfdf;
-}
-
-.search-table tfoot tr td {
-    border-top: 1px solid #dfdfdf;
-    margin-top: 1em;
-    padding: 0.9em 0 0 1em;
-}
-
-.search-table span[name=summary] {
-    float: left;
-}
-
-.search-table span[name=pagination] {
-    float: right;
-}
-
-.search-table span[name=pagination] a {
-    cursor:pointer;
-}
-
-.search-table span[name=pagination] input[name=current_page] {
-    width: 22px;
-}
-
 .aci-attribute-table {
 
 }
@@ -764,10 +1049,12 @@ dl.modal dd {
         margin: 0 1em 0 0.5em;
 }
 */
-.ui-widget-content, #content {
-        border:0;
+.ui-widget-content {
+    border:0;
 }
 
+/* ---- Table ---- */
+
 table.scrollable thead {
     display: block;
 }
@@ -843,105 +1130,3 @@ table.scrollable tbody {
     float: right;
     padding-right: 1.5em;
 }
-
-.entity-header {
-    padding: 0 20px 10px;
-}
-
-.entity-header .entity-title {
-    color:gray;
-    padding-right:5em;
-}
-
-
-.entity-header .entity-title span{
-    display: inline;
-}
-
-.entity-header .entity-title .entity-pkey {
-    color:black;
-}
-
-.entity-search{
-    float:right;
-}
-
-.entity-tabs {
-}
-
-.back-link {
-    cursor: pointer;
-}
-
-.facet-tab {
-    list-style-type: none;
-    margin: 0;
-    padding: 1em 0 0.3em 0;
-    cursor: pointer;
-}
-
-.facet-tab li {
-    display: inline;
-}
-
-.facet-tab li a {
-    color: #42454a;
-    background-color: #dedbde;
-    border: 1px solid #c9c3ba;
-    border-bottom: none;
-    padding: 0.3em;
-    text-decoration: none;
-}
-
-.facet-tab li a:hover {
-    background-color: #f1f0ee;
-}
-.facet-tab li a.selected {
-    color: #000;
-    background-color: #f1f0ee;
-    font-weight: bold;
-    padding: 0.7em 0.3em 0.38em 0.3em;
-}
-
-.facet-tab-group {
-    float: left;
-/*    height: 3em; */
-    display:inline;
-    margin-right:1em;
-}
-
-
-.facet-tab li.settings {
-    margin-left:1em;  margin-right:1em;
-}
-
-.entity-content {
-    clear: both;
-    font-size: 10px;
-    padding: 0 20px 10px;
-}
-
-.entity-content div.content-buttons {
-    float: right;
-    margin-right: 1.5em;
-
-}
-
-.entity-content div.content-buttons img {
-    border: 0;
-}
-
-.facet-header {
-    padding: 10px 10px 10px;
-
-    border-color: #C9C3BA;
-    border-style: solid;
-    border-width: 1px;
-
-    background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
-    background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
-}
-
-.facet-content {
-    margin: 10px 0 0;
-}
diff --git a/install/ui/navigation.js b/install/ui/navigation.js
index 11520ff91..875f4056c 100644
--- a/install/ui/navigation.js
+++ b/install/ui/navigation.js
@@ -30,6 +30,7 @@ IPA.navigation = function(spec) {
     that.container = spec.container;
     that.content = spec.content;
     that.tab_class = spec.tab_class || 'tabs';
+    that.max_depth = spec.max_depth || 3;
 
     that.tabs = [];
     that.tabs_by_name = {};
@@ -129,9 +130,11 @@ IPA.navigation = function(spec) {
 
     that.create = function() {
 
-        that._create(that.tabs, that.container, 1);
+        var container = $('<div/>').appendTo(that.container);
 
-        var tabs = $('.' + that.tab_class);
+        that._create(that.tabs, container, 1);
+
+        var tabs = $('.' + that.tab_class, that.container);
         tabs.tabs({
             select: function(event, ui) {
                 var panel = $(ui.panel);
@@ -187,6 +190,10 @@ IPA.navigation = function(spec) {
     };
 
     that.update = function() {
+        for (var i=1; i<=that.max_depth; i++) {
+            that.container.removeClass(that.tab_class+'-'+i);
+            that.content.removeClass(that.tab_class+'-'+i);
+        }
         $('.entity', that.content).css('display', 'none');
         that._update(that.tabs, that.container, 1);
     };
@@ -208,6 +215,9 @@ IPA.navigation = function(spec) {
             that._update(tab.children, tab.container, depth+1);
 
         } else if (tab.entity) {
+            that.container.addClass(that.tab_class+'-'+depth);
+            that.content.addClass(that.tab_class+'-'+depth);
+
             var entity_container = $('.entity[name="'+tab.entity.name+'"]', that.content);
             if (!entity_container.length) {
                 tab.content = $('<div/>', {
@@ -218,7 +228,7 @@ IPA.navigation = function(spec) {
                 tab.entity.create(tab.content);
             }
 
-            entity_container.css('display', 'inline');
+            entity_container.css('display', 'block');
             tab.entity.setup(tab.content);
         }
     };
diff --git a/install/ui/search.js b/install/ui/search.js
index e4c866826..cb80467cb 100644
--- a/install/ui/search.js
+++ b/install/ui/search.js
@@ -24,10 +24,6 @@
 
 /* REQUIRES: ipa.js */
 
-/* For scrolling tables, we want to make sure we leave enough room for the 
-   header and footer. */
-IPA.reserved_screen_size = 400;
-
 IPA.search_facet = function(spec) {
 
     spec = spec || {};
@@ -40,8 +36,7 @@ IPA.search_facet = function(spec) {
 
     that.search_all = spec.search_all || false;
 
-
-    function get_values (){
+    function get_values() {
         return that.table.get_selected_values();
     }
 
@@ -76,12 +71,13 @@ IPA.search_facet = function(spec) {
         }
 
         that.table = IPA.table_widget({
-            scrollable: true,
             id: entity.name+'-search',
+            'class': 'content-table',
             name: 'search',
             label: IPA.metadata.objects[entity.name].label,
             entity_name: entity.name,
-            search_all: that.search_all
+            search_all: that.search_all,
+            scrollable: true
         });
 
         var columns = that.columns.values;
@@ -158,14 +154,8 @@ IPA.search_facet = function(spec) {
 
     that.create_content = function(container) {
 
-        var span = $('<span/>', { 'name': 'search' }).appendTo(container);
-
-        that.table.create(span);
-        that.table.setup(span);
-    };
-
-    that.setup = function(container) {
-        that.facet_setup(container);
+        that.table.create(container);
+        that.table.setup(container);
     };
 
     that.show = function() {
diff --git a/install/ui/test/functional/user-password-reset.html b/install/ui/test/functional/user-password-reset.html
index e242c85c3..dddf732da 100644
--- a/install/ui/test/functional/user-password-reset.html
+++ b/install/ui/test/functional/user-password-reset.html
@@ -53,12 +53,12 @@
 </tr>
 <tr>
 	<td>click</td>
-	<td>xpath=/html/body/div[3]//button[1]</td>
+	<td>css=.ui-dialog button:nth-child(1)</td>
 	<td></td>
 </tr>
 <tr>
 	<td>waitForElementNotPresent</td>
-	<td>xpath=/html/body/div[3]</td>
+	<td>css=.ui-dialog</td>
 	<td></td>
 </tr>
 <tr>
diff --git a/install/ui/test/navigation_tests.js b/install/ui/test/navigation_tests.js
index 9126fae3a..94d0e027c 100644
--- a/install/ui/test/navigation_tests.js
+++ b/install/ui/test/navigation_tests.js
@@ -87,7 +87,9 @@ test("Testing IPA.navigation.create().", function() {
     ok(user_mock_called, "mock user setup was called");
     ok(!group_mock_called, "mock group setup was not called because the tab is inactive");
 
-    var level1_tabs = navigation_container.children('div');
+    var tabs_container = navigation_container.children('div');
+
+    var level1_tabs = tabs_container.children('div');
     same(level1_tabs.length, 1, "One level 1 tab");
 
     var identity_tab = level1_tabs.first();
@@ -140,13 +142,15 @@ test("Testing IPA.navigation.update() with valid index.", function() {
     navigation.push_state({'identity': 'two'});
     navigation.update();
 
+    var tabs_container = navigation_container.children('div');
+
     same(
-        navigation_container.tabs('option', 'selected'), 0,
+        tabs_container.tabs('option', 'selected'), 0,
         "Active tab at level 1"
     );
 
     same(
-        $('.tabs[name=identity]', navigation_container).tabs('option', 'selected'), 1,
+        $('.tabs[name=identity]', tabs_container).tabs('option', 'selected'), 1,
         "Active tab at level 2"
     );
 
@@ -190,13 +194,15 @@ test("Testing IPA.navigation.update() with out-of-range index.", function() {
     navigation.push_state({'identity': 'three'});
     navigation.update();
 
+    var tabs_container = navigation_container.children('div');
+
     same(
-        navigation_container.tabs('option', 'selected'), 0,
+        tabs_container.tabs('option', 'selected'), 0,
         "Active tab at level 1"
     );
 
     same(
-        $('.tabs[name=identity]', navigation_container).tabs('option', 'selected'), 0,
+        $('.tabs[name=identity]', tabs_container).tabs('option', 'selected'), 0,
         "Active tab at level 2"
     );
 
diff --git a/install/ui/webui.js b/install/ui/webui.js
index 0ca6b703a..94c20d4a9 100644
--- a/install/ui/webui.js
+++ b/install/ui/webui.js
@@ -153,17 +153,6 @@ $(function() {
         IPA.nav.update();
 
         $('#login_header').html(IPA.messages.login.header);
-
-        function resizeFacet(){
-            var entity = IPA.current_entity;
-            if (entity){
-                var facet_name = IPA.current_facet(entity);
-                var facet = entity.get_facet(facet_name);
-                if (!facet) return;
-                facet.resize();
-            }
-        }
-        jQuery.event.add(window, "resize", resizeFacet);
     }
 
 
diff --git a/install/ui/widget.js b/install/ui/widget.js
index c48d967e2..fc73e85b1 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -142,6 +142,7 @@ IPA.widget = function(spec) {
     };
 
     that.create = function(container) {
+        that.container = container;
     };
 
     that.setup = function(container) {
@@ -1056,6 +1057,7 @@ IPA.table_widget = function (spec) {
 
     that.scrollable = spec.scrollable;
     that.save_values = typeof spec.save_values == 'undefined' ? true : spec.save_values;
+    that['class'] = spec['class'];
 
     that.current_page = 1;
     that.total_pages = 1;
@@ -1103,10 +1105,14 @@ IPA.table_widget = function (spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
         that.table = $('<table/>', {
             'class': 'search-table'
         }).appendTo(container);
 
+        if (that['class']) that.table.addClass(that['class']);
+
         if (that.scrollable) {
             that.table.addClass('scrollable');
         }
@@ -1142,13 +1148,13 @@ IPA.table_widget = function (spec) {
 
             th = $('<th/>').appendTo(tr);
 
-            if (that.scrollable ) {
+            if (that.scrollable) {
                 var width;
                 if (column.width) {
                     width = parseInt(
                         column.width.substring(0, column.width.length-2),10);
                     width += 16;
-                }else{
+                } else {
                     /* don't use the checkbox column as part of the overall
                        calculation for column widths.  It is so small
                        that it throws off the average. */
@@ -1281,7 +1287,6 @@ IPA.table_widget = function (spec) {
                 name: 'total_pages'
             }).appendTo(that.pagination);
         }
-        that.resize();
     };
 
     that.select_changed = function(){
@@ -1296,15 +1301,6 @@ IPA.table_widget = function (spec) {
         that.tbody.empty();
     };
 
-    that.resize = function(){
-        that.tbody.attr('overflow-y', 'auto');
-
-        var win = $(window);
-        var table_max_height = win.height() -
-            IPA.reserved_screen_size;
-        that.tbody.height(table_max_height);
-    };
-
     that.load = function(result) {
 
         that.empty();
-- 
cgit