create basic modal component

src/App.vue

@@ -19,7 +19,7 @@
                 v-slot="{ item }"
             >
                 <img
-                    :src="`https://picsum.photos/id/${item.uid + 50}/200/200`"
+                    :src="`https://picsum.photos/id/${item.image + 50}/200/200`"
                     alt="item"
                     class="card-img-top img-fluid"
                 >
@@ -29,6 +29,7 @@
                 </div>
             </Cards>
         </div>
+        <Modal/>
     </div>
 </template>
 
@@ -37,10 +38,11 @@ import Table from '@/components/Table';
 import Navbar from '@/components/Navbar';
 import Cards from '@/components/Cards';
 import { mapState } from 'vuex';
+import Modal from '@/components/Modal';
 
 export default {
   name: 'app',
-  components: { Navbar, Table, Cards },
+  components: {Modal, Navbar, Table, Cards },
   computed: mapState(['loadedItems', 'layout'])
 };
 </script>

src/components/Cards.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="row">
-        <div class="col-lg-3 col-xl-3">
+        <div class="col-lg-3 col-xl-2">
             <div class="card bg-dark text-light mb-2" id="filters">
                 <div class="card-body">
                     <h5 class="card-title text-info">Sort & Filter</h5>

src/components/Modal.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="modal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content bg-dark text-light border-secondary">
+                <div class="modal-header">
+                    <h5 class="modal-title">Modal title</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <font-awesome-icon icon="window-close" class="text-light"></font-awesome-icon>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <p>Modal body text goes here.</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'Modal'
+};
+</script>
+
+<style>
+    .modal {
+        background-color: rgba(0,0,0,0.4); /* Transparent dimmed overlay */
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: table !important;
+    }
+
+    .modal.hidden {
+        display: none;
+    }
+
+    .modal .container {
+        display: table-cell;
+        text-align: center;
+        vertical-align: middle;
+        width: 200px;
+    }
+
+    .modal .body {
+        box-shadow: 5px 10px #888888;
+        display: inline-block;
+        background-color: white;
+        border: 1px solid black;
+        padding: 10px;
+    }
+</style>

src/main.js

@@ -9,10 +9,10 @@ import 'bootstrap/dist/js/bootstrap.min.js';
 
 // fontawesome
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList);
+library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 

src/store/index.js

@@ -15,7 +15,7 @@ export default new Vuex.Store({
       { uid: 4, description: 'power supply black', box: 5, image: 62 },
       { uid: 5, description: 'pullover yellow "pesthörnchen"', box: 5, image: 84 },
       { uid: 6, description: '"blue black second skin"', box: 6, image: 72 },
-      { uid: 7, description: '"the bike blog" bottle orange', box: 6, image: 71 },
+      { uid: 7, description: '"the bike blog" bottle orange', box: 6, image: 83 },
       { uid: 8, description: 'tshirt guad3c', box: 6, image: 26 },
       { uid: 9, description: 'power supply dell', box: 6, image: 74 },
       { uid: 10, description: 'blanket green blue', box: 6, image: 25 },