logo

pleroma-fe

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

bookmark_folder_card.vue (2127B)

    

  1. <template>
  2.   <div
  3.     v-if="allBookmarks"
  4.     class="bookmark-folder-card"
  5.   >
  6.     <router-link
  7.       :to="{ name: 'bookmarks' }"
  8.       class="bookmark-folder-name"
  9.     >
  10.       <span class="icon">
  11.         <FAIcon
  12.           fixed-width
  13.           class="fa-scale-110 menu-icon"
  14.           icon="bookmark"
  15.         />
  16.       </span>{{ $t('nav.all_bookmarks') }}
  17.     </router-link>
  18.   </div>
  19.   <div
  20.     v-else
  21.     class="bookmark-folder-card"
  22.   >
  23.     <router-link
  24.       :to="{ name: 'bookmark-folder', params: { id: folder.id } }"
  25.       class="bookmark-folder-name"
  26.     >
  27.       <img
  28.         v-if="folder.emoji_url"
  29.         class="iconEmoji iconEmoji-image"
  30.         :src="folder.emoji_url"
  31.         :alt="folder.emoji"
  32.         :title="folder.emoji"
  33.       >
  34.       <span
  35.         v-else-if="folder.emoji"
  36.         class="iconEmoji"
  37.       >
  38.         <span>
  39.           {{ folder.emoji }}
  40.         </span>
  41.       </span>
  42.       <span
  43.         v-else-if="firstLetter"
  44.         class="icon iconLetter fa-scale-110"
  45.       >{{ firstLetter }}</span>{{ folder.name }}
  46.     </router-link>
  47.     <router-link
  48.       :to="{ name: 'bookmark-folder-edit', params: { id: folder.id } }"
  49.       class="button-folder-edit"
  50.     >
  51.       <FAIcon
  52.         class="fa-scale-110 fa-old-padding"
  53.         icon="ellipsis-h"
  54.       />
  55.     </router-link>
  56.   </div>
  57. </template>
  59. <script src="./bookmark_folder_card.js"></script>
  61. <style lang="scss">
  62. .bookmark-folder-card {
  63.   display: flex;
  64.   align-items: center;
  65. }
  67. a.bookmark-folder-name {
  68.   display: flex;
  69.   align-items: center;
  70.   flex-grow: 1;
  72.   .icon,
  73.   .iconLetter,
  74.   .iconEmoji {
  75.     display: inline-block;
  76.     height: 2.5rem;
  77.     width: 2.5rem;
  78.     margin-right: 0.5rem;
  79.   }
  81.   .icon,
  82.   .iconLetter {
  83.     font-size: 1.5rem;
  84.     line-height: 2.5rem;
  85.     text-align: center;
  86.   }
  88.   .iconEmoji {
  89.     text-align: center;
  90.     object-fit: contain;
  91.     vertical-align: middle;
  93.     > span {
  94.       font-size: 1.5rem;
  95.       line-height: 2.5rem;
  96.     }
  97.   }
  99.   img.iconEmoji {
  100.     padding: 0.25em;
  101.     box-sizing: border-box;
  102.   }
  103. }
  105. .bookmark-folder-name,
  106. .button-folder-edit {
  107.   margin: 0;
  108.   padding: 1em;
  109.   color: var(--link);
  110. }
  111. </style>