From 2e3033a98d3b860c5c60beb6d12b81df25a25397 Mon Sep 17 00:00:00 2001
From: Kyle Huckins <khuckins@catalyte.io>
Date: Mon, 12 Feb 2018 17:53:30 +0000
Subject: [PATCH] lp1748277 Patron Reg Long Field Doc Overlapping

- Restructures the Patron Registration/Editor template to have
better scaffolding in place, keeping the alert pane from overlapping
with fields.

- Adds a z-index level of 3 to the Registration alert pane, ensuring it
stays above form controls wihtin input groups.

Signed-off-by: Kyle Huckins <khuckins@catalyte.io>
---
 .../src/templates/staff/circ/patron/register.tt2   |   2 +-
 .../src/templates/staff/circ/patron/t_edit.tt2     | 212 +++++++++++----------
 Open-ILS/src/templates/staff/css/circ.css.tt2      |   1 +
 3 files changed, 109 insertions(+), 106 deletions(-)

diff --git a/Open-ILS/src/templates/staff/circ/patron/register.tt2 b/Open-ILS/src/templates/staff/circ/patron/register.tt2
index 0df6f9e5fa..b0efc65026 100644
--- a/Open-ILS/src/templates/staff/circ/patron/register.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/register.tt2
@@ -21,7 +21,7 @@ angular.module('egCoreMod').run(['egStrings', function(s) {
 <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/circ.css" />
 <style>
   /* add room for the fixed navigation elements */
-  #top-content-container { padding-top: 170px; }
+  /* #top-content-container { padding-top: 170px; } */
 </style>
 [% END %]
 
diff --git a/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2 b/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
index f61f5eea07..58f9484723 100644
--- a/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
@@ -1,97 +1,5 @@
 [% DOC_IMG = '/images/question-mark.png' %]
 
-<!-- register banner -->
-<div ng-if="!patron_id" ng-class='{"patron-reg-fixed-bar":!offline}'>
-
-  <div class="container-fluid" style="text-align:center">
-    <div class="alert alert-info alert-less-pad strong-text-2">
-      <span >[% l('Register Patron') %]</span>
-    </div>
-  </div>
-
-  <div class="flex-row" class='patron-reg-actions-bar'>
-    [% INCLUDE 'staff/circ/patron/reg_actions.tt2' %]
-  </div>
-</div>
-
-
-<!-- edit banner -->
-<div ng-if="patron_id"
-    class="strong-text-2">[% l('Patron Edit') %]</div>
-
-<div id="reg-alert-pane">
-
-  <div id="reg-dupe-links">
-    [%# dupe_search_encoded is uri escaped in the JS %]
-    <div class="alert alert-danger" ng-show="dupe_counts.name">
-      <a target="_blank"
-        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.name}}&inactive=1">
-      [% l('[_1] patron(s) with same name', '{{dupe_counts.name}}') %]
-      </a>
-    </div>
-    <div class="alert alert-danger" ng-show="dupe_counts.email">
-      <a target="_blank"
-        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.email}}">
-        [% l('[_1] patron(s) with same email', 
-        '{{dupe_counts.email}}') %]</a>
-    </div>
-    <div class="alert alert-danger" ng-show="dupe_counts.ident">
-      <a target="_blank" 
-        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.ident}}">
-        [% l('[_1] patron(s) with same identification', 
-        '{{dupe_counts.ident}}') %]</a>
-    </div>
-    <div class="alert alert-danger" ng-show="dupe_counts.day_phone">
-      <a target="_blank" 
-        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.day_phone}}">
-        [% l('[_1] patron(s) with same phone', 
-        '{{dupe_counts.day_phone}}') %]</a>
-    </div>
-    <div class="alert alert-danger" ng-show="dupe_counts.evening_phone">
-      <a target="_blank" 
-        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.evening_phone}}">
-        [% l('[_1] patron(s) with same phone', 
-        '{{dupe_counts.evening_phone}}') %]</a>
-    </div>
-    <div class="alert alert-danger" ng-show="dupe_counts.other_phone">
-      <a target="_blank" 
-        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.other_phone}}">
-        [% l('[_1] patron(s) with same phone', 
-        '{{dupe_counts.other_phone}}') %]</a>
-    </div>
-    <div class="alert alert-danger" ng-show="dupe_counts.address">
-      <a target="_blank" 
-        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.address}}" >
-        [% l('[_1] patron(s) with same address', 
-        '{{dupe_counts.address}}') %]</a>
-    </div>
-  </div>
-
-  <div class="alert alert-danger" ng-show="address_alerts.length > 0">
-      <div class="strong-text-3">[% l('Address Alert') %]</div>
-      <div ng-repeat="address_alert in address_alerts">
-        {{address_alert.alert_message()}}
-      </div>
-  </div>
-
-  <!-- IDL field documentation window -->
-  <div class="alert alert-info" ng-show="selected_field_doc">
-    <fieldset id="reg-field-doc">
-      <legend>
-      {{idl_fields[selected_field_doc.fm_class()][selected_field_doc.field()].label}}
-      </legend>
-      <div>{{selected_field_doc.string()}}</div>
-    </fieldset>
-  </div>
-
-  <div class="alert alert-info" ng-show="stage_user_requestor">
-    <a target="_blank" 
-      href="/eg/staff/circ/patron/{{stage_user.reqesting_usr()}}/edit">
-      [% l('Requested by [_1]', '{{stage_user_requestor}}') %]
-    </a>
-  </div>
-</div>
-
 [% MACRO draw_field_label (cls, field) BLOCK %]
   <div class="col-md-3 reg-field-label"> <!-- field label -->
     <label>{{idl_fields.[% cls %].[% field %].label}}</label>
@@ -102,7 +10,6 @@
   </div>
 [% END %]
 
-
 [% 
 # draws a vanilla form input field for inputs that require no 
 # special additions.
@@ -135,26 +42,47 @@ MACRO draw_form_input(cls, field, path, type, disable) BLOCK;
   </span>
 [% END %]
 
-<!-- progress dialog displayed as we await all data to finish loading -->
-<div class="row" ng-show="!page_data_loaded">
-  <div class="col-md-6 pad-vert">
-    <div class="progress progress-striped active">
-        <div class="progress-bar"  role="progressbar" aria-valuenow="100" 
-              aria-valuemin="0" aria-valuemax="100" style="width: 100%">
-            <span class="sr-only">[% l('Loading...') %]</span>
+    <div class="row">
+        <!-- register banner -->
+        <div ng-if="!patron_id" class="col-md-12">
+            <div class="alert alert-info alert-less-pad strong-text-2 text-center">
+              <span >[% l('Register Patron') %]</span>
+            </div>
+
+          <div class="col-md-12 flex-row" class='patron-reg-actions-bar'>
+            [% INCLUDE 'staff/circ/patron/reg_actions.tt2' %]
+          </div>
         </div>
     </div>
-  </div>
-</div>
 
-<!--  
+    <div class="row" ng-if="patron_id">
+        <div class="col-md-3 strong-text-2">
+            [% l('Patron Edit') %]
+        </div>
+    </div>
+
+    <!-- progress dialog displayed as we await all data to finish loading -->
+    <div class="row" ng-show="!page_data_loaded">
+      <div class="col-md-6 pad-vert">
+        <div class="progress progress-striped active">
+            <div class="progress-bar"  role="progressbar" aria-valuenow="100"
+                  aria-valuemin="0" aria-valuemax="100" style="width: 100%">
+                <span class="sr-only">[% l('Loading...') %]</span>
+            </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+
+    <!--
 MAIN FORM
 This div wraps the entire form so we can hide it until all needed data
 has been loaded.  Setting ng-form and a name lets us refer to fields
 within the "form" by name for validation.
 -->
 <div ng-form id="patron-reg-container" 
-  name="reg_form" ng-show="page_data_loaded">
+  name="reg_form" ng-show="page_data_loaded" class="col-sm-12 col-md-9">
 
 <!-- BARCODE -->
 
@@ -584,7 +512,7 @@ within the "form" by name for validation.
 <div class="row reg-field-row" ng-show="show_field('au.expire_date')">
   [% draw_field_label('au', 'expire_date') %]
   <div class="col-md-3 reg-field-input">
-    <eg-date-input 
+    <eg-date-input
       ng-model="patron.expire_date">
     </eg-date-input>
   </div>
@@ -1133,3 +1061,77 @@ within the "form" by name for validation.
 </div>
 
 </div><!-- /form wrapper -->
+
+<div id="reg-alert-pane" class="col-sm-12 col-md-3">
+  <div id="reg-dupe-links">
+    [%# dupe_search_encoded is uri escaped in the JS %]
+    <div class="alert alert-danger" ng-show="dupe_counts.name">
+      <a target="_blank"
+        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.name}}&inactive=1">
+      [% l('[_1] patron(s) with same name', '{{dupe_counts.name}}') %]
+      </a>
+    </div>
+    <div class="alert alert-danger" ng-show="dupe_counts.email">
+      <a target="_blank"
+        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.email}}">
+        [% l('[_1] patron(s) with same email',
+        '{{dupe_counts.email}}') %]</a>
+    </div>
+    <div class="alert alert-danger" ng-show="dupe_counts.ident">
+      <a target="_blank"
+        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.ident}}">
+        [% l('[_1] patron(s) with same identification',
+        '{{dupe_counts.ident}}') %]</a>
+    </div>
+    <div class="alert alert-danger" ng-show="dupe_counts.day_phone">
+      <a target="_blank"
+        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.day_phone}}">
+        [% l('[_1] patron(s) with same phone',
+        '{{dupe_counts.day_phone}}') %]</a>
+    </div>
+    <div class="alert alert-danger" ng-show="dupe_counts.evening_phone">
+      <a target="_blank"
+        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.evening_phone}}">
+        [% l('[_1] patron(s) with same phone',
+        '{{dupe_counts.evening_phone}}') %]</a>
+    </div>
+    <div class="alert alert-danger" ng-show="dupe_counts.other_phone">
+      <a target="_blank"
+        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.other_phone}}">
+        [% l('[_1] patron(s) with same phone',
+        '{{dupe_counts.other_phone}}') %]</a>
+    </div>
+    <div class="alert alert-danger" ng-show="dupe_counts.address">
+      <a target="_blank"
+        href="/eg/staff/circ/patron/search?search={{dupe_search_encoded.address}}" >
+        [% l('[_1] patron(s) with same address',
+        '{{dupe_counts.address}}') %]</a>
+    </div>
+  </div>
+
+  <div class="alert alert-danger" ng-show="address_alerts.length > 0">
+      <div class="strong-text-3">[% l('Address Alert') %]</div>
+      <div ng-repeat="address_alert in address_alerts">
+        {{address_alert.alert_message()}}
+      </div>
+  </div>
+
+  <!-- IDL field documentation window -->
+  <div class="alert alert-info" ng-show="selected_field_doc">
+    <fieldset>
+      <legend>
+      {{idl_fields[selected_field_doc.fm_class()][selected_field_doc.field()].label}}
+      </legend>
+      <div>{{selected_field_doc.string()}}</div>
+    </fieldset>
+  </div>
+
+  <div class="alert alert-info" ng-show="stage_user_requestor">
+    <a target="_blank"
+      href="/eg/staff/circ/patron/{{stage_user.reqesting_usr()}}/edit">
+      [% l('Requested by [_1]', '{{stage_user_requestor}}') %]
+    </a>
+  </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 798117ebad..77ebb5de04 100644
--- a/Open-ILS/src/templates/staff/css/circ.css.tt2
+++ b/Open-ILS/src/templates/staff/css/circ.css.tt2
@@ -115,6 +115,7 @@ but the ones I'm finding aren't quite cutting it..*/
     position: fixed;
     top:160px;
     right:20px;
+    z-index: 3; /* Avoid losing precedence over input group fields */
     /*
     border:2px dashed #d9e8f9;
     -moz-border-radius: 10px;
-- 
2.11.0