Modal improvements

src/components/Modal.vue

@@ -4,59 +4,48 @@
             <slot />
         </div>
 
-        <div :class="['overlay', { show }]" @click="close">
+        <div :class="['overlay', { show, confirm }]" @click="close">
-            <div
+            <div :class="['modal-content', { large, confirm }]" @click.stop>
-                :class="['modal-content', { large, confirm, padded }]"
-                @click.stop
-            >
                 <header :class="{ fixed: !title }">
                     <h2 v-if="title">{{ title }}</h2>
 
-                    <button :class="closeButtonClass" @click="close">
+                    <button class="secondary small" @click="close">
                         <i class="fas fa-times" />
                     </button>
                 </header>
 
-                <section>
+                <main :class="{ padded }">
-                    <p v-if="message">{{ message }}</p>
+                    <span v-if="confirm && message">{{ message }}</span>
-
+                    <slot name="content" v-else-if="show" />
-                    <slot name="content" v-if="show" />
+                </main>
-
-                    <div :class="{ actions: actionText }">
-                        <button class="small info" @click="close" v-if="showClose">
-                            {{ closeText }}
-                        </button>
 
+                <footer>
                     <button
-                            v-if="actionText"
+                        v-if="actionText && confirm"
-                            class="small primary"
+                        :class="actionButtonClass"
                         :disabled="actionDisabled"
                         @click="handleAction"
                     >
                         {{ actionText }}
                     </button>
-                    </div>
+
-                </section>
+                    <slot v-else name="footer" />
+                </footer>
+
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 export default {
     props: {
         actionText: String,
         title: String,
         message: String,
-        showClose: {
+        actionButtonClass: {
-            type: Boolean,
-            default: false,
-        },
-        closeText: {
             type: String,
-            default: 'Cancel',
+            default: 'primary',
         },
         actionDisabled: {
             type: Boolean,
@@ -74,20 +63,9 @@ export default {
     },
 
     computed: {
-        ...mapState(['galleryOpen']),
-
         routeName() {
             return this.$route.name;
         },
-
-        closeButtonClass() {
-            return [
-                { fixed: !this.title },
-                'small',
-                'secondary',
-                'close-button',
-            ];
-        },
     },
 
     watch: {
@@ -116,10 +94,10 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import "~styles/styles";
+    @import "~styles/styles";
 
-.overlay {
+    .overlay {
-    background: rgba(0, 0, 0, 0.6);
+        background: rgba(0, 0, 0, 0.8);
         cursor: pointer;
         height: 100%;
         left: 0;
@@ -137,10 +115,19 @@ export default {
             transition: all 100ms linear;
             opacity: 1;
         }
-}
 
-.modal-content {
+        &.confirm {
-    position: relative;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+
+            @media($small) {
+                align-items: flex-end;
+            }
+        }
+    }
+
+    .modal-content {
         background: var(--modal-background);
         color: var(--modal-text-color);
         height: auto;
@@ -152,6 +139,17 @@ export default {
         padding: 0;
         border-radius: $border-radius;
         cursor: default;
+        display: flex;
+        flex-direction: column;
+
+        @media($small) {
+            border-radius: 0;
+            margin: 0;
+            height: 100%;
+            max-height: 100vh;
+            height: 100vh;
+            width: 100vw;
+        }
 
         &.large {
             width: 780px;
@@ -163,42 +161,26 @@ export default {
             }
         }
 
-    &.padded {
-        > section {
-            padding: 0 $gp $gp;
-        }
-    }
-
         &.confirm {
-        @media($small) {
             height: auto;
+            max-width: calc(100vw - #{$gp * 4});
             border-radius: $border-radius;
-        }
-    }
 
             @media($small) {
-        border-radius: 0;
+                margin-bottom: $gp * 2;
-        margin: 0;
+            }
-        height: auto;
+        }
-        max-height: 100vh;
-        height: 100vh;
-        width: 100vw;
     }
-}
 
-header {
+    header {
         display: flex;
-    top: 0;
+        padding: $gp;
-    padding: $gp / 2 $gp;
         z-index: 1;
         align-items: center;
         justify-content: space-between;
-    min-height: 30px;
 
         @media($small) {
-        padding: $gp * 2 $gp $gp;
             right: 0;
-        margin-top: $gp;
         }
 
         &.fixed {
@@ -208,19 +190,20 @@ header {
             margin: 0;
             z-index: 99999999;
         }
-}
-
-.close-button {
-    display: none;
-
-    @media($small) {
-        display: block;
     }
-}
 
-.actions {
+    main {
-    display: grid;
+        &.padded {
-    grid-gap: $gp;
+            padding: 0 $gp;
-    grid-template-columns: auto auto;
+        }
-}
+
+        flex-grow: 1;
+        max-height: calc(100% - 144px);
+        overflow: auto;
+    }
+
+    footer {
+        padding: $gp;
+        margin-top: auto;
+    }
 </style>