<commit_before><template>

  <CardLink
    :to="to"
    class="base-card"
  >
    <div>
      <KFixedGrid
        v-if="$slots.topLeft || $slots.topRight"
        numCols="2"
        :style="{ marginBottom: '12px' }"
      >
        <KFixedGridItem span="1">
          <slot name="topLeft"></slot>
        </KFixedGridItem>
        <KFixedGridItem span="1" alignment="right">
          <slot name="topRight"></slot>
        </KFixedGridItem>
      </KFixedGrid>

      <div
        v-if="collectionTitle"
        :style="{ color: $themeTokens.annotation }"
        dir="auto"
        data-test="collectionTitle"
      >
        {{ collectionTitle }}
      </div>

      <h3 class="title">
        <TextTruncatorCss
          dir="auto"
          :text="title"
          :maxLines="2"
        />
      </h3>
    </div>

    <div
      class="progress"
      :style="{ color: $themeTokens.annotation }"
    >
      <slot name="progress">
        <KLabeledIcon
          v-if="inProgressLabel"
          :color="$themeTokens.progress"
          :label="inProgressLabel"
          icon="inProgress"
        />
        <KLabeledIcon
          v-else-if="completedLabel"
          :color="$themeTokens.mastered"
          :label="completedLabel"
          icon="mastered"
        />
      </slot>
    </div>
  </CardLink>

</template>


<script>

  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
  import CardLink from './CardLink.vue';

  /**
   * Common layout for a lesson, quiz and resource cards.
   * Provides `topLeft` and `topRight` slots for top left
   * and top right areas above the title.
   * Provides `progress` slot with default content that
   * can be overriden.
   */
  export default {
    name: 'BaseCard',
    components: {
      TextTruncatorCss,
      CardLink,
    },
    props: {
      /**
       * vue-router link object
       */
      to: {
        type: Object,
        required: true,
      },
      title: {
        type: String,
        required: true,
      },
      collectionTitle: {
        type: String,
        required: false,
        default: '',
      },
      /**
       * Provide when using the default content of `progress` slot.
       */
      completedLabel: {
        type: String,
        required: false,
        default: '',
      },
      /**
       * Provide when using the default content of `progress` slot.
       */
      inProgressLabel: {
        type: String,
        required: false,
        default: '',
      },
    },
  };

</script>


<style lang="scss" scoped>

  $font-size-normal: 16px;
  $font-size-annotation: 14px;

  .base-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: $font-size-annotation;
  }

  .title {
    margin-top: 2px;
    font-size: $font-size-normal;
  }

  .progress {
    display: flex;
    align-items: center;
    height: 18px;
  }

</style><commit_msg>Fix channel card title overflow spacing, which caused some cards to be different heights<commit_after><template>

  <CardLink
    :to="to"
    class="base-card"
  >
    <div>
      <KFixedGrid
        v-if="$slots.topLeft || $slots.topRight"
        numCols="2"
        :style="{ marginBottom: '12px' }"
      >
        <KFixedGridItem span="1">
          <slot name="topLeft"></slot>
        </KFixedGridItem>
        <KFixedGridItem span="1" alignment="right">
          <slot name="topRight"></slot>
        </KFixedGridItem>
      </KFixedGrid>

      <div
        v-if="collectionTitle"
        :style="{ color: $themeTokens.annotation }"
        dir="auto"
        data-test="collectionTitle"
      >
        {{ collectionTitle }}
      </div>

      <h3 class="title">
        <TextTruncatorCss
          dir="auto"
          :text="title"
          :maxLines="2"
        />
      </h3>
    </div>

    <div
      class="progress"
      :style="{ color: $themeTokens.annotation }"
    >
      <slot name="progress">
        <KLabeledIcon
          v-if="inProgressLabel"
          :color="$themeTokens.progress"
          :label="inProgressLabel"
          icon="inProgress"
        />
        <KLabeledIcon
          v-else-if="completedLabel"
          :color="$themeTokens.mastered"
          :label="completedLabel"
          icon="mastered"
        />
      </slot>
    </div>
  </CardLink>

</template>


<script>

  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
  import CardLink from './CardLink.vue';

  /**
   * Common layout for a lesson, quiz and resource cards.
   * Provides `topLeft` and `topRight` slots for top left
   * and top right areas above the title.
   * Provides `progress` slot with default content that
   * can be overriden.
   */
  export default {
    name: 'BaseCard',
    components: {
      TextTruncatorCss,
      CardLink,
    },
    props: {
      /**
       * vue-router link object
       */
      to: {
        type: Object,
        required: true,
      },
      title: {
        type: String,
        required: true,
      },
      collectionTitle: {
        type: String,
        required: false,
        default: '',
      },
      /**
       * Provide when using the default content of `progress` slot.
       */
      completedLabel: {
        type: String,
        required: false,
        default: '',
      },
      /**
       * Provide when using the default content of `progress` slot.
       */
      inProgressLabel: {
        type: String,
        required: false,
        default: '',
      },
    },
  };

</script>


<style lang="scss" scoped>

  $font-size-normal: 16px;
  $font-size-annotation: 14px;

  .base-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: $font-size-annotation;
  }

  .title {
    height: 44px;
    margin-top: 2px;
    font-size: $font-size-normal;
  }

  .progress {
    display: flex;
    align-items: center;
    height: 18px;
  }

</style>
{'fraction_non_alphanumeric': 0.13347921225382933, 'fraction_numerical': 0.0053862986029288, 'mean_word_length': 1.8107852412488175, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 65, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6099550', 'n_tokens_mistral': 1895, 'n_tokens_neox': 1850, 'n_words': 398}