From d830925be8c673d6a390a5182b564c32053f1b30 Mon Sep 17 00:00:00 2001 From: Adrien Saurat Date: Wed, 18 Apr 2012 14:53:19 +0200 Subject: [PATCH] Bug 7979: New design for staff interface + fixes + css call moved Many modifications, see bugzilla for more informations. Moved the CSS call to allow override with intranetusercss. --- .../intranet-tmpl/prog/en/css/mainpage.css | 198 ++++++++++++++ .../prog/en/css/staff-global.css | 123 ++++++--- .../prog/en/includes/acquisitions-search.inc | 5 +- .../prog/en/includes/authorities-search.inc | 4 +- .../prog/en/includes/cat-search.inc | 5 +- .../prog/en/includes/cataloging-search.inc | 4 +- .../prog/en/includes/circ-search.inc | 6 +- .../intranet-tmpl/prog/en/includes/header.inc | 20 +- .../prog/en/includes/home-search.inc | 6 +- .../prog/en/includes/patron-search.inc | 5 +- .../prog/en/includes/serials-search.inc | 5 +- .../prog/en/lib/jquery/plugins/ui.tabs.css | 5 +- .../intranet-tmpl/prog/en/modules/about.tt | 18 ++ .../prog/en/modules/intranet-main.tt | 248 ++++++++++-------- .../prog/img/background_koha_logo.png | Bin 0 -> 8540 bytes .../prog/img/icon_acquisitions.png | Bin 0 -> 1172 bytes .../prog/img/icon_administration.png | Bin 0 -> 2516 bytes .../prog/img/icon_authorities.png | Bin 0 -> 1616 bytes .../prog/img/icon_cataloging.png | Bin 0 -> 1114 bytes .../prog/img/icon_circulation.png | Bin 0 -> 851 bytes .../intranet-tmpl/prog/img/icon_koha.png | Bin 0 -> 1595 bytes .../intranet-tmpl/prog/img/icon_lists.png | Bin 0 -> 826 bytes .../intranet-tmpl/prog/img/icon_patrons.png | Bin 0 -> 1820 bytes .../intranet-tmpl/prog/img/icon_reports.png | Bin 0 -> 1651 bytes .../intranet-tmpl/prog/img/icon_search.png | Bin 0 -> 2004 bytes .../intranet-tmpl/prog/img/icon_serials.png | Bin 0 -> 1178 bytes .../intranet-tmpl/prog/img/icon_tools.png | Bin 0 -> 1442 bytes 27 files changed, 473 insertions(+), 179 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css create mode 100644 koha-tmpl/intranet-tmpl/prog/img/background_koha_logo.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_acquisitions.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_administration.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_authorities.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_cataloging.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_circulation.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_koha.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_lists.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_patrons.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_reports.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_search.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_serials.png create mode 100644 koha-tmpl/intranet-tmpl/prog/img/icon_tools.png diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css b/koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css new file mode 100644 index 0000000000..49567e2750 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css @@ -0,0 +1,198 @@ +/* + * This file contains CSS styles used only on the front page of Koha + * + * COLORS + * Very light blue Module links background : #f4f8f9 + * Light blue Navbar, breadcrumb : #e6f0f2 + * Blue Module links and breadcrumb border : #b9d8d9 + * Dark blue Links : #004d99 + * Green Links:hover : #538200 + * These colors are used in staff-global.css too + * + */ + +#area-content { + /* Contains the news + both columns of links + pending box + userblock box */ + float: left; + background-image:url('/intranet-tmpl/prog/img/background_koha_logo.png'); + background-repeat:no-repeat; + background-position:left top; + padding-top: 12px; +} + + +/* ==== NEWS - Start ==== */ +#area-news { + /* Displayed if news are available */ + width: 300px; + float: left; + border: 1px solid #EEEEEE; + margin: .2em; + border-radius: 6px; +} + +#area-news h3 { + /* Title section for the news block : transparency to let the koha logo appear */ + background-color: #EEEEEE; + filter:alpha(opacity=50); /* for IE */ + -moz-opacity: 0.5; /* for Firefox before 0.9 */ + opacity: 0.5; + padding : .3em; margin: 0; +} + +.newsitem { + /* Block for one News entry */ + padding: 3px; + margin: .3em; + border-bottom: 1px solid #EEE; + background-color : #ffffff; + border-radius: 6px; + } + +.newsfooter { + /* Footer containing the publication date and edition links for an News entry */ + font-size: 80%; + color: #808080; +} + +#area-nonews { + /* Displayed if no news are available, to keep the structure intact */ + width: 300px; + float: left; +} +/* ==== NEWS - End ==== */ + + +/* ==== MODULE LINKS - Start ==== */ +#area-lists { + /* Contains the two links columns */ + margin-left: 20px; + float: left; +} + +#area-list-left { + /* Left column for links */ + width: 352px; + float: left; +} +#area-list-right { + /* Right column for links */ + margin-left: 20px; + float: left; + width: 352px; +} + +ul.biglinks-list { + /* List containing the module links */ + padding: 0px; +} + +ul.biglinks-list li { + /* Standard attributes for the list elements */ + list-style-type:none; +} + +ul.biglinks-list li a.icon_general { + /* Class used for each module link */ + display: block; + float: left; + + width:295px; + height: 46px; + margin-bottom: 14px; + padding-left:53px; + padding-top:5px; + + border: solid 2px #b9d8d9; + border-radius: 6px; + + text-decoration: none; + font-family: verdana, arial; + font-weight: bold; + font-size: large; + color: #000000; + + background-color:#f4f8f9; + background-repeat:no-repeat; +} + +ul.biglinks-list li a:hover.icon_general { + /* Class used for each module link hover state */ + background-position:0 -46px; + color: #538200; + border-color: #538200; +} + +/* CSS Sprites + * Each image contains the normal and the hover state of the icon + * The hover part starts at 46px below the top: + * + * 46px + * ------- + * | | + * | N | 46px \ + * | | | + * ------- > 92px + * | | | + * | H | 46px / + * | | + * ------- + * + */ + +/* Classes used for each individual module link */ +ul.biglinks-list li a.icon_circulation {background-image:url('/intranet-tmpl/prog/img/icon_circulation.png')} +ul.biglinks-list li a.icon_patrons {background-image:url('/intranet-tmpl/prog/img/icon_patrons.png')} +ul.biglinks-list li a.icon_search {background-image:url('/intranet-tmpl/prog/img/icon_search.png')} +ul.biglinks-list li a.icon_lists {background-image:url('/intranet-tmpl/prog/img/icon_lists.png')} +ul.biglinks-list li a.icon_cataloging {background-image:url('/intranet-tmpl/prog/img/icon_cataloging.png')} +ul.biglinks-list li a.icon_authorities {background-image:url('/intranet-tmpl/prog/img/icon_authorities.png')} + +ul.biglinks-list li a.icon_serials {background-image:url('/intranet-tmpl/prog/img/icon_serials.png')} +ul.biglinks-list li a.icon_acquisitions {background-image:url('/intranet-tmpl/prog/img/icon_acquisitions.png')} +ul.biglinks-list li a.icon_reports {background-image:url('/intranet-tmpl/prog/img/icon_reports.png')} +ul.biglinks-list li a.icon_administration {background-image:url('/intranet-tmpl/prog/img/icon_administration.png')} +ul.biglinks-list li a.icon_tools {background-image:url('/intranet-tmpl/prog/img/icon_tools.png')} +ul.biglinks-list li a.icon_koha {background-image:url('/intranet-tmpl/prog/img/icon_koha.png')} +/* ==== MODULE LINKS - End ==== */ + + +/* ==== PENDING - Start ==== */ +#area-pending { + /* Block containing links to pending tags, comments and suggestions */ + width: 100%; + border: solid 1px #b9d8d9; + border-radius: 6px; + clear: left; +} + +.pending-info { + /* For the div containing a "pending" link (useful to preserve width of area-pending box width) */ + margin-top: 2px; + margin-bottom: 2px; + margin-left: 8px; +} + +.pending-number-link { + /* Style for the "pending" links : the number of pending items appear bigger */ + font-weight: bold; + font-size: 1.1em; +} +/* ==== PENDING - End ==== */ + + +/* ==== USERBLOCK - Start ==== */ +#area-userblock { + /* Appears if the "IntranetmainUserblock" system preference is defined */ + margin-top: 10px; + width: 100%; + border: solid 1px #b9d8d9; + border-radius: 6px; + clear: left; +} + +.user-info { + /* For the div containing the information (useful to preserve width of area-userblock box width) */ + margin: 8px; +} +/* ==== USERBLOCK - End ==== */ diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css index 4ec5ef2e61..68523d7f3c 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css +++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css @@ -1,8 +1,29 @@ @import url("../lib/yui/reset-fonts-grids.css"); @import url("../lib/yui/skin.css"); -a, a:link, a:visited, a:active { - color : #0000CC; +input:focus, textarea:focus { + border-color:#538200; + border-style:solid; + border-radius: 4px; +} + +radio:focus, checkbox:focus { + border-color:#538200; + border-style:solid; + border-radius: 4px; +} + +::selection { background:#538200; color:#ffffff; /* Safari and Opera */ } +::-moz-selection { background:#538200; color:#ffffff; /* Firefox */ } + +a, a:link, a:visited { + color : #004d99; + text-decoration: none; +} + +a:hover, a:active { + color : #538200; + text-decoration: none; } .yui-button,.yui-button a:link,.yui-button a:visited { @@ -13,9 +34,6 @@ a.yuimenuitemlabel { color: #000000; } -a:hover { - color : #669ACC; -} a.overdue, .overdue, @@ -164,9 +182,31 @@ ol li { } #header { - background-color : #F3F3F3; - border-bottom : 1px solid #E8E8E8; - line-height : 2em; + background-color : #e6f0f2; + line-height : 2em; +} + +#header a.toplinks { + #color: #ffffff; + font-weight: bold; +} + +.gradient { + background-image: linear-gradient(top, rgb(230,240,242) 1%, rgb(255,255,255) 99%); + background-image: -o-linear-gradient(top, rgb(230,240,242) 1%, rgb(255,255,255) 99%); + background-image: -moz-linear-gradient(top, rgb(230,240,242) 1%, rgb(255,255,255) 99%); + background-image: -webkit-linear-gradient(top, rgb(230,240,242) 1%, rgb(255,255,255) 99%); + background-image: -ms-linear-gradient(top, rgb(230,240,242) 1%, rgb(255,255,255) 99%); + + background-image: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(0.1, rgb(212,214,255)), + color-stop(0.99, rgb(255,255,255)) + ); + display: inline-block; + width:100%; } .clearfix:after { @@ -177,7 +217,9 @@ ol li { visibility: hidden; } -.clearfix {display: inline-block;} +.clearfix { + display: inline-block; +} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} @@ -318,25 +360,29 @@ span.problem { } fieldset { - border : 2px solid #EEEEEE; margin : 1em 1em 1em 0; padding : 1em; + background-color:#f4f8f9; + border:2px solid #b9d8d9; + border-radius:5px; } legend { font-size : 123.1%; font-weight : bold; - margin : 0 0 0 -1em; - padding : 0; + border:2px solid #b9d8d9; + background-color:#ffffff; + border-radius:3px; + text-align:right; + padding: 0.2em 0.5em; } #breadcrumbs { - background-color : #F3F3F3; - border-bottom : 1px solid #E8E8E8; - clear : both; - font-size : 90%; - padding :.2em .5em .4em 10px; - margin : 0; + background-color : #e6f0f2; + clear : both; + font-size : 90%; + padding :.2em .5em .4em 10px; + margin : 0; } #header+#breadcrumbs { @@ -375,7 +421,7 @@ div#header_search ul.link-tabs li.off a { div#header_search div.residentsearch { border : 0; - border-bottom : 1px solid #FF9900; + border-bottom : 1px solid #85ca11; padding : 0 0 .2em 0; } @@ -458,7 +504,7 @@ div.patroninfo { } div.patroninfo h5 { - border-right : 1px solid #000; + border-right:1px solid #b9d8d9; margin-bottom : 0; padding-left : -.5em; padding-top : .3em; @@ -467,7 +513,7 @@ div.patroninfo h5 { div.patroninfo ul { border : 0; - border-right : 1px solid #000; + border-right:1px solid #b9d8d9; border-bottom : 0; border-top : 0; padding : 0; @@ -556,7 +602,7 @@ div.yui-b fieldset.brief fieldset legend { fieldset.rows { border-width : 1px; -border-bottom : 1px solid #666; +border:2px solid #b9d8d9; float : left; font-size : 90%; clear : left; @@ -666,6 +712,7 @@ fieldset.rows label.yesno { fieldset.action, div.action { clear : both; float : none; + background-color:#ffffff; border : none; margin : 0; padding : 1em 0 .3em 0; @@ -740,7 +787,7 @@ fieldset.rows .inputnote { } .ui-tabs-nav a, .ui-tabs-nav a span, .ui-tabs-nav span.a { - background : none; + background : none; display : block; padding: .2em .5em .25em .5em; } @@ -750,14 +797,15 @@ fieldset.rows .inputnote { } .ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav .ui-tabs-selected span.a { - background-color : #FFFFCC; - border-top: 1px solid #FFFFCC; - border-right: 1px solid #FF9900; - border-bottom: 1px solid #FF9900; - border-left: 1px solid #FFCC66; + border-top: 1px solid #e6f0f2; + border-right: 1px solid #85ca11; + border-bottom: 1px solid #85ca11; + border-left: 1px solid #85ca11; font-weight : bold; text-align : center; text-decoration : none; + border-radius: 0px 0px 4px 4px; + color : #000000; } @@ -766,11 +814,11 @@ fieldset.rows .inputnote { } .ui-tabs-nav .ui-tabs-selected a:hover { - color : #0000CC; + color : #000000; } .ui-tabs-nav li.ui-tabs-selected { - background-color : #FFFFCC; + /* background-color : #FFFFCC; */ } .ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active, .ui-tabs-nav span.a { @@ -803,12 +851,14 @@ fieldset.rows .inputnote { border : 1px solid #E8E8E8; text-align : center; text-decoration : none; + border-radius : 3px; } .toptabs .ui-tabs-nav li.ui-tabs-selected a, .toptabs .ui-tabs-nav li.ui-tabs-selected span.a { background-color : #FFF; border-bottom : 1px solid #FFF; margin-top : 0; + border-radius : 3px; } .toptabs .tabs-container { @@ -1299,7 +1349,7 @@ a:hover .term { } div#menu { - border-right: 1px solid #000; + border-right:1px solid #b9d8d9; margin-right: .5em; padding-top: 1em; padding-bottom: 2em; @@ -1324,7 +1374,7 @@ div#menu li a { border-top-left-radius: 5px; -moz-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; - border: 1px solid #000; + border:1px solid #b9d8d9; font-size: 111%; margin: .5em 0; padding: .4em .3em; @@ -1344,7 +1394,7 @@ div#menu li a:hover { div#menu li.active a:hover { background-color: #fff; - color : #0000CC; + color : #538200; } #menu ul li { @@ -1356,6 +1406,7 @@ div#menu li.active a:hover { background-image : none; border-right: 0; font-weight: bold; + color:#000000; } ul.error { @@ -1672,13 +1723,12 @@ a.yuimenuitemlabel:hover { #toplevelnav { float : left; margin-left : .5em; - width : 30em; } ul#toplevelmenu { padding : 0; } - + ul#toplevelmenu li { display: inline; padding : 0 .6em; @@ -1871,7 +1921,8 @@ span.permissiondesc { border: 0; padding: 5; font-size: 11pt; - color: darkblue; + color: #000000; + font-style: italic; } .labeledmarc-value { diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc index 8ee72ec441..cc796fa1bc 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc @@ -1,4 +1,4 @@ - +

[% LibraryName %]

+
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc index 0814922b12..9a2f9c5839 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc @@ -1,3 +1,4 @@ +

[% LibraryName %]

+
+ diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/cat-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/cat-search.inc index 7696efff52..13a24fe170 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/cat-search.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/cat-search.inc @@ -1,4 +1,4 @@ - +

[% LibraryName %]

[% IF ( CAN_user_circulate ) %][% IF ( CircAutocompl ) %] +

[% LibraryName %]

+
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/circ-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/circ-search.inc index dc99b900e0..56b24bf0b4 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/circ-search.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/circ-search.inc @@ -1,4 +1,4 @@ - +

[% LibraryName %]

- +
+
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc index 539c466195..4783523446 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc @@ -3,15 +3,15 @@ + diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc index 9f30bfe103..8bc76273a1 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc @@ -1,4 +1,4 @@ - +

[% LibraryName %]

[% IF ( CAN_user_circulate ) %][% IF ( CircAutocompl ) %]