shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added animation to apps and Wizard steps aligned

Browse Source
This commit is contained in:
Merve Karaman 2023-08-01 10:30:08 +03:00
parent bfe191843d
commit f9c5bf7c65
2 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
resources/assets/js/views/wizard/Finish.vue
View File

@ -14,13 +14,13 @@
{{ translations.finish.recommended_apps }} {{ translations.finish.recommended_apps }}
</h1> </h1>
<div v-for="(item, index) in modules" :key="index" class="sm:col-span-6 mb-3"> <div v-for="(item, index) in modules" :key="index" class="sm:col-span-6 mb-3 bg-default rounded-md">
<a :href="route_url + '/apps/' + item.slug" class="flex items-center space-x-4 bg-purple-50 rounded-md p-2"> <a :href="route_url + '/apps/' + item.slug" class="flex items-center space-x-4 bg-purple-50 rounded-md p-2 sliding-app">
<div class="w-1/4"> <div class="w-1/4">
<img v-for="(file, indis) in item.files" :key="indis" v-if="file.media_type == 'image' && file.pivot.zone == 'thumbnail'" <img v-for="(file, indis) in item.files" :key="indis" v-if="file.media_type == 'image' && file.pivot.zone == 'thumbnail'"
:src="file.path_string" :src="file.path_string"
:alt="item.name" :alt="item.name"
class="rounded-lg object-cover" class="rounded-lg object-cover"
/> />
</div> </div>
@ -42,9 +42,9 @@
</div> </div>
</div> </div>
<div class="absolute w-1/2 right-0 ltr:pl-10 rtl:pr-10 mt-3 hidden lg:flex lg:flex-col"> <div class="absolute w-1/2 ltr:right-0 rtl:left-0 ltr:pl-10 rtl:pr-10 mt-3 hidden lg:flex lg:flex-col">
<div class="flex"> <div class="flex">
<img :src="image_src" class="absolute top-12 right-2 w-10/12 p-3 -mt-12" alt="Akaunting" /> <img :src="image_src" class="absolute top-12 ltr:right-2 rtl:left-2 w-10/12 p-3 -mt-12" alt="Akaunting" />
</div> </div>
<div class="flex"> <div class="flex">
@ -150,6 +150,18 @@ export default {
</script> </script>
<style scoped> <style scoped>
.sliding-app:hover {
animation: slidingAnimation 600ms ease-out forwards;
}
@keyframes slidingAnimation {
0% { transform: translateX(0); }
40% { transform: translateX(36px); }
60% { transform: translateX(24px); }
80% { transform: translateX(30px); }
100% { transform: translateX(24px); }
}
@media only screen and (max-width: 991px) { @media only screen and (max-width: 991px) {
[modal-container] { [modal-container] {
height: 100% !important; height: 100% !important;

2
resources/assets/js/views/wizard/Steps.vue
View File

@ -39,7 +39,7 @@
</li> </li>
<li class="w-1/3"> <li class="w-1/3">
<span class="ltr:pl-6 ltr:pr-9 rtl:pl-3 flex flex-col"> <span class="ltr:pl-6 rtl:pl-3 flex flex-col">
<span <span
:class="[{'bg-purple': active_state == 2}]" :class="[{'bg-purple': active_state == 2}]"
class="w-full h-1 bg-gray-300 rounded-xl text-transparent" class="w-full h-1 bg-gray-300 rounded-xl text-transparent"