Merge pull request #1134 from DDMAL/ui-fix

Adjust resource assignment window layout

rodan-client/code/src/js/Controllers/ControllerModal.js

@@ -106,6 +106,7 @@ export default class ControllerModal extends BaseController
         {
             Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_SHOW, options);
         }
+        $('.modal-dialog').addClass('modal-fit');
         $('.modal-footer').removeClass('modal-footer-error');
     }
 

rodan-client/code/src/js/Views/Master/Main/ResourceAssignment/LayoutViewResourceAssignment.js

@@ -26,7 +26,7 @@ export default class LayoutViewResourceAssignment extends Marionette.View
         this._viewAssignedResources = options.viewassignedresources;
 
         this._viewAssignedResources.collection.on('update', this._updateAssignedCount);
-        this.setElement('<div class="content-wrapper row-content"></div>');
+        this.setElement('<div class="content-wrapper row-content row-top column-middle"></div>');
     }
 
     /**

rodan-client/code/styles/default.css

@@ -666,7 +666,6 @@ tbody > tr:hover {
     border: 1px solid #dfdfdf;
     border-radius: 5px;
     background-color: #f0f0f047;
-    height: fit-content;
     width: 100%;
     overflow-x: auto;
     max-height: 1000px;
@@ -938,8 +937,8 @@ div#main_workflowbuilder
     animation: fade-in 0.2s ease-in-out forwards;
 }
 .modal-dialog {
-    width: fit-content;
-    height: fit-content;
+    width: 80vw;
+    height: 80vh;
     border-radius: 3px;
     position: relative;
     overflow: hidden;
@@ -993,7 +992,10 @@ div#main_workflowbuilder
 .modal-body-section-left {
     align-items: flex-start;
 }
-
+.modal-fit {
+    width: fit-content;
+    height: fit-content;
+}
 /* project-users modal styles */
 #admins-and-workers-tables {
     align-items: flex-start;
@@ -1010,6 +1012,10 @@ div#main_workflowbuilder
 }
 
 /* resource assignment modal */
+.modal-grid {
+    display: grid;
+    grid-template-columns: 35vw auto 35vw;
+}
 #resource-assignment-actions-container {
     height: fit-content;
     padding: 5px;
@@ -1019,6 +1025,31 @@ div#main_workflowbuilder
     max-width: 150px;
 }
 
+/* tables in modal */
+.table-modal-container {
+    height: 55vh;
+}
+.table-modal {
+    overflow-y: scroll;
+}
+.table-modal>thead>tr>th,
+.table-modal>tbody>tr>th {
+    max-width: 70px;
+    word-wrap: break-word;
+}
+.table-modal>thead>tr>td,
+.table-modal>tbody>tr>td {
+    max-width: 70px;
+    word-wrap: break-word;
+    border-bottom: 1px solid rgb(215 215 215);
+}
+.table-modal>thead>tr>th:first-child,
+.table-modal>tbody>tr>th:first-child,
+.table-modal>thead>tr>td:first-child,
+.table-modal>tbody>tr>td:first-child {
+    max-width: 180px;
+}
+
 /* job settings modal */
 #workflowjob-settings:first-child {
     display: flex;

rodan-client/code/templates/Views/Master/Main/Resource/Collection/template-modal_resource_collection.html

@@ -1,5 +1,5 @@
-<div class="table-responsive" style="overflow: auto">
-    <table class="table table-hover table-condensed" id="table-resources">
+<div class="table-responsive table-modal-container" style="overflow: auto">
+    <table class="table table-hover table-condensed table-modal" id="table-resources">
         <thead>
             <tr>
                 <th data-name="name">Name</th>

rodan-client/code/templates/Views/Master/Main/ResourceAssignment/template-main_resourceassignment.html

@@ -1,4 +1,4 @@
-<div class="content-wrapper row-content row-left row-top row-middle flex-gap-10">
+<div class="modal-grid row-left row-top row-middle flex-gap-10">
     <div class="content-wrapper column-content flex-gap-10">
         <div class="content-wrapper row-content row-left modal-subtitle-container">
             <h3 class="text-nowrap">Available Resources</h3>