logo

pleroma-fe

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

gallery.vue (4439B)

    

  1. <template>
  2.   <div
  3.     ref="galleryContainer"
  4.     class="Gallery"
  5.     :class="{ '-long': tooManyAttachments && hidingLong }"
  6.   >
  7.     <div class="gallery-rows">
  8.       <div
  9.         v-for="(row, rowIndex) in rows"
  10.         :key="rowIndex"
  11.         class="gallery-row"
  12.         :style="rowStyle(row)"
  13.         :class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
  14.       >
  15.         <div
  16.           class="gallery-row-inner"
  17.           :class="{ '-grid': grid }"
  18.         >
  19.           <Attachment
  20.             v-for="(attachment, attachmentIndex) in row.items"
  21.             :key="attachment.id"
  22.             class="gallery-item"
  23.             :compact="compact"
  24.             :nsfw="nsfw"
  25.             :attachment="attachment"
  26.             :size="size"
  27.             :editable="editable"
  28.             :remove="removeAttachment"
  29.             :shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
  30.             :shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
  31.             :edit="editAttachment"
  32.             :description="descriptions && descriptions[attachment.id]"
  33.             :hide-description="size === 'small' || tooManyAttachments && hidingLong"
  34.             :style="itemStyle(attachment.id, row.items)"
  35.             @setMedia="onMedia"
  36.             @naturalSizeLoad="onNaturalSizeLoad"
  37.           />
  38.         </div>
  39.       </div>
  40.     </div>
  41.     <div
  42.       v-if="tooManyAttachments"
  43.       class="many-attachments"
  44.     >
  45.       <div class="many-attachments-text">
  46.         {{ $t("status.many_attachments", { number: attachments.length }) }}
  47.       </div>
  48.       <div class="many-attachments-buttons">
  49.         <span
  50.           v-if="!hidingLong"
  51.           class="many-attachments-button"
  52.         >
  53.           <button
  54.             class="button-unstyled -link"
  55.             @click="toggleHidingLong(true)"
  56.           >
  57.             {{ $t("status.collapse_attachments") }}
  58.           </button>
  59.         </span>
  60.         <span
  61.           v-if="hidingLong"
  62.           class="many-attachments-button"
  63.         >
  64.           <button
  65.             class="button-unstyled -link"
  66.             @click="toggleHidingLong(false)"
  67.           >
  68.             {{ $t("status.show_all_attachments") }}
  69.           </button>
  70.         </span>
  71.         <span
  72.           v-if="hidingLong"
  73.           class="many-attachments-button"
  74.         >
  75.           <button
  76.             class="button-unstyled -link"
  77.             @click="openGallery"
  78.           >
  79.             {{ $t("status.open_gallery") }}
  80.           </button>
  81.         </span>
  82.       </div>
  83.     </div>
  84.   </div>
  85. </template>
  87. <script src='./gallery.js'></script>
  89. <style lang="scss">
  90. .Gallery {
  91.   .gallery-rows {
  92.     display: flex;
  93.     flex-direction: column;
  94.   }
  96.   .gallery-row {
  97.     position: relative;
  98.     height: 0;
  99.     width: 100%;
  100.     flex-grow: 1;
  102.     .gallery-row-inner {
  103.       position: absolute;
  104.       top: 0;
  105.       left: 0;
  106.       right: 0;
  107.       bottom: 0;
  108.       display: flex;
  109.       flex-flow: row wrap;
  110.       align-content: stretch;
  112.       .gallery-item {
  113.         margin: 0 0.5em 0 0;
  114.         flex-grow: 1;
  115.         height: 100%;
  116.         box-sizing: border-box;
  117.         // to make failed images a bit more noticeable on chromium
  118.         min-width: 2em;
  120.         &:last-child {
  121.           margin: 0;
  122.         }
  123.       }
  125.       &.-grid {
  126.         width: 100%;
  127.         height: auto;
  128.         position: relative;
  129.         display: grid;
  130.         grid-gap: 0.5em;
  131.         grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  133.         .gallery-item {
  134.           margin: 0;
  135.           height: 200px;
  136.         }
  137.       }
  138.     }
  140.     &.-grid,
  141.     &.-minimal {
  142.       height: auto;
  144.       .gallery-row-inner {
  145.         position: relative;
  146.       }
  147.     }
  149.     &:not(:first-child) {
  150.       margin-top: 0.5em;
  151.     }
  152.   }
  154.   &.-long {
  155.     .gallery-rows {
  156.       max-height: 25em;
  157.       overflow: hidden;
  158.       mask:
  159.         linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
  160.         linear-gradient(to top, white, white);
  162.       /* Autoprefixed seem to ignore this one, and also syntax is different */
  163.       mask-composite: xor;
  164.       mask-composite: exclude;
  165.     }
  166.   }
  168.   .many-attachments-text {
  169.     text-align: center;
  170.     line-height: 2;
  171.   }
  173.   .many-attachments-buttons {
  174.     display: flex;
  175.   }
  177.   .many-attachments-button {
  178.     display: flex;
  179.     flex: 1;
  180.     justify-content: center;
  181.     line-height: 2;
  183.     button {
  184.       padding: 0 2em;
  185.     }
  186.   }
  187. }
  188. </style>