logo

pleroma-fe

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

dialog_modal.vue (2374B)


  1. <template>
  2. <span
  3. class="dialog-container"
  4. :class="{ 'dark-overlay': darkOverlay, '-center-mobile': mobileCenter }"
  5. @click.self.stop="onCancel()"
  6. >
  7. <div
  8. class="dialog-modal panel panel-default"
  9. @click.stop=""
  10. >
  11. <div class="panel-heading dialog-modal-heading">
  12. <h1 class="title">
  13. <slot name="header" />
  14. </h1>
  15. </div>
  16. <div class="panel-body dialog-modal-content">
  17. <slot name="default" />
  18. </div>
  19. <div class="dialog-modal-footer user-interactions panel-footer">
  20. <slot name="footer" />
  21. </div>
  22. </div>
  23. </span>
  24. </template>
  25. <script src="./dialog_modal.js"></script>
  26. <style lang="scss">
  27. // TODO: unify with other modals.
  28. .dark-overlay {
  29. &::before {
  30. bottom: 0;
  31. content: " ";
  32. display: block;
  33. cursor: default;
  34. left: 0;
  35. position: fixed;
  36. right: 0;
  37. top: 0;
  38. background: rgb(27 31 35 / 50%);
  39. z-index: 2000;
  40. }
  41. }
  42. .dialog-container {
  43. display: grid;
  44. position: fixed;
  45. top: 0;
  46. bottom: 0;
  47. left: 0;
  48. right: 0;
  49. justify-content: center;
  50. align-items: center;
  51. justify-items: center;
  52. }
  53. .dialog-modal.panel {
  54. max-height: 80vh;
  55. max-width: 90vw;
  56. z-index: 2001;
  57. cursor: default;
  58. display: block;
  59. .dialog-modal-heading {
  60. .title {
  61. text-align: center;
  62. }
  63. }
  64. .dialog-modal-content {
  65. margin: 0;
  66. padding: 1rem;
  67. white-space: normal;
  68. text-align: center;
  69. }
  70. .dialog-modal-footer {
  71. margin: 0;
  72. padding: 0.5em;
  73. border-top: 1px solid var(--border);
  74. display: grid;
  75. justify-content: end;
  76. grid-gap: 0.5em;
  77. grid-template-columns: min-content;
  78. grid-auto-columns: min-content;
  79. grid-auto-flow: column dense;
  80. height: auto;
  81. button {
  82. width: auto;
  83. white-space: nowrap;
  84. padding-left: 2em;
  85. padding-right: 2em;
  86. }
  87. }
  88. }
  89. #modal.-mobile {
  90. .dialog-container {
  91. justify-content: stretch;
  92. align-items: end;
  93. justify-items: stretch;
  94. &.-center-mobile {
  95. align-items: center;
  96. }
  97. }
  98. .dialog-modal.panel {
  99. min-width: 100vw;
  100. }
  101. .dialog-modal-footer {
  102. flex-direction: column;
  103. justify-content: flex-end;
  104. grid-template-columns: 1fr;
  105. grid-auto-columns: none;
  106. grid-auto-rows: auto;
  107. grid-auto-flow: row dense;
  108. button {
  109. grid-column: 1;
  110. height: 3em;
  111. }
  112. }
  113. }
  114. </style>