action panel style

make clickable links blue
change spacing to keep headers from wrapping
convert most px values to em, to support scaling
indent action controls and place them under the active facet
set default font size to 11px

2 files changed, 110 insertions, 99 deletions

diff --git a/install/static/entity.js b/install/static/entity.js
index 8620ef09d..a6f31e84b 100644
--- a/install/static/entity.js
+++ b/install/static/entity.js
@@ -486,11 +486,22 @@ function ipa_facet_create_action_panel(container) {
             /*assume for now that entities with only a single facet
               do not have search*/
             if (entity.facets.length > 0 ){
-                main_facet.text( 'List ' +  IPA.metadata[entity_name].label);
+                if ( entity.facets[0].name === ipa_current_facet( entity)){
+                    main_facet.text( IPA.metadata[entity_name].label);
+                    main_facet.appendTo(ul);
+                    ul.append($('<li><span class="action-controls"/></li>'));
+                }else{
+                    main_facet.html(
+                        $('<span />',{
+                            "class":"input_link"
+                        }).append(
+                            $('<span/>',{
+                                "class":"ui-icon ui-icon-triangle-1-w "
+                            })
+                        ).append('Back to List '));
+                    main_facet.appendTo(ul);
+                }
             }
-            main_facet.appendTo(ul);
-
-            ul.append($('<li><span class="action-controls"/></li>'));
             var facet_groups = {};
             for (var i=1; i<entity.facets.length; i++) {
                 other_facet = entity.facets[i];
@@ -508,12 +519,24 @@ function ipa_facet_create_action_panel(container) {
                         facet_groups[facet_group] = li;
                     }
                     var li = facet_groups[facet_group];
-                    li.after(
-                        build_link(other_facet, other_facet.label)
-                    );
+                    var link =  build_link(other_facet, other_facet.label)
+                    li.after(link );
+                    if ( other_facet.name === ipa_current_facet( entity)){
+                        var text = link.text();
+                        link.text('');
+                        link.append($('<ul>').
+                                    append('<li>'+ text+'</li>').
+                                    append($('<li/>',{
+                                        html:$('<span />',{
+                                            class:"action-controls"})})));
+                    }
                     facet_groups[facet_group] = li.next();
+
                 } else {
                     ul.append(build_link(other_facet, other_facet.label));
+                    if ( other_facet.name === ipa_current_facet( entity)){
+                        ul.append($('<li><span class="action-controls"/></li>'));
+                    }
                 }
             }
         }else{
diff --git a/install/static/ipa.css b/install/static/ipa.css
index df138aa2f..85ec91f39 100644
--- a/install/static/ipa.css
+++ b/install/static/ipa.css
@@ -8,15 +8,19 @@
 */
 
 
+@font-face {font-family: "FreeWay"; src:url("FreeWay.otf");}
+@font-face {font-family: "FreeWayBold"; src:url("FreeWay-Bold.otf");}
+
 body{
     border-width: 0;
     font-family:"Liberation Sans",Arial,Sans;
-    font-size:62.5%;
+    font-size:11px;
     margin: 0;
 }
 
-@font-face {font-family: "FreeWay"; src:url("FreeWay.otf");}
-@font-face {font-family: "FreeWayBold"; src:url("FreeWay-Bold.otf");}
+.ui-widget {
+    font-size: 1em;
+}
 
 .input_link {
     padding: .4em 1em .4em 2em;
@@ -28,18 +32,17 @@ body{
 .input_link span.ui-icon {
     -moz-border-radius: 0.3em;
     border: 1px solid #B8B8B8;
-    margin: -9px 0.4em 0em -0.3em;
+    margin: -0.9em 0.4em 0em -0.3em;
     position: absolute;
     left: .2em;
     top: 50%;
-
 }
 
 /*  ----  Header  ----  */
 div.header {
     background-color:#0C3B00;
     width: 100%;
-    height: 40px;
+    height: 4em;
 }
 
 div.header a {
@@ -65,32 +68,22 @@ div.header span.header-logo a img {
 }
 
 div.header span.header-loggedinas {
-    width: 960px;
+    width: 96em;
     color: #fff;
     display: block;
     padding-left: none;
-    margin-top: -26px;
+    margin-top: -2.6em;
     margin-left: auto;
-    margin-right: 276px;
-    width: 200px;
+    margin-right: 27.6em;
+    width: 20em;
 }
 
-
-
 /* ---- Navigation ---- */
 div.tabs {
     overflow: auto;
     width: 100%;
     height: 100%;
-    min-height: 400px;
-}
-
-h1 {
-    font-size: 26pt;
-    font-weight: bold;
-    margin-bottom: 30px;
-    margin-left: 15px;
-    margin-top: 18px;
+    min-height: 40em;
 }
 
 div#content {
@@ -101,7 +94,7 @@ div#content {
 
 
 ul#viewtype {
-    padding-left: 20px;
+    padding-left: 2em;
 }
 
 ul#viewtype li {
@@ -109,7 +102,7 @@ ul#viewtype li {
     display: inline;
     font-weight: bold;
     list-style-type: none;
-    padding-right: 20px;
+    padding-right: 2em;
 }
 
 
@@ -123,7 +116,7 @@ ul#viewtype li a {
 
 div.content div.content-buttons {
     float: right;
-    margin-right: 15px;
+    margin-right: 1.5em;
 }
 
 div.content div.content-buttons img {
@@ -136,8 +129,8 @@ h2 {
     font-weight: normal;
     color: #333333;
     text-transform: uppercase;
-    margin-left: 15px;
-    margin-bottom: 0px;
+    margin-left: 1em;
+    margin-bottom: 0;
     text-align: left;
 }
 
@@ -155,19 +148,19 @@ hr {
     background-color: #EEEEEE;
     clear: both;
     color: #FFFFFF;
-    height: 1px;
-    margin-left: 15px;
-    margin-right: 15px;
-    margin-top: 10px;
+    height: 0.1em;
+    margin-left: 1.5em;
+    margin-right: 1.5em;
+    margin-top: 1em;
 }
 
 .details-section {
-    margin-left: 45px;
-    margin-right: 15px;
-    margin-top: 18px;
+    margin-left: 4.5em;
+    margin-right: 1.5em;
+    margin-top: 1.8em;
     white-space: nowrap;
-    padding-bottom: 18px;
-    padding-right: 18px;
+    padding-bottom: 1.8em;
+    padding-right: 1.8em;
 }
 
 .undo {
@@ -176,52 +169,47 @@ hr {
 
 dl.entryattrs {
     clear: both;
-    margin-left: 15px;
-    margin-top: 18px;
+    margin-left: 1.5em;
+    margin-top: 1.8em;
     white-space: nowrap;
 }
 
 dl.entryattrs dt {
     clear: left;
     float: left;
-    padding-bottom: 18px;
-    padding-right: 18px;
+    padding-bottom: 1.8em;
+    padding-right: 1.8em;
     text-align: right;
-    width: 160px;
+    width: 16em;
     margin: 0.5em -0.5em 0 -6em;
 }
 
 dl.entryattrs dd {
     float: left;
-    padding-bottom: 18px;
+    padding-bottom: 1.8em;
 }
 
 dl.entryattrs dd.first {
-    margin-left: 0px;
-    margin-top: 7px;
+    margin-left: 0;
+    margin-top: 0.7em;
 }
 
 dl.entryattrs dd.other {
     clear: both;
-    margin-left: 107px;
+    margin-left: 10.7em;
 }
 
 dl.entryattrs input {
-    margin-right: 5px;
-    margin-top: -12px;
-    min-width: 275px;
+    margin-right: 0.5em;
+    margin-top: -1.2em;
+    min-width: 27.5em;
 }
 
-div#backtotop {
-    margin-left: 20px;
-    margin-right: 20px;
-    text-align: right;
-}
 
 span.attrhint {
     font-size: 8pt;
-    left: 40em;
-    margin-left: 100px;
+    left: 5em;
+    margin-left: 12.5em;
     position: absolute;
     overflow-x: hidden;
 }
@@ -235,13 +223,14 @@ span.attrhint {
     border: none;
     background-image: url(Mainnav-background.png);
     -moz-border-radius: 0;
-
 }
 
 .ui-tabs {
     padding:0;
 }
 
+#the positions for these are in the large icon image,
+#and need to be specified in pixels.
 .ui-icon-plus {
     background-position: -16px -129px;
 }
@@ -343,7 +332,7 @@ span.attrhint {
 
 .tabs2 .ui-tabs-nav {
     padding:  0.3em 6em 0  7em;
-    margin: 0px;
+    margin: 0;
     height:  2.5em;
     background-image: url(Subnav-background.png);
 }
@@ -351,7 +340,7 @@ span.attrhint {
 .tabs2 .ui-tabs-nav li {
     width:auto;
     padding-left: 1em;
-    margin: 0px 0;
+    margin: 0;
     background: #326122 !important;
     color: white;
 }
@@ -383,7 +372,6 @@ span.attrhint {
 }
 
 .tabs2 .ui-tabs-nav li.ui-tabs-selected a{
-  # border:1px solid #1C3612;
     background: none repeat scroll 0 0 #1C3612;
     color: white;
 
@@ -408,7 +396,7 @@ span.main-separator{
 
 .entity-container{
     position: relative;
-    left: 250px;
+    left: 25em;
     width: 80%;
     margin: 0.06em;
     padding: 0.06em;
@@ -417,7 +405,7 @@ span.main-separator{
 
 .action-panel {
     position: fixed;
-    height: 330px;
+    height: 33em;
     left: 3em;
     border: none;
     float: left;
@@ -425,7 +413,7 @@ span.main-separator{
     margin-left: 2.5em;
     padding-left: 0.5em;
     padding-bottom: 1em;
-    width: 15.5em;
+    width: 18em;
     background-image:url('panel-background.png');
     background-repeat:no-repeat;
     background-position:right;
@@ -457,13 +445,13 @@ span.main-separator{
     font-size: 1.1em;
     color: #1d85d5;
     list-style-type: none;
-    height: 2.1em;
+    min-height: 2.1em;
     padding: none;
 }
 
 .action-panel li.search-facet {
     font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
-    color: #333333;
+    color: #1D85D5;
     cursor: pointer;
     text-transform: uppercase;
     font-size: 1.2em;
@@ -500,11 +488,15 @@ span.main-separator{
     font-size: 0.9em;
 }
 
+.action-controls {
+    padding-left: 2em;
+}
 
 .client {
+    font-size: 10px;
     margin-top: 0.4em;
     float: left;
-    min-width: 700px;
+    min-width: 70em;
 }
 
 
@@ -512,11 +504,11 @@ span.main-separator{
 
 .search-controls {
     -moz-border-radius: .7em .7em 0 0;
-    height: 25px;
+    height:2.5em;
     background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
     position: relative;
     padding: 1em 1.5em;
-    margin-top: 15px;
+    margin-top: 1.5em;
 }
 
 .search-table > a:link,a:visted{
@@ -640,59 +632,55 @@ table.scrollable tbody {
 }
 
 .adder-dialog-filter {
-    height: 25px;
-}
-
-.adder-dialog-filter {
-    height: 25px;
+    height: 2.5em;
 }
 
 .adder-dialog-results {
     position: relative;
-    height: 200px;
+    height: 20.0em;
 }
 
 .adder-dialog-available {
     border: 1px solid black;
     position: absolute;
-    top: 0px;
-    left: 0px;
-    bottom: 0px;
-    width: 250px;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 25.0em;
 }
 
 .adder-dialog-buttons {
     position: absolute;
-    top: 15px;
-    left: 250px;
-    right: 250px;
-    bottom: 0px;
+    top: 1.5em;
+    left: 25em;
+    right: 25;
+    bottom: 0;
     text-align: center;
 }
 
 .adder-dialog-selected {
     border: 1px solid black;
     position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    width: 250px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 25em;
 }
 
 .adder-dialog-internal {
     border: 1px solid black;
     position: absolute;
-    top: 0px;
-    left: 0px;
-    bottom: 45px;
-    width: 250px;
+    top: 0;
+    left: 0;
+    bottom: 4.5em;
+    width: 25em;
 }
 
 .adder-dialog-external {
     border: 1px solid black;
     position: absolute;
-    left: 0px;
-    bottom: 0px;
-    width: 250px;
-    height: 40px;
+    left: 0;
+    bottom: 0;
+    width: 25em;
+    height: 4em;
 }