Zeen Component Library

# ZeenScheduleItem

Компонент ZeenScheduleItem

# Примеры:

    Пример с пустым полем

  • 10:20 - 10:50

    10:20 -10:50

    Выступление в стиле TED

    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса

    • Пример с пустым полем

  • 10:20 - 10:50

    10:20 -10:50

    Выступление в стиле TED

    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса
    • Михаил Свердлов
      Директор по развитию бизнеса

# props

Название Тип Обязательный По умолчанию Описание

# Source Code - исходный код компонента

<template>
  <li class="schedule-item">
    <p v-if="speech.time_begin && speech.time_end" class="schedule-item__time schedule-item__time_desktop">
      <span>{{ speech.time_begin }}</span>
      - <span>{{ speech.time_end }}</span>
      <slot name="schedule-after-time" :speech="speech" />
    </p>
    <div class="schedule-item__content">
      <div class="schedule-item__content-header">
        <div class="schedule-item__content-header-left">
          <p v-if="speech.time_begin && speech.time_end" class="schedule-item__time schedule-item__time_tablet">
            <span>{{ speech.time_begin }}</span>
            -<span>{{ speech.time_end }}</span>
            <slot name="schedule-after-time" :speech="speech" />
          </p>
          <ZeenHeadline
            v-if="speech.title"
            class="schedule-item__content-header-headline"
            :tag="'h3'"
            v-bind="headlineAttrs"
          >
            {{ speech.title }}
          </ZeenHeadline>
          <ZeenText class="schedule-item__content-header-description" v-bind="descriptionAttrs">
            <!--                      Neuromorphic compute theory-->
          </ZeenText>
        </div>

        <slot name="schedule-button-online" :speech="speech">
          <ZeenButton
            v-if="isOnlineStream"
            class="schedule-item__button schedule-item__button_desktop"
            v-bind="buttonAttrs"
          >
            {{ buttonText.online }}
          </ZeenButton>
        </slot>
        <slot name="schedule-button-done" :speech="speech">
          <ZeenButton
            v-if="isDoneStream"
            class="schedule-item__button schedule-item__button_desktop"
            v-bind="buttonAttrs"
          >
            {{ buttonText.done }}
          </ZeenButton>
        </slot>
        <slot name="schedule-button-hold" :speech="speech">
          <ZeenButton
            v-if="isHoldStream"
            class="schedule-item__button schedule-item__button_desktop"
            v-bind="buttonAttrs"
          >
            {{ buttonText.hold }}
            <template v-if="isHoldStream" #rightIcon>
              <svg class="btn-icon btn-icon_right" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
                <path
                  fill="none"
                  d="M15.2 8.8a.8.8 0 0 0 0-1.6H8.8V.8a.8.8 0 1 0-1.6 0v6.4H.8a.8.8 0 1 0 0 1.6h6.4v6.4a.8.8 0 0 0 1.6 0V8.8h6.4Z"
                />
              </svg>
            </template>
          </ZeenButton>
        </slot>
      </div>
      <div v-if="isSpeakers" class="schedule-item__content-body">
        <ul class="schedule-item__content-body-list">
          <li v-for="(speaker, index) in speech.speakers" :key="index" class="schedule-item__content-body-item">
            <ZeenSpeakerItem :speaker="speaker" />
          </li>
        </ul>
      </div>
      <div class="schedule-item__content-footer">
        <slot name="schedule-button-online" :speech="speech">
          <ZeenButton
            v-if="isOnlineStream"
            class="schedule-item__button schedule-item__button_phone"
            v-bind="buttonAttrs"
          >
            {{ buttonText.online }}
          </ZeenButton>
        </slot>
        <slot name="schedule-button-done" :speech="speech">
          <ZeenButton
            v-if="isDoneStream"
            class="schedule-item__button schedule-item__button_phone"
            v-bind="buttonAttrs"
          >
            {{ buttonText.done }}
          </ZeenButton>
        </slot>
        <slot name="schedule-button-hold" :speech="speech">
          <ZeenButton
            v-if="isHoldStream"
            class="schedule-item__button schedule-item__button_phone"
            v-bind="buttonAttrs"
          >
            {{ buttonText.hold }}
            <template v-if="isHoldStream" #rightIcon>
              <svg class="btn-icon btn-icon_right" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
                <path
                  fill="none"
                  d="M15.2 8.8a.8.8 0 0 0 0-1.6H8.8V.8a.8.8 0 1 0-1.6 0v6.4H.8a.8.8 0 1 0 0 1.6h6.4v6.4a.8.8 0 0 0 1.6 0V8.8h6.4Z"
                />
              </svg>
            </template>
          </ZeenButton>
        </slot>
      </div>
      <svg
        v-if="speech.status === 'online'"
        class="schedule-item__content-live"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 42 15"
      >
        <path
          fill="#FF4D4D"
          d="M1 15h9v-2.2H3.6V.5H1V15ZM15 .5h-2.7V15H15V.5Zm4.8 0h-3L22 15h3.2L30.4.5h-3l-3.7 11.4h-.2L19.8.5ZM32.3 15h9.5v-2.2h-6.9v-4h6.4V6.6h-6.4v-4h6.8V.6h-9.4V15Z"
        />
      </svg>
    </div>
  </li>
</template>

<script>
import ZeenHeadline from '../ZeenHeadline/ZeenHeadline'
import ZeenText from '../ZeenText/ZeenText'
import ZeenButton from '../ZeenButton/ZeenButton'
import ZeenSpeakerItem from '../ZeenSpeakerItem/ZeenSpeakerItem'

export default {
  name: 'ZeenScheduleItem',
  components: {ZeenSpeakerItem, ZeenButton, ZeenText, ZeenHeadline},
  props: {
    headlineAttrs: {
      type: Object,
      require: false,
    },
    descriptionAttrs: {
      type: Object,
      require: false,
    },
    buttonAttrs: {
      type: Object,
      require: false,
    },
    speech: {
      type: Object,
      require: true,
    },
    buttonText: {
      type: Object,
      default: () => ({
        online: 'Смотреть эфир',
        done: 'Смотреть запись',
        hold: 'Добавить в расписание',
      }),
    },
  },
  computed: {
    isDoneStream() {
      return this.speech.status === 'done'
    },
    isOnlineStream() {
      return this.speech.status === 'online'
    },
    isHoldStream() {
      return this.speech.status === 'hold'
    },
    isSpeakers() {
      return this.speech?.speakers.length
    },
  },
}
</script>

<style lang="scss">
:root {
  /* Цвета */
  --zeen-schedule-item-color: var(--main-color);
  --zeen-schedule-item-background-color: var(--zeen-schedule-item-background-color);
  --zeen-schedule-item-time-margin-right: 35px;
  --zeen-schedule-item-color-main-title: var(--main-text-color);
  --zeen-schedule-item-color-post: var(--main-text-color);
  --zeen-schedule-item-color-company: var(--main-text-color);
  --zeen-schedule-item-color-speaker-name: var(--main-text-color);
}
</style>

<style scoped lang="scss">
@import '/src/styles/mixins.scss';

.schedule-item {
  display: flex;

  &__time {
    margin: 0;
    margin-right: var(--zeen-schedule-item-time-margin-right);

    &_desktop {
      @include tablets {
        display: none;
      }
    }

    &_tablet {
      display: none;
      margin-bottom: 12px;
      @include tablets {
        display: block;
      }
      @include phones {
        margin-bottom: 3px;
      }
    }
  }

  &__button {
    &_desktop {
      @include phones {
        display: none;
      }
    }

    &_phone {
      display: none;
      @include phones {
        display: block;
        width: 100%;
      }
    }
  }

  &__content {
    background-color: var(--zeen-schedule-item-background-color);
    padding: var(--zeen-schedule-item-list-speaker-padding-top_size_xl)
      var(--zeen-schedule-item-list-speaker-padding-right_size_xl)
      var(--zeen-schedule-item-list-speaker-padding-bottom_size_xl)
      var(--zeen-schedule-item-list-speaker-padding-left_size_xl);
    border-radius: var(--zeen-schedule-item-content-border-radius);
    flex: 1 1 auto;
    position: relative;
    @include desktop {
      padding: var(--zeen-schedule-item-list-speaker-padding-top_size_lg)
        var(--zeen-schedule-item-list-speaker-padding-right_size_lg)
        var(--zeen-schedule-item-list-speaker-padding-bottom_size_lg)
        var(--zeen-schedule-item-list-speaker-padding-left_size_lg);
    }
    @include tablets {
      padding: var(--zeen-schedule-item-list-speaker-padding-top_size_md)
        var(--zeen-schedule-item-list-speaker-padding-right_size_md)
        var(--zeen-schedule-item-list-speaker-padding-bottom_size_md)
        var(--zeen-schedule-item-list-speaker-padding-left_size_md);
    }
    @include phones {
      padding: var(--zeen-schedule-item-list-speaker-padding-top_size_sm)
        var(--zeen-schedule-item-list-speaker-padding-right_size_sm)
        var(--zeen-schedule-item-list-speaker-padding-bottom_size_sm)
        var(--zeen-schedule-item-list-speaker-padding-left_size_sm);
    }

    &-live {
      position: absolute;
      right: var(--zeen-schedule-item-icon-live-position-right_size_lg);
      bottom: var(--zeen-schedule-item-icon-live-position-bottom_size_lg);
      width: 44px;
      height: 24px;
      @include phones {
        right: var(--zeen-schedule-item-icon-live-position-right_size_sm);
        bottom: var(--zeen-schedule-item-icon-live-position-bottom_size_sm);
        top: var(--zeen-schedule-item-icon-live-position-top_size_sm);
      }
    }

    &-body {
      &-list {
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, max-content);
        gap: 20px 30px;
        @include desktop {
          gap: 20px 53px;
          grid-template-columns: repeat(2, max-content);
        }
        @include phones {
          gap: 14px 0;
          grid-template-columns: repeat(1, max-content);
        }
      }

      &-item {
        //margin-top: 20px;

        ::v-deep .speaker-item__post {
          color: var(--zeen-schedule-item-color-post);
          font-size: var(--zeen-schedule-item-size-post);
        }

        ::v-deep .speaker-item__company {
          color: var(--zeen-schedule-item-color-company);
          font-size: var(--zeen-schedule-item-speaker-company_size_lg);
          line-height: var(--zeen-schedule-item-speaker-company-line-height_size_lg);
          @include phones {
            font-size: var(--zeen-schedule-item-speaker-company_size_sm);
            line-height: var(--zeen-schedule-item-speaker-company-line-height_size_sm);
          }
        }

        ::v-deep .speaker-item__speaker-name {
          color: var(--zeen-schedule-item-color-speaker-name);
          font-size: var(--zeen-schedule-item-speaker-name_size_lg);
          line-height: var(--zeen-schedule-item-speaker-name-line-height_size_lg);
          @include desktop {
            font-size: var(--zeen-schedule-item-speaker-name_size_md);
            line-height: var(--zeen-schedule-item-speaker-name-line-height_size_md);
          }
        }
      }
    }

    &-footer {
      margin-top: 20px;
    }

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      @include tablets {
        margin-bottom: 32px;
      }
      @include phones {
        margin-bottom: 17px;
      }

      &-headline {
        font-size: var(--zeen-schedule-item-content-header-headline_size_lg);
        line-height: var(--zeen-schedule-item-content-header-headline-line-height_size_lg);
        color: var(--zeen-schedule-item-color-main-title);
        @include desktop {
          font-size: var(--zeen-schedule-item-content-header-headline_size_md);
          line-height: var(--zeen-schedule-item-content-header-headline-line-height_size_md);
        }
        @include phones {
          font-size: var(--zeen-schedule-item-content-header-headline_size_sm);
          line-height: var(--zeen-schedule-item-content-header-headline-line-height_size_sm);
        }
      }

      &-left {
        align-self: flex-start;
      }
    }
  }
}

.btn-icon {
  width: var(--zeen-schedule-item-button-icon-size);
  height: var(--zeen-schedule-item-button-icon-size);

  &_right {
    margin-left: var(--zeen-schedule-item-button-icon-margin-left);
  }
}
</style>

← ZeenAvatar →