Skip to content
This repository has been archived by the owner on Oct 15, 2023. It is now read-only.

Commit

Permalink
💫 Animations plus smooooth
Browse files Browse the repository at this point in the history
  • Loading branch information
@ecnivtwelve
ecnivtwelve committed Jun 12, 2023
1 parent 57210ec commit 9e9f5a1
Show file tree
Hide file tree
Showing 7 changed files with 138 additions and 76 deletions.
12 changes: 9 additions & 3 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,12 +491,18 @@ export default defineComponent({
const enteringAnimation = createAnimation()
.addElement(opts.enteringEl)
.fromTo('opacity', 0, 1)
.duration(100);
.fromTo('transform', 'scale(0.9)', 'scale(1)')
.fromTo('filter', 'blur(15px)', 'blur(0px)')
.easing('cubic-bezier(.66,-0.01,0,1)')
.duration(400);
const leavingAnimation = createAnimation()
.addElement(opts.leavingEl)
.fromTo('opacity', 1, 0)
.duration(100);
.fromTo('transform', 'scale(1)', 'scale(1.05)')
.fromTo('filter', 'blur(0px)', 'blur(15px)')
.easing('cubic-bezier(1,0,1,.99)')
.duration(200);
const animation = createAnimation()
.addAnimation(enteringAnimation)
Expand Down Expand Up @@ -1072,7 +1078,7 @@ a:not(.selected) ion-menu-toggle ion-item:hover {
.fade-enter,
.fade-leave-active {
opacity: 0
opacity: 0;
}
/* updates */
Expand Down
39 changes: 23 additions & 16 deletions src/components/timetable/CoursElement.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,8 +250,8 @@
<div class="dist" v-if="distance && !sameTime"></div>
<div :class="classes + isCancelled" :style="`--backgroundColor: ${color};`" v-if="!sameTime" @click="openCours()">
<div class="CoursTime">
<p class="start">{{ start.toLocaleString('fr-FR', { hour: '2-digit', minute: '2-digit' }) }}</p>
<p class="end">{{ end.toLocaleString('fr-FR', { hour: '2-digit', minute: '2-digit' }) }}</p>
<a class="text start">{{ start.toLocaleString('fr-FR', { hour: '2-digit', minute: '2-digit' }) }}</a>
<a class="text end">{{ end.toLocaleString('fr-FR', { hour: '2-digit', minute: '2-digit' }) }}</a>
</div>
<div class="cours">
<ion-ripple-effect></ion-ripple-effect>
Expand All @@ -262,53 +262,53 @@

<ion-label>
<div class="CoursData">
<h3 class="CoursName">{{ subject }}</h3>
<a class="text CoursName">{{ subject }}</a>

<div>
<div class="CoursInfoContainer">
<div class="CoursInfo room" v-if="rooms !== null">
<span class="material-symbols-outlined smol" slot="start">location_on</span>

<p>{{ rooms }}</p>
<a class="text">{{ rooms }}</a>
</div>
<div class="separator" v-if="rooms !== null"></div>
<div class="CoursInfo">
<span class="material-symbols-outlined smol" slot="start">face</span>

<p>{{ teachers }}</p>
<a class="text">{{ teachers }}</a>
</div>
</div>

<div class="CoursInfoContainer" v-if="disableShowGroup == 'true' && groupNames !== null">
<div class="CoursInfo">
<span class="material-symbols-outlined smol" slot="start">groups</span>

<p>{{ groupNames.replace(/[[\]]/g, '').replace(/_/g, ' ') }}</p>
<a class="text">{{ groupNames.replace(/[[\]]/g, '').replace(/_/g, ' ') }}</a>
</div>
</div>
</div>

<p class="CoursInfo Status" v-if="status">
<a class="text CoursInfo Status" v-if="status">
<span v-if="!isCancelled" class="material-symbols-outlined smol" slot="start">info</span>
<span v-if="isCancelled" class="material-symbols-outlined smol" slot="start">error</span>

{{ status }}
</p>
</a>

<p class="CoursInfo Status" v-if="isTest">
<a class="text CoursInfo Status" v-if="isTest">
<span class="material-symbols-outlined smol" slot="start">quiz</span>
Vous avez un contrôle
</p>
</a>

<p class="CoursInfo Status" v-if="isOuting">
<a class="text CoursInfo Status" v-if="isOuting">
<span class="material-symbols-outlined smol" slot="start">directions_walk</span>
Sortie scolaire
</p>
</a>

<p class="CoursInfo Status" v-if="memo">
<a class="text CoursInfo Status" v-if="memo">
<span class="material-symbols-outlined smol" slot="start">sticky_note_2</span>
Contient un mémo
</p>
</a>
</div>
</ion-label>
</div>
Expand Down Expand Up @@ -419,6 +419,8 @@
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100vw - 145px);
font-family: var(--papillon-font);
margin-bottom: 4px;
}
.light .cours {
Expand Down Expand Up @@ -501,10 +503,15 @@
filter: brightness(1);
}
.CoursInfo p {
a.text {
color: inherit;
text-decoration: none;
}
.CoursInfo .text {
font-family: var(--papillon-font) !important;
font-size: 16px;
line-height: 16px;
line-height: 18px;
}
.CoursInfo span {
Expand Down
38 changes: 36 additions & 2 deletions src/theme/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,7 @@ ion-alert.md .btn_secondary {

/* animations */
.ElemAnim-enter-active {
transition: 0.4s cubic-bezier(0.77,0.15,0.06,1.11);
transition: 0.5s cubic-bezier(0.77,0.15,0.06,1.11);
}

.ElemAnim-leave-active {
Expand All @@ -540,11 +540,15 @@ ion-alert.md .btn_secondary {

.ElemAnim-enter-from, .ElemAnim-leave-to {
opacity: 0;
transform: translateY(200px) scale(0.7);
transform: translateY(200px) scale(0.5);

margin: 5px 16px;
}

.ios .ElemAnim-enter-from, .ElemAnim-leave-to {
filter: blur(12px);
}

.ElemScale-enter-active {
transition: 0.2s cubic-bezier(.5,0,0,1);
}
Expand All @@ -563,6 +567,36 @@ ion-alert.md .btn_secondary {
padding: 0;
}

.CoursAnim-enter-active {
transition: 0.35s cubic-bezier(0.77,0.15,0.06,1.11);
}

.CoursAnim-leave-active {
transition: 0.0s cubic-bezier(.5,0,0,1);
}

.CoursAnim-enter-from, .CoursAnim-leave-to {
opacity: 0;
transform: translateY(20px) scale(0.9);
}

.CoursAnimLower-enter-active {
transition: 0.35s cubic-bezier(0.77,0.15,0.06,1.11);
}

.CoursAnimLower-leave-active {
transition: 0.1s cubic-bezier(.5,0,0,1);
}

.CoursAnimLower-enter-from, .CoursAnim-leave-to {
opacity: 0;
transform: translateY(150px) scale(0.85);
}

.ios .CoursAnim-enter-from, .CoursAnim-leave-to {
filter: blur(12px);
}

/* links */
a.inherit {
color: inherit;
Expand Down
2 changes: 1 addition & 1 deletion src/views/grades/GradesView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -506,7 +506,7 @@
</ion-card>
</div> -->

<transition-group name="ElemAnim" tag="div" id="NotesData">
<transition-group name="CoursAnimLower" tag="div" id="NotesData">
<ion-item v-if="loginService === 'ecoledirecte'">
<div class="alphaMessage">
<span class="material-symbols-outlined mdls icon">warning</span>
Expand Down
2 changes: 1 addition & 1 deletion src/views/homepage/HomepageView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ export default defineComponent({
this.showLoading = false;
}, this.fakeTime);
this.fakeTime = 0;
this.fakeTime = 100;
// timetable
const timetable = recap.timetable;
Expand Down
56 changes: 31 additions & 25 deletions src/views/homework/HomeworkView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -417,34 +417,40 @@
v-for="(slideContent, index) in slides"
:key="index"
:virtualIndex="index">
<IonList v-for="homework in days[`${index}`]" :key="homework.id" inset class="hwListItem">
<IonItem button >
<div slot="start">
<ion-checkbox :id="`checkbox_${homework.data.id}`" :checked="homework.data.done" @ionChange="changeDone(homework)"></ion-checkbox>
</div>

<IonNavLink class="navLink" router-direction="forward" :component="HomeworkItemView" :componentProps="{urlHw: encodeURIComponent(JSON.stringify(homework))}">
<IonLabel :style="`--courseColor: ${homework.data.color};`" class="ion-text-wrap">
<p><span class="courseColor"></span> {{ homework.homework.subject }}</p>
<h5 v-if="isED()" v-html="homework.homework.shortContent" class="hwContent"></h5>
<h5 v-else class="hwContent">{{ homework.homework.shortContent }}</h5>

<p v-if="homework.files.length > 0">
<span>{{ homework.files[0].name }}</span>
</p>
</IonLabel>
</IonNavLink>
</IonItem>
</IonList>
<transition-group name="CoursAnim" tag="div" id="DayData">
<div v-if="currentIndex == index && days[index].length > 0">
<IonList v-for="homework in days[`${index}`]" :key="homework.id" inset class="hwListItem">
<IonItem button >
<div slot="start">
<ion-checkbox :id="`checkbox_${homework.data.id}`" :checked="homework.data.done" @ionChange="changeDone(homework)"></ion-checkbox>
</div>

<IonNavLink class="navLink" router-direction="forward" :component="HomeworkItemView" :componentProps="{urlHw: encodeURIComponent(JSON.stringify(homework))}">
<IonLabel :style="`--courseColor: ${homework.data.color};`" class="ion-text-wrap">
<p><span class="courseColor"></span> {{ homework.homework.subject }}</p>
<h5 v-if="isED()" v-html="homework.homework.shortContent" class="hwContent"></h5>
<h5 v-else class="hwContent">{{ homework.homework.shortContent }}</h5>

<p v-if="homework.files.length > 0">
<span>{{ homework.files[0].name }}</span>
</p>
</IonLabel>
</IonNavLink>
</IonItem>
</IonList>
</div>
</transition-group>

<div v-if="days[`${index}`]">
<div class="NoCours" v-if="days[`${index}`].length == 0 && !days[`${index}`].error && !days[`${index}`].loading">
<h1>😎</h1>
<h2>Aucun devoir pour ce jour</h2>
<p>Sélectionnez un autre jour dans le calendrier ou balayez l’écran pour changer de journée.</p>
<Transition name="CoursAnim">
<div class="NoCours" v-if="days[`${index}`].length == 0 && !days[`${index}`].error && !days[`${index}`].loading && currentIndex == index">
<h1>😎</h1>
<h2>Aucun devoir pour ce jour</h2>
<p>Sélectionnez un autre jour dans le calendrier ou balayez l’écran pour changer de journée.</p>

<ion-button mode="md" fill="clear" @click="changernPickerModalOpen(true)" class="changeDayButton">Ouvrir le calendrier</ion-button>
</div>
<ion-button mode="md" fill="clear" @click="changernPickerModalOpen(true)" class="changeDayButton">Ouvrir le calendrier</ion-button>
</div>
</Transition>

<div class="NoCours" v-if="days[`${index}`].length == 0 && days[`${index}`].error == 'ERR_NETWORK' && !days[`${index}`].loading && !connected">
<h1>🌏</h1>
Expand Down
65 changes: 37 additions & 28 deletions src/views/timetable/TimetableView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -511,10 +511,13 @@
isChangingDate: false,
isLoading: true,
swiper: null,
loaded: false,
}
},
mounted() {
this.swiper = this.$refs.swiper.$el.swiper;
this.loaded = true;
// sets presentingElement
this.presentingElement = this.$refs.pageHere.$el;
Expand Down Expand Up @@ -618,36 +621,42 @@
:virtualIndex="index"
>
<IonList>
<IonNavLink v-for="cours in days[`${index}`]" :key="cours.id" router-direction="forward" :component="CoursView" :componentProps="{urlCours: encodeURIComponent(JSON.stringify(cours))}">
<CoursElement
:subject="cours.data.subject"
:teachers="cours.data.teachers.join(', ') || 'Pas de professeur'"
:rooms="cours.data.rooms.join(', ') || 'Pas de salle'"
:groupNames="cours.data.groupNames.join(', ') || null"
:memo="cours.data.hasMemo"
:start="cours.time.start"
:end="cours.time.end"
:color="cours.course.color"
:sameTime="cours.course.sameTime"
:status="cours.status.status"
:isCancelled="cours.status.isCancelled"
:isDetention="cours.status.isDetention"
:isExempted="cours.status.isExempted"
:isOuting="cours.status.isOuting"
:isTest="cours.status.isTest"
:distance="cours.course.distance"
:lengthCours="cours.course.lengthCours"
/>
</IonNavLink>
<transition-group name="CoursAnim" tag="div" id="DayData">
<div v-if="currentIndex == index && loaded && days[index].length > 0">
<IonNavLink v-for="cours in days[`${index}`]" :key="cours.id" router-direction="forward" :component="CoursView" :componentProps="{urlCours: encodeURIComponent(JSON.stringify(cours))}">
<CoursElement
:subject="cours.data.subject"
:teachers="cours.data.teachers.join(', ') || 'Pas de professeur'"
:rooms="cours.data.rooms.join(', ') || 'Pas de salle'"
:groupNames="cours.data.groupNames.join(', ') || null"
:memo="cours.data.hasMemo"
:start="cours.time.start"
:end="cours.time.end"
:color="cours.course.color"
:sameTime="cours.course.sameTime"
:status="cours.status.status"
:isCancelled="cours.status.isCancelled"
:isDetention="cours.status.isDetention"
:isExempted="cours.status.isExempted"
:isOuting="cours.status.isOuting"
:isTest="cours.status.isTest"
:distance="cours.course.distance"
:lengthCours="cours.course.lengthCours"
/>
</IonNavLink>
</div>
</transition-group>
<div v-if="days[`${index}`]">
<div class="NoCours" v-if="days[`${index}`].length == 0 && !days[`${index}`].error && !days[`${index}`].loading">
<h1>😌</h1>
<h2>Aucun cours aujourd'hui</h2>
<p>Sélectionnez un autre jour dans le calendrier ou balayez l’écran pour changer de journée.</p>
<ion-button mode="md" fill="clear" @click="changernPickerModalOpen(true)" class="changeDayButton">Ouvrir le calendrier</ion-button>
</div>
<Transition name="CoursAnim">
<div class="NoCours" v-if="days[`${index}`].length == 0 && !days[`${index}`].error && !days[`${index}`].loading && currentIndex == index && loaded">
<h1>😌</h1>
<h2>Aucun cours aujourd'hui</h2>
<p>Sélectionnez un autre jour dans le calendrier ou balayez l’écran pour changer de journée.</p>
<ion-button mode="md" fill="clear" @click="changernPickerModalOpen(true)" class="changeDayButton">Ouvrir le calendrier</ion-button>
</div>
</Transition>
<div class="NoCours" v-if="days[`${index}`].length == 0 && days[`${index}`].error == 'ERR_NETWORK' && !days[`${index}`].loading && !connected">
<h1>🌏</h1>
Expand Down

0 comments on commit 9e9f5a1

Please sign in to comment.