diff --git a/src/App.vue b/src/App.vue
index 340b4e343..9995d9630 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,7 +34,10 @@
-
+
+
+
+
-
@@ -94,23 +97,12 @@ export default {
showModal: false,
page: 0,
logoURL: imagePath('firstrunwizard', 'nextcloudLogo.svg'),
- slideDirection: undefined,
+ pageSlideDirection: undefined,
+ circleSlideDirection: undefined,
}
},
computed: {
- backgroundCircleStyle() {
- return this.page === 1
- ? { top: '-5900px' }
- : {
- top: '0',
- left: '0',
- width: '100%',
- height: '10px',
- borderRadius: '0',
- }
- },
-
logoStyle() {
return { backgroundImage: 'url(' + this.logoURL + ')' }
},
@@ -145,13 +137,24 @@ export default {
},
goToNextPage() {
- this.slideDirection = 'slide-left'
- this.page++
+ this.pageSlideDirection = 'slide-left'
+ if (this.page === 1) {
+ this.circleSlideDirection = 'slide-up'
+ }
+ this.$nextTick(() => {
+ this.page++
+ })
},
goToPreviousPage() {
- this.slideDirection = 'slide-right'
- this.page--
+ this.pageSlideDirection = 'slide-right'
+ if (this.page === 2) {
+ this.circleSlideDirection = 'slide-down'
+ }
+ this.$nextTick(() => {
+ this.page--
+ })
+
},
},
}
@@ -168,14 +171,23 @@ export default {
min-height: min(520px, 80vh);
}
- &__background-circle--first-page {
+ &__background-circle {
height: 6000px;
width: 6000px;
border-radius: 3000px;
background-color: var(--color-primary-element);
position: absolute;
+ top: -5900px;
left: calc( -3000px + 50%);
+ }
+ &__background-bar {
+ position:absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 10px;
+ background-color: var(--color-primary-element);
}
&__back-button {
@@ -231,8 +243,12 @@ export default {
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
-.slide-left-leave-active{
- transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+.slide-left-leave-active,
+.slide-up-enter-active,
+.slide-up-leave-active,
+.slide-down-enter-active,
+.slide-down-leave-active {
+ transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-left-enter {
@@ -255,4 +271,20 @@ export default {
transform: translateX(30%);
}
+.slide-up-enter {
+ top: calc(-5900px);
+}
+
+.slide-up-leave-to {
+ top: calc(-5900px - 80px);
+}
+
+.slide-down-enter {
+ top: calc(-5900px - 80px);
+}
+
+.slide-down-leave-to {
+ top: calc(-5900px);
+}
+