item status UI continued
authorBill Erickson <berick@esilibrary.com>
Fri, 16 May 2014 15:41:06 +0000 (11:41 -0400)
committerBill Erickson <berick@esilibrary.com>
Fri, 16 May 2014 15:41:06 +0000 (11:41 -0400)
Signed-off-by: Bill Erickson <berick@esilibrary.com>
Open-ILS/src/templates/staff/cat/item/t_circs_pane.tt2
Open-ILS/src/templates/staff/cat/item/t_holds_pane.tt2
Open-ILS/src/templates/staff/cat/item/t_summary_pane.tt2
Open-ILS/src/templates/staff/css/style.css.tt2

index 17b8f79..1ba584c 100644 (file)
@@ -12,7 +12,7 @@
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Patron') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       <a href="./circ/patron/{{prev_circ_usr.id()}}/checkout" 
         ng-if="prev_circ_summary" target="_self">
         [% l('[_1], [_2] [_3] : [_4]', 
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Total Circs') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{prev_circ_summary.num_circs()}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Checkout Date') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{prev_circ_summary.start_time() | date:'short'}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Checkout Workstation') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{prev_circ_summary.checkout_workstation()}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Last Renewed On') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{prev_circ_summary.last_renewal_time() | date:'short'}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Renewal Workstation') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{prev_circ_summary.last_renewal_workstation()}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Stop Fines Reason') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{prev_circ_summary.last_stop_fines()}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Stop Fines Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{prev_circ_summary.last_stop_fines_time() | date:'short'}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Checkin Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{prev_circ_summary.last_checkin_time() | date:'short'}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Checkin Scan Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{prev_circ_summary.last_checkin_scan_time() | date:'short'}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Checkin Workstation') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{prev_circ_summary.last_checkin_workstation()}}
     </div>
   </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Patron') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       <a href="./circ/patron/{{circ.usr().id()}}/checkout" 
         ng-if="circ" target="_self">
         [% l('[_1], [_2] [_3] : [_4]', 
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Total Circs') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ_summary.num_circs()}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Checkout Date') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ.xact_start() | date:'short'}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Checkout Workstation') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ.workstation().name()}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Last Renewed On') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ_summary.last_renewal_time() | date:'short'}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Renewal Workstation') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ_summary.last_renewal_workstation()}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Stop Fines Reason') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ.stop_fines()}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Stop Fines Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ.stop_fines_time() | date:'short'}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Checkin Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ.checkin_time() | date:'short'}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Checkin Scan Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ.checkin_scan_time() | date:'short'}}
     </div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Checkin Workstation') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ.checkin_workstation.name()}}
     </div>
   </div>
index a5f7e50..2da962b 100644 (file)
@@ -11,7 +11,7 @@
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Patron') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       <a href="./circ/patron/{{hold.usr().id()}}/checkout" 
         ng-if="hold" target="_self">
         [% l('[_1], [_2] [_3] : [_4]', 
@@ -24,7 +24,7 @@
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Requestor') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       <a href="./circ/patron/{{hold.requestor().id()}}/checkout" 
         ng-if="hold" target="_self">
         [% l('[_1], [_2] [_3] : [_4]', 
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Pickup Lib') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{hold.pickup_lib().shortname()}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Current Shelf Lib') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{hold.current_shelf_lib().shortname()}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Request Date') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{hold.request_time() | date:'short'}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Capture Date') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{hold.capture_time() | date:'short'}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Shelf Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{hold.shelf_time() | date:'short'}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Shelf Expire Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{hold.shelf_expire_time() | date:'short'}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Hold Expire Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{hold.expire_time() | date:'short'}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Behind Desk') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{hold.behind_desk()}}
     </div>
   </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Transit Source') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{transit.source().shortname()}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Transit Destination') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{transit.dest().shortname()}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Transit Send Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{transit.source_send_time() | date:'short'}}
     </div>
   </div>
   <div class="flex-row">
     <div class="flex-cell">[% l('Transit Receive Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{transit.source_recv_time() | date:'short'}}
     </div>
   </div>
index 21b2522..6918124 100644 (file)
+<style>
+/* FIXME: move me */
+#item-status-alert-msg {
+  flex:7; /* fill the remaining horizontal space */
+}
+</style>
+
 <div class="">
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Barcode') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.barcode()}}</div>
+    <div class="flex-cell well">{{copy.barcode()}}</div>
 
     <div class="flex-cell">[% l('Circ Library') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.circ_lib().shortname()}}</div>
+    <div class="flex-cell well">{{copy.circ_lib().shortname()}}</div>
 
     <div class="flex-cell">[% l('Call # Prefix') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{copy.call_number().prefix().label()}}
     </div>
 
     <div class="flex-cell">[% l('Status') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.status().name()}}</div>
+    <div class="flex-cell well">{{copy.status().name()}}</div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Price') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.price()}}</div>
+    <div class="flex-cell well">{{copy.price()}}</div>
 
     <div class="flex-cell">[% l('Owning Library') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.circ_lib().shortname()}}</div>
+    <div class="flex-cell well">{{copy.circ_lib().shortname()}}</div>
 
     <div class="flex-cell">[% l('Call #') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.call_number().label()}}</div>
+    <div class="flex-cell well">{{copy.call_number().label()}}</div>
 
     <div class="flex-cell">[% l('Due Date') %]</div>
-    <div class="flex-cell flex-cell-well">{{circ.due_date() | date:'short'}}</div>
+    <div class="flex-cell well">{{circ.due_date() | date:'short'}}</div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('ISBN') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{copy.call_number().record().simple_record().isbn()}}
     </div>
 
     <div class="flex-cell">[% l('Copy Location') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.location().name()}}</div>
+    <div class="flex-cell well">{{copy.location().name()}}</div>
 
     <div class="flex-cell">[% l('Call # Suffix') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{copy.call_number().suffix().label()}}
     </div>
 
     <div class="flex-cell">[% l('Checkout Date') %]</div>
-    <div class="flex-cell flex-cell-well">{{circ.xact_start() | date:'short'}}</div>
+    <div class="flex-cell well">{{circ.xact_start() | date:'short'}}</div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Date Created') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.create_date() | date:'short'}}</div>
+    <div class="flex-cell well">{{copy.create_date() | date:'short'}}</div>
 
     <div class="flex-cell">[% l('Loan Duration') %]</div>
-    <div class="flex-cell flex-cell-well">{{circ.duration()}}</div>
+    <div class="flex-cell well">{{circ.duration()}}</div>
 
     <div class="flex-cell">[% l('Renewal Type') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       <div ng-if="circ.opac_renewal() == 't'">[% l('OPAC') %]</div>
       <div ng-if="circ.desk_renewal() == 't'">[% l('Desk') %]</div>
       <div ng-if="circ.phone_renewal() == 't'">[% l('Phone') %]</div>
     </div>
 
     <div class="flex-cell">[% l('Checkout Workstation') %]</div>
-    <div class="flex-cell flex-cell-well">{{circ.workstation().name()}}</div>
+    <div class="flex-cell well">{{circ.workstation().name()}}</div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Date Active') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.active_date() | date:'short'}}</div>
+    <div class="flex-cell well">{{copy.active_date() | date:'short'}}</div>
 
     <div class="flex-cell">[% l('Fine Level') %]</div>
-    <div class="flex-cell flex-cell-well">{{circ.duration_rule().name()}}</div>
+    <div class="flex-cell well">{{circ.duration_rule().name()}}</div>
 
     <div class="flex-cell">[% l('Total Circs') %]</div>
-    <div class="flex-cell flex-cell-well">{{total_circs}}</div>
+    <div class="flex-cell well">{{total_circs}}</div>
 
     <div class="flex-cell">[% l('Duration Rule') %]</div>
-    <div class="flex-cell flex-cell-well">{{circ.duration_rule().name()}}</div>
+    <div class="flex-cell well">{{circ.duration_rule().name()}}</div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Status Changed') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.status_changed_time() | date:'short'}}</div>
+    <div class="flex-cell well">{{copy.status_changed_time() | date:'short'}}</div>
 
     <div class="flex-cell">[% l('Reference') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.ref()}}</div>
+    <div class="flex-cell well">{{copy.ref()}}</div>
 
     <div class="flex-cell">[% l('Total Circs - Current Year') %]</div>
-    <div class="flex-cell flex-cell-well">{{total_circs_this_year}}</div>
+    <div class="flex-cell well">{{total_circs_this_year}}</div>
 
     <div class="flex-cell">[% l('Recurring Fine Rule') %]</div>
-    <div class="flex-cell flex-cell-well">{{circ.recurring_fine_rule().name()}}</div>
+    <div class="flex-cell well">{{circ.recurring_fine_rule().name()}}</div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Copy ID') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.id()}}</div>
+    <div class="flex-cell well">{{copy.id()}}</div>
 
     <div class="flex-cell">[% l('OPAC Visible') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.opac_visible()}}</div>
+    <div class="flex-cell well">{{copy.opac_visible()}}</div>
 
     <div class="flex-cell">[% l('Total Circs - Prev Year') %]</div>
-    <div class="flex-cell flex-cell-well">{{total_circs_prev_year}}</div>
+    <div class="flex-cell well">{{total_circs_prev_year}}</div>
 
     <div class="flex-cell">[% l('Max Fine Rule') %]</div>
-    <div class="flex-cell flex-cell-well">{{circ.max_fine_rule().name()}}</div>
+    <div class="flex-cell well">{{circ.max_fine_rule().name()}}</div>
   </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('TCN') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.call_number().record().tcn_value()}}</div>
+    <div class="flex-cell well">{{copy.call_number().record().tcn_value()}}</div>
 
     <div class="flex-cell">[% l('Holdable') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.opac_visible()}}</div>
+    <div class="flex-cell well">{{copy.opac_visible()}}</div>
 
     <div class="flex-cell">[% l('Renewal Workstation') %]</div>
-    <div class="flex-cell flex-cell-well">{{circ_summary.last_renewal_workstation()}}</div>
+    <div class="flex-cell well">{{circ_summary.last_renewal_workstation()}}</div>
 
     <div class="flex-cell">[% l('Checkin Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ.checkin_time() || 
         circ_summary.last_checkin_time() | date:'short'}}
     </div>
 
   <div class="flex-row">
     <div class="flex-cell">[% l('Floating') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.floating()}}</div>
+    <div class="flex-cell well">{{copy.floating()}}</div>
 
     <div class="flex-cell">[% l('Circulate') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.circulate()}}</div>
+    <div class="flex-cell well">{{copy.circulate()}}</div>
 
     <div class="flex-cell">[% l('Remaining Renewals') %]</div>
-    <div class="flex-cell flex-cell-well">{{circ.renewal_remaining()}}</div>
+    <div class="flex-cell well">{{circ.renewal_remaining()}}</div>
 
     <div class="flex-cell">[% l('Checkin Scan Time') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ.checkin_scan_time() || 
         circ_summary.last_checkin_scan_time() | date:'short'}}
     </div>
     <div class="flex-cell"></div>
 
     <div class="flex-cell">[% l('Circ Modifier') %]</div>
-    <div class="flex-cell flex-cell-well">{{copy.circ_modifier().name()}}</div>
+    <div class="flex-cell well">{{copy.circ_modifier().name()}}</div>
 
     <!-- empty -->
     <div class="flex-cell"></div>
     <div class="flex-cell"></div>
 
     <div class="flex-cell">[% l('Checkin Workstation') %]</div>
-    <div class="flex-cell flex-cell-well">
+    <div class="flex-cell well">
       {{circ.checkin_workstation().name() || 
         circ_summary.last_checkin_workstation().name()}}
     </div>
   </div>
 
+  <div class="flex-row">
+    <div class="flex-cell">[% l('Alert Message') %]</div>
+    <div id="item-status-alert-msg" class="well">
+      {{copy.alert_message()}}
+    </div>
+  </div>
+
 </div>
index 0c7c730..787c249 100644 (file)
@@ -319,19 +319,13 @@ table.list tr.selected td {
 }
 .flex-cell {
   flex: 1;
-  padding: 5px;
+  padding: 4px; /* bootstrap default is much bigger */
 }
-
-/* present cells in small rounded wells */
-.flex-cell-well {
-  border-radius: 4px;
-  border: 1px solid #ddd;
-  background-color: #f5f5f5;
-  /* wells looks better with a little space between them */
-  margin-bottom: 4px;
+.flex-cell.well {
+  min-height: 2.5em; /* don't let empty wells scrunch down */
+  margin-bottom: 5px; /* bootstrap default is 20px */
 }
-
-.flex-2 {
+.flex-2 { /* meh, convience */
   flex: 2;
 }