# January 3, 2020

# PGP Total Foodservice Landing

Unclear what the pop-up is supposed to do or what button you click to launch it.
I know the buy now buttons use an ajax modal showing another page, but that seems like a bad idea, asked AS for an example of a non-buy-now modal.
Modal is fancy-box though, so should be versatile.

# Accessibility Task Force

Added items to digital process doc
looked at 3 more sections of Udemy training, took notes.

# HLF Production unpublish

K got confused about the "hide page" function in Umbraco. Explained how to unpublish, directed her to E to re-index search.

# Checking into a question about where PDFs come from on NST FMB site.

# PGP Total Foodservice

just made a custom html block in Umbraco with display: none; then used fancybox 2.0's documentation to launch it. That way it's at least all on one page. Downside is TinyMCE won't show that content in the main display, so it looks empty.

# Digging into Lupe authentication middleware

Looking at these links

https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/auth-jwt?from-embed
https://nuxtjs.org/examples/auth-external-jwt

But it looks like T already dealt with a lot of this. Tabling for now.

# Lupe - config for branding and themes

Brands will have their own installations, so what's really needed is a config file that wouldn't be in the repo.
Working for components...

// https://nuxtjs.org/guide/plugins/#combined-inject

export default ({ app }, inject) => {
  inject('themeConfig', (themeConfig) => {
    return {
      brand: 'CSSI',
      loginLogo: 'https://i.ibb.co/3yhSYfG/cssi-logo-2x.png'
    }
  })
}

1
2
3
4
5
6
7
8

  plugins: [
    '~/plugins/themeConfig.js'
  ],

1
2
3

  computed: {
    loginLogo () {
      return this.$themeConfig().loginLogo
    }
  },

1
2
3
4
5

Need to see if it can work with styling in a way that makes sense.

First, need to combine stylesheets that are needed for component styling to make that process easier and DRYer.

@import '~assets/scss/dsm';
@import "~assets/scss/colors-aliases";
@import '~assets/scss/variables';
@import '~assets/scss/mixins';
@import '~assets/scss/vendor/index';

1
2
3
4
5

becomes

@import '~assets/scss/component-entry';

That works for now, but probably not for theme config.

Using a data attribute on things that are themed works...

.button--primary,
.button--tag {
  background-color: $clickable;
  @include font-btn-primary-center;
  &:hover {
    background-color: $clickable-hover;
  }
  &.button--small {
    @include font-btn-primary-small-center;
  }
  &[data-brand='CSSI'] {
    background-color: $cssi-clickable;
    &:hover {
      background-color: $cssi-clickable-hover;
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  <button
    class="button button--primary"
    :data-brand="brand"
    @click="filtering = !filtering"
  >
    <span v-if="!filtering">Filter</span>
    <span v-else>Close</span>
  </button>

1
2
3
4
5
6
7
8

But I'm going to look into CSS custom properties instead.

Maybe we can define custom colors on a wrapper element?

Yes, we can define css custom properties on the default layout

<template>
  <div class="default-layout">
    <style>
      :root {
      --clickable: {{ colors.clickable }};
      }
    </style>
    <Navigation
      :toggled="toggled"
      @toggleNav="toggleNav"
    />
    <MobileMasthead
      :nav-state="toggled"
      @toggleNav="toggleNav"
    />
    <nuxt />
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  computed: {
    colors () {
      return this.$themeConfig().colors
    }
  },

1
2
3
4
5

.button--primary,
.button--tag {
  background-color: var(--clickable);
}

1
2
3
4

This makes the overrides sass file irrelevant. I think this means default colors are default, no changing them.

Works! Need to pause and think about what I actually want to be allowed to be defined.

Obviously, no IE support. https://caniuse.com/#search=css%20custom%20properties

# Custom property stuff

# Should use fallbacks

.box{
  --box-color:#4d4e53;
  --box-padding: 0 10px;

  /* 10px is used because --box-margin is not defined. */
  margin: var(--box-margin, 10px);
}

1
2
3
4
5
6
7

# Can check with Supports

$color: red;
:root {
  --color: red;
}

.box {
  @supports ( (--a: 0)) {
    color: var(--color);
  }
  @supports ( not (--a: 0)) {
    color: $color;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/

# Better fallbacks

fallback in root

    <style>
      :root {
      {{ colors.clickable ? '--clickable: ' + colors.clickable : '' }};
      {{ colors.clickableHover ? '--clickable-hover: ' + colors.clickableHover : '' }};
      }
    </style>

1
2
3
4
5
6

then in scss

.button--primary,
.button--tag {
  background-color: var(--clickable, $clickable);
  @include font-btn-primary-center;
  &:hover {
    background-color: var(--clickable-hover, $clickable-hover);
  }
  &.button--small {
    @include font-btn-primary-small-center;
  }
}

1
2
3
4
5
6
7
8
9
10
11