First commit

composer.lock

@@ -594,16 +594,16 @@
         },
         {
             "name": "league/commonmark",
-            "version": "1.6.0",
+            "version": "1.6.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/thephpleague/commonmark.git",
-                "reference": "19a9673b833cc37770439097b381d86cd125bfe8"
+                "reference": "2651c497f005de305c7ba3f232cbd87b8c00ee8c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/thephpleague/commonmark/zipball/19a9673b833cc37770439097b381d86cd125bfe8",
-                "reference": "19a9673b833cc37770439097b381d86cd125bfe8",
+                "url": "https://api.github.com/repos/thephpleague/commonmark/zipball/2651c497f005de305c7ba3f232cbd87b8c00ee8c",
+                "reference": "2651c497f005de305c7ba3f232cbd87b8c00ee8c",
                 "shasum": ""
             },
             "require": {
@@ -691,7 +691,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2021-05-01T19:00:49+00:00"
+            "time": "2021-05-08T16:08:00+00:00"
         },
         {
             "name": "league/flysystem",

public/js/app.js

@@ -24732,6 +24732,81 @@ render._withStripped = true
 
 
 
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/layout/Footer.vue?vue&type=template&id=e7c1e29c&":
+/*!*****************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/layout/Footer.vue?vue&type=template&id=e7c1e29c& ***!
+  \*****************************************************************************************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _vm._m(0)
+}
+var staticRenderFns = [
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("div", { staticClass: "footer" }, [
+      _c("div", { staticClass: "left" }, [
+        _vm._v("\n        © 2021 SearchAndDisplace\n    ")
+      ]),
+      _vm._v(" "),
+      _c("div", { staticClass: "right" })
+    ])
+  }
+]
+render._withStripped = true
+
+
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/layout/Header.vue?vue&type=template&id=a55d1ab8&":
+/*!*****************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/layout/Header.vue?vue&type=template&id=a55d1ab8& ***!
+  \*****************************************************************************************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("div", { staticClass: "header" }, [
+    _c(
+      "div",
+      { staticClass: "left" },
+      [
+        _c("Button", {
+          staticClass: "p-button-text",
+          attrs: { label: "Search and Displace" }
+        })
+      ],
+      1
+    ),
+    _vm._v(" "),
+    _c("div", { staticClass: "right" })
+  ])
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+
 /***/ }),
 
 /***/ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js":
@@ -36954,7 +37029,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var primevue_sidebar__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(primevue_sidebar__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var primevue_orderlist__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! primevue/orderlist */ "./node_modules/primevue/orderlist/index.js");
 /* harmony import */ var primevue_orderlist__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(primevue_orderlist__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _components_Home__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/Home */ "./resources/js/components/Home.vue");
+/* harmony import */ var _layout_Header__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./layout/Header */ "./resources/js/layout/Header.vue");
+/* harmony import */ var _layout_Footer__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./layout/Footer */ "./resources/js/layout/Footer.vue");
+/* harmony import */ var _components_Home__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/Home */ "./resources/js/components/Home.vue");
 __webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
 
 window.Vue = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.common.js");
@@ -36969,12 +37046,14 @@ window.Vue = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.common.
  // Own components
 
 
+
+
 window.Event = new Vue();
 Vue.use(primevue_config__WEBPACK_IMPORTED_MODULE_0___default.a, {
   ripple: true
 });
 Vue.component('Button', primevue_button__WEBPACK_IMPORTED_MODULE_1___default.a).component('Card', primevue_card__WEBPACK_IMPORTED_MODULE_2___default.a).component('Sidebar', primevue_sidebar__WEBPACK_IMPORTED_MODULE_3___default.a).component('OrderList', primevue_orderlist__WEBPACK_IMPORTED_MODULE_4___default.a);
-Vue.component('home', _components_Home__WEBPACK_IMPORTED_MODULE_5__["default"]);
+Vue.component('home', _components_Home__WEBPACK_IMPORTED_MODULE_7__["default"]).component('Header', _layout_Header__WEBPACK_IMPORTED_MODULE_5__["default"]).component('Footer', _layout_Footer__WEBPACK_IMPORTED_MODULE_6__["default"]);
 new Vue({
   el: '#app'
 });
@@ -37090,9 +37169,115 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./resources/sass/app.sass":
+/***/ "./resources/js/layout/Footer.vue":
+/*!****************************************!*\
+  !*** ./resources/js/layout/Footer.vue ***!
+  \****************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _Footer_vue_vue_type_template_id_e7c1e29c___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Footer.vue?vue&type=template&id=e7c1e29c& */ "./resources/js/layout/Footer.vue?vue&type=template&id=e7c1e29c&");
+/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+var script = {}
+
+
+/* normalize component */
+
+var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_1__["default"])(
+  script,
+  _Footer_vue_vue_type_template_id_e7c1e29c___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _Footer_vue_vue_type_template_id_e7c1e29c___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/layout/Footer.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/layout/Footer.vue?vue&type=template&id=e7c1e29c&":
+/*!***********************************************************************!*\
+  !*** ./resources/js/layout/Footer.vue?vue&type=template&id=e7c1e29c& ***!
+  \***********************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Footer_vue_vue_type_template_id_e7c1e29c___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./Footer.vue?vue&type=template&id=e7c1e29c& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/layout/Footer.vue?vue&type=template&id=e7c1e29c&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Footer_vue_vue_type_template_id_e7c1e29c___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Footer_vue_vue_type_template_id_e7c1e29c___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
+/***/ }),
+
+/***/ "./resources/js/layout/Header.vue":
+/*!****************************************!*\
+  !*** ./resources/js/layout/Header.vue ***!
+  \****************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _Header_vue_vue_type_template_id_a55d1ab8___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Header.vue?vue&type=template&id=a55d1ab8& */ "./resources/js/layout/Header.vue?vue&type=template&id=a55d1ab8&");
+/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+var script = {}
+
+
+/* normalize component */
+
+var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_1__["default"])(
+  script,
+  _Header_vue_vue_type_template_id_a55d1ab8___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _Header_vue_vue_type_template_id_a55d1ab8___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/layout/Header.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/layout/Header.vue?vue&type=template&id=a55d1ab8&":
+/*!***********************************************************************!*\
+  !*** ./resources/js/layout/Header.vue?vue&type=template&id=a55d1ab8& ***!
+  \***********************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Header_vue_vue_type_template_id_a55d1ab8___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./Header.vue?vue&type=template&id=a55d1ab8& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/layout/Header.vue?vue&type=template&id=a55d1ab8&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Header_vue_vue_type_template_id_a55d1ab8___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Header_vue_vue_type_template_id_a55d1ab8___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
+/***/ }),
+
+/***/ "./resources/sass/app.scss":
 /*!*********************************!*\
-  !*** ./resources/sass/app.sass ***!
+  !*** ./resources/sass/app.scss ***!
   \*********************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
@@ -37103,13 +37288,13 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ 0:
 /*!*************************************************************!*\
-  !*** multi ./resources/js/app.js ./resources/sass/app.sass ***!
+  !*** multi ./resources/js/app.js ./resources/sass/app.scss ***!
   \*************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(/*! /home/noni/Desktop/Apps/search_and_displace/core/resources/js/app.js */"./resources/js/app.js");
-module.exports = __webpack_require__(/*! /home/noni/Desktop/Apps/search_and_displace/core/resources/sass/app.sass */"./resources/sass/app.sass");
+__webpack_require__(/*! /mnt/Multimedia/Projects/Web/work/Projects/searchanddisplace-core/resources/js/app.js */"./resources/js/app.js");
+module.exports = __webpack_require__(/*! /mnt/Multimedia/Projects/Web/work/Projects/searchanddisplace-core/resources/sass/app.scss */"./resources/sass/app.scss");
 
 
 /***/ })

resources/js/app.js

@@ -12,6 +12,8 @@ import Sidebar from 'primevue/sidebar';
 import OrderList from 'primevue/orderlist';
 
 // Own components
+import Header from './layout/Header';
+import Footer from './layout/Footer';
 import Home from './components/Home';
 
 window.Event = new Vue();
@@ -25,7 +27,9 @@ Vue.component('Button', Button)
     .component('Sidebar', Sidebar)
     .component('OrderList', OrderList);
 
-Vue.component('home', Home);
+Vue.component('home', Home)
+    .component('Header', Header)
+    .component('Footer', Footer);
 
 new Vue({
     el: '#app',

resources/js/layout/Footer.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="footer">
+        <div class="left">
+            &copy; 2021 SearchAndDisplace
+        </div>
+        <div class="right">
+        </div>
+    </div>
+</template>

resources/js/layout/Header.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="header">
+        <!-- Left side of header -->
+        <div class="left">
+            <Button class="p-button-text" label="Search and Displace" />
+        </div>
+
+        <!-- Right side of header -->
+        <div class="right"></div>
+    </div>
+</template>a

resources/sass/_layout.scss

@@ -0,0 +1,60 @@
+@import "variables";
+
+.page-wrapper {
+    flex: 1;
+}
+
+.header {
+    // background: #ffffff;
+    background: $header-background;
+    height: $header-height;
+    padding: 0 2rem;
+    border-bottom: 1px solid #dee2e6;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    color: #495057;
+
+    .left {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-align: center;
+        align-items: center;
+    }
+}
+
+.footer {
+    // background: #ffffff;
+    background: $footer-background;
+    height: $footer-height;
+    border-top: 1px solid #dee2e6;
+    border-bottom: 1px solid #dee2e6;
+    padding: 0 2rem;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+
+    flex-shrink: 0;
+
+    .left {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-align: center;
+        align-items: center;
+    }
+
+    .right {
+        font-size: 0.875rem;
+        color: #6c757d;
+    }
+}
+
+.content {
+    padding: $content-padding;
+}

resources/sass/_variables.scss

@@ -0,0 +1,7 @@
+$header-height: 4rem;
+$header-background: var(--blue-400);
+
+$footer-height: 4rem;
+$footer-background: var(--blue-400);
+
+$content-padding: 25px;

resources/sass/app.scss

@@ -0,0 +1,48 @@
+
+@import '~primeflex/src/_variables';
+@import '~primeflex/src/_grid';
+@import '~primeflex/src/_formlayout';
+@import '~primeflex/src/_display';
+@import '~primeflex/src/_text';
+@import '~primeflex/src/flexbox/_flexbox';
+@import '~primeflex/src/_spacing';
+@import '~primeflex/src/_elevation';
+
+// @import '~primevue/resources/themes/fluent-light/theme.css';
+// @import '~primevue/resources/themes/vela-green/theme.css';
+@import '~primevue/resources/themes/mdc-light-indigo/theme.css';
+@import '~primevue/resources/primevue.min.css';
+@import '~primeicons/primeicons.css';
+
+@import 'layout';
+
+
+body {
+    height: 100%;
+    margin: 0;
+    background: #f8f9fa;
+}
+
+#app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+#nav {
+    padding: 30px;
+
+    a {
+        font-weight: bold;
+        color: #2c3e50;
+
+        &.router-link-exact-active {
+        color: #42b983;
+        }
+    }
+}

resources/views/pages/home.blade.php

@@ -2,6 +2,13 @@
 
 @section('content')
 
-    <home></home>
+<div class="page-wrapper">
+    <Header></Header>
 
+    <div class="content">
+        <home></home>
+    </div>
+</div>
+
+<Footer></Footer>
 @endsection

webpack.mix.js

@@ -12,4 +12,4 @@ const mix = require('laravel-mix');
  */
 
 mix.js('resources/js/app.js', 'public/js')
-    .sass('resources/sass/app.sass', 'public/css');
+    .sass('resources/sass/app.scss', 'public/css');