Browse Source

[frontend] fix for jobbrowser table to handle horizontal overflow

Björn Alm 2 years ago
parent
commit
61609775df

File diff suppressed because it is too large
+ 0 - 0
apps/jobbrowser/src/jobbrowser/static/jobbrowser/css/jobbrowser-embeddable.css


+ 9 - 0
apps/jobbrowser/src/jobbrowser/static/jobbrowser/less/jobbrowser-embeddable.less

@@ -400,3 +400,12 @@
     position: relative;
   }
 }
+
+.hue-jobs-table > tbody > tr > td:last-child {
+  min-width: 50px;
+  word-break: break-all;
+}
+
+.hue-horizontally-scrollable {
+  overflow-x: auto;
+}

+ 3 - 3
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -193,7 +193,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 
 
   <script type="text/html" id="apps-list${ SUFFIX }">
-    <table data-bind="attr: {id: tableId}" class="datatables table table-condensed status-border-container">
+    <table data-bind="attr: {id: tableId}" class="datatables table table-condensed status-border-container hue-jobs-table">
       <thead>
       <tr>
         <th width="1%" class="vertical-align-middle">
@@ -408,9 +408,9 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                   <!-- /ko -->
                   <!-- ko ifnot: $root.isMini -->
                   <h4>${ _('Running') }</h4>
-                  <div data-bind="template: { name: 'apps-list${ SUFFIX }', data: { apps: jobs.runningApps, tableId: 'runningJobsTable', selectedJobs: jobs.selectedJobs} }"></div>
+                  <div data-bind="template: { name: 'apps-list${ SUFFIX }', data: { apps: jobs.runningApps, tableId: 'runningJobsTable', selectedJobs: jobs.selectedJobs} }" class="hue-horizontally-scrollable"></div>
                   <h4>${ _('Completed') }</h4>
-                  <div data-bind="template: { name: 'apps-list${ SUFFIX }', data: { apps: jobs.finishedApps, tableId: 'completedJobsTable', selectedJobs: jobs.selectedJobs } }"></div>
+                  <div data-bind="template: { name: 'apps-list${ SUFFIX }', data: { apps: jobs.finishedApps, tableId: 'completedJobsTable', selectedJobs: jobs.selectedJobs } }" class="hue-horizontally-scrollable"></div>
                   <!-- /ko -->
                 <!-- /ko -->
               </div>

Some files were not shown because too many files changed in this diff