barbican-reset 1.2.8 → 1.3.2

package/components/card_display.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="styleComponent">
+    <img :class="$style.image" :src="image">
+    <div v-if="expired" :class="$style.title">
+      <h4>Expired</h4>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardDisplay",
+  props: {
+    image: {
+      type: String,
+      required: true,
+    },
+    expired: {
+      type: Boolean,
+      default: false,
+    },
+    hero: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed: {
+    styleComponent() {
+      const style = this.$style;
+      let output = [style.component];
+      if (this.hero) { output.push(style.hero); }
+      return output;
+    },
+  }
+}
+</script>
+
+<style lang="scss" module>
+
+.component {
+  padding-top: 56.25%;
+  position: relative;
+  overflow: hidden;
+  color: $white;
+
+  .image {
+    position: absolute;
+    height: auto;
+    width: 100%;
+    inset: 0;
+  }
+
+  .title {
+    background-color: rgba($c-grey-midnight, 0.85);
+    place-items: center;
+    position: absolute;
+    display: grid;
+    inset: 0;
+  }
+}
+
+.component.hero {
+  .title {
+    h4 {
+      font-size: $h2-font-size;
+    }
+  }
+}
+
+</style>

package/components/container.vue

@@ -21,6 +21,10 @@ export default {
       type: Boolean,
       default: false
     },
+    header: {
+      type: Boolean,
+      default: false
+    },
     footer: {
       type: Boolean,
       default: false
@@ -39,6 +43,7 @@ export default {
       let output = [style.inner];
       if (this.masthead) { output.push(style.masthead); }
       if (this.thin) { output.push(style.thin); }
+      if (this.header) { output.push(style.header); }
       if (this.footer) { output.push(style.footer); }
       return output;
     }
@@ -64,7 +69,7 @@ export default {
 }
 
 .inner {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   margin: 0 auto;
 
   &:not(.footer) {
@@ -76,9 +81,14 @@ export default {
       padding-top: 2.5rem;
     }
   }
+
+  &.header {
+    padding-bottom: 1.875rem;
+    padding-top: 1.875rem;
+  }
   
   &.thin {
-    max-width: $constrained_content_width--thin;  
+    max-width: $layout-width-thin;  
   }
 
   &.masthead {

package/components/fluid_iframe.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="$style.component">
+    <iframe
+      scrolling="auto"
+      allowfullscreen
+      frameborder="0"
+      height="100%"
+      width="100%" 
+      :src="src" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FluidIframe',
+  props: {
+    src: {
+      type: String,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" module>
+
+.component {
+  border-radius: $border-radius-lg;
+  padding-top: 56.25%;
+  position: relative;
+  overflow: hidden;
+}
+
+.component > iframe {
+  position: absolute;
+  inset: 0;
+}
+
+</style>

package/components/help_row.vue

@@ -0,0 +1,33 @@
+<template>
+  <b-card video-help no-body>
+    <b-card-header>
+      <b-button variant="video-help" v-b-toggle="`help-${id}`">
+        {{ title }}
+      </b-button>
+    </b-card-header>
+    <b-collapse :id="`help-${id}`">
+      <b-card-body>
+        <slot />
+      </b-card-body>
+    </b-collapse>
+  </b-card>
+</template>
+
+<script>
+import { BCard, BCardHeader, BCollapse, BCardBody, BButton } from 'bootstrap-vue'
+
+export default {
+  name: 'HelpRow',
+  components: { BCard, BCardHeader, BCollapse, BCardBody, BButton },
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>

package/components/{loading_animation.vue → loader.vue}

@@ -13,6 +13,6 @@
 
 <script>
 export default {
-  name: "LoadingAnimation",
+  name: "Loader",
 };
 </script>

package/components/related_card.vue

@@ -0,0 +1,38 @@
+<template>
+  <b-card related no-body>
+    <b-img v-if="content.image" :src="content.image" />
+    <b-card-body>
+      <b-link :href="content.link" target="_blank">
+        <b-card-title v-html="content.title" />
+        <b-card-sub-title v-if="content.start_date" v-html="handleDate(content.start_date)" />
+        <b-card-text v-html="limitLength(content.description)" />
+      </b-link>
+    </b-card-body>
+  </b-card>
+</template>
+
+<script>
+import moment from 'moment'
+import { BCard, BImg, BCardBody, BLink, BCardTitle, BCardSubTitle, BCardText } from 'bootstrap-vue'
+
+export default {
+  name: "RelatedCard",
+  props: ['content'],
+  components: { BCard, BImg, BCardBody, BLink, BCardTitle, BCardSubTitle, BCardText },
+  methods: {
+    limitLength(title, limit = 140, output) {
+      if (title.length > limit) {
+        output = title.slice(0, limit);
+        output = output.substr(0, Math.min(output.length, output.lastIndexOf(' ')));
+        output += ' ...';
+      } else {
+        output = title;
+      }
+      return output;
+    },
+    handleDate(date) {
+      return moment(date).format("MMM Do, h:mma");
+    },
+  },
+};
+</script>

package/components/related_row.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="component">
+    <slot />
+  </div>  
+</template>
+
+<script>
+export default {
+  name: 'RelatedRow'
+}
+</script>
+
+<style lang="scss" scoped>
+
+.component {
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 20rem;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 1.25rem;
+    max-width: 60rem;
+    display: grid;
+
+    .card {
+      margin-bottom: 0;
+    }
+  }
+}
+
+</style>

package/components/related_title.vue

@@ -2,7 +2,7 @@
   <div :class="$style.container">
     <div :class="styleTitle">
       <div :class="$style.line"></div>
-      <div :class="$style.text">{{ title }}</div>
+      <div :class="$style.text"><slot /></div>
       <div :class="$style.line"></div>
     </div>
     <span v-if="tagline" :class="$style.tagline" v-html="tagline"></span>
@@ -13,9 +13,6 @@
 export default {
   name: "RelatedTitle",
   props: {
-    title: {
-      type: String,
-    },
     tagline: {
       type: String,
     },

package/components/type_text.vue

@@ -1,25 +1,15 @@
 <template>
-  <p ref="checking" class="loading-message" :class="{ slim }">
-    {{ message }}
+  <p ref="checking" :class="$style.component">
+    <slot />
   </p>
 </template>
 
 <script>
-import { gsap } from "gsap";
-import { TextPlugin } from "gsap/TextPlugin";
+import { gsap } from 'gsap'
+import { TextPlugin } from 'gsap/TextPlugin'
 gsap.registerPlugin(TextPlugin);
 
 export default {
-  props: {
-    message: {
-      type: String,
-      default: "Loading",
-    },
-    slim: {
-      type: Boolean,
-      default: false,
-    },
-  },
   methods: { 
     loadingAnim(target) {
       const message = target.innerText;
@@ -54,3 +44,13 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" module>
+
+.component {
+  font-size: $h4-font-size;
+  min-height: 2.25rem;
+  text-align: center;
+}
+
+</style>

package/components/wrap.vue

@@ -14,6 +14,10 @@ export default {
     thin: {
       type: Boolean,
       default: false,
+    },
+    videos: {
+      type: Boolean,
+      default: false,
     }
   },
   computed: {
@@ -22,6 +26,7 @@ export default {
       let output = [style.container];
       if (this.title) { output.push(style.title); }
       if (this.thin) { output.push(style.thin); }
+      if (this.videos) { output.push(style.videos); }
       return output;
     }
   }
@@ -31,16 +36,20 @@ export default {
 <style lang="scss" module>
 
 .container {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   margin-right: auto;
   margin-left: auto;
 
   &.title {
-    @include narrow-width;    
+    max-width: $layout-width-title;    
+  }
+
+  &.videos {
+    max-width: $layout-width-videos;    
   }
 
   &.thin {
-    max-width: $constrained_content_width--thin;
+    max-width: $layout-width-thin;
   }
 }
 

package/helpers/mixins/_buttons.scss

@@ -49,6 +49,10 @@
     background-color: $background;
     color: $color;
   }
+
+  &.hide {
+    visibility: hidden;
+  }
 }
 
 @mixin button-outline(
@@ -148,17 +152,29 @@
   }
 }
 
+@mixin btn-video-help {
+  @include button-link(
+    $padding: 1.25rem,
+    $background: $c-grey-alpine) {
+    background-color: $c-grey-steel;
+    color: $white;
+  }
+  font-weight: 700;
+  text-align: left;
+  width: 100%;
+}
+
 @mixin btn-exit {
   @include button-link {
     @include single-box($c-grey-night);
     background-color: $white;
     border-radius: 50%;
 
-    path.outline, path.cross {
+    [data-outline], [data-cross] {
       fill: $white;
     }
 
-    path.fill {
+    [data-fill] {
       fill: $c-grey-night;
     }
   }

package/helpers/mixins/_content.scss

@@ -2,13 +2,13 @@
 @mixin content_masthead {
   background-color: white;
   box-shadow: 0 5px 5px rgba(black, 0.1);
-  padding: 0 $constrained_grid_padding;
+  padding: 0 $layout-padding;
   // Required to ensure the box-shadow is visible when div.content-main-content uses a background-color.
   position: relative;
 }
 
 @mixin content_masthead__inner {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   padding: $space--large * 2 0;
   margin: 0 auto;
 
@@ -23,7 +23,7 @@
 }
 
 @mixin content-main-content__inner {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   padding: 1.5rem 0;
   margin: 0 auto;
 

package/helpers/variables/layout/index.scss

@@ -1,7 +1,9 @@
 /// Constrained content
-$constrained_grid_padding: 5%;
-$constrained_content_width--thin: 50rem;
-$constrained_content_width--wide: 75rem;
+$layout-padding: 5%;
+$layout-width-title: 20rem;
+$layout-width-thin: 50rem;
+$layout-width-videos: 60rem;
+$layout-width-wide: 75rem;
 
 $space: 0.625rem;
 // Default large amount of space.

package/index.js

@@ -5,15 +5,14 @@ import Block from './components/block'
 import EventSummary from './components/event_summary'
 import AccountTitle from './components/account_title'
 import Wrap from './components/wrap'
-import TableRow from './components/table_row'
-import Banner from './components/banner'
 import Alert from './components/alert'
-import LoadingAnimation from './components/loading_animation'
+import Loader from './components/loader'
 import RelatedTitle from './components/related_title'
+import RelatedCard from './components/related_card'
+import RelatedRow from './components/related_row'
 import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
-import Carousel from './components/carousel'
-import CardDeck from './components/card_deck'
+import CardDisplay from './components/card_display'
 import FormSection from './components/form_section'
 import FormUpdate from './components/form_update'
 import FormGroup from './components/form_group'
@@ -21,28 +20,31 @@ import RadioGroup from './components/radio_group'
 import FooterUpper from './components/footer_upper'
 import FooterLogos from './components/footer_logos'
 import FooterLower from './components/footer_lower'
+import FluidIframe from './components/fluid_iframe'
+import HelpRow from './components/help_row'
 
 export { 
-  LoadingAnimation, 
+  Loader, 
   Alert,
   RelatedTitle,
+  RelatedCard,
+  RelatedRow,
   TypeText,
   Container,
   Wrap,
   Card,
-  Carousel,
-  Banner,
   AccountTitle,
   Placeholder,
   FormSection,
   FormUpdate,
   FormGroup,
   RadioGroup,
-  TableRow,
   Block,
   EventSummary,
-  CardDeck,
   FooterUpper,
   FooterLogos,
-  FooterLower
+  FooterLower,
+  FluidIframe,
+  HelpRow,
+  CardDisplay,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.2.8",
+  "version": "1.3.2",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {
@@ -39,6 +39,7 @@
     "node-sass-tilde-importer": "^1.0.2",
     "placeholder-loading": "^0.4.0",
     "sass": "^1.41.0",
+    "vue-moment": "^4.1.0",
     "vue-slick-carousel": "^1.0.6"
   }
 }

package/scss/_app.scss

@@ -0,0 +1,42 @@
+#app {
+  flex-direction: column;
+  min-height: 100vh;
+  min-width: 100%;
+  display: flex;
+}
+
+#app.splash {
+  &.powerDashboard, 
+  &.powerStream {
+    background-position: center -15rem;
+    background-color: $c-power-blue;
+    background-repeat: no-repeat;
+  
+    @include media-breakpoint-up(lg) {
+      background-image: url("/img/power/bg.jpg");
+      background-size: 36rem;
+    }
+  
+    @include media-breakpoint-up(xxl) {    
+      background-size: 40rem;
+    }
+  }
+  
+  &.videos, 
+  &.cinemaDashboard, 
+  &.cinemaStream,
+  &.concertDashboard, 
+  &.concertStream,
+  &.theatreDashboard,
+  &.theatreStream {
+    background-image: url("/img/videos/splash-bg.jpg");
+    background-color: $c-splash-videos;
+    background-position: center -4rem;
+    background-repeat: no-repeat;
+    background-size: 72rem;
+
+    @include media-breakpoint-up(xxl) {
+      background-position: center top;
+    }
+  }
+}

package/scss/_atomic.scss

@@ -20,6 +20,10 @@ $aligns: "left", "center", "right";
   margin: 0;
 }
 
+.margin-top-05 {
+  margin-top: 0.5rem;
+}
+
 .width-100 {
   width: 100%;
 }

package/scss/_btn.scss

@@ -40,6 +40,10 @@
     @include btn-link;
   }
 
+  &.btn-video-help {
+    @include btn-video-help;
+  }
+
   &.btn-exit {
     @include btn-exit;
   }

package/scss/_card-group.scss

@@ -0,0 +1,25 @@
+
+.card-deck {
+  justify-content: center;
+  display: grid;
+  gap: 2rem;
+
+  @include media-breakpoint-up(md) {
+    align-items: flex-start;
+    grid-auto-flow: column;
+  }
+
+  .card {
+    margin-bottom: 0;
+    max-width: 20rem;
+  }
+  
+  .card-title {
+    font-size: $h3-font-size;
+  }
+  
+  .card-img {
+    border-radius: $border-radius-lg;
+    margin-top: 1rem;
+  }
+}

package/scss/_footer.scss

@@ -0,0 +1,8 @@
+footer {
+  color: $white;
+
+  &:not(.splash) {
+    background-color: $c-grey-midnight;
+  }
+}
+

package/scss/_header.scss

@@ -0,0 +1,7 @@
+header {
+  background-color: $c-page-header-bg;
+
+  &.splash {
+    display: none;
+  }
+}

package/scss/_main.scss

@@ -0,0 +1,14 @@
+main {
+  &.splash {
+    padding-top: 2rem;
+    color: $white;
+    
+    @include media-breakpoint-up(md) {
+      padding-top: 4rem;
+    }
+    
+    @include media-breakpoint-up(xxl) {
+      padding-top: 10rem;
+    }
+  }
+}

package/scss/card/_related.scss

@@ -0,0 +1,29 @@
+
+.card[related] {
+  border: 1px solid $c-grey-pearl;
+  overflow: hidden;
+
+  img {
+    max-width: 100%;
+  }
+
+  .card-title {
+    font-size: $font-size-lg;
+  }
+
+  .card-text:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.card[related][hero=true] {
+
+  .card-title {
+    font-size: $h2-font-size;
+  }
+
+  .card-text {
+    font-size: $font-size-lg;
+  }
+
+}

package/scss/card/_video-help.scss

@@ -0,0 +1,31 @@
+
+$border: 1px solid $c-grey-pearl;
+
+.card[video-help] {
+  margin-bottom: 0;
+  overflow: hidden;
+  border: $border;
+
+  &:not(:first-of-type) {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  &:not(:last-of-type) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom: 0;
+  }
+
+  .card-header {
+    border-radius: 0;
+    border-bottom: 0;
+    overflow: hidden;
+    padding: 0;
+  }
+
+  .card-body {
+    border-top: $border;
+    padding: 1.25rem;
+  }
+}

package/scss/card/index.scss

@@ -3,6 +3,8 @@
 @import "login.scss";
 @import "password.scss";
 @import "account.scss";
+@import "video-help.scss";
+@import "related.scss";
 
 .card {
   border: 1px solid $c-grey-pearl;

package/scss/index.scss

@@ -4,16 +4,20 @@
 @import "node_modules/bootstrap/scss/mixins";
 @import "../helpers/index.scss";
 
+@import "app.scss";
+@import "header.scss";
+@import "main.scss";
+@import "footer.scss";
 @import "klaro.scss";
 @import "fonts.scss";
 @import "loading-animation.scss";
-@import "type-text.scss";
 @import "close-icon.scss";
 @import "table/index.scss";
 
 // bootstrap component styles
 @import "btn.scss";
 @import "card/index.scss";
+@import "card-group.scss";
 @import "checkbox.scss";
 @import "checkbox-group.scss";
 @import "form.scss";
@@ -40,12 +44,4 @@ a, a:hover {
 
 p:last-of-type:not([class^=margin]) {
   margin-bottom: 0;
-}
-
-footer {
-  color: $white;
-
-  &:not(.splash) {
-    background-color: $c-grey-midnight;
-  }
 }

package/components/card_deck.vue

@@ -1,41 +0,0 @@
-<template>
-  <b-card-group deck>
-    <slot />
-  </b-card-group>
-</template>
-
-<script>
-import { BCard } from 'bootstrap-vue'
-export default { 
-  name: 'CardDeck',
-  components: { BCard },
-}
-</script>
-
-<style lang="scss" scoped>
-
-.card-deck {
-  justify-content: center;
-  display: grid;
-  gap: 2rem;
-
-  @include media-breakpoint-up(md) {
-    align-items: flex-start;
-    grid-auto-flow: column;
-  }
-}
-
-.card-deck .card {
-  margin-bottom: 0;
-  max-width: 20rem;
-}
-
-.card-deck .card-title {
-  font-size: $h3-font-size;
-}
-
-.card-deck .card-text {
-  margin-bottom: 1rem;
-}
-
-</style>

package/components/carousel.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="slick-carousel__container">
-    <VueSlickCarousel v-bind="settings">
-      <slot />
-    </VueSlickCarousel>
-  </div>
-</template>
-
-<script>
-import VueSlickCarousel from 'vue-slick-carousel'
-import 'vue-slick-carousel/dist/vue-slick-carousel.css'
-import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
-
-export default {
-  components: { VueSlickCarousel },
-  props: {
-    infinite: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      settings: {
-        slidesToScroll: 1,
-        slidesToShow: 4,
-        infinite: this.infinite,
-        arrows: true,
-        speed: 500,
-        responsive: [
-          {
-            breakpoint: 1024,
-            settings: {
-              slidesToShow: 3,
-            },
-          },
-          {
-            breakpoint: 768,
-            settings: {
-              slidesToShow: 2,
-            },
-          },
-        ],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-
-.slick {
-  &-carousel {
-    &__container:hover {
-      .slick-arrow {
-        opacity: 1;
-      }
-    }
-  }
-  &-arrow {
-    margin-top: -1.25rem;
-    border-radius: 0;
-    height: 2.5rem;
-    width: 2.5rem;
-    z-index: 2;
-    top: 28%;
-
-    @media only screen and (min-width: 400px) {
-      top: 32%;
-    }
-
-    @include media-breakpoint-up(sm) {
-      top: 38%;
-    }
-
-    &:before {
-      font-size: $h1-font-size;
-      color: $c-page-footer-bg;
-      opacity: 1;
-    }
-  }
-
-  &-slide {
-    .video-item {
-      &__container {
-        padding-right: 0.25rem;
-      }
-    }
-    .video-status__wrap {
-      opacity: 0.8;
-    }
-    &:hover {
-      .video-status__wrap {
-        @include media-breakpoint-up(md) {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &-prev {
-    left: -1.25rem;
-    @include media-breakpoint-up(lg) {
-      left: -3.75rem;
-    }
-  }
-  &-next {
-    right: -1.25rem;
-    @include media-breakpoint-up(lg) {
-      right: -3.75rem;
-    }
-  }
-}
-
-
-</style>

package/components/table_row.vue

@@ -1,94 +0,0 @@
-<template>
-  <div :class="styleRow" :style="`grid-template-columns: ${columns};`">
-    <slot></slot>
-  </div>  
-</template>
-
-<script>
-export default {
-  name: 'TableRow',
-  props: {
-    header: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: String
-    },
-    mobile: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  computed: {
-    styleRow() {
-      if (this.header) {
-        if (this.mobile) {
-          return this.$style.mobile_header_row;
-        } else {
-          return this.$style.header_row;
-        }
-      } else {
-        if (this.mobile) {
-          return this.$style.mobile_row;
-        } else {
-          return this.$style.row;
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-.row {
-  border: 1px solid $input-border-color;
-  grid-auto-flow: column;
-  margin-top: 0.625rem;
-  display: grid;
-
-  > div {
-    padding: 0.5rem 0.75rem;
-
-    &:not(:last-of-type) {
-      border-right: 1px solid $input-border-color;
-    }
-
-    > label {
-      font-size: $font-size-lg;
-      font-weight: 700;
-      display: none;
-    }
-  }
-}
-
-.mobile_row {
-  composes: row;
-
-  @include media-breakpoint-down(md) {
-    border-radius: $border-radius-lg;
-    display: block;
-
-    > div:not(:last-of-type) {
-      border-right: none;
-    }
-  }
-}
-
-.header_row {
-  composes: row;
-  background-color: $c-grey-alpine;
-  font-weight: 700;
-  margin-top: 0;
-}
-
-.mobile_header_row {
-  composes: header_row;
-
-  @include media-breakpoint-down(md) {
-    display: none;
-  }
-}
-
-</style>

package/scss/_type-text.scss

@@ -1,9 +0,0 @@
-.loading-message {
-  min-height: 2.25rem;
-
-  &:not(.slim) {
-    font-size: $h4-font-size;
-    margin: 3.75rem 1.875rem;
-    text-align: center;
-  }
-}