You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

photos.vue 1.2KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <div class="photos">
  3. <PageHeader>
  4. <h2 class="title">
  5. <span class="icon"><font-awesome-icon icon="images" /></span>
  6. <span>My Photos</span>
  7. </h2>
  8. <h3 class="subtitle">
  9. The place where you can find all your creations.
  10. </h3>
  11. <template v-slot:right>
  12. <button class="button"
  13. @click.prevent="openFolder">
  14. <span class="icon"><font-awesome-icon icon="folder-open" /></span>
  15. <span>Folder</span>
  16. </button>
  17. </template>
  18. </PageHeader>
  19. <div class="photos__content">
  20. <Photo v-for="(file, index) in photos"
  21. :key="index"
  22. :file="file"
  23. data-private />
  24. </div>
  25. </div>
  26. </template>
  27. <script>
  28. import { photos } from '~/modules'
  29. const { shell } = $provider.api
  30. export default {
  31. layout: 'layout--wide',
  32. data: () => ({
  33. p: photos,
  34. }),
  35. computed: {
  36. photos() {
  37. return photos.files
  38. },
  39. },
  40. methods: {
  41. openFolder() {
  42. shell.openPath(photos.folder)
  43. },
  44. },
  45. }
  46. </script>
  47. <style lang="scss" scoped>
  48. .photos {
  49. }
  50. .photos__content {
  51. @apply grid grid-cols-4 gap-6;
  52. @screen md {
  53. @apply grid-cols-3;
  54. }
  55. @screen sm {
  56. @apply grid-cols-2;
  57. }
  58. }
  59. </style>