diff --git a/Step/wwwroot/assets/styles/base/modals.less b/Step/wwwroot/assets/styles/base/modals.less
index 6501a582..01c69adc 100644
--- a/Step/wwwroot/assets/styles/base/modals.less
+++ b/Step/wwwroot/assets/styles/base/modals.less
@@ -866,20 +866,20 @@ sans-serif;
}
.first-column{
height: calc(~'100% - 19px');
- min-width: 188px;
+ min-width: 295px;
border-right: solid 2px @color-whitethree;
display: flex;
flex-flow: column;
padding-top: 19px;
.card-folder-path{
- width: 159px;
+ width: 280px;
display: flex;
margin-top: 8px 0 8px 5px;
}
}
.second-column{
height: calc(~'100% - 19px');
- min-width: 343px;
+ min-width: 445px;
border-right: solid 2px @color-whitethree;
display: flex;
flex-flow: column;
@@ -888,7 +888,7 @@ sans-serif;
width: 94%;
height: 100%;
.card-folder-path{
- width: 280px;
+ width: 371px;
display: flex;
margin-top: 8px 0 8px 8px;
}
@@ -896,7 +896,7 @@ sans-serif;
}
.third-column{
height: calc(~'100% - 19px');
- min-width: 343px;
+ min-width: 447px;
border-right: solid 2px @color-whitethree;
display: flex;
flex-flow: column;
@@ -905,11 +905,20 @@ sans-serif;
width: 94%;
height: 100%;
.card-folder-path{
- width: 280px;
+ width: 371px;
display: flex;
margin-top: 8px 0 8px 8px;
}
}
+ .label-folder-empty{
+ display: flex;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ color: @color-greyish-brown;
+ font-size: 20px;
+ }
}
.selected-item{
width: calc(~'100% - 880px');
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index c7146a5e..b79c517b 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -805,20 +805,20 @@
}
.modal.modal-load-program .modal-load-program-body .first-column {
height: calc(100% - 19px);
- min-width: 188px;
+ min-width: 295px;
border-right: solid 2px #e7e7e7;
display: flex;
flex-flow: column;
padding-top: 19px;
}
.modal.modal-load-program .modal-load-program-body .first-column .card-folder-path {
- width: 159px;
+ width: 280px;
display: flex;
margin-top: 8px 0 8px 5px;
}
.modal.modal-load-program .modal-load-program-body .second-column {
height: calc(100% - 19px);
- min-width: 343px;
+ min-width: 445px;
border-right: solid 2px #e7e7e7;
display: flex;
flex-flow: column;
@@ -829,13 +829,13 @@
height: 100%;
}
.modal.modal-load-program .modal-load-program-body .second-column .content .card-folder-path {
- width: 280px;
+ width: 371px;
display: flex;
margin-top: 8px 0 8px 8px;
}
.modal.modal-load-program .modal-load-program-body .third-column {
height: calc(100% - 19px);
- min-width: 343px;
+ min-width: 447px;
border-right: solid 2px #e7e7e7;
display: flex;
flex-flow: column;
@@ -846,10 +846,19 @@
height: 100%;
}
.modal.modal-load-program .modal-load-program-body .third-column .content .card-folder-path {
- width: 280px;
+ width: 371px;
display: flex;
margin-top: 8px 0 8px 8px;
}
+.modal.modal-load-program .modal-load-program-body .third-column .label-folder-empty {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ color: #4b4b4b;
+ font-size: 20px;
+}
.modal.modal-load-program .modal-load-program-body .selected-item {
width: calc(100% - 880px);
height: 100%;
diff --git a/Step/wwwroot/src/modules/base-components/modal-load-program.vue b/Step/wwwroot/src/modules/base-components/modal-load-program.vue
index 75e140b7..46380228 100644
--- a/Step/wwwroot/src/modules/base-components/modal-load-program.vue
+++ b/Step/wwwroot/src/modules/base-components/modal-load-program.vue
@@ -36,14 +36,17 @@