This is an automated email from the ASF dual-hosted git repository.
ccondit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/yunikorn-web.git
The following commit(s) were added to refs/heads/master by this push:
new b877df7 [YUNIKORN-2956] Fix layout break on Queues v2 page (#220)
b877df7 is described below
commit b877df7382760604f1dbd37713da670bb9bfc07a
Author: JunHong Peng <[email protected]>
AuthorDate: Wed Oct 30 23:41:38 2024 -0500
[YUNIKORN-2956] Fix layout break on Queues v2 page (#220)
Closes: #220
Signed-off-by: Craig Condit <[email protected]>
---
src/app/app.component.scss | 9 ++++++---
src/app/components/apps-view/apps-view.component.scss | 1 -
src/app/components/nodes-view/nodes-view.component.scss | 1 -
src/app/components/queue-v2/queues-v2.component.scss | 17 ++++++++++++++---
4 files changed, 20 insertions(+), 8 deletions(-)
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index eea16b5..cbf78fa 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -16,6 +16,8 @@
* limitations under the License.
*/
+$header-height: 60px;
+
.navigation {
position: fixed;
width: 50px;
@@ -68,7 +70,7 @@
white-space: nowrap;
color: #fff;
background: #313d54;
- height: 60px;
+ height: $header-height;
overflow: hidden;
-webkit-transition: padding-left 0.4s ease, padding-top 0.4s ease;
-moz-transition: padding-left 0.4s ease, padding-top 0.4s ease;
@@ -229,7 +231,7 @@ ul.navigation-primary {
}
.container-fluid {
- padding-top: 58px;
+ padding-top: $header-height;
}
// remove the beta tag when the feature is ready for production
@@ -240,7 +242,7 @@ ul.navigation-primary {
}
.header {
- height: 58px;
+ height: $header-height;
background: #fff;
padding: 0 20px;
border-bottom: 1px solid #e3e3e3;
@@ -316,4 +318,5 @@ ul.breadcrumb a.back:after {
.content-wrapper {
padding: 20px;
+ height: calc(100vh - $header-height);
}
diff --git a/src/app/components/apps-view/apps-view.component.scss
b/src/app/components/apps-view/apps-view.component.scss
index be0dff8..d6f2f74 100644
--- a/src/app/components/apps-view/apps-view.component.scss
+++ b/src/app/components/apps-view/apps-view.component.scss
@@ -19,7 +19,6 @@
.top-section {
width: 100%;
- height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
diff --git a/src/app/components/nodes-view/nodes-view.component.scss
b/src/app/components/nodes-view/nodes-view.component.scss
index 85b7f62..eb203ba 100644
--- a/src/app/components/nodes-view/nodes-view.component.scss
+++ b/src/app/components/nodes-view/nodes-view.component.scss
@@ -68,7 +68,6 @@
.nodes-view {
width: 100%;
- height: 100%;
.mat-mdc-header-cell {
font-size: 15px;
font-weight: 500;
diff --git a/src/app/components/queue-v2/queues-v2.component.scss
b/src/app/components/queue-v2/queues-v2.component.scss
index 3c5e597..2d864f9 100644
--- a/src/app/components/queue-v2/queues-v2.component.scss
+++ b/src/app/components/queue-v2/queues-v2.component.scss
@@ -16,13 +16,20 @@
* limitations under the License.
*/
+ .queue-container {
+ height: 100%;
+ }
+
.queue-content-box {
width: calc(100% - 2rem); /* Subtract padding from the total width */
- height: calc(100vh - 2rem); /* Subtract padding from the total height to
ensure it's nearly as tall as the container */
+ height: 100%;
border-radius: 0.5rem;
background-color: white;
padding: 20px; /* Adjust padding to your preference */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0,
0, 0.05);
+
+ display: flex;
+ flex-direction: column;
}
.header .title-group {
@@ -120,8 +127,13 @@
background-color: #8090a5;
}
+ .body {
+ height: 100%;
+ }
+
.content-wrapper {
display: flex;
+ height: 100%;
}
.visualize-area {
@@ -129,8 +141,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
- height: 600px;
- max-height: 80%; /* Ensure there's space around the area within the
content box */
+ height: 100%;
width: 100%;
border-radius: 0.5rem;
border: 2px dashed #d1d5db;
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
