feat(docs): countdown update

Author: rstoenescu

docs/src/components/ConfCountdown.vue

@@ -1,37 +1,44 @@
 <template lang="pug">
-  div.countdown.flex.justify-center
-    span(v-if="hasEnded").heading.full-width.text-center
-      span Quasar.Conf was a success!
-
-    span(v-else).heading.full-width.text-center
-      span Quasar.Conf launches in ...
-      div.flex.justify-center
-        div.countdown__timer.flex
-          span.time {{days}}
-          span.label Days
-        div.countdown__timer
-          span.time {{hours}}
-          span.label Hours
-        div.countdown__timer
-          span.time {{minutes}}
-          span.label Minutes
-
-    q-btn.q-my-md(
-      :color="color",
-      :text-color="textColor",
-      type="a",
-      no-caps,
-      :href="hasEnded ? 'https://www.youtube.com/watch?v=XfEx5teuY84&feature=youtu.be' : 'https://dev.to/quasar/introducing-quasar-conf-52gg'",
-      :label="hasEnded ? 'View it on YouTube!' : 'Learn More!'",
+  q-banner(inline-actions).conf-countdown
+    template(v-if="!hasEnded" v-slot:action)
+      q-btn(
+        type="a"
+        :href="btn.href"
+        target="_blank"
+        :color="color"
+        :text-color="textColor"
+        :icon="btn.icon"
+        :label="btn.label"
+        no-caps
+      )
+    q-btn(
+      v-else
+      type="a"
+      :href="btn.href"
       target="_blank"
-      :icon="hasEnded ? mdiYoutube : void 0"
+      :color="color"
+      :text-color="textColor"
+      :icon="btn.icon"
+      :label="btn.label"
+      no-caps
+      no-wrap
     )
+
+    .q-gutter-xs(v-if="!hasEnded" :class="paddingClass")
+      .row.items-center(:class="alignClass")
+        .text-bold Quasar.Conf
+        .q-ml-xs launches in...
+      q-badge.text-bold(v-if="days > 0" :color="color" :text-color="textColor") {{ days }} Days
+      q-badge.text-bold(v-if="hours > 0" :color="color" :text-color="textColor") {{ hours }} Hours
+      q-badge.text-bold(:color="color" :text-color="textColor") {{ minutes }} Minutes
 </template>
 
 <script>
 import { mdiYoutube } from '@quasar/extras/mdi-v5'
 
-const confDate = new Date('July 5, 2020 15:00:00').getTime()
+// July 5, 2020 15:00:00 GMT
+const confDate = 1593961200000
+
 const oneDay = 1000 * 60 * 60 * 24
 const oneHour = 1000 * 60 * 60
 const oneMin = 1000 * 60
@@ -40,14 +47,10 @@ export default {
   name: 'ConfCountdown',
 
   props: {
-    color: {
-      type: String,
-      default: 'white'
-    },
-    textColor: {
-      type: String,
-      default: 'primary'
-    }
+    color: String,
+    textColor: String,
+    alignClass: String,
+    paddingClass: String
   },
 
   data () {
@@ -59,6 +62,21 @@ export default {
     }
   },
 
+  computed: {
+    btn () {
+      return this.hasEnded === true
+        ? {
+          href: 'https://www.youtube.com/watch?v=XfEx5teuY84&feature=youtu.be',
+          label: 'View Quasar.Conf on YouTube!',
+          icon: mdiYoutube
+        }
+        : {
+          href: 'https://dev.to/quasar/introducing-quasar-conf-52gg',
+          label: 'About'
+        }
+    }
+  },
+
   mounted () {
     this.interval = setInterval(() => this.calcTimeRemaining, oneMin)
     this.calcTimeRemaining()
@@ -87,21 +105,3 @@ export default {
   }
 }
 </script>
-
-<style lang="sass">
-  .countdown
-    flex-wrap: wrap
-    .heading,
-    .action
-      font-size: 23px
-
-    &__timer
-      display: flex
-      flex-wrap: wrap
-
-      span
-        width: 100%
-
-      .time
-        font-size: 42px
-</style>

docs/src/layouts/Layout.vue

@@ -31,6 +31,13 @@ q-layout.doc-layout(view="lHh LpR lff", @scroll="onScroll")
     content-class="doc-left-drawer"
   )
     q-scroll-area(style="height: calc(100% - 50px); margin-top: 50px")
+      conf-countdown.layout-countdown(
+        color="primary"
+        align-class="justify-start"
+        padding-class="q-py-md"
+      )
+      q-separator.q-mb-lg
+
       .row.justify-center.q-my-lg
         q-btn(
           type="a"
@@ -42,7 +49,6 @@ q-layout.doc-layout(view="lHh LpR lff", @scroll="onScroll")
           :icon="mdiHeartOutline"
           label="Donate to Quasar"
         )
-        conf-countdown.text-black.q-mt-xl(color="primary", text-color="white")
 
       app-menu.q-my-lg
 
@@ -460,4 +466,8 @@ export default {
       font-size: 18px
     .time
       font-size: 38px
+
+.layout-countdown
+  background: linear-gradient(45deg, #e6f1fc 25%, #c3e0ff 25%, #c3e0ff 50%, #e6f1fc 50%, #e6f1fc 75%, #c3e0ff 75%, #c3e0ff)
+  background-size: 40px 40px
 </style>

docs/src/pages/Landing.vue

@@ -4,22 +4,27 @@
 
   section
     .landing__hero.flex.flex-center
-      .relative-position
-        conf-countdown.text-white.q-mb-xl
-        hr.countdown
+      .relative-position.text-center
         .text-h1
-          .text-weight-bold Quasar
-          .landing__hero-row.row.no-wrap.items-baseline
+          div
+            span.text-bold Quasar
+            span.text-subtitle1 v{{ $q.version }}
+          .landing__hero-row.row.no-wrap.items-baseline.justify-center
             span Framew
             img.landing__logo(src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg")
             span rk
         .text-subtitle1.q-pl-sm Build high-performance <strong>VueJS</strong> user interfaces in record time
+        .q-pt-sm.q-px-sm
+          conf-countdown.landing-countdown.bg-primary.text-white.rounded-borders(
+            color="white"
+            text-color="primary"
+            align-class="justify-center"
+          )
         .q-pt-md.q-pl-sm
-          .landing__hero-row.landing__hero-btns.q-gutter-sm.row.items-center
-            q-btn(color="white", text-color="primary", no-caps, to="/start", label="Get Started")
-            q-btn(color="white", text-color="primary", no-caps, to="/introduction-to-quasar", label="Why Quasar?")
-            q-btn(color="white", text-color="primary", no-caps, to="/video-tutorials", label="Video Tutorials")
-            .text-body2 v{{ $q.version }}
+          .landing__hero-row.landing__hero-btns.q-gutter-sm.row.items-center.justify-center
+            q-btn(color="white" text-color="primary" no-caps to="/start" label="Get Started")
+            q-btn(color="white" text-color="primary" no-caps to="/introduction-to-quasar" label="Why Quasar?")
+            q-btn(color="white" text-color="primary" no-caps to="/video-tutorials" label="Video Tutorials")
         .landing__arrow-down.row.justify-center.absolute
           q-icon.landing__arrow-down-icon.q-mt-xl(:name="mdiChevronDown" size="50px")
 
@@ -325,10 +330,9 @@ export default {
       &:hover
         color: $grey-4
 
-  hr.countdown
-    background: white
-    width: 70%
-    margin: 0 auto 40px
+.landing-countdown
+  border-top: 4px solid darken($primary, 10%)
+  border-bottom: 4px solid darken($primary, 10%)
 
 @keyframes logo-rotate
   100%

ui/src/components/banner/QBanner.js

@@ -19,16 +19,21 @@ export default Vue.extend({
   },
 
   render (h) {
+    const child = []
     const actions = slot(this, 'action')
-    const child = [
+    const avatar = slot(this, 'avatar')
+
+    avatar !== void 0 && child.push(
       h('div', {
         staticClass: 'q-banner__avatar col-auto row items-center self-start'
-      }, slot(this, 'avatar')),
+      }, avatar)
+    )
 
+    child.push(
       h('div', {
         staticClass: 'q-banner__content col text-body2'
       }, slot(this, 'default'))
-    ]
+    )
 
     actions !== void 0 && child.push(
       h('div', {