Improved list display in OPAC (title, description, annotations).

Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index f91b504..c7420a5 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -19,6 +19,14 @@ img {
     border: none;
 }
 
+select {
+    padding:3px;
+}
+
+input {
+    padding:3px;
+}
+
 #topnav_logo {
     margin: 2em 0;
 }
@@ -29,26 +37,32 @@ img {
     width: 50%;
 }
 
+#surveylink {
+    padding:1em;
+    color:red;
+}
+
 a {
     color: [% css_colors.primary %];
 }
 
 #search-wrapper input[type=text] {
     margin:0;
-    padding:0;
+    padding:3;
 }
 
 #search-wrapper select, .results_header_lbl select {
     border:1px solid [% css_colors.border_standard %];
     margin:0;
     padding:0;
-    width: 12em;
 }
 
 .searchbar {
     font-weight: bold;
-    padding-top: 10px;
+    padding-top: 30px;
+       padding-bottom: 15px;
     margin-left: 1em;
+       font-size: [% css_fonts.size_big %];
 }
 
 /*
@@ -165,7 +179,7 @@ for now until a better color is picked - if needed.
     color: [% css_colors.background %];
     margin-left: 1em;
     margin-right: 1em;
-    font-size: [% css_fonts.size_small %];
+    font-size: [% css_fonts.size_base %];
 }
 
 #header a {
@@ -179,18 +193,17 @@ for now until a better color is picked - if needed.
 
 #header-links {
     color: [% css_colors.text_invert %];
-    font-size: [% css_fonts.size_small %];
+    font-size: [% css_fonts.size_base %];
     font-weight: bold;
     position: relative;
-    top:4px;
-    
+    top:4px;    
 }
 
 #header-links a {
     color: [% css_colors.text_invert %];
     display: block;
     float:left;
-    margin-right:22px;
+    padding-right:3em;
     text-decoration: none;
 }
 
@@ -220,8 +233,6 @@ for now until a better color is picked - if needed.
 }
 
 #gold-links {
-    margin-left: 1em;
-    padding-left:0px;
 }
 
 #gold-links-home {
@@ -230,7 +241,11 @@ for now until a better color is picked - if needed.
 }
 
 #gold-links-holder {
-    height: 24px;
+    background: [% css_colors.background_invert %];
+       height: 45px;
+}
+
+#gold-links-holder a {
     background: [% css_colors.background_invert %];
 }
 
@@ -268,10 +283,11 @@ for now until a better color is picked - if needed.
 }
 
 #search-wrapper #search-box {
-    margin-left: 1em;
+    margin-left: 0;
     padding-left: 0px;
-    padding-top: 10px;
+    padding-top: 20px;
     padding-bottom: 10px;
+       background-color:#ddd;
 }
 
 #adv_search_tabs, #acct_tabs, #acct_fines_tabs, #acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs, #results_header_inner{
@@ -380,30 +396,36 @@ for now until a better color is picked - if needed.
 }
 
 .rdetail_header {
-    padding: 5px 7px 6px 0px;
-    margin-left: 1em;
-    border-bottom: 1px dotted [% css_colors.accent_light %];
+    padding: 10px 7px 10px 20px;
+    border-bottom: 1px dotted [% css_colors.accent_medium %];
+       border-top: 1px dotted [% css_colors.accent_medium %];
+       background-color:#eee;
+       margin-left:-20px;
+       margin-right:-20px;
+       font-weight: bold;
+       text-decoration: none;
 }
 
-.rdetail_results a {
-    color:[% css_colors.primary_fade %];
-    font-weight:bold;
-    font-size: [% css_fonts.size_bigger %];
+.rdetail_results a, .rdetail_result_nav a {
+       text-decoration: none;
 }
 
 .rdetail_result_count {
     color: [% css_colors.text %];
-    font-weight: normal;
     padding-left: 1em;
     display: inline-block;
+       font-weight:normal;
 }
 
 .rdetail_result_nav {
-    font-weight:normal;
     padding-left: 1em;
     display: inline-block;
 }
 
+#rdetail_summary_header {
+    margin-top: 30px;
+}
+
 #rdetail_details_table {
     margin-top: 15px;
 }
@@ -417,13 +439,15 @@ for now until a better color is picked - if needed.
 h2.rdetail_uris {
     margin-top: 1em;
 }
+
 div.rdetail_uris {
-    padding: 0.5em 1em 0.5em 1em;
-    background-color: [% css_colors.accent_lighter2 %];
+    padding: 0em 1em em 1em;
+       margin-left: 1em;
 }
+
 div.rdetail_uris ul li {
     position: relative;
-    left: 1em;
+    left: 3em;
 }
 
 div.rdetail_show_copies {
@@ -433,6 +457,10 @@ div.rdetail_show_copies {
 div#rdetail_actions_div {
     float: right;
     background: [% css_colors.background %];
+       border: 1px solid #ccc;
+    border-radius: 25px;
+       padding:10px 0px 10px 0px;
+       margin-bottom:20px;
 }
 
 span#rdetail_copy_counts {
@@ -457,14 +485,18 @@ span#rdetail_hold_counts p {
 }
 
 .rdetail_aux_utils {
-    border-left:1px dotted [% css_colors.accent_light %];
     padding-left: 17px;
     padding-bottom: 6px;
     padding-right: 70px;
 }
 
+.result_count {
+       padding-left:40px;
+       width:600px;
+}
+
 div.place_hold {
-    border-bottom: 1px dotted [% css_colors.accent_light %];
+    border-bottom: 0px;
     padding-top: 10px;
 }
 
@@ -481,8 +513,7 @@ div.format_icon {
 }
 
 .result_util {
-    border-bottom: 1px dotted [% css_colors.accent_light %];
-    padding-top: 6px;
+    border-bottom:0px;
 }
 
 .results_aux_utils {
@@ -490,7 +521,7 @@ div.format_icon {
 }
 
 .result_util {
-    padding-left: 1em;
+    padding-left: 0px;
 }
 
 .results_reviews {
@@ -627,7 +658,7 @@ div.format_icon {
 #main-content .left_brain input[type=text], #main-content .left_brain input[type=password] {
     width:167px;
     margin:0;
-    padding:0;
+    padding:3;
     background: [% css_colors.background %];
     font-size: [% css_fonts.size_bigger %];
     color: [% css_colors.text %];
@@ -648,7 +679,7 @@ div.format_icon {
 
 .login-help-button {
     font-size: [% css_fonts.size_biggest %];
-    padding: 1.5em;
+    padding: 20px;
 }
 
 #login-failed-message {
@@ -656,6 +687,9 @@ div.format_icon {
     font-weight: bold;
     color: [% css_colors.text_alert %];
     padding-top: 1em;
+       padding-bottom: 30px;
+       width: 100%;
+       max-width: 700px;
 }
 
 #holds_temp_parent td {
@@ -664,6 +698,7 @@ div.format_icon {
 
 #holds_temp_parent input, #holds_temp_parent select {
     margin:0;
+       padding:3px;
 }
 
 #holds_temp_parent tr td div {
@@ -678,7 +713,7 @@ div.format_icon {
 }
 
 #results_header_bar {
-    background: [% css_colors.accent_medium %];
+    background: [% css_colors.accent_light %];
     border-top:1px solid [% css_colors.accent_mediumdark %];
     border-bottom:1px solid [% css_colors.accent_mediumdark %];
 }
@@ -689,8 +724,8 @@ div.format_icon {
     color: [% css_colors.text %];
     /* this border is not visible, but it keeps these labels the same size
     as the buttons */
-    border: 1px solid [% css_colors.accent_medium %];
-    background: [% css_colors.accent_medium %];
+    border: 1px solid [% css_colors.accent_light %];
+    background: [% css_colors.accent_light %];
     margin: 0.5em 0.3em;
     padding: 0.3em;
 }
@@ -713,8 +748,12 @@ collapse correctly when the window width decreases */
 }
 
 .results_header_nav1 {
-    padding: 5px 7px 6px 0px;
-    border-bottom: 1px dotted [% css_colors.accent_light %];
+    padding: 10px 7px 10px 7px;
+       text-align:center;
+    border-bottom: 2px dotted [% css_colors.accent_light %];
+       background-color:#eee;
+       margin-left:-20px;
+       margin-right:-20px;
 }
 
 .results_header_nav1 .h1 {
@@ -755,16 +794,17 @@ tr.result_table_row > td.result_table_title_cell {
 
 tr.result_table_row:nth-child(n+2) > td {
     border-top: 1px solid [% css_colors.accent_lighter2 %];
+       padding-top:10px;
+       padding-bottom:10px;
 }
 
 tr.result_table_row > td.result_table_pic_header {
     white-space: nowrap;
-    width: 78px;
+    width: 110px;
     padding-left: 1em;
 }
 
 .result_number {
-    padding-left: 1em;
     white-space: nowrap;
 }
 
@@ -780,6 +820,7 @@ tr.result_table_row > td.result_table_pic_header {
 div.result_table_utils_cont {
     text-align:left;
     float: left;
+       margin-left:70px;
 }
 
 .icon_text {
@@ -850,6 +891,7 @@ div.result_table_utils_cont {
     padding: 0px 7px 0px 0px;
     border-bottom: 1px dotted [% css_colors.accent_light %];
     clear: both;
+       margin-bottom:10px;
 }
 
 .header_middle a {
@@ -969,7 +1011,7 @@ div.result_table_utils_cont {
 .myopac_payments_table thead th:first-child { width: 8em; }
 .myopac_payments_table tbody tr:nth-child(odd) { background-color: [% css_colors.accent_lighter %]; }
 .myopac_payments_table form { display: inline; }
-.myopac_payments_table input[type="submit"] { padding: 1px; }
+.myopac_payments_table input[type="submit"] { padding: 3px; }
 
 .payment-error {
     font-weight: bold; color: [% css_colors.text_alert %];
@@ -1118,7 +1160,8 @@ div#facet_sidebar {
     padding-top:5px;
     padding-bottom: 10px;
     margin-left: 1em;
-    font-size: [% css_fonts.size_small %];
+    font-size: [% css_fonts.size_base %];
+       font-weight: bold;
 }
 
 #footer a {
@@ -1127,6 +1170,10 @@ div#facet_sidebar {
     text-shadow: 0 0 0.2em [% css_colors.primary %], 0 0 0.2em [% css_colors.primary %];
 }
 
+#footer-menu-slim {
+       display:none;
+}
+
 #copyright_text, #footer_logo {
     color: [% css_colors.text_invert %];
 }
@@ -1220,9 +1267,15 @@ a.dash-link:hover { text-decoration: underline !important; }
 .inactive-hold { background: [% css_colors.accent_lightest %]; }
 .unread-patron-message { font-weight: bold; }
 
-#hold-items-list td { padding: 5px; margin-bottom: 20px; }
-.hold-items-list-title { font-size: [% css_fonts.size_bigger %]; }
-.hold-items-list-problem { color: [% css_colors.text_alert %]; }
+#hold-items-list td { 
+  padding: 10px 0px 20px 0px;
+}
+
+.hold-items-list-title { font-size: 2em; }
+.hold-items-list-problem {  
+  padding-left:10px;
+  font-weight:bold;
+}
 
 .hold_success_links > span { margin: 0 2em; }
 
@@ -1321,13 +1374,17 @@ a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
 }
 
 .rdetail_content {
-    margin-left: 1.5em;
-    padding-left: 1.5em;
+    margin-left: 2em;
+}
+
+.rdetail_subject {
+    margin-left: 2em;
 }
 
 .rdetail_content_type, .rdetail_subject_type {
     vertical-align: top;
     font-weight: bold;
+       width: 10em;
 }
 
 .bookbag-item-row td { vertical-align: top; }
@@ -1336,6 +1393,8 @@ a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
 .success {
     color: [% css_colors.text_greatnews %];
     font-weight: bold;
+       padding:10px;
+       font-size:1em;
 }
 
 .rdetail_related_subjects {
@@ -1363,9 +1422,16 @@ a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
 }
 h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
 .bookbag-share .fixed { min-width: 4em; }
-.bookbag-specific { margin-left: 1em; }
-.bookbag-specific div.sort { float: left; width: 45%; text-align: left; }
-.bookbag-specific div.meta { float: right; width: 54%; text-align: right; }
+.bookbag-specific { 
+    width:97%;
+    margin-left: 3em;
+    border-left: 2px solid #ccc;
+    border-bottom: none;
+    border-right: none;
+    border-top: none;
+}
+.bookbag-specific div.sort { float: left; text-align: left; }
+.bookbag-specific div.meta { float: left; text-align: left; margin-left:20px; }
 #bbag-name-desc-form tr th { vertical-align: middle; }
 #bbag-name-desc-form .saver { vertical-align: middle; text-align: center; }
 .bookbag-description {
@@ -1377,9 +1443,9 @@ h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
 #bbag-edit-name { width: 20em; }
 textarea { font-family: sans-serif; }
 table.bookbag-specific {
-    border-right: 1px solid [% css_colors.accent_dark %];
-    border-bottom: 1px solid [% css_colors.accent_medium %];
-    margin-bottom: 2ex;
+   # border-right: 1px solid [% css_colors.accent_dark %];
+   # border-bottom: 1px solid [% css_colors.accent_medium %];
+    margin-bottom: 2px;
 }
 .bookbag-share {
     float: left;
@@ -1390,6 +1456,11 @@ table.bookbag-specific {
     padding: 5px 0px 0px 10px;
 }
 
+.bookbag-specific td {
+    padding-top:10px;
+    padding-bottom:10px;
+}
+
 .bookbag-specific td.list_checkbox {
     padding-left: 10px !important;
 }
@@ -1465,9 +1536,9 @@ table.bookbag-specific {
 #search-only-bookbag-container { margin: 2ex 0; font-weight: bold; }
 #result-bookbag-heading { text-align: center; margin: 2ex; }
 
-.result-bookbag-name { font-size: [% css_fonts.size_bigger %]; font-weight: bold; }
-.result-bookbag-description { font-size: [% css_fonts.size_bigger %]; font-style: italic; }
-.result-bookbag-item-note { font-style: italic; }
+.result-bookbag-name { font-size: [% css_fonts.size_bigger %]; font-weight: bold; padding:10px;}
+.result-bookbag-description { font-size: [% css_fonts.size_bigger %]; font-style: italic; font-weight:normal; padding:10px;}
+.result-bookbag-item-note { font-style: italic; padding: 5px 5px 5px 40px;}
 .lowhits-bookbag-name { font-weight: bold; }
 .oils_AS { font-weight: bold; color: [% css_colors.text_match %]; }
 .oils_AS_match_term { text-align: left; color: [% css_colors.text %]; }
@@ -1600,6 +1671,7 @@ a.preflib_change {
 
 .record_title {
     font-weight: bold;
+       text-decoration: none;
 }
 
 .record_author {
@@ -1608,8 +1680,11 @@ a.preflib_change {
 
 .password_message {
     padding-top: 1em;
-    padding-bottom: 0.5em;
+    padding-bottom: 2em;
        font-style: italic;
+       width:100%;
+       max-width:800px;
+       font-size:normal;
 }
 
 #maintenance_message {
@@ -1701,6 +1776,7 @@ a.preflib_change {
 
 .rdetail_authors_div {
     margin-bottom: 1em;
+       font-weight:bold;
 }
 
 #search_query_label, #search_qtype_label, #search_itype_label, #search_locg_label {
@@ -1711,6 +1787,7 @@ a.preflib_change {
 .result_table_title_cell {
     padding-top: 4px;
     padding-bottom: 4px;
+       margin-left:40px;
 }
 
 .record_title {
@@ -1769,8 +1846,8 @@ a.preflib_change {
         padding: 0px;
         margin: 0px;
     }
-    #homesearch_main_logo img {
-        width:75%;
+    #homesearch_main_logo {
+        display:none;
     }
     #format_selector {
         display:none;
@@ -1795,6 +1872,12 @@ a.preflib_change {
     #gold-links-holder {
         display: none;
     }
+       #footer-menu-wrapper {
+           display: none;
+       }
+       #footer-menu-slim {
+           display: block;
+       }
     #simple-detail-view-links {
         display: none;
     }
@@ -2114,8 +2197,3 @@ label[for*=expert_]
     font-weight: lighter;
     font-size: 70%;
 }
-
-#results-page-depth-hint {
-    text-align: center;
-    font-style: italic;
-}

diff --git a/Open-ILS/src/templates/opac/parts/result/table.tt2 b/Open-ILS/src/templates/opac/parts/result/table.tt2
index 251d069..77ab0e8 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/result/table.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/table.tt2
@@ -21,10 +21,8 @@
 [% END %]
 <div id="result_table_div">
     <div class="facet_sidebar_hidden" id="facet_sidebar">
-    [%- IF ctx.is_staff %]
     <h3 class="sr-only">[% l('Saved Searches') %]</h3>
     [% INCLUDE "opac/parts/staff_saved_searches.tt2" %]
-    [%-  END %]
     <h3 class="sr-only">[% l('Search Results facets') %]</h3>
     [% INCLUDE 'opac/parts/result/facets.tt2' %]
     <h3 class="sr-only">[% l('Search Results List') %]</h3>
@@ -72,8 +70,8 @@
                                                 %].</td>
                                             <td class='result_table_pic_header'>
                                                 <a href="[% record_url %]"><img alt="[% l('Book cover') %]"
-                                                        name='item_jacket' class='result_table_pic' width="55"
-                                                        src='[% ctx.media_prefix %]/opac/extras/ac/jacket/small/r/[% rec.bre_id | uri %]' /></a><br />
+                                                        name='item_jacket' class='result_table_pic' width="85" style="border:1px solid #ccc;"
+                                                        src='[% ctx.media_prefix %]/opac/extras/ac/jacket/medium/r/[% rec.bre_id | uri %]' /></a><br />
                                             </td>
                                             <td class='result_table_title_cell' name='result_table_title_cell'>
                                                <div class="result_metadata">
@@ -145,16 +143,16 @@ END;
                                                                 src="[% format.icon %]" /> 
                                                             [% format.label | html %]
                                                         [% END %]
-                                                    [%- END %]
+                                                    [%- END %]<br/>
                                                     [%- UNLESS CGI.param('detail_record_view')
                                                             OR (show_more_details.default == 'true'
                                                             OR show_more_details.default == 'hide');
                                                             IF attrs.pubdate;
                                                                 pubdate_clean = attrs.pubdate | html;
-                                                                l(" ([_1])", pubdate_clean);
+                                                                l("Publication Date: ([_1])", pubdate_clean);
                                                             ELSIF attrs.copyright;
                                                                 copyright_clean = attrs.copyright | html;
-                                                                l(" ([_1])", copyright_clean);                                                                
+                                                                l("Copyright Date: ([_1])", copyright_clean);                                                                
                                                             END;
                                                         END
                                                     -%]
@@ -162,14 +160,15 @@ END;
                                                     <table 
                                                        role="presentation"
                                                        title="[% l('Record Holdings Summary') %]"
-                                                       class="table_no_border_space table_no_cell_pad table_no_border results_info_table">
+                                                       class="table_no_border_space table_no_cell_pad table_no_border results_info_table"
+                                                                                                          style="margin-left:40px;">
                                                         [% UNLESS rec.mmr_id %]
                                                            [% IF args.holdings.size > 0 %]
                                                         <tr name='bib_cn_list' class='result_table_title_cell'>
                                                             <td valign='top'>
-                                                                <strong>[% l('Call number:') %]</strong>
+                                                                <strong>[% l('Call Number:') %]</strong>
                                                             </td>
-                                                            <td>[% args.holdings.0.label | html %]</td>
+                                                            <td><strong>[% args.holdings.0.label | html %]</strong></td>
                                                         </tr>
                                                            [% END %]
                                                         [% END %]
@@ -319,7 +318,7 @@ END;
                                                             <tr name='bib_cn_list' class='result_table_title_cell'>
                                                                 <td colspan='2'>
                                                                     <table title="[% l('Record Holdings Details') %]"
-                                                                           class='result_holdings_table'>
+                                                                           class='result_holdings_table' width="600">
                                                                         <thead><tr>
                                                                             <th>[% l('Library') %]</th>
                                                                             <th>[% l('Shelving location') %]</th>
@@ -353,6 +352,7 @@ END;
                                                              %]
                                                         [% END %] <!-- END detail_record_view -->
                                                     </table>
+                                                                                                       <hr style="border:0px;height:1px;" />
                                                     [% PROCESS "opac/parts/result/copy_counts.tt2" %]
                                                     [% IF rec.user_circulated %]
                                                     <div class="result_item_circulated">
@@ -363,9 +363,9 @@ END;
                                                     [% IF ctx.bookbag;
                                                         rec_id = rec.id;
                                                         FOR note IN ctx.bookbag_items_by_bre_id.$rec_id.notes %]
-                                                    <div class="result-bookbag-item-note">
-                                                        [% note.note | html %]
-                                                    </div>
+                                                            <div class="result-bookbag-item-note">
+                                                                Note: [% note.note | html %]
+                                                            </div>
                                                         [% END %]
                                                     [% END %]
                                                 </div>
@@ -386,7 +386,7 @@ END;
                                                                     class="no-dec" rel="nofollow" vocab=""><img
                                                                 src="[% ctx.media_prefix %]/images/green_check.png"
                                                                 alt=""/><span class="result_place_hold">[% l('Place Hold') %]</span></a>
-                                                        </div>
+                                                        </div><br/>
 [%- END -%]
                                                         <div class="results_aux_utils result_util">
                                                             [%  IF ctx.user;
@@ -394,7 +394,7 @@ END;
                                                             %]
                                                             [%  ELSE;
                                                                 operation = ctx.mylist.grep(rec.id).size ? "delete" : "add";
-                                                                label = (operation == "add") ?  l("Add to my list") : l("Remove from my list");
+                                                                label = (operation == "add") ?  l("Add To My List") : l("Remove From List");
                                                                 title_label = (operation == "add") ? 
                                                                   l("Add [_1] to my list", attrs.title) : 
                                                                   l("Remove [_1] from my list", attrs.title);
@@ -406,6 +406,8 @@ END;
                                                                 <img src="[% ctx.media_prefix %]/images/clipboard.png" alt="" />
                                                                 [% label %]
                                                             </a>
+                                                                                                                       <a href="http://pines.georgialibraries.org/catalog-help#my_list" target="_blank">
+                                                                                                                           <img src="[% ctx.media_prefix %]/images/question-mark.png" alt="Learn about lists" border=0></a>
                                                             [% END %]
                                                         </div>
                                                         [% IF ENV.OILS_CONTENT_CAFE_USER %]