LP1735568, LP1830443: MARC Editor Fixes

These style changes to the current MARC Editor fix the indicator box
resize problem and the blank subfield problem while improving usability.
Colors were tested using the Chrome extension Colorblindly, a
colorblindness simulator.

Signed-off-by: Christine Morgan <cmorgan@noblenet.org>
Signed-off-by: Elaine Hardy <ehardy@georgialibraries.org>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

diff --git a/Open-ILS/src/templates/staff/cat/share/t_marcedit.tt2 b/Open-ILS/src/templates/staff/cat/share/t_marcedit.tt2
index 5ba7859..1421b65 100644 (file)
--- a/Open-ILS/src/templates/staff/cat/share/t_marcedit.tt2
+++ b/Open-ILS/src/templates/staff/cat/share/t_marcedit.tt2
@@ -24,7 +24,7 @@
         [% l('Stack subfields') %]
       </label>
     </div>
-    <div class="">
+    <div class="col-md-2">
       <div class="input-group pad-horiz">
         <span class="input-group-addon"><b>[% l('Record Type') %]</b></span>
         <span class="input-group-addon">{{calculated_record_type}}</span>
@@ -56,7 +56,7 @@
     <textarea class="marcflateditor" cols="120" rows="40" ng-model="flat_text_marc" ng-blur="saveFlatTextMARC()"></textarea>
   </div>
   <div ng-show="!flatEditor.isEnabled">
-    <div class="row pad-vert">
+    <div class="row pad-vert marcffcontainer">
       <div class="marcffeditor">
         <div class="row col-md-12">
             <eg-marc-edit-fixed-field fixed-field="Type" fixed-field-label="[% l('Type') | html %]" record="record"></eg-marc-edit-fixed-field>
@@ -148,9 +148,9 @@
         </div>
       </div>
     </div>
-    <div class="marcrecord pad-vert">
+    <div>
       <div uib-collapse="!showHelp">
-        <div class="row">
+        <div class="row keyboardhelp">
           <div class="col-md-4">
             <ul>
                <li>[% l('Undo: CTRL-z') %]</li>
@@ -178,23 +178,26 @@
         </div>
       </div>
       <div>
-        <eg-marc-edit-leader record="record" on-keydown="onKeydown"/>
-      </div>
-      <div>
-        <eg-marc-edit-controlfield 
-          ng-repeat="field in controlfields" 
-          field="field" on-keydown="onKeydown"
-          id="r{{field.record.subfield('901','c')[1]}}f{{field.position}}"
-          context-functions="context_functions"
-        />
-      </div>
-      <div>
-        <eg-marc-edit-datafield 
-          ng-repeat="field in datafields" 
-          field="field" on-keydown="onKeydown" 
-          id="r{{field.record.subfield('901','c')[1]}}f{{field.position}}"
-          context-functions="context_functions"
-        />
+      <div class="marcrecord">
+        <div>
+          <eg-marc-edit-leader record="record" on-keydown="onKeydown"/>
+        </div>
+        <div>
+          <eg-marc-edit-controlfield 
+            ng-repeat="field in controlfields" 
+            field="field" on-keydown="onKeydown"
+            id="r{{field.record.subfield('901','c')[1]}}f{{field.position}}"
+            context-functions="context_functions"
+          />
+        </div>
+        <div>
+          <eg-marc-edit-datafield 
+            ng-repeat="field in datafields" 
+            field="field" on-keydown="onKeydown" 
+            id="r{{field.record.subfield('901','c')[1]}}f{{field.position}}"
+            context-functions="context_functions"
+          />
+        </div>
       </div>
     </div>
   </div>

diff --git a/Open-ILS/src/templates/staff/cat/share/t_marcedit_editable.tt2 b/Open-ILS/src/templates/staff/cat/share/t_marcedit_editable.tt2
index 1e5888f..a5c8301 100644 (file)
--- a/Open-ILS/src/templates/staff/cat/share/t_marcedit_editable.tt2
+++ b/Open-ILS/src/templates/staff/cat/share/t_marcedit_editable.tt2
@@ -2,8 +2,8 @@
 <input
   ng-show="itype != 'sfv'"
   ng-disabled="{{isInputDisabled}}"
-  ng-class="['marcedit', {'marcsfcode': itype == 'sfc','marcind': itype == 'ind' || itype == 'tag', 'focusable': itype != 'sfv'}]"
-  style="font-family: 'Lucida Console', Monaco, monospace; min-width: 1ch; margin: 0 -2px;"
+  ng-class="['marcedit', {'marcsfcode': itype == 'sfc','marcind': itype == 'ind', 'marctag': itype == 'tag', 'focusable': itype != 'sfv'}]"
+  style="font-family: 'Lucida Console', Monaco, monospace; min-width: 1ch; margin: 2px 2px;"
   ng-model="content"
   size="{{content.length * 1.1}}"
   maxlength="{{max}}"
@@ -14,7 +14,7 @@
   class=""
   ng-class="['marcedit', {'marcsfvalue': itype == 'sfv', 'focusable': itype == 'sfv'}]"
   ng-show="itype == 'sfv'"
-  style="font-family: 'Lucida Console', Monaco, monospace; display: inline-block; min-width: 1ch; margin: 0 -1px; padding: 0;"
+  style="font-family: 'Lucida Console', Monaco, monospace; display: inline-block; min-width: 20ch; margin: 0 -1px; padding: 0 5px; border-left: 1px solid gray !important;"
   ng-model="content"
 >{{content}}</div>
 </span>

diff --git a/Open-ILS/src/templates/staff/css/cat.css.tt2 b/Open-ILS/src/templates/staff/css/cat.css.tt2
index ced13b3..8b43227 100644 (file)
--- a/Open-ILS/src/templates/staff/css/cat.css.tt2
+++ b/Open-ILS/src/templates/staff/css/cat.css.tt2
@@ -9,7 +9,9 @@
 }
 
 .marcrecord {
-    //background-color: #f5f5f5;
+    background-color: #ddd;
+    padding: 10px; /* provide consistant space around marc field editor */
+    margin: 0 -15px; /* line up editing sections left and right */
 }
 
 .marcflateditor {
@@ -23,7 +25,7 @@
 }
 
 .marcedit {
-    background-color: #f5f5f5;
+    background-color: #fff;
     border-collapse: collapse;
     border: solid thin gray;
     padding: 0px 5px 0px 5px;
@@ -39,34 +41,42 @@ input.marcedit:focus {
     background-color: lightcyan;
 }
 
+.keyboardhelp {
+    background-color: #fff;
+    border-bottom: 1px solid gray;
+}
+
 .marcffeditor {
     max-width: 800px;
 }
 
 .fixed-field-box {
-    border: 1px solid gray;
+    border: none;
+}
+.marcffcontainer {
+     background-color: lightcyan;
+     border-bottom: 1px solid gray;
 }
-
 .marcsfvalue {
-    border-left: 0px !important;
+    border-left: 1px !important;
 }
 
 .marcsfcode {
     color: blue;
     font-weight: normal;
     text-align: center;
-    padding-left: 0px !important;
-    border-left: 0px !important;
-    border-right: 0px !important;
+    margin-left: 0px !important;
+    width: 1.5em;
 }
 
 .marcsfcodedelimiter {
+    background-color: #ddd;
     color: blue;
     font-family: 'Lucida Console', Monaco, monospace;
     font-weight: normal;
     text-align: center;
     padding-right: 0px !important;
-    border-right: 0px !important;
+    border: none !important;
 }
 
 .unvalidatedheading {
@@ -77,6 +87,13 @@ input.marcedit:focus {
     text-align: center;
 }
 
+.marcind {
+    width: 1.5em;
+}
+.marctag {
+    width: 2.6em;
+}
+
 .marcEditableControlfield {
     text-align: left;
 }
@@ -311,5 +328,4 @@ table.custom-label-table td {
   overflow-x: scroll;
   overflow-y: scroll;
   white-space: nowrap;
-}
-
+}
\ No newline at end of file