Fix Maintenace UI

Step/wwwroot/assets/styles/base/maintenance.less

@@ -75,6 +75,7 @@
                         .selectBox select{
                             width: 100%;
                             padding: 8px;
+                            min-width: 200px;
                             option{
                                 display: none;
                             }
@@ -98,6 +99,7 @@
                             label{
                                 font-size: 18px;
                                 margin:4px;
+                                line-height: 25px;
                             }
                             label:first-child{
                                 margin-top: 8px;
@@ -277,12 +279,14 @@
                 background-color: white;
                 margin-right: 24px;
                 .message-disable-maintenance{
-                    width: 100%;
-                    height: 100%;
+                    width: 101%;
+                    height: 101%;
+                    position: absolute;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     z-index: 200;
+                    background-color: #ffffffcc;
                 }
             }
         }

Step/wwwroot/assets/styles/style.css

@@ -8095,6 +8095,7 @@ footer .container button.big:before {
 .maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div .selectBox select {
   width: 100%;
   padding: 8px;
+  min-width: 200px;
 }
 .maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div .selectBox select option {
   display: none;
@@ -8119,6 +8120,7 @@ footer .container button.big:before {
 .maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div .checkboxesView label {
   font-size: 18px;
   margin: 4px;
+  line-height: 25px;
 }
 .maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div .checkboxesView label:first-child {
   margin-top: 8px;
@@ -8293,12 +8295,14 @@ footer .container button.big:before {
   margin-right: 24px;
 }
 .maintenance-container .maintenance-box .maintenance-body .maintenance-box-right .message-disable-maintenance {
-  width: 100%;
-  height: 100%;
+  width: 101%;
+  height: 101%;
+  position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 200;
+  background-color: #ffffffcc;
 }
 .maintenance-box-right {
   position: relative;

Step/wwwroot/src/components/maintenance.ts

@@ -65,7 +65,8 @@ export default class Maintenance extends Vue {
     updated(){
         $(document).mouseup(function (e) {
             var container = $(".checkboxes");
-            if (!container.is(e.target) && container.has(e.target).length === 0) 
+            var selector = $("#selectListCheckboxes");
+            if (!container.is(e.target) && !selector.is(e.target) && container.has(e.target).length === 0) 
             {
                 container.removeClass('checkboxesView');
             }
@@ -73,7 +74,10 @@ export default class Maintenance extends Vue {
     }
 
     public openSelectState(){
-        $('.checkboxes').addClass('checkboxesView');
+        if(!$('.checkboxes').hasClass('checkboxesView'))
+            $('.checkboxes').addClass('checkboxesView');
+        else            
+            $('.checkboxes').removeClass('checkboxesView');
     }
 
     public controlState(state){

Step/wwwroot/src/components/maintenance.vue

@@ -75,7 +75,7 @@
               </div>
             </div>
             <div class="maintenance-box-right">
-              <maintenance-card v-if="!enableMaintenance"
+              <maintenance-card 
               :can-edit="selectedMaintenance != null ? canPerform(selectedMaintenance.canEdit,selectedMaintenance.type,selectedMaintenance.lastPerformedDate) : false"
               :can-delete="selectedMaintenance != null ? selectedMaintenance.canEdit : false"
               :class="{ 'border-red' : selectedMaintenance != null ? setBorderRedCard(selectedMaintenance.percentageOfCompletion): false,