Additional column classes

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
index 7da561c..ce6bdcc 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
@@ -24,7 +24,7 @@
         </div>
       </td>
     </ng-container>
-    <td role="cell" class="eg-grid-cell eg-grid-number-cell">
+    <td role="cell" class="eg-grid-cell eg-grid-number-cell numeric">
       <div class="eg-grid-cell-contents">{{context.pager.rowNumber(idx)}}</div>
     </td>
     <td role="cell" *ngIf="context.rowFlairIsEnabled" class="eg-grid-cell eg-grid-flair-cell">

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
index 88a7d04..a711f53 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
@@ -2,20 +2,21 @@
 
 <tr row="row" role="row" class="eg-grid-row eg-grid-header-row">
   <ng-container *ngIf="!context.disableSelect">
-    <th scope="col" role="columnheader" class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell">
+    <th scope="col" role="columnheader" 
+      class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell">
       <input type='checkbox' (click)="handleBatchSelect($event)"
         i18n-aria-label aria-label="All rows"
         [(ngModel)]="batchRowCheckbox">
     </th>
   </ng-container>
-  <th scope="col" role="columnheader" class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell">
+  <th scope="col" role="columnheader" class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell numeric">
     <span i18n="number|Row Number Header">#</span>
   </th>
   <th *ngIf="context.rowFlairIsEnabled" scope="col" 
     class="eg-grid-cell eg-grid-header-cell eg-grid-flair-cell">
     <span class="material-icons">notifications</span>
   </th>
-  <th *ngFor="let col of context.columnSet.displayColumns()"
+  <th *ngFor="let col of context.columnSet.displayColumns(); index as i"
     scope="col" role="columnheader"
     draggable="true"
     (dragstart)="dragColumn = col"
@@ -23,6 +24,7 @@
     (dragover)="onColumnDragEnter($event, col)"
     (dragleave)="onColumnDragLeave($event, col)"
     [ngClass]="{'dragover' : col.isDragTarget}"
+    style="width: calc(1% * var(--c{{i}}))"
     [attr.aria-sort]="ariaSortDirection(col)"
     class="eg-grid-cell eg-grid-header-cell {{context.setClassNames(row, col)}}">
     <a class="sortable label-with-material-icon" *ngIf="col.isSortable"

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
index f619a3c..ca10aba 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -4,7 +4,7 @@
   }
 }
 
-[role="region"][aria-labelledby][tabindex]:focus-visible {
+.eg-grid-wrapper:focus-visible {
   outline: 2px solid #0A58CA;
   outline-offset: 5px;
 }
@@ -26,7 +26,6 @@
 }
     
 .eg-grid-row {
-/*    display: flex; */
     border-bottom: 1px solid rgba(0,0,0,.12);
     padding-left: 10px;
     padding-right: 10px;
@@ -276,4 +275,10 @@ components' CSS to override the default width.
 td.eg-grid-col-datatype {
   font-family: monospace;
   font-size: .85rem;
+}
+
+td.eg-grid-col-url,
+td.eg-grid-col-email {
+  overflow-wrap: anywhere;
+  word-break: break-all;
 }
\ No newline at end of file