<commit_before><script lang="coffee">
import prettyBytes from 'pretty-bytes'
export default
  props:
    attachment: Object

  data: ->
    backgroundSize: 'contain'
    backgroundPosition: 'center'

  mounted: ->
    # @setBackgroundSize()

  methods:
    prettifyBytes: (s) -> prettyBytes(s)
    setBackgroundSize: ->
      return unless @attachment.preview_url
      url = @attachment.preview_url
      img = new Image();
      that = @
      img.onload = ->
        if (Math.abs(@width - @height) < @width/3)
          that.backgroundSize = 'contain'
          that.backgroundPosition = 'center'
        else
          that.backgroundSize = 'cover'
          that.backgroundPosition = '0 5%'
      img.src = @attachment.preview_url

  watch:
    'attachment.preview_url': 'setBackgroundSize'
</script>
<template lang="pug">
v-card.mt-3(outlined).attachment-list-item-link
  a(:href="attachment.download_url" target="_blank")
    v-card-title
      v-icon.mr-2(small) mdi-{{attachment.icon}}
      span.text--secondary
        |{{ attachment.filename }}
        space
        span.text-caption
          |{{ prettifyBytes(attachment.byte_size) }}
    .attachment-list-item-image.mb-2(v-if="attachment.preview_url" :style="{'background-image': 'url('+attachment.preview_url+')', 'background-size': backgroundSize, 'background-position': backgroundPosition}")
</template>

<style lang="sass">
.attachment-list-item-link:hover
  background-color: #ededed
<commit_msg>fix css for attachment list item<commit_after><script lang="coffee">
import prettyBytes from 'pretty-bytes'
export default
  props:
    attachment: Object

  data: ->
    backgroundSize: 'contain'
    backgroundPosition: 'center'

  mounted: ->
    # @setBackgroundSize()

  methods:
    prettifyBytes: (s) -> prettyBytes(s)
    setBackgroundSize: ->
      return unless @attachment.preview_url
      url = @attachment.preview_url
      img = new Image();
      that = @
      img.onload = ->
        if (Math.abs(@width - @height) < @width/3)
          that.backgroundSize = 'contain'
          that.backgroundPosition = 'center'
        else
          that.backgroundSize = 'cover'
          that.backgroundPosition = '0 5%'
      img.src = @attachment.preview_url

  watch:
    'attachment.preview_url': 'setBackgroundSize'
</script>
<template lang="pug">
v-card.mt-3(outlined).attachment-list-item-link
  a(:href="attachment.download_url" target="_blank")
    v-card-title
      v-icon.mr-2(small) mdi-{{attachment.icon}}
      span.text--secondary
        |{{ attachment.filename }}
        space
        span.text-caption
          |{{ prettifyBytes(attachment.byte_size) }}
    .attachment-list-item-image.mb-2(v-if="attachment.preview_url" :style="{'background-image': 'url('+attachment.preview_url+')', 'background-size': backgroundSize, 'background-position': backgroundPosition}")
</template>

<style lang="sass">
.attachment-list-item-link
  .v-card__title
    word-break: break-word
    display: block
    
.attachment-list-item-link:hover
  background-color: #ededed

{'fraction_non_alphanumeric': 0.14173228346456693, 'fraction_numerical': 0.003937007874015748, 'mean_word_length': 3.1036339165545086, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1686158', 'n_tokens_mistral': 941, 'n_tokens_neox': 926, 'n_words': 169}