Revert "Original fade in transitions, PR now made into dev."
This reverts commit 1397e0bebc.
This commit is contained in:
@@ -99,35 +99,6 @@ h1 {
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
// Fade in title and cards and rows
|
||||
.fade-title {
|
||||
&-enter {
|
||||
opacity: 0;
|
||||
|
||||
&-to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transition: opacity .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-card {
|
||||
&-enter {
|
||||
opacity: 0;
|
||||
|
||||
&-to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transition: opacity .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.layout {
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
transition(name="fade-title" @after-enter="afterEnter")
|
||||
h1(v-if="showTitle") {{ category.title }}
|
||||
transition(name="fade-card")
|
||||
.cards(v-if="areCardsVisible && showCards")
|
||||
template(v-for='resource in category.resources' )
|
||||
Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
|
||||
transition(name="fade-card")
|
||||
table(v-if="!areCardsVisible && showCards")
|
||||
template(v-for='resource in category.resources' )
|
||||
TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
|
||||
h1 {{ category.title }}
|
||||
.cards(v-if="areCardsVisible")
|
||||
template(v-for='resource in category.resources' )
|
||||
Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
|
||||
table(v-if="!areCardsVisible")
|
||||
template(v-for='resource in category.resources' )
|
||||
TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -22,8 +19,6 @@ export default {
|
||||
categoryRouteTitle: this.$route.params.category,
|
||||
index: '',
|
||||
activeCard: '',
|
||||
showTitle: false,
|
||||
showCards: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -47,14 +42,8 @@ export default {
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
afterEnter(el) {
|
||||
this.showCards = true;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.showTitle = true;
|
||||
},
|
||||
created() {
|
||||
this.activeCard = this.$route.query.card || ''
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user