Nebucatnetzer
/
find_coach
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add animations to the route transitions

This commit is contained in:
Andreas Zweili 2021-07-28 21:20:07 +02:00
parent 701c596ad1
commit b18c0f86c2
4 changed files with 123 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.vue
View File

@ -1,6 +1,10 @@
<template> <template>
<the-header></the-header> <the-header></the-header>
<router-view></router-view> <router-view v-slot="slotProps">
<transition name="route" mode="out-in">
<component :is="slotProps.Component"></component>
</transition>
</router-view>
</template> </template>
<script> <script>
@ -27,4 +31,28 @@ html {
body { body {
margin: 0; margin: 0;
} }
.route-enter-from {
opacity: 0;
transform: translateY(-30px);
}
.route-leave-to {
opacity: 0;
transform: translateY(30px);
}
.route-enter-active {
transition: all 0.3s ease-out;
}
.route-leave-active {
transition: all 0.3s ease-in;
}
.route-enter-to,
.route-leave-from {
opacity: 1;
transform: translateY(0);
}
</style> </style>

54
src/pages/coaches/CoachDetails.vue
View File

@ -1,30 +1,32 @@
<template> <template>
<section> <div>
<base-card> <section>
<h2>{{ fullName }}</h2> <base-card>
<h3>${{ rate }}/hour</h3> <h2>{{ fullName }}</h2>
</base-card> <h3>${{ rate }}/hour</h3>
</section> </base-card>
<section> </section>
<base-card> <section>
<header> <base-card>
<h2>Interested? Reach out now!</h2> <header>
<base-button link :to="coachContactLink">Contact</base-button> <h2>Interested? Reach out now!</h2>
</header> <base-button link :to="coachContactLink">Contact</base-button>
<router-view></router-view> </header>
</base-card> <router-view></router-view>
</section> </base-card>
<section> </section>
<base-card> <section>
<base-badge <base-card>
v-for="area in areas" <base-badge
:key="area" v-for="area in areas"
:type="area" :key="area"
:title="area" :type="area"
></base-badge> :title="area"
<p>{{ description }}</p> ></base-badge>
</base-card> <p>{{ description }}</p>
</section> </base-card>
</section>
</div>
</template> </template>
<script> <script>

72
src/pages/coaches/CoachesList.vue
View File

@ -1,41 +1,43 @@
<template> <template>
<base-dialog <div>
:show="!!error" <base-dialog
title="An error has occured!" :show="!!error"
@close="handleError" title="An error has occured!"
> @close="handleError"
<p>{{ error }}</p> >
</base-dialog> <p>{{ error }}</p>
<section> </base-dialog>
<coach-filter @change-filter="setFilter"></coach-filter>
</section>
<base-card>
<section> <section>
<div class="controls"> <coach-filter @change-filter="setFilter"></coach-filter>
<base-button mode="outline" @click="loadCoaches(true)"
>Refresh</base-button
>
<base-button v-if="!isCoach && !isLoading" link to="/register"
>Register as Coach</base-button
>
</div>
<div v-if="isLoading">
<base-spinner></base-spinner>
</div>
<ul v-else-if="hasCoaches">
<coach-item
v-for="coach in filteredCoaches"
:key="coach.id"
:id="coach.id"
:firstName="coach.firstName"
:lastName="coach.lastName"
:areas="coach.areas"
:rate="coach.hourlyRate"
></coach-item>
</ul>
<h3 v-else>No coaches found.</h3>
</section> </section>
</base-card> <base-card>
<section>
<div class="controls">
<base-button mode="outline" @click="loadCoaches(true)"
>Refresh</base-button
>
<base-button v-if="!isCoach && !isLoading" link to="/register"
>Register as Coach</base-button
>
</div>
<div v-if="isLoading">
<base-spinner></base-spinner>
</div>
<ul v-else-if="hasCoaches">
<coach-item
v-for="coach in filteredCoaches"
:key="coach.id"
:id="coach.id"
:firstName="coach.firstName"
:lastName="coach.lastName"
:areas="coach.areas"
:rate="coach.hourlyRate"
></coach-item>
</ul>
<h3 v-else>No coaches found.</h3>
</section>
</base-card>
</div>
</template> </template>
<script> <script>

56
src/pages/requests/RequestsRecieved.vue
View File

@ -1,32 +1,34 @@
<template> <template>
<base-dialog <div>
:show="!!error" <base-dialog
title="An error has occured!" :show="!!error"
@close="handleError" title="An error has occured!"
> @close="handleError"
<p>{{ error }}</p> >
</base-dialog> <p>{{ error }}</p>
</base-dialog>
<section> <section>
<base-card> <base-card>
<header> <header>
<h2>Requests Received</h2> <h2>Requests Received</h2>
</header> </header>
<div v-if="isLoading"> <div v-if="isLoading">
<base-spinner></base-spinner> <base-spinner></base-spinner>
</div> </div>
<ul v-else-if="hasRequests"> <ul v-else-if="hasRequests">
<request-item <request-item
v-for="req in recievedRequests" v-for="req in recievedRequests"
:key="req.id" :key="req.id"
:email="req.userEmail" :email="req.userEmail"
:message="req.message" :message="req.message"
> >
</request-item> </request-item>
</ul> </ul>
<h3 v-else>You haven't received any messages</h3> <h3 v-else>You haven't received any messages</h3>
</base-card> </base-card>
</section> </section>
</div>
</template> </template>
<script> <script>