LP1527756: Patron summary should scroll separately from patron search results

To test:
1) Without this patch, do a patron search with a lot of results in a
browser window that is not very tall on a laptop or desktop computer.
2) Click on a search result.
3) Scroll down.  Note that the patron summary on the left side of the
screen also scrolls down at the same time.
4) Apply this commit.
5) Repeat steps 1-3.  Note that the patron summary has a separate
scrollbar and does not scroll along with the right side of the screen.
6) Confirm that the behavior you saw in step 5 is true across all of the
patron record tabs (e.g. Check Out, Items Out).

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>

diff --git a/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2 b/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2
index 11cf06a..45a63ea 100644 (file)
--- a/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2
@@ -177,34 +177,34 @@
       <div class="col-md-5">[% l('Name Keywords') %]</div>
       <div class="col-md-7">{{patron().name_keywords()}}</div>
     </div>
-  </div>
 
-  <div class="row" ng-repeat="addr in patron().addresses()">
-    <div class="panel">
-      <div class="panel-body">
-        <fieldset>
-          <legend ng-class="{'patron-summary-alert': addr.valid() == 'f'}">
-            {{addr.address_type()}} 
-            (<a href class="patron-summary-act-link" 
-                ng-click="copy_address(addr)">[%- l('copy') -%]</a><a 
-                href class="patron-summary-act-link" 
-                ng-click="print_address(addr)">[%- l('/print') -%]</a>)
-          </legend>
-          <div>{{addr.street1()}} {{addr.street2()}}</div>
-          <div>{{addr.city()}}, {{addr.state()}} {{addr.post_code()}}</div>
-        </fieldset>
-        <textarea id="patron-address-copy-{{addr.id()}}" rows="2" 
-          style="visibility:hidden">[%- l(
-            '[_1] [_2] [_3]&#13;&#10;[_4] [_5]&#13;&#10;[_6], [_7] [_8]', 
-            '{{patron().first_given_name()}}',
-            '{{patron().second_given_name()}}',
-            '{{patron().family_name()}}',
-            '{{addr.street1()}}',
-            '{{addr.street2()}}',
-            '{{addr.city()}}',
-            '{{addr.state()}}',
-            '{{addr.post_code()}}') 
-          -%]</textarea>
+    <div ng-repeat="addr in patron().addresses()">
+      <div class="panel">
+        <div class="panel-body">
+          <fieldset>
+            <legend ng-class="{'patron-summary-alert': addr.valid() == 'f'}">
+              {{addr.address_type()}} 
+              (<a href class="patron-summary-act-link" 
+                  ng-click="copy_address(addr)">[%- l('copy') -%]</a><a 
+                  href class="patron-summary-act-link" 
+                  ng-click="print_address(addr)">[%- l('/print') -%]</a>)
+            </legend>
+            <div>{{addr.street1()}} {{addr.street2()}}</div>
+            <div>{{addr.city()}}, {{addr.state()}} {{addr.post_code()}}</div>
+          </fieldset>
+          <textarea id="patron-address-copy-{{addr.id()}}" rows="2" 
+            style="visibility:hidden">[%- l(
+              '[_1] [_2] [_3]&#13;&#10;[_4] [_5]&#13;&#10;[_6], [_7] [_8]', 
+              '{{patron().first_given_name()}}',
+              '{{patron().second_given_name()}}',
+              '{{patron().family_name()}}',
+              '{{addr.street1()}}',
+              '{{addr.street2()}}',
+              '{{addr.city()}}',
+              '{{addr.state()}}',
+              '{{addr.post_code()}}') 
+            -%]</textarea>
+        </div>
       </div>
     </div>
   </div>

diff --git a/Open-ILS/src/templates/staff/css/circ.css.tt2 b/Open-ILS/src/templates/staff/css/circ.css.tt2
index 798117e..b2a9c3f 100644 (file)
--- a/Open-ILS/src/templates/staff/css/circ.css.tt2
+++ b/Open-ILS/src/templates/staff/css/circ.css.tt2
@@ -89,6 +89,24 @@ but the ones I'm finding aren't quite cutting it..*/
   border-bottom: 1px solid #CCC;
 }
 
+/* -- patron summary scrolls separately -- */
+
+@media (min-width: 992px) and (max-width: 1120px) {
+  #patron-summary-grid {
+    width: 210px;
+   } 
+}
+
+@media (min-width: 992px) {
+  #patron-summary-grid {
+    overflow-y: scroll;
+    height: 80vh;
+   }
+   .patron-summary-grid-wrapper {
+     position: fixed;
+   }
+}
+
 /* -- patron registration -- */
 
 /* make all input widgets the same width, i.e. fill their column */