logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

link-preview.vue (1790B)

    

  1. <template>
  2.   <div>
  3.     <a
  4.       class="link-preview-card"
  5.       :href="card.url"
  6.       target="_blank"
  7.       rel="noopener"
  8.     >
  9.       <div
  10.         v-if="useImage && imageLoaded"
  11.         class="card-image"
  12.       >
  13.         <img :src="card.image">
  14.       </div>
  15.       <div class="card-content">
  16.         <span class="card-host faint">
  17.           <span
  18.             v-if="censored"
  19.             class="nsfw-alert alert warning"
  20.           >{{ $t('status.nsfw') }}</span>
  21.           {{ card.provider_name }}
  22.         </span>
  23.         <h4 class="card-title">{{ card.title }}</h4>
  24.         <p
  25.           v-if="useDescription"
  26.           class="card-description"
  27.         >{{ card.description }}</p>
  28.       </div>
  29.     </a>
  30.   </div>
  31. </template>
  33. <script src="./link-preview.js"></script>
  35. <style lang="scss">
  36. .link-preview-card {
  37.   display: flex;
  38.   flex-direction: row;
  39.   cursor: pointer;
  40.   overflow: hidden;
  41.   margin-top: 0.5em;
  43.   .card-image {
  44.     flex-shrink: 0;
  45.     width: 120px;
  46.     max-width: 25%;
  48.     img {
  49.       width: 100%;
  50.       height: 100%;
  51.       object-fit: cover;
  52.       border-radius: var(--roundness);
  53.     }
  54.   }
  56.   .card-content {
  57.     max-height: 100%;
  58.     margin: 0.5em;
  59.     display: flex;
  60.     flex-direction: column;
  61.   }
  63.   .card-host {
  64.     font-size: 0.85em;
  65.   }
  67.   .card-description {
  68.     margin: 0.5em 0 0;
  69.     overflow: hidden;
  70.     text-overflow: ellipsis;
  71.     word-break: break-word;
  72.     line-height: 1.2em;
  73.     // cap description at 3 lines, the 1px is to clean up some stray pixels
  74.     // TODO: fancier fade-out at the bottom to show off that it's too long?
  75.     max-height: calc(1.2em * 3 - 1px);
  76.   }
  78.   .nsfw-alert {
  79.     margin: 2em 0;
  80.   }
  82.   color: var(--text);
  83.   border-style: solid;
  84.   border-width: 1px;
  85.   border-radius: var(--roundness);
  86.   border-color: var(--border);
  87. }
  88. </style>