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.

QueueMenu.vue 3.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <div id="queuebar" class="queue">
  3. <section class="queue__section queue__section--running">
  4. <div class="queue__header">
  5. <p class="title">
  6. <span class="icon"><font-awesome-icon icon="running" /></span>
  7. <span>Queue</span>
  8. <span class="separator">·</span>
  9. <span>{{ $nudify.waiting.length }}</span>
  10. </p>
  11. </div>
  12. <div class="queue__content">
  13. <QueuePhoto
  14. v-for="(photo, index) of $nudify.waiting"
  15. :key="index"
  16. :photo="photo" />
  17. </div>
  18. </section>
  19. <section class="queue__section queue__section--pending">
  20. <div class="queue__header">
  21. <p class="title">
  22. <span class="icon"><font-awesome-icon icon="clipboard-list" /></span>
  23. <span>Pending</span>
  24. <span class="separator">·</span>
  25. <span>{{ $nudify.pending.length }}</span>
  26. </p>
  27. </div>
  28. <div class="queue__content">
  29. <QueuePhoto
  30. v-for="(photo, index) of $nudify.pending"
  31. :key="index"
  32. :photo="photo"
  33. data-private />
  34. </div>
  35. </section>
  36. <section class="queue__section queue__section--finished">
  37. <div class="queue__header">
  38. <p class="title">
  39. <span class="icon"><font-awesome-icon icon="clipboard-check" /></span>
  40. <span>Finished</span>
  41. <span class="separator">·</span>
  42. <span>{{ $nudify.finished.length }}</span>
  43. </p>
  44. </div>
  45. <div class="queue__content">
  46. <QueuePhoto
  47. v-for="(photo, index) of $nudify.finished"
  48. :key="index"
  49. :photo="photo"
  50. data-private />
  51. </div>
  52. </section>
  53. </div>
  54. </template>
  55. <script>
  56. export default {
  57. }
  58. </script>
  59. <style lang="scss" scoped>
  60. .queue {
  61. @apply bg-menus relative;
  62. }
  63. .queue__section {
  64. @apply flex flex-col;
  65. height: calc((100vh - 80px) / 3);
  66. &.queue__section--running {
  67. }
  68. &.queue__section--pending {
  69. }
  70. &.queue__section--finished {
  71. }
  72. }
  73. .queue__header {
  74. @apply p-3;
  75. .title {
  76. @apply text-sm font-bold;
  77. }
  78. .icon {
  79. @apply mr-2;
  80. }
  81. .separator {
  82. @apply mx-2;
  83. }
  84. }
  85. .queue__content {
  86. @apply flex-1;
  87. @apply flex flex-wrap;
  88. @apply overflow-y-auto whitespace-no-wrap;
  89. .photo {
  90. @apply w-1/2;
  91. height: 200px;
  92. }
  93. }
  94. /*
  95. .layout__jobbar {
  96. @apply relative flex flex-col;
  97. @apply bg-dark-500 py-2 z-10;
  98. @apply border-l border-dark-100;
  99. }
  100. section {
  101. @apply flex-1 flex flex-col;
  102. @apply overflow-hidden;
  103. height: calc((100vh - 80px) / 3);
  104. &:not(:first-child) {
  105. .section__header {
  106. &::before, &::after {
  107. @apply block border-b;
  108. @apply absolute right-0 pointer-events-none z-0;
  109. content: " ";
  110. left: 100px;
  111. }
  112. &::before {
  113. @apply border-dark-200;
  114. top: 18px;
  115. }
  116. &::after {
  117. @apply border-dark-400;
  118. top: 19px;
  119. }
  120. }
  121. }
  122. .section__header {
  123. @apply px-4 pt-2 text-sm text-white font-semibold;
  124. @apply relative flex items-center;
  125. .icon {
  126. @apply mr-2;
  127. }
  128. .section__title {
  129. @apply flex-1 z-10;
  130. }
  131. }
  132. .section__actions {
  133. @apply flex flex-1 justify-end ml-2 z-10 bg-dark-500;
  134. .button {
  135. @apply ml-2;
  136. }
  137. }
  138. }
  139. .jobs__list {
  140. @apply flex flex-wrap flex-1;
  141. @apply py-2 overflow-y-auto max-h-full;
  142. will-change: scroll-position;
  143. }
  144. */
  145. </style>