You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2021/06/22 14:30:13 UTC
[airavata-django-portal] 01/02: AIRAVATA-3163 Fix issue with header
scrolling out of view when using scrollIntoView()
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 47c47743bc9cc06784089002b18eb9378e163cee
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Tue Jun 22 10:13:22 2021 -0400
AIRAVATA-3163 Fix issue with header scrolling out of view when using scrollIntoView()
---
.../applications/ApplicationInputFieldEditor.vue | 2 +-
.../applications/ApplicationOutputFieldEditor.vue | 2 +-
.../statistics/ExperimentStatisticsContainer.vue | 3 +--
django_airavata/static/common/scss/main.scss | 14 +++++++++-----
4 files changed, 12 insertions(+), 9 deletions(-)
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue
index c767d0c..417bc44 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue
@@ -217,7 +217,7 @@ export default {
methods: {
doFocus() {
this.$refs.nameInput.focus();
- this.$el.scrollIntoView();
+ this.$el.scrollIntoView({ behavior: "smooth" });
},
deleteApplicationInput() {
this.$emit("delete");
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationOutputFieldEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationOutputFieldEditor.vue
index 3212a73..da48595 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationOutputFieldEditor.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationOutputFieldEditor.vue
@@ -132,7 +132,7 @@ export default {
methods: {
doFocus() {
this.$refs.nameInput.focus();
- this.$el.scrollIntoView();
+ this.$el.scrollIntoView({ behavior: "smooth" });
},
deleteApplicationOutput() {
this.$emit("delete");
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
index ccb22a5..c15d0f1 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
@@ -550,8 +550,7 @@ export default {
this.experimentDetails.splice(index, 1);
},
scrollTabsIntoView() {
- // FIXME: AIRAVATA-3163: disabling since it prevents scrolling back up to the header
- // this.$refs.tabs.$el.scrollIntoView();
+ this.$refs.tabs.$el.scrollIntoView({ behavior: "smooth" });
},
},
};
diff --git a/django_airavata/static/common/scss/main.scss b/django_airavata/static/common/scss/main.scss
index e725feb..2aed92c 100644
--- a/django_airavata/static/common/scss/main.scss
+++ b/django_airavata/static/common/scss/main.scss
@@ -9,11 +9,15 @@ body {
overflow: hidden;
}
+$header_height: 70px;
+$header_height_with_border: $header_height + 1px;
+
.c-header {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
background-color: #ffffff;
+ margin-bottom: -$header_height_with_border;
&__logo {
margin-right: 1rem;
@@ -95,6 +99,11 @@ body {
height: 100%;
display: flex;
flex-direction: column;
+ // AIRAVATA-3163 Fix the issue with the header scrolling off the page with
+ // scrollIntoView() by making the .stage element have the full height of the
+ // page. The padding-top here is matched by an equal but negative amount of
+ // margin-bottom on .c-header.
+ padding-top: $header_height_with_border;
}
@media screen and (min-width: 768px) {
@@ -124,11 +133,6 @@ body {
}
}
-/* Add extra padding at the bottom to accommodate for the scrolling under the fixed width header */
-.main-content > :last-child {
- padding-bottom: 90px;
-}
-
.sidebar {
flex-basis: 200px;
background-color: #ffffff;