June 19, 2019

Working on brands list for TAP

• Used this package (opens new window) to make the brands scroll

It's client side only, so found some new ways in Nuxt to make this work

Use the no-ssr component

<no-ssr v-if="showBanner">
  <marquee-text :duration="30" :repeat="2">
    ...
  </marquee-text>
</no-ssr>

Import inside components method

  components: {
    'MarqueeText': () => import('vue-marquee-text-component')
  },

Then only show the no-ssr component after mount

  mounted() {
    if (process.client) {
      this.showBanner = true
    }
  }

Working on navigation on TAP and Sass loops

• Weird rotation and lots of z-index issues here.
• Used my first production sass loop to indent at an angle

li {
  padding: 0.666em 0.5em 0.666em 0;
  @for $i from 1 through 7 {
    &:nth-child(#{$i}) {
      padding-left: #{0.125*$i}em;
    }
  }
}

E led our weekly lunch and we talked about Docker.

• Learned about the difference between images and containers, and some commands
• docker image -ls and docker ps
• compose files and volumes

Back to TAP navigation

• wondering if I should abandon the UI kit and just use the Nuxt site
• Got navigation done, had to add a wrapper to control animation overflow, but that's fine, added a click handler for it close.
• Used some wonky stuff to communicate between child components, normal pattern, ok, but maybe I should have used vuex?