@ecored-sena/base-kit 0.0.1

package/plugin/components/plantilla/Accesibilidad.vue

@@ -0,0 +1,101 @@
+<template lang="pug">
+.accesibilidad
+  .accesibilidad__menu
+    .accesibilidad__menu__header
+      .accesibilidad__menu__item
+        i(class="fas fa-universal-access")
+        span.h5.mb-0 Accesibilidad
+    .accesibilidad__menu__content
+      .accesibilidad__menu__item(
+        @click="contraste()"
+      )
+        i(class="fas fa-adjust")
+        span Contraste
+      .accesibilidad__menu__item(
+        @click="aumentarLetra()"
+      )
+        img(src="@/assets/bullets/aumentar.svg")
+        span Aumentar letra
+      .accesibilidad__menu__item(
+        @click="reducirLetra()"
+      )
+        img(src="@/assets/bullets/reducir.svg")
+        span Reducir letra
+
+</template>
+
+<script>
+export default {
+  name: 'Accesibilidad',
+  data: () => ({
+    fontSize: 16,
+  }),
+  methods: {
+    contraste() {
+      const htmlElement = document.querySelector('html')
+      const clase = 'html-constraste-activo'
+      if (htmlElement.classList.contains(clase)) {
+        htmlElement.classList.remove(clase)
+      } else {
+        htmlElement.classList.add(clase)
+      }
+    },
+    aumentarLetra() {
+      const bodyElement = document.querySelector('body')
+      if (this.fontSize >= 22) return
+      this.fontSize += 2
+      bodyElement.style.fontSize = this.fontSize + 'px'
+    },
+    reducirLetra() {
+      const bodyElement = document.querySelector('body')
+      if (this.fontSize <= 16) return
+      this.fontSize -= 2
+      bodyElement.style.fontSize = this.fontSize + 'px'
+    },
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+.accesibilidad
+  position: fixed
+  right: 0
+  top: 50vh
+  height: 50px
+  background-color: #111E61
+  border-top-left-radius: 15px
+  border-bottom-left-radius: 15px
+  transform: translateY(-50%) translateX(100%) translateX(-50px)
+  overflow: hidden
+  transition: transform 0.3s ease-in-out, height 0.3s ease-in-out
+  &:hover
+    transform: translateY(-50%) translateX(0)
+    height: 12.75rem
+
+  *
+    color: $white
+  &__menu
+    &__header
+    &__content
+      .accesibilidad__menu__item
+        cursor: pointer
+        &:hover
+          background-color: #273685
+        &:last-child
+          border: none
+    &__item
+      display: flex
+      align-items: center
+      padding: 10px
+      border-bottom: 1px solid #273685
+      line-height: 1em
+      user-select: none
+    i
+      font-size: 30px
+      font-style: normal
+      margin-right: 10px
+      line-height: 1em
+    img
+      width: 30px
+      margin-right: 10px
+</style>

package/plugin/components/plantilla/AsideMenu.vue

@@ -0,0 +1,242 @@
+<template lang="pug">
+aside
+  transition(name="main-menu" duration="295")
+    .aside-menu(v-if="menuOpen")
+      .aside-menu__black-background(@click="toggleMenu(false)")
+      nav.aside-menu__content
+        .aside-menu__header
+          h4 Desarrollo de contenidos
+        ul.aside-menu__menu
+          template(v-for="(item,index) of menuData")
+            li.aside-menu__menu__item(
+              :key="`menu-item-${index}`"
+              :class="{'aside-menu__menu__item--active' : $route.name == item.nombreRuta}"
+            )
+              router-link.aside-menu__menu__item__lnk(
+                :to="{name: item.nombreRuta}"
+                @click.native="toggleMenu(false)"
+              )
+                span(v-if="item.hasOwnProperty('numero')" v-html="item.numero")
+                i(v-if="item.icono" :class="item.icono")
+                span(v-html="item.titulo")
+
+            template(
+              v-if="item.hasOwnProperty('subMenu') && item.subMenu.length"
+            )
+              li.aside-menu__menu__item--sub-menu(
+                v-for="(subItem, subItemIndex) of item.subMenu"
+                :key="`submenu-item-${index}-${subItemIndex}`"
+                :class="{'aside-menu__menu__item--sub-menu--active': $route.hash == `#${subItem.hash}`}"
+              )
+                router-link.aside-menu__menu__item__lnk(
+                  :to="{ name: item.nombreRuta , hash: `#${subItem.hash}` }"
+                  @click.native="toggleMenu(false)"
+                )
+                  i(v-if="subItem.icono" :class="subItem.icono")
+                  span(v-if="subItem.numero" v-html="subItem.numero")
+                  span(v-html="subItem.titulo")
+
+        ul.aside-menu__sec-menu
+          template(
+            v-for="(secMenuItem, secMenuIndex) of subMenuData",
+          )
+            li.aside-menu__sec-menu__item(
+              :key="`secMenu-item-${secMenuIndex}`"
+              :class="{'d-none':secMenuItem.titulo.includes('material') && isLocal()}"
+            )
+              a.aside-menu__sec-menu__item__lnk(
+                v-if="secMenuItem.hasOwnProperty('download')"
+                :href="obtenerLink(secMenuItem.download)"
+                target="_blank"
+              )
+                i(v-if="secMenuItem.icono" :class="secMenuItem.icono")
+                span(v-html="secMenuItem.titulo")
+
+              router-link.aside-menu__sec-menu__item__lnk(
+                v-else
+                :to="{name: secMenuItem.nombreRuta}"
+                @click.native="toggleMenu(false)"
+              )
+                i(v-if="secMenuItem.icono" :class="secMenuItem.icono")
+                span(v-html="secMenuItem.titulo")
+
+</template>
+
+<script>
+export default {
+  name: 'AsideMenu',
+  computed: {
+    menuData() {
+      return this.$config.menuPrincipal.menu
+    },
+    subMenuData() {
+      return this.$config.menuPrincipal.subMenu
+    },
+    menuOpen() {
+      return this.$store.getters.isMenuOpen
+    },
+  },
+  watch: {
+    $route(to) {
+      if (to.name === 'inicio' || window.innerWidth <= 991) {
+        this.toggleMenu(false)
+      }
+    },
+  },
+  methods: {
+    toggleMenu(newVal) {
+      this.$store.dispatch('toggleMenu', newVal)
+    },
+    isLocal() {
+      return window.location.protocol === 'file:'
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.aside-menu
+  position: fixed
+  top: 70px
+  min-height: calc(100vh - 70px)
+  max-height: calc(100vh - 70px)
+  background-color: $color-sistema-g
+  transition: flex 0.5s ease-in-out, width 0.5s ease-in-out
+  overflow-x: hidden
+  z-index: 100001
+  width: 300px
+
+  &__black-background
+    position: fixed
+    inset: 0
+    top: 70px
+    background: transparentize($black, 0.2)
+    cursor: pointer
+
+  a
+    color: $color-sistema-a
+
+  &__content
+    width: 300px
+    display: flex
+    flex-direction: column
+    justify-content: space-between
+    min-height: calc(100vh - 70px)
+    max-height: calc(100vh - 70px)
+    border-right: 1px solid $color-sistema-e
+    position: absolute
+    background: $white
+
+    @media (max-height: 800px)
+      min-height: 800px
+      max-height: 800px
+      overflow-y: auto
+
+  &__header
+    padding: 10px
+    text-align: center
+    background-color: $color-sistema-e
+    h4
+      margin: 0
+
+  &__menu
+    overflow-y: auto
+    flex-grow: 1
+    list-style: none
+    padding-left: 0
+    margin-bottom: 0
+
+    &__item
+      &--active
+        .aside-menu__menu__item__lnk
+          background-color: $color-sistema-e
+          font-weight: $base-bold-font-weight
+
+      &:hover
+        background-color: $color-sistema-e
+
+      &--sub-menu
+        @extend .aside-menu__menu__item
+        padding-left: 10px
+        &--active
+          .aside-menu__menu__item__lnk
+            background-color: $color-sistema-e
+            font-weight: $base-bold-font-weight
+            position: relative
+            &::before
+              content: ''
+              display: block
+              position: absolute
+              left: 0
+              bottom: 0
+              top: 0
+              width: 4px
+              border-radius: 2px
+              background-color: $color-acento-contenido
+
+      &__lnk
+        display: flex
+        align-items: center
+        padding: 10px 15px
+        line-height: 1.1em
+
+
+        span, i
+          margin-right: 10px
+          &:last-child
+            margin-right: 0
+
+  &__sec-menu
+    background-color: $color-sistema-e
+    padding: 10px 0
+    flex-shrink: 0
+    margin-bottom: 0
+
+    &__item
+      @extend .aside-menu__menu__item
+      padding: 10px 15px
+
+      &__lnk
+        @extend .aside-menu__menu__item__lnk
+        padding: 0
+        border-radius: 1em
+        i
+          display: block
+          width: 2em
+          height: 2em
+          padding: 0.5em 0
+          text-align: center
+          background-color: $white
+          border-radius: 50%
+        &:hover
+          background-color: $white
+
+  @media (max-width: $bp-max-xs)
+    &__sec-menu
+      padding-bottom: 110px
+
+.main-menu-enter-active
+  animation: main-menu-open-animation .3s;
+  .aside-menu__black-background
+    animation:  main-menu-background-animation .3s
+
+
+.main-menu-leave-active
+  animation: main-menu-open-animation .3s reverse
+  .aside-menu__black-background
+    animation:  main-menu-background-animation .3s reverse
+
+@keyframes main-menu-open-animation
+  0%
+    width: 0
+
+  100%
+    width: 300px
+
+@keyframes main-menu-background-animation
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1
+</style>

package/plugin/components/plantilla/BannerInterno.vue

@@ -0,0 +1,66 @@
+<template lang="pug">
+.container-fluid.banner-interno
+  .banner-interno__fondo(:style="{'background-image': `url(${globalData.fondoBannerPrincipal})`}")
+  .container
+    .banner-interno__titulo.py-5
+      .banner-interno__titulo__icono.me-3(v-if="icono.length")
+        i(:class="icono")
+      h2.mb-0(v-html="titulo")
+</template>
+
+<script>
+export default {
+  name: 'BannerInterno',
+  props: {
+    icono: {
+      type: String,
+      default: '',
+    },
+    titulo: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({}),
+  computed: {
+    globalData() {
+      return this.$config.global
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.banner-interno
+  position: relative
+
+  &__fondo
+    position: absolute
+    top: 0
+    bottom: -50px
+    left: 0
+    right: 0
+    background-color: $color-banner-fondo
+    background-size: cover
+    background-position: center
+
+  &__titulo
+    display: flex
+    align-items: center
+    &__icono
+      display: block
+      width: 32px
+      height: 32px
+      border-radius: 50%
+      background-color: $color-banner-text
+      position: relative
+      i
+        color: $color-banner-fondo
+        position: absolute
+        left: 50%
+        top: 50%
+        transform: translate(-50%,-50%)
+    h1, h2, h3, h4, h5, h6
+      color: $color-banner-text
+      line-height: 1.1em
+</style>

package/plugin/components/plantilla/BannerPrincipal.vue

@@ -0,0 +1,104 @@
+<template lang="pug">
+.banner-principal
+  .container.tarjeta(
+    :style="{'background-image': globalData.fondoBannerPrincipal ? `url(${globalData.fondoBannerPrincipal})` : 'none'}"
+  )
+    .row.banner-principal__row
+      .col-lg-7.col-xxl-5.ps-4.ps-sm-5.py-4.py-sm-5.banner-principal__info
+        .banner-principal__componente
+          h1.mb-0(v-html="globalData.Name")
+        .banner-principal__descripcion
+          p.mb-0(v-html="globalData.Description")
+        .banner-principal__accion
+          router-link.boton(:to="{name: iniciarLnk.nombreRuta }")
+            span.me-1 Ver más
+            i.fas.fa-angle-right
+
+      .d-none.d-lg-block.col-lg-5.px-0.banner-principal__img
+        img(:src="globalData.imagenBannerPrincipal")
+        div(v-for="img in extraImgs" :class="img.clases")
+          img(:src="img.imagen")
+</template>
+
+<script>
+import mixins from '../plantillaMixins'
+export default {
+  name: 'BannerPrincipal',
+  mixins: [mixins],
+  computed: {
+    globalData() {
+      return this.$config.global
+    },
+    extraImgs() {
+      return this.$config.global.imagenesDecorativasBanner
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.banner-principal
+  p, h1, h2, h3, h4, h5, h6
+    color: $color-banner-text
+
+  .tarjeta
+    background-color: $color-banner-fondo
+    background-size: cover
+    background-position: center
+
+  &__img
+    position: relative
+    &>div
+      position: absolute
+
+  &__info
+    display: flex
+    flex-direction: column
+    justify-content: center
+
+  &__programa
+    display: flex
+    align-items: center
+    margin-bottom: 20px
+
+  &__componente
+    margin-bottom: 20px
+    h1
+      line-height: 1.1em
+
+      @media (max-width: $bp-max-xs)
+        font-size: 2em
+
+  &__descripcion
+    margin-bottom: 20px
+
+  &__row
+    @if $banner-principal-img-x == 'derecha'
+      justify-content: space-between
+    @else
+      justify-content: space-around
+      .banner-principal__img
+        padding-right: 1.5rem!important
+      @media (min-width: $bp-min-sm)
+        .banner-principal__img
+          padding-right: 3rem!important
+
+  &__img
+    @if $banner-principal-img-y == 'arriba'
+      align-self: flex-start
+      padding-bottom: 1.5rem
+      @media (min-width: $bp-min-sm)
+        padding-bottom: 3rem!important
+    @else if $banner-principal-img-y == 'abajo'
+      align-self: flex-end
+      padding-top: 1.5rem
+      @media (min-width: $bp-min-sm)
+        padding-top: 3rem!important
+    @else
+      align-self: center
+      padding-top: 1.5rem
+      padding-bottom: 1.5rem
+      @media (min-width: $bp-min-sm)
+        padding-top: 3rem!important
+        padding-bottom: 3rem!important
+</style>