This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
The following commit(s) were added to refs/heads/develop by this push:
new feb89f1 [DLAB-2047]: Made fixed size for library management popup
(#915)
feb89f1 is described below
commit feb89f15144884f07680def1d2b725645d484206
Author: Dmytro Gnatyshyn <[email protected]>
AuthorDate: Wed Sep 16 12:53:04 2020 +0300
[DLAB-2047]: Made fixed size for library management popup (#915)
[DLAB-2047]: Made fixed size for library management popup
---
.../install-libraries.component.html | 9 +--
.../install-libraries.component.scss | 74 +++++++++++++++-------
2 files changed, 56 insertions(+), 27 deletions(-)
diff --git
a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
index a1b8e7e..0ac1432 100644
---
a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
@@ -206,7 +206,7 @@
</div>
<div class="libs-info">
- <mat-list>
+ <mat-list class="scrolling">
<mat-list-item class="list-header">
<div class="lib-name">Name
<button mat-icon-button aria-label="More" class="ar"
(click)="toggleFilterRow()">
@@ -361,13 +361,14 @@
</div>
</mat-list-item>
</ng-container>
- <div *ngIf="!filtredNotebookLibs.length && notebookLibs?.length"
class="scrollingList info message">
- <p>No matches found</p>
- </div>
+
</div>
<div *ngIf="!notebookLibs?.length" class="scrollingList info message">
<p>You have no libraries installed</p>
</div>
+ <div *ngIf="!filtredNotebookLibs.length && notebookLibs?.length"
class="scrollingList info message">
+ <p>No matches found</p>
+ </div>
</mat-list>
</div>
<div class="m-top-15 actions" *ngIf="!uploading && notebook?.status ===
'running'">
diff --git
a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
index 3403fe1..3c60199 100644
---
a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
+++
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
@@ -30,7 +30,7 @@
flex: initial;
justify-content: center;
flex-direction: initial;
- margin-bottom: 25px;
+ margin-bottom: 10px;
bottom: 30px;
left: 0;
right: 0;
@@ -72,7 +72,7 @@
.install-libraries {
height: 100%;
- padding-bottom: 130px;
+ padding-bottom: 110px;
.dialog-header {
padding-left: 25px;
@@ -349,7 +349,7 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
}
.libs-info {
- padding: 0 20px;
+ padding: 0 25px;
display: flex;
flex: 1 1 auto;
min-height: 0;
@@ -369,16 +369,32 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
}
}
-
.mat-list {
width: 100%;
+ overflow-y: auto;
+ overflow-x: overlay;
+ position: relative;
+ height: 350px;
+ padding-top: 0;
+ margin-top: 8px;
+
+ .list-header{
+ line-height: 40px;
+ position: sticky;
+ top: 0;
+ z-index: 99;
+ background-color: #fff;
+ }
- .scrollingList {
- max-height: 300px;
- height: 80%;
- overflow-y: auto;
- overflow-x: overlay;
+ .filter-row{
+ position: sticky;
+ top: 56px;
+ z-index: 99;
+ background-color: #fff;
+ }
+
+ .scrollingList {
.info {
p {
text-align: center;
@@ -600,28 +616,40 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
}
}
- @media screen and (min-width: 1281px) {
+@media screen and (max-height: 840px) {
.libs-info {
- height: 60%;
-
.mat-list {
- .scrollingList {
- max-height: 300px;
- height: 80%;
- }
+ height: 250px;
+
}
}
}
-@media screen and (max-height: 800px) {
- .libs-info {
- height: 50%;
+ @media screen and (max-height: 720px) {
+ .libs-info {
+ .mat-list {
+ height: 200px;
+ }
+ }
+ }
+
+@media screen and (max-height: 640px) {
+
+ .aligner>div.actions {
+ margin-bottom: 0;
+ }
+ .install-libraries {
+ padding-bottom: 90px;
+ }
+
+ .libs-info {
.mat-list {
- .scrollingList {
- max-height: 140px;
- height: 60%;
- }
+ height: 160px;
}
}
+
+ .message {
+ padding: 10px 20px;
+ }
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
