LP1903767 - Bootstrap Opac: Make other formats and editions more visible. user/gcollum/LP1903767_bootstrap_opac_visibility_of_other_formats
authorGarry Collum <gcollum@gmail.com>
Tue, 14 Dec 2021 19:38:34 +0000 (14:38 -0500)
committerGarry Collum <gcollum@gmail.com>
Tue, 14 Dec 2021 19:38:34 +0000 (14:38 -0500)
This patch does the following:

1. Moves "Other Formats and Editions" below # of holds and available items.
2. Changes "Other Options" to "Other Formats and Editions" and made the header
 tag and <h2> to be consistent with the other header tags.
3. Resizes <h2> headers.
4. Removes bullets and changes the margins of some of the table/list displays
 under the <h2> headers.
5. Fixes the alignment of the button group (Place Hold, Remove from basket)

For testing:
1. Find a some records with other formats and editions.
In concerto record #71 contains other formats and editions.  You could also
copy a couple of existing records and make some changes to create other
formats and editions.  For example, add a language code, or change the publication date.
2. Notice that you have to click on the More Details button in order
to view the Other Formats.
3. Apply the patch.
4. Other Formats and Editions now appears under the Available Copies and Holds Headings.

Signed-off-by: Garry Collum <gcollum@gmail.com>
Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2
Open-ILS/src/templates-bootstrap/opac/parts/record/copy_counts.tt2
Open-ILS/src/templates-bootstrap/opac/parts/record/series.tt2
Open-ILS/src/templates-bootstrap/opac/parts/record/summary.tt2

index a40c8eb..668dc2a 100755 (executable)
@@ -925,6 +925,11 @@ div#rdetail_actions_div {
     [%- END %]
 }
 
+div#rdetail_copy_counts {
+    margin-top: 1em;
+}
+
+/*
 span#rdetail_copy_counts {
     display: inline-block;
     vertical-align: top;
@@ -950,6 +955,7 @@ span#rdetail_hold_counts p {
     padding-left: 2em;
     [%- END %]
 }
+*/
 
 #rdetail_image_div {
     [% IF rtl == 't' -%]
@@ -2403,12 +2409,30 @@ a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
     width: 100%;
 }
 
-#rdetail_record_details {
+.rdetail_record_details {
     clear: both;
     margin-top: 1em;
 }
 
-.rdetail_content {
+h2.rdetail_record_details, #rdetail_copy_counts h2, h2.rdetail_contents,
+h2.rdetail_related_subjects, h2.rdetail_related_series,
+h2.rdetail_other_formats, h2.rdetail_uris {
+    font-size: [% css_fonts.size_biggest %];
+    font-weight: bold;
+}
+
+ul.no-bullets {
+    list-style-type: none;
+    [% IF rtl == 't' -%]
+    margin-right: 0;
+    padding-right: 1.5em;
+    [% ELSE -%]
+    margin-left: 0;
+    padding-left: 1.5em;
+    [% END -%]
+}
+
+.rdetail_content, .rdetail_subject {
     [% IF rtl == 't' -%]
     margin-right: 1.5em;
     padding-right: 1.5em;
index 407662d..24f5797 100755 (executable)
@@ -1,7 +1,7 @@
 <div id="rdetail_copy_counts">
     <h2>[% l('Available copies') %]</h2>
 
-    <ul>
+    <ul class="no-bullets">
     [%- depths = ctx.copy_summary.size;
         depth = 0;
         displayed_ous = {};
@@ -52,7 +52,7 @@
     </ul>
 
     <h2>[% l('Holds') %]</h2>
-    <ul><li>
+    <ul class="no-bullets"><li>
     [%
         # If org hiding is enabled/relevant, only show
         # counts for copies within the hiding scope.
index ea93d55..cb484d4 100755 (executable)
@@ -59,7 +59,7 @@ 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>
+<ul class="no-bullets">
     [% series_anchors %]
 </ul>
 [%- END %]
index a0007ed..affb01d 100755 (executable)
@@ -73,7 +73,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> More Details</button>
                     <div id="demo" class="collapse">
-                        <h2 id='rdetail_record_details'>[% l("Record details") %]</h2>
+                        <h2 class='rdetail_record_details'>[% l("Record details") %]</h2>
                         <ul class="list-unstyled">
                             [%- IF attrs.hl.isbn.size; FOR isbn IN attrs.hl.isbn %]
                             <li class='rdetail_isbns'>
@@ -254,6 +254,30 @@ ctx.metalinks.push('
                         [%- INCLUDE "opac/parts/record/contents.tt2" %]
                         [%- INCLUDE "opac/parts/record/subjects.tt2" %]
                         [%- INCLUDE "opac/parts/record/series.tt2" %]
+
+                    </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 -->
                         <div>
                             [%-
                             # l( 'mmr id = ' _ ctx.mmr_id );
@@ -263,7 +287,7 @@ ctx.metalinks.push('
 
                             IF args.mmr_unique_bib.size > 1;
                             %]
-                            <h3>[% l("More Options") %]</h3>
+                            <h2 class="rdetail_other_formats">[% l("Other Formats and Editions") %]</h2>
                             <span class="metarecord_population_format">
                                 [%- IF mmr_attrs.format_label;
 
@@ -320,35 +344,11 @@ ctx.metalinks.push('
                             [%- END;
                             END # ending tag for IF args.mmr_unique_bib.size > 1; %]
                         </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 -->
             </div>
             <!--rdetail_title_div-->
 
             <div class="col-lg-4">
-             <div id="actions" class="mx-auto btn-group btn-group-vertical dropright mt-3">
+             <div id="actions" class="mx-auto btn-group-vertical dropright mt-3">
                 [%- search_ou = ctx.search_ou;
                 IF ctx.place_unfillable ||
                 ( attrs.marc_xml.findnodes('//*[local-name()="holdings" and @has_holdable="true"]').size
@@ -358,7 +358,7 @@ ctx.metalinks.push('
                 
                     <a class="btn btn-action no-dec" role="button" href="[% mkurl(ctx.opac_root _ '/place_hold',
                     {hold_target => ctx.bre_id, hold_type => 'T', hold_source_page => mkurl()}, stop_parms) %]">
-                        <span class="place_hold"><i class="fas fa-check" aria-hidden="true"></i> [% l('Place Hold') %]</span></a>
+                        <span class="place-hold"><i class="fas fa-check" aria-hidden="true"></i> [% l('Place Hold') %]</span></a>
               
                 [%- END -%]