OPAC: Minor adjustments to new OPAC layout and wording
authorTerran McCanna <tmccanna@georgialibraries.org>
Mon, 16 Nov 2020 23:01:47 +0000 (18:01 -0500)
committerChris Sharp <csharp@georgialibraries.org>
Sat, 19 Nov 2022 19:54:17 +0000 (14:54 -0500)
- Tightened up white space and shading around search box
- Added title and help tip to the search results facets
- Wording on login modal and form
- Wording on basic search form
- Wording on password reset form
- Record page: Changed size of section headers, fixed layout of Holds block
- Record page copy table: Hide due date column, add link to

Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>
13 files changed:
Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2
Open-ILS/src/templates-bootstrap/opac/parts/login/login_modal.tt2
Open-ILS/src/templates-bootstrap/opac/parts/login/password_hint.tt2
Open-ILS/src/templates-bootstrap/opac/parts/record/contents.tt2
Open-ILS/src/templates-bootstrap/opac/parts/record/copy_counts.tt2
Open-ILS/src/templates-bootstrap/opac/parts/record/copy_table.tt2
Open-ILS/src/templates-bootstrap/opac/parts/record/series.tt2
Open-ILS/src/templates-bootstrap/opac/parts/record/subjects.tt2
Open-ILS/src/templates-bootstrap/opac/parts/record/summary.tt2
Open-ILS/src/templates-bootstrap/opac/parts/result/facets.tt2
Open-ILS/src/templates-bootstrap/opac/parts/searchbar.tt2
Open-ILS/src/templates-bootstrap/opac/password_reset.tt2
Open-ILS/src/templates-bootstrap/opac/results.tt2

index fcd8d87..25c898a 100755 (executable)
        </div>
 </div>
 
+    <div class="mx-auto row w-75 my-5">
+        <div class='col-md-6'>
+            <label for='username_field' class="lbl1" >[% l('Library Card Number or User Name') %]
+            <a href="#" title="[% INCLUDE "opac/parts/login/username_hint.tt2" %]" data-html="true" data-toggle="tooltip">
+            <i class="fas fa-question-circle"></i></a></label> <br>
+            <div class="input_bg mb-2">
+                <input class="form-control" type='text' id="username_field" name="username"/>
+            </div>
+               <a href='[% mkurl(ctx.opac_root _ '/register', {}, 1) %]'>[% l('Apply for a PINES Library Card') %]</a>
+            <br>
+
+        </div>
+        <div class='col-md-6'>
+            <label for="password_field" class="lbl1" >[% l('Password') %]
+            <a href="#" title="[% INCLUDE "opac/parts/login/password_hint.tt2" %]" data-html="true" data-toggle="tooltip">
+                        <i class="fas fa-question-circle"></i>
+                    </a></label><br>
+
+            <div class="input_bg mb-2">
+                <input class="form-control" id="password_field" name="password" type="password"/>
+            </div>
+           [% IF reset_password == 'true' %]
+            <a href='[% mkurl(ctx.opac_root _ '/password_reset', {}, 1) %]'>[% l('Forgot Your Password?') %]  </a>
+            [% END %]
+            <br>
+
+        </div>
+
+         <div class="col-12 pt-4 text-center">
+            <div class="form-check my-2">
+                <input class="form-check-input" type="checkbox" value="" id="rememberMe">
+                <label class="form-check-label" for="rememberMe">
+                    [% l('Stay logged in?') %]
+                </label>
+            </div>
+            <button type="submit" class="btn btn-confirm my-2"><i class="fas fa-sign-in-alt" aria-hidden="true"></i> [% l('Log in') %]</button>
+        </div>
         <div style="clear: both; padding-top: 15px;" class="col-12 text-center">
         [%
             redirect = CGI.param('redirect_to');
index 44c4544..0b15e3d 100755 (executable)
@@ -3,7 +3,7 @@
     <div class="modal-content">
      <form method='post' action="/eg/opac/login?redirect_to=%2Feg%2Fopac%2Fmyopac%2Fmain">
       <div class="modal-header">
-        <h1 class="modal-title" id="exampleModalLabel">Login To Evergreen</h1>
+        <h1 class="modal-title" id="exampleModalLabel">[% l('Log in to Your Account') %]</h1>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <i class="fas fa-times" aria-hidden="true"></i>
         </button>
     [% END %]
 
 <div class='container'>
-       <div class="table table-borderless table-sm">
-               <div class="row">
-                       <div class="col-sm w-50">
-                               <label for='username_field' class="lbl1" >[% l('Library Card Number') %]
-                               <a href="#" title="[% INCLUDE "opac/parts/login/username_hint.tt2" %]" data-html="true" data-toggle="tooltip">
-                               <i class="fas fa-question-circle"></i></a></label>
-                       </div>
-                       <div class="col-sm w-50">
-                               <label for="password_field" class="lbl1" >[% l('PIN') %]
-                               <a href="#" title="[% INCLUDE "opac/parts/login/password_hint.tt2" %]" data-html="true" data-toggle="tooltip">
-                <i class="fas fa-question-circle"></i>
-                </a></label>
-                       </div>
-               </div>
-               <div class="row">
-                       <div class="col-sm w-50">
-                               <input class="form-control" type='text' id="username_field" name="username"/>
-                       </div>
-                       <div class="col-sm w-50">
-                               <input class="form-control" id="password_field" name="password" type="password"/>
-                       </div>
-               </div>
-               <div class="row">
-                       <div class="col-sm w-50">
-                            [% IF ctx.get_org_setting(
-                                ctx.physical_loc || ctx.aou_tree.id, 'opac.allow_pending_user') %]
-                               <a href='[% mkurl(ctx.opac_root _ '/register', {}, 1) %]'>[% l('Request A Card') %]</a>
-                            [% END %]
-                       </div>
-                       <div class="col-sm w-50">
-                               [% IF reset_password == 'true' %]
-                               <a href='[% mkurl(ctx.opac_root _ '/password_reset', {}, 1) %]'>[% l('Forgot Your Password?') %]  </a>
-                               [% END %]
-                       </div>
-               </div>
-       </div>
+    <div class="mx-auto row py-4">
+        <div class='col-md-6'>
+            <label for='username_field' class="lbl1" >[% l('Library Card Number or User Name') %]
+            <a href="#" title="[% INCLUDE "opac/parts/login/username_hint.tt2" %]" data-html="true" data-toggle="tooltip">
+            <i class="fas fa-question-circle"></i></a></label> <br>
+            <div class="input_bg mb-2">
+                <input class="form-control" type='text' id="username_field" name="username"/>
+            </div>
+               <a href='[% mkurl(ctx.opac_root _ '/register', {}, 1) %]'>[% l('Apply for a PINES Library Card') %]</a>
+            <br>
+
+        </div>
+        <div class='col-md-6'>
+            <label for="password_field" class="lbl1" >[% l('Password') %]
+            <a href="#" title="[% INCLUDE "opac/parts/login/password_hint.tt2" %]" data-html="true" data-toggle="tooltip">
+                        <i class="fas fa-question-circle"></i>
+                    </a></label><br>
 
     <div class="mx-auto row py-4">
 
index 3c39b05..f1df0c9 100755 (executable)
@@ -1,3 +1,3 @@
 <div>
-[%- l('First time logging in?<br> Use the last 4 digits of your phone number. <br> Example: 0926'); %]
+[%- l('First time logging in?<br> Try using the last 4 digits of your phone number. <br> Example: 0926'); %]
 </div>
index ee13110..d6f234a 100755 (executable)
@@ -207,7 +207,7 @@ BLOCK render_all_contents;
 [%-  content_html = PROCESS render_all_contents;
     IF content_html.length > 0;
 %]
-<h2 class='rdetail_contents'>[% l('Content descriptions') %]</h2>
+<h2 class='rdetail_contents' style="font-size:1.7em;">[% l('Content descriptions') %]</h2>
 <table class='rdetail_content'>
     <tbody>
 [%- content_html %]
index 24f5797..4f4fcaa 100755 (executable)
@@ -1,5 +1,5 @@
 <div id="rdetail_copy_counts">
-    <h2>[% l('Available copies') %]</h2>
+    <h2 style="font-size:1.7em;">[% l('Available copies') %]</h2>
 
     <ul class="no-bullets">
     [%- depths = ctx.copy_summary.size;
index b5b1bc1..256c670 100755 (executable)
@@ -85,34 +85,26 @@ IF has_copies or ctx.foreign_copies;
     <thead>
         <tr>
             [% IF serial_holdings -%]
-            <th scope='col'>[% l("Issue Label") %]</th>
+            <th scope='col' style="vertical-align:top;">[% l("Issue Label") %]</th>
             [%- ELSE -%]
-            <th scope='col'>[% l("Location") %]</th>
+            <th scope='col' style="vertical-align:top;">[% l("Library System: Library Branch Name") %]<br/>
+                <div style="font-style:italic;font-weight:normal;padding-left:10px;"><a href="http://pines.georgialibraries.org/pinesLocator/locator.html" target="_blank">Find your nearest library</a></div></th>
             [%- END %]
-            <th scope='col'>[% l("Call Number / Copy Notes") %]</th>
+            <th scope='col' style="vertical-align:top;">[% l("Call Number / Copy Notes") %]</th>
             [%- IF has_parts == 'true' %]
-            <th scope='col'>[% l("Part") %]</th>
-            [%- END %]
-            <th scope='col'>[% l("Barcode") %]</th>
-            <th scope='col'>[% l("Shelving Location") %]</th>
-            [%- IF ctx.is_staff || ctx.use_courses %]
-            <th scope='col'>[% l("Circulation Modifier") %]</th>
+            <th scope='col' style="vertical-align:top;">[% l("Part") %]</th>
             [%- END %]
+            <th scope='col' style="vertical-align:top;">[% l("Barcode") %]</th>
+            <th scope='col' style="vertical-align:top;">[% l("Shelving Location") %]</th>
             [%- IF ctx.is_staff %]
-            <th scope='col'>[% l("Age Hold Protection") %]</th>
-            <th scope='col'>[% l("Active/Create Date") %]</th>
+            <th scope='col' style="vertical-align:top;">[% l("Circulation Modifier") %]</th>
+            <th scope='col' style="vertical-align:top;">[% l("Age Hold Protection") %]</th>
+            <th scope='col' style="vertical-align:top;">[% l("Active/Create Date") %]</th>
             [%- END %]
             [%- IF ctx.is_staff OR serial_holdings %]
-            <th scope='col'>[% l("Holdable?") %]</th>
-            [%- END %]
-            <th scope='col'>[% l("Status") %]</th>
-            <th scope='col'>[% l("Due Date") %]</th>
-            [%- IF ctx.use_courses %]
-            <th scope='col'>[% l("Courses") %]</th>
-            [%- END %]
-            [%- IF ctx.geo_sort && ctx.has_valid_coords %]
-            <th scope='col'>[% l("Distance") %]</th>
+            <th scope='col' style="vertical-align:top;">[% l("Holdable?") %]</th>
             [%- END %]
+            <th scope='col' style="vertical-align:top;">[% l("Status") %]</th>
         </tr>
     </thead>
     <tbody>
@@ -167,8 +159,9 @@ END; # FOREACH bib
                 <meta property="price" content="0.00">
             </td>[% END %]
             <td><span property="sku">[% callnum | html %]</span> [% IF ctx.get_org_setting(CGI.param('loc')
-                OR ctx.aou_tree.id, 'sms.enable') == 1 %](<a href="[% mkurl(ctx.opac_root _ '/sms_cn',
-               {copy_id => copy_info.id}) %];rec=[%- ctx.bre_id -%]" rel="nofollow" vocab="">Text</a>)[% END %]
+
+                OR ctx.aou_tree.id, 'sms.enable') == 1 %]<br/><i><a href="[% mkurl(ctx.opac_root _ '/sms_cn',
+               {copy_id => copy_info.id}) %];rec=[%- ctx.bre_id -%]" rel="nofollow" vocab="">[% l('Send Call Number in Text Message') %]</a></i>[% END %]</td>
 
        [% IF copy_info.notes; %]
             [% FOREACH note IN copy_info.notes; %]
@@ -312,19 +305,36 @@ END; # FOREACH bib
                 schema_copy_status.${copy_info.status_code};
                 copy_info.copy_status | html;
             -%]</td>
-            <td>[%
-                IF copy_info.due_date;
-                    date.format(
-                        ctx.parse_datetime(copy_info.due_date, copy_info.circ_circ_lib),
-                        DATE_FORMAT
-                    );
-                ELSE;
-                    '-';
-                END %]</td>
             [%- IF ctx.use_courses %]
             <td>[%- FOREACH course IN copy_info.courses %]
                 <div>[% course.course_number %]</div>
             [% END %]</td>
+
+        </tr>
+
+        [% IF copy_info.notes; %]
+            [% FOREACH note IN copy_info.notes; %]
+                <tr><td>&nbsp;</td><td class="copy_note" colspan="4" property="description"><strong>[% note.title | html %]:</strong> [% note.value | html %]</td></tr>
+            [% END %]
+        [% END %]
+
+        [% IF copy_info.tags; %]
+            [% FOREACH tag IN copy_info.tags; %]
+                <tr class="copy_tag_row">
+                    <td>&nbsp;</td>
+                    <td class="copy_tag" colspan="4">
+                    <span class="copy_tag_type_label">[% tag.tag_type.label _ ": " | html %]</span>
+                        <span class="copy_tag_value">
+                        [% IF tag.url %]
+                            <a href="[% tag.url | html %]">
+                            [% END %]
+                                [% tag.value | html %]
+                            [% IF tag.url %]
+                            </a>
+                            [% END %]
+                        </span>
+                    </td>
+                </tr>
             [% END %]
             [%- IF ctx.geo_sort && ctx.has_valid_coords %]
                 <td>[% display_ou_distance(copy_info.circ_lib) %]</td>
index cb484d4..b7d447d 100755 (executable)
@@ -58,8 +58,8 @@ END;
 
 [%- series_anchors = PROCESS render_series;
     IF series_anchors.length > 0; %]
-<h2 class='rdetail_related_series'>[% l('Search for related items by series') %]</h2>
-<ul class="no-bullets">
+<h2 class='rdetail_related_series' style="font-size:1.7em;">[% l('Search for related items by series') %]</h2>
+<ul>
     [% series_anchors %]
 </ul>
 [%- END %]
index 7f0f58e..f58e040 100755 (executable)
 [%-  subject_html = PROCESS render_all_subjects;
     IF subject_html.length > 0;
 %]
-<h2 class='rdetail_related_subjects'>[% l('Search for related items by subject') %]</h2>
+<h2 class='rdetail_related_subjects' style="font-size:1.7em;">[% l('Search for related items by subject') %]</h2>
 [%- subject_html %]
 [%- END %]
index 7311717..8f6efd0 100755 (executable)
@@ -74,7 +74,7 @@ ctx.metalinks.push('
                     <button id="btnMore" data-toggle="collapse" data-target="#demo"
                         class="btn btn-action btn-sm my-3"><i class="fas fa-info-circle" aria-hidden="true"></i> [%l ("More Details") %]</button>
                     <div id="demo" class="collapse">
-                        <h2 class='rdetail_record_details'>[% l("Record details") %]</h2>
+                        <h2 id='rdetail_record_details' style="font-size:1.7em;">[% l("Record details") %]</h2>
                         <ul class="list-unstyled">
                             [%- IF attrs.hl.isbn.size; FOR isbn IN attrs.hl.isbn %]
                             <li class='rdetail_isbns'>
@@ -353,6 +353,52 @@ ctx.metalinks.push('
                             [% args = save_args; %]
                         </div>
 
+                    </div>
+
+                </div>
+                <script>jQuery('#demo').on('hidden.bs.collapse', function () {
+                        jQuery('#btnMore').html("<i class='fas fa-info-circle' aria-hidden='true'></i> More Details");
+                    })
+                    jQuery('#demo').on('shown.bs.collapse', function () {
+                        jQuery('#btnMore').html("<i class='fas fa-info-circle' aria-hidden='true'></i> Less Details");
+                    })
+                    </script>
+
+               <div id="copy_hold_counts">
+
+                [%-
+                # Hold/copy summary
+                IF ctx.copy_summary.0.count;
+                INCLUDE "opac/parts/record/copy_counts.tt2";
+                %]
+
+
+                [%- END %]
+
+                </div> <!-- metarecord_population -->
+
+                <!-- PINES: Moved Holds block here -->
+                <div>
+                    <h2 style="font-size:1.7em;">[% l('Holds') %]</h2>
+                    <ul>
+                        [%
+                            # If org hiding is enabled/relevant, only show
+                            # counts for copies within the hiding scope.
+                            count_entry = 0;
+                            FOR count_chunk IN ctx.copy_summary;
+                            IF ctx.org_within_hiding_scope(count_chunk.org_unit);
+                            # always true when hiding is disabled
+                            LAST;
+                            END;
+                            count_entry = count_entry + 1;
+                            END;
+                            l("<li>[quant,_1,current hold,current holds] with [quant,_2,total copy,total copies].</li>",
+                            ctx.record_hold_count, ctx.copy_summary.$count_entry.count)
+                        %]
+                    </ul>
+                </div>
+
+
             </div>
             <!--rdetail_title_div-->
 
@@ -522,7 +568,7 @@ ctx.metalinks.push('
         IF num_uris > 0;
         -%]
 
-        <h2 class="rdetail_uris">[% l("Electronic resources") %]</h2>
+        <h2 class="rdetail_uris" style="font-size:1.7em;">[% l("Electronic resources") %]</h2>
         <div class="rdetail_uris">
             [%- IF num_uris > 1 %]<ul>[% END %]
                 [%- FOR uri IN merged_uris %]
index f38cbdc..7e93dbf 100755 (executable)
@@ -1,4 +1,8 @@
 <div class="container-fluid my-3">
+<div>
+    <div class="header_middle">[% l('Narrow Your Search') %]</div>
+    <i>[% l('PINES Facet Tip') %]</i>
+</div>
 <div class="facet_box_wrapper row">
 [%
 
index 67ac027..91092cf 100755 (executable)
@@ -39,14 +39,14 @@ END;
     [% IF (ctx.page == 'place_hold' || ctx.page == 'myopac' || ctx.page == 'home' || ctx.page == 'record') && search.metarecord_default %]
     <input type="hidden" name="modifier" value="metabib"/>
     [% END %]
-    <div class="m-5">
+    <div class="m-3" style="border-bottom: 3px dashed #8DC641;">
     <div class="row">
      <!--Keyword-->
         <div class="col-sm-12 col-md">
         <span class='search_box_wrapper'>
             [%- # autosuggest breaks accessibility, as the aria-label
                 # attribute is removed when the Dijit is created. :(  %]
-            <label id="search_box_label" for="search_box" class="w-100">[% l('Search: ') %]
+            <label id="search_box_label" for="search_box" class="w-100">[% l('Search for: ') %]
             <input class="form-control form-control-sm" type="text" id="search_box" name="query" aria-label="[%
                     l('Enter search query:');
                 %]" value="[% is_advanced ? ctx.naive_query_scrub(ctx.user_query) : CGI.param('query') | html %]"
@@ -67,7 +67,7 @@ END;
         <div class="col-sm-12 col-md">
         <label id="search_qtype_label" for="qtype" class="w-100">
         [%-
-            l('Type: ');
+            l('Search by:');
             INCLUDE "opac/parts/qtype_selector.tt2" id="qtype";
         -%]
         </label>
@@ -81,7 +81,7 @@ END;
         <div class="col-sm-12 col-md">
         <label id="search_itype_label" for="search_itype_selector" class="w-100">
         [%-
-            l('Format: ');
+            l('Limit to:');
             IF search.basic_config.type == 'attr';
                 INCLUDE "opac/parts/coded_value_selector.tt2"
                     attr=search.basic_config.group none_ok=1
@@ -103,7 +103,7 @@ END;
         <label id="search_locg_label" for="search_org_selector" class="w-100">
         [%-
             l('Library: ');
-            select_lib_label = l("Select search library");
+            select_lib_label = l("Search within:");
             INCLUDE build_org_selector arialabel=select_lib_label
               id='search_org_selector' show_loc_groups=1 show_lassos=1
         -%]
index 1137ebb..f96c8e3 100755 (executable)
@@ -47,7 +47,7 @@
             </form>
             [% END %]
         [% ELSIF !ctx.pwreset.status %]
-        <h2>[% l('Please enter your user name or barcode to identify your library account and request a password reset') %]</h2>
+        <p style="font-weight:bold;font-size:1.5em;">[% l('Please enter your library card number or user name to request a password reset') %]</p>
         [%- INCLUDE "opac/password_reset_msg.tt2" %]
         <form method="post">
             <div class="form-group row">
index d8c4e74..7b10786 100755 (executable)
@@ -23,7 +23,7 @@
     <form action="[% ctx.opac_root %]/results" method="get">
     [% INCLUDE "opac/parts/searchbar.tt2" took_care_of_form=1 %]
     <h3 class="sr-only">[% l('Additional search filters and navigation') %]</h3>
-    <div class="almost-content-wrapper border-bottom">
+    <div class="almost-content-wrapper border-bottom" style="background-color:#D3EBF4;margin-top:-35px;">
 
         [%# hide the header bar when displaying metarecord constituents
           instead of skipping it altogether to allow the search form
@@ -58,7 +58,7 @@
                     <div class="mx-auto">
                         <!-- ===== Drop Down ===== -->
                         <div class="search-option my-2">
-                        <label for="opac.result.sort">[% l('Sort Results') %]</label>
+                        <label for="opac.result.sort" class="sr-only">[% l('Sort Results') %]</label>
                             [% INCLUDE "opac/parts/filtersort.tt2" value=CGI.param('sort') submit_on_change=1 class="form-control" %]
                         </div>
                         [%- IF show_more_details.default != 'hide' -%]