Преглед изворни кода

Use a more mobile friendly Close button for modal

Bubka пре 4 година
родитељ
комит
eafff6c17e
1 измењених фајлова са 16 додато и 11 уклоњено
  1. 16 11
      resources/js/components/Modal.vue

+ 16 - 11
resources/js/components/Modal.vue

@@ -1,18 +1,23 @@
 <template>
     <div class="modal modal-otp" v-bind:class="{ 'is-active': isActive }">
-      <div class="modal-background" @click.stop="closeModal"></div>
-      <div class="modal-content">
-        <section class="section">
-            <div class="columns is-centered">
-                <div class="column is-three-quarters">
-                    <div class="box has-text-centered has-background-black-ter is-shadowless">
-                        <slot></slot>
+        <div class="modal-background" @click.stop="closeModal"></div>
+        <div class="modal-content">
+            <section class="section">
+                <div class="columns is-centered">
+                    <div class="column is-three-quarters">
+                        <div class="box has-text-centered has-background-black-ter is-shadowless">
+                            <slot></slot>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </section>
-      </div>
-      <button class="modal-close is-large" aria-label="close" @click.stop="closeModal"></button>
+            </section>
+        </div>
+        <div class="fullscreen-footer">
+            <!-- Close button -->
+            <label class="button is-dark is-rounded" @click.stop="closeModal">
+                {{ $t('commons.close') }}
+            </label>
+        </div>
     </div>
 </template>