Changed style in the html into classes

dataquest-dev · Oct 16, 2024 · a11b075 · a11b075
1 parent af3b1bb
commit a11b075
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/src/app/clarin-licenses/clarin-license-table/clarin-license-table.component.html b/src/app/clarin-licenses/clarin-license-table/clarin-license-table.component.html
@@ -23,29 +23,29 @@
         <table class="table table-striped table-bordered align-middle my-2">
           <thead>
           <tr>
-            <th style="width: 3.5%; max-width: 3.5%;"></th>
-            <th style="width: 25%;">{{"clarin-license.table.name" | translate}}</th>
-            <th style="width: 20%;">{{"clarin-license.table.definition" | translate}}</th>
+            <th class="wm-3p5"></th>
+            <th class="w-25">{{"clarin-license.table.name" | translate}}</th>
+            <th class="w-20">{{"clarin-license.table.definition" | translate}}</th>
             <th>{{"clarin-license.table.confirmation" | translate}}</th>
-            <th style="width: 12.5%;">{{"clarin-license.table.required-user-info" | translate}}</th>
+            <th class="w-12">{{"clarin-license.table.required-user-info" | translate}}</th>
             <th>{{"clarin-license.table.label" | translate}}</th>
             <th>{{"clarin-license.table.extended-labels" | translate}}</th>
             <th>{{"clarin-license.table.bitstreams" | translate}}</th>
           </tr>
           </thead>
           <tbody>
           <tr *ngFor="let cLicense of cLicenses?.page" [id]="'clarin-license-row-' + cLicense.id">
-            <td  style="width: 3.5%; max-width: 3.5%;">
+            <td class="wm-3p5">
               <input class="collection-checkbox"
                      [ngModel]="selectedLicense?.id === cLicense.id"
                      (change)="switchSelectedLicense(cLicense)"
                      type="checkbox"
                      name="{{cLicense.id}}">
             </td>
-            <td style="width: 25%;">{{cLicense?.name}}</td>
-            <td style="width: 20%;">{{cLicense?.definition}}</td>
+            <td class="w-25">{{cLicense?.name}}</td>
+            <td class="w-20">{{cLicense?.definition}}</td>
             <td>{{cLicense?.confirmation}}</td>
-            <td style="width: 12.5%;">{{cLicense?.requiredInfo | dsCLicenseRequiredInfo}}</td>
+            <td class="w-12">{{cLicense?.requiredInfo | dsCLicenseRequiredInfo}}</td>
             <td>{{cLicense?.clarinLicenseLabel?.label}}</td>
             <td>{{cLicense?.extendedClarinLicenseLabels | dsExtendedCLicense}}</td>
             <td>{{cLicense?.bitstreams}}</td>

diff --git a/src/app/clarin-licenses/clarin-license-table/clarin-license-table.component.scss b/src/app/clarin-licenses/clarin-license-table/clarin-license-table.component.scss
@@ -2,3 +2,16 @@
   table-layout: fixed;
   word-wrap: break-word;
 }
+
+.w-20 {
+  width: 20%;
+}
+
+.w-12 {
+  width: 12%;
+}
+
+.wm-3p5 {
+  width: 3.5%;
+  max-width: 3.5%;
+}