From c8eb76766afc8755e709cdba62586a8ab1ad65c9 Mon Sep 17 00:00:00 2001 From: "Endi S. Dewata" Date: Tue, 21 Jun 2011 15:05:44 -0500 Subject: Converted entity header into facet header. The content and the size of entity header changes depending on the facet being displayed, so the entity header has been converted into a facet header to allow better control via CSS. The DNS record facet has been updated to use the same styling and support scrolling. To help styling and testing, all buttons have been assigned a name. --- install/ui/ipa.css | 323 ++++++++++++++--------------------------------------- 1 file changed, 82 insertions(+), 241 deletions(-) (limited to 'install/ui/ipa.css') diff --git a/install/ui/ipa.css b/install/ui/ipa.css index af27ed5ca..47ee51332 100644 --- a/install/ui/ipa.css +++ b/install/ui/ipa.css @@ -392,33 +392,56 @@ div.tabs { /* ---- Entity ---- */ .entity { - height: 100%; - position: relative; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } -.entity h1{ +.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-content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + font-size: 10px; + margin: 0 0 0; } -.entity-header { +.entity-content div.content-buttons { + float: right; + margin-right: 1.5em; +} + +.entity-content div.content-buttons img { + border: 0; +} + +/* ---- Facet ---- */ + +.facet { + position: absolute; + top: 20px; + left: 10px; + right: 10px; + bottom: 0; +} + +.facet-header { position: absolute; top: 0; left: 0; right: 0; - height: 70px; - margin: 20px 22px 0; + height: 130px; + margin: 0 12px 0; } -.entity-title { +.facet-title { position: absolute; top: 0; left: 0; @@ -426,57 +449,49 @@ div.tabs { display: block; } -.entity-title h3 { +.facet-title h3 { margin: 0; } -.entity-title span { +.facet-title span { display: inline; } -.entity-pkey { +.facet-pkey { color:black; } -.entity-search { +.back-link { + cursor: pointer; position: absolute; top: 0; right: 0; } -.back-link { - cursor: pointer; -} +/* ---- Facet Tabs ---- */ -.entity-tabs { +.facet-tabs { position: absolute; left: 0; right: 0; - bottom: 0; + bottom: 30px; z-index: 1; /* need to be above facet header */ - margin-bottom: -25px; - padding-bottom: 11px; border-bottom: 1px solid #C9C3BA; } .facet-group { float: left; -/* height: 3em; */ margin-right: 1em; position: relative; height: 100%; } .facet-group-name { - height: 15px; -} - -.facet-title { - display: none; + height: 20px; } .facet-tab { - height: 25px; + height: 31px; list-style-type: none; margin: 0; padding: 0; @@ -485,7 +500,6 @@ div.tabs { .facet-tab li { display: inline-block; - height: 25px; position: relative; padding-right: 5px; } @@ -494,7 +508,7 @@ div.tabs { background-color: #dedbde; border-left: 1px solid #c9c3ba; border-right: 1px solid #c9c3ba; - margin: 5px 0 0; + margin: 0 0 0; padding: 6px 16px; text-decoration: none; display: inline-block; @@ -506,6 +520,7 @@ div.tabs { .facet-tab li a:hover { background-color: #f1f0ee; } + .facet-tab li a.selected { color: #6C6F73; background-color: #f1f0ee; @@ -518,58 +533,51 @@ div.tabs { margin-left:1em; margin-right:1em; } -.entity-content { +/* ---- Facet Controls ---- */ + +.facet-controls { position: absolute; - top: 100px; 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; + height: 30px; + line-height: 30px; } -.facet-header { +.right-aligned-facet-controls { position: absolute; top: 0; - left: 0; right: 0; - height: 30px; - - padding: 5px; + bottom: 0; } -.facet-controls { - position: relative; - min-height: 1.8em; +.facet-controls > a { + font-size: 1.3em !important; + padding: 0 6px 0 0; } +/* ---- Facet Content ---- */ + .facet-content { position: absolute; - top: 35px; + top: 130px; left: 0; right: 0; bottom: 0; padding: 0; } -/* ---- Search ---- */ +/* ---- Facet Customization ---- */ + +.no-facet-tabs .facet-header { + height: 70px; +} + +.no-facet-tabs .facet-content { + top: 70px; +} + +/* ---- Search Facet ---- */ .content-table { position: absolute; @@ -587,7 +595,7 @@ div.tabs { bottom: 32px; } -.search-container { +.search-filter { float: right; width: 215px; -moz-border-radius: 15px !important; @@ -597,6 +605,7 @@ div.tabs { background: url("search-bg.png"); height: 18px; padding-left: 8px; + margin: 5px 0 5px; } .search-controls { @@ -730,7 +739,7 @@ hr { margin-top: 1em; } -/* ---- Details ---- */ +/* ---- Details Facet ---- */ .details-content { position: absolute; @@ -991,174 +1000,17 @@ span.ui-icon-search { margin-left: 0 !important; } -[title="Find"] { - background: none !important; - border: none !important; - color: transparent !important; - float: right !important; - margin: 0 -25em 0 0 !important; - width: 8px !important; +a[name=find] { + margin: 6px; + padding: 3px 3px 2px; + position: absolute; + right: 0; } [title=">>"] { margin-top: 1em !important; } -[title="Delete"] { - font-size: 1.3em !important; - padding: 0 0 2px 6px; -} - -[title="Enroll"] { - font-size: 1.3em !important; - padding: 0 0 2px 6px; -} - -[title="Update"] { - font-size: 1.3em !important; - padding: 0 0 2px 6px; -} - -[title="Reset"] { - font-size: 1.3em !important; - padding: 0 0 2px 6px; -} - -[title="Add"] { - font-size: 1.3em !important; - padding: 0 0 2px 22px; -} - -[name="search"] { - margin-top: -40px; -} - -[name="details"] { - margin-top: 30px; - margin-left: 7px; - width: 910px; -} - -[name="records"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="maps"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="keys"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="certificates"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="member_role"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="member_privilege"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberof_group"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberof_privilege"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberof_hbacrule"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberof_sudorule"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberof_permission"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberof_netgroup"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberof_hostgroup"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="managedby_host"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberof_role"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="member_group"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="member_host"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="member_hostgroup"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="member_netgroup"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberhost_host"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberhost_hostgroup"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberuser_user"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="memberuser_group"] { - margin-top: 30px; - margin-left: 7px; -} - -[name="member_user"] { - margin-top: 30px; - margin-left: 7px; -} - span.sub-nav-off > a:link, span.sub-nav-off > a:visited{ color:white; } @@ -1274,11 +1126,6 @@ dl.modal dd { margin-left: 0.8em; } /* -#dns-record-resource-filter { - padding: 0 1em; - margin: 0 1em; -} - #dns-record-type-filter { margin: 0 1em 0 0.5em; } @@ -1359,9 +1206,3 @@ table.scrollable tbody { width: 23em; height: 4em; } - -.right-aligned-controls { - position: absolute; - right: 0; - padding-right: 1.5em; -} -- cgit