project_list.scss

@use "sass:math";

@import "../base/variables";
@import "../base/mixins";
@import "~bootstrap/scss/mixins";


$max-project-thumb-size: 160px;
$container-padding: 1rem;

.project-list {
  margin-bottom: 2rem;

  .projects-spinner-container {
    display: none;
  }

  &.loading {
    //stylelint-disable-next-line selector-class-pattern
    .project-list__wrapper {
      display: none;
    }

    .projects-spinner-container {
      display: flex;
      justify-content: center;
    }
  }

  &.empty {
    display: none;
  }

  &__title {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 1rem 0;
    margin-right: -1rem;
    margin-left: -1rem;
    cursor: pointer;
    @include media-breakpoint-up(sm) {
      border-radius: $border-radius;
    }

    &:hover,
    &:active {
      background-color: rgba(0, 0, 0, 0.08);
    }

    &__btn-toggle {
      display: flex;
      flex-direction: row;

      &__text {
        padding-right: 0.5rem;
        font-size: 0.95rem;
        @include media-breakpoint-down(sm) {
          display: none;
        }
      }
    }
  }

  &__project {
    display: block;
    flex-shrink: 0;

    &:hover {
      text-decoration: none;

      //stylelint-disable-next-line selector-class-pattern
      .project-list__project__image {
        box-shadow: 3px 3px 20px 0 rgba(50, 50, 50, 0.3); // TODO: make this beautiful
      }

    }

    &__image {
      width: 100%;
      border-radius: 10%;
    }

    &__name {
      display: inline-block;
      //stylelint-disable-next-line value-no-vendor-prefix
      display: -webkit-box;
      max-width: 100%;
      overflow: hidden;
      -webkit-line-clamp: 2; // ellipse at 2nd text line
      //stylelint-disable-next-line property-no-vendor-prefix
      -webkit-box-orient: vertical;
    }

    &__property {
      display: flex;
      flex-direction: row;
      align-items: center;
      color: $text-muted;

      .material-icons {
        font-size: 1.25rem;
      }

      &__value {
        padding-left: 0.3rem;
        font-size: 0.9rem;
        @include text-truncate();
      }
    }
  }

  &.horizontal {
    > .container {
      padding: 0;
    }

    .projects-container {
      display: flex;
      flex-direction: row;
      padding: $container-padding #{math.div($grid-gutter-width, 2)};
      margin-right: math.div(-$grid-gutter-width, 2);
      margin-left: math.div(-$grid-gutter-width, 2);
      overflow-y: auto;
    }

    //stylelint-disable-next-line selector-class-pattern
    .project-list__project {
      width: 25vw;
      max-width: $max-project-thumb-size;
      margin-right: 1.5rem;
      text-decoration: none;

      @include media-breakpoint-up(md) {
        width: 10vw;
      }
    }
  }

  &.vertical {
    position: fixed;
    top: 64px;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: calc(100vh - 64px);
    padding-top: 1rem;
    padding-right: math.div($grid-gutter-width, 2);
    padding-left: math.div($grid-gutter-width, 2);
    overflow-y: auto;
    background: #fff;
    @media (max-width: 599px) {
      top: 56px;
      height: calc(100vh - 56px);
    }

    //stylelint-disable-next-line selector-class-pattern
    .project-list__title {
      padding-bottom: 1rem;
    }

    .projects-container {
      display: flex;
      flex-direction: column;
      @include media-breakpoint-up(lg) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: math.div($grid-gutter-width, 2) math.div($grid-gutter-width, 2);
        grid-template-areas: ". .";
      }
    }

    //stylelint-disable-next-line selector-class-pattern
    .project-list__project {
      display: grid;
      align-items: start;
      padding-bottom: 1rem;
      grid-template-columns: 25% auto;
      grid-template-rows: max-content auto;
      gap: 0.3rem 1rem;
      grid-template-areas: "image name" "image property";
      text-decoration: none;

      &__image {
        grid-area: image;
      }

      &__name {
        font-size: 1.4rem;
        grid-area: name;
      }

      &__property {
        grid-area: property;
      }
    }

    //stylelint-disable-next-line selector-class-pattern
    .project-list__chevrons {
      display: none;
    }
  }

  &__wrapper {
    position: relative;
  }

  &__chevrons {
    position: absolute;
    top: $container-padding;
    right: 0;
    left: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 10vw;
    max-height: $max-project-thumb-size;
    pointer-events: none;

    $default-opacity: 0.3;

    @include media-breakpoint-down(md) {
      display: none;
    }

    &__left,
    &__right {
      z-index: 3;
      color: #fff;
      pointer-events: all;

      &::before,
      &::after {
        position: absolute;
        z-index: -1;
        background-color: #000;
      }

      &::before {
        opacity: $default-opacity;
      }

      &:hover::before {
        opacity: $default-opacity + 0.04;
      }

      &:active::after {
        //stylelint-disable-next-line declaration-no-important
        opacity: $default-opacity + 0.12 !important;
      }
    }

    &__right {
      position: absolute;
      right: 0;
    }
  }
}

.no-programs {
  margin-bottom: 25px;
  text-align: center;
}

// when changing tile size, adapt self.column_min and self.column_max in ProjectLoader.js
$program-tile-width: 85px;

.programs {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;

  > .program {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: $program-tile-width;
    margin: 0.35rem;

    > a {

      display: block;
      width: 100%;

      > img {
        max-width: $program-tile-width !important;
        max-height: $program-tile-width;
        object-fit: cover;
      }

      &:hover {
        text-decoration: none;
      }

      .program-name {
        display: inline-block;
        width: 100%;
      }

      > div {
        max-width: 100%;
        font-size: 0.73rem;
      }

      .program-name,
      > div {
        display: inline-flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;

        .project-thumb-icon {
          margin-right: 0.3em;
          font-size: 16px;
        }
      }
    }

  }
}