Skip to content

Commit

Permalink
refactor: Perform major update on dependencies (#92)
Browse files Browse the repository at this point in the history 
* chore: Update dependencies
Note: Vue versions were fixed due to a rendering error with yet unknown cause

* fix: Resolve components not showing with `vue-lazy-hydration`

* fix(lint): Change `script` and `style` order
  • Loading branch information
@Hanziness
Hanziness committed Jun 16, 2021
1 parent fcfa8f0 commit 691c89c
Show file tree
Hide file tree
Showing 3 changed files with 1,276 additions and 1,263 deletions.
29 changes: 18 additions & 11 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,40 +17,47 @@
"release": "standard-version"
},
"dependencies": {
"@nuxtjs/pwa": "^3.0.0-beta.20",
"@nuxtjs/pwa": "^3.3.5",
"@nuxtjs/sitemap": "^2.4.0",
"dayjs": "^1.8.32",
"node-sass": "^4.14.1",
"node-sass": "^6.0.0",
"normalize.css": "^8.0.1",
"nuxt": "^2.14.0",
"nuxt": "^2.15.7",
"nuxt-i18n": "^6.13.8",
"sass-loader": "^10.0.4",
"vue-lazy-hydration": "^1.0.0-beta.14",
"vue": "2.6.12",
"vue-server-renderer": "2.6.12",
"vue-template-compiler": "2.6.12",
"vue-lazy-hydration": "^2.0.0-beta.4",
"vue-material-design-icons": "^4.10.0",
"vue-native-notification": "^1.1.1",
"vuelidate": "^0.7.5",
"vuex-persistedstate": "3"
"vuex": "^3.6.2",
"vuex-persistedstate": "^3.0.0"
},
"devDependencies": {
"@aceforth/nuxt-optimized-images": "^1.3.0",
"@babel/runtime-corejs3": "^7.12.5",
"@nuxtjs/eslint-config": "^3.1.0",
"@nuxtjs/eslint-module": "^2.0.0",
"@nuxtjs/eslint-config": "^6.0.1",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/google-fonts": "^1.0.0",
"@nuxtjs/stylelint-module": "^4.0.0",
"@nuxtjs/tailwindcss": "^4.0.3",
"@tailwindcss/forms": "^0.2.1",
"autoprefixer": "9",
"autoprefixer": "10",
"babel-eslint": "^10.1.0",
"consola": "^2.15.3",
"core-js": "3",
"eslint": "^7.5.0",
"eslint-plugin-nuxt": "^1.0.0",
"eslint-plugin-nuxt": "^2.0.0",
"imagemin-pngquant": "^9.0.1",
"postcss": "^8.2.9",
"standard-version": "^9.0.0",
"stylelint": "^13.6.1",
"stylelint-config-standard": "^20.0.0",
"stylelint-config-standard": "^22.0.0",
"tailwindcss": "2",
"webp-loader": "^0.6.0"
"typescript": "^3.7.0",
"webp-loader": "^0.6.0",
"webpack": "4"
}
}
113 changes: 57 additions & 56 deletions pages/timer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,19 @@
class="relative w-full h-full flex justify-center"
>
<lazy-hydrate when-visible>
<transition slot-scope="{ hydrated }" name="schedule-transition">
<transition name="schedule-transition">
<schedule-display
v-if="hydrated && $store.state.settings.schedule.visibility.enabled"
v-if="$store.state.settings.schedule.visibility.enabled"
class="absolute ml-auto mr-auto"
style="top: 2rem;"
/>
</transition>
</lazy-hydrate>

<lazy-hydrate when-visible>
<transition slot-scope="{ hydrated }" name="transition-fade">
<transition name="transition-fade">
<timer-progress
v-if="hydrated && $store.getters['settings/performanceSettings'].showProgressBar"
v-if="$store.getters['settings/performanceSettings'].showProgressBar"
:time-elapsed="timeElapsed"
:time-original="timeOriginal"
/>
Expand All @@ -58,40 +58,10 @@
</section>
</template>

<style lang="scss" scoped>
html {
@apply overflow-hidden;
}
section.timer-section {
height: 100vh;
transition: background-color 300ms ease-in;
}
.timer-background {
transition: 300ms ease-in;
transition-property: background-color;
position: relative;
height: 100%;
}
.schedule-transition-enter-active,
.schedule-transition-leave-active {
transition: transform 300ms ease-out, opacity 200ms ease-out;
}
.schedule-transition-enter,
.schedule-transition-leave-to {
transform: translateY(-20px);
opacity: 0;
}
</style>

<script>
// import LazyHydrate from 'vue-lazy-hydration'
export default {
layout: 'timer',
components: {
Ticker: () => import(/* webpackChunkName: "ticker", webpackMode: "eager" */ '@/components/ticker.vue'),
ScheduleDisplay: () => import(/* webpackChunkName: "schedule", webpackPrefetch: true */ '@/components/schedule/scheduleDisplay.vue'),
Expand All @@ -107,12 +77,34 @@ export default {
LazyHydrate: () => import(/* webpackMode: "eager" */ 'vue-lazy-hydration'),
TaskWindow: () => import(/* webpackChunkName: "task-list" */ '@/components/taskList/taskWindow.vue')
},
layout: 'timer',
data () {
return {
showSettings: false
}
},
head () {
return {
title: `(${this.remainingTimeString}) ${this.pageTitle}`,
link: [
{
rel: 'icon',
type: 'image/svg+xml',
href: `data:image/svg+xml,
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
style="color: ${this.$store.getters['schedule/currentScheduleColour']};"
xmlns="http://www.w3.org/2000/svg"
><circle cx="16" cy="16" r="14" fill="currentColor" /></svg>`
}
]
}
},
computed: {
currentColour () {
const currentState = this.$store.state.events.schedule[0] ? this.$store.state.events.schedule[0]._type : null
Expand All @@ -138,7 +130,8 @@ export default {
pageTitle () {
return this.$store.getters['schedule/getCurrentItem']
? this.$i18n.t('section.' + this.$store.getters['schedule/getCurrentItem'].type).toLowerCase() : 'Pomodoro'
? this.$i18n.t('section.' + this.$store.getters['schedule/getCurrentItem'].type).toLowerCase()
: 'Pomodoro'
}
},
Expand All @@ -159,27 +152,35 @@ export default {
// thisRef.$store.dispatch('timer/scheduleNextTick', {}) // tick the timer if document is now visible
}
})
},
head () {
return {
title: `(${this.remainingTimeString}) ${this.pageTitle}`,
link: [
{
rel: 'icon',
type: 'image/svg+xml',
href: `data:image/svg+xml,
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
style="color: ${this.$store.getters['schedule/currentScheduleColour']};"
xmlns="http://www.w3.org/2000/svg"
><circle cx="16" cy="16" r="14" fill="currentColor" /></svg>`
}
]
}
}
}
</script>

<style lang="scss" scoped>
html {
@apply overflow-hidden;
}
section.timer-section {
height: 100vh;
transition: background-color 300ms ease-in;
}
.timer-background {
transition: 300ms ease-in;
transition-property: background-color;
position: relative;
height: 100%;
}
.schedule-transition-enter-active,
.schedule-transition-leave-active {
transition: transform 300ms ease-out, opacity 200ms ease-out;
}
.schedule-transition-enter,
.schedule-transition-leave-to {
transform: translateY(-20px);
opacity: 0;
}
</style>
Loading

0 comments on commit 691c89c

Please sign in to comment.