- Fixed masonry setup, need to npm install

2020-06-03 19:27:43 +02:00
parent 966804efe1
commit 5a0ebf078b
9 changed files with 161 additions and 127 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2399,6 +2399,11 @@
      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
      "dev": true
    },
+    "bootstrap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
+      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+    },
    "brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4031,6 +4036,11 @@
        "minimalistic-assert": "^1.0.0"
      }
    },
+    "desandro-matches-selector": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
+      "integrity": "sha1-cXvu1NwT59jzdi9wem1YpndCGOE="
+    },
    "destroy": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -4796,6 +4806,11 @@
      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
      "dev": true
    },
+    "ev-emitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
+      "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
+    },
    "event-pubsub": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/event-pubsub/-/event-pubsub-4.3.0.tgz",
@@ -5231,6 +5246,14 @@
        "locate-path": "^3.0.0"
      }
    },
+    "fizzy-ui-utils": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
+      "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
+      "requires": {
+        "desandro-matches-selector": "^2.0.0"
+      }
+    },
    "flat-cache": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
@@ -5402,7 +5425,8 @@
        "ansi-regex": {
          "version": "2.1.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
@@ -5423,12 +5447,14 @@
        "balanced-match": {
          "version": "1.0.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@@ -5443,17 +5469,20 @@
        "code-point-at": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
@@ -5570,7 +5599,8 @@
        "inherits": {
          "version": "2.0.4",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "ini": {
          "version": "1.3.5",
@@ -5582,6 +5612,7 @@
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -5596,6 +5627,7 @@
          "version": "3.0.4",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@@ -5608,6 +5640,7 @@
          "version": "2.9.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.2",
            "yallist": "^3.0.0"
@@ -5626,6 +5659,7 @@
          "version": "0.5.1",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "dependencies": {
            "minimist": {
              "version": "1.2.5",
@@ -5719,7 +5753,8 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
@@ -5731,6 +5766,7 @@
          "version": "1.4.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@@ -5817,7 +5853,8 @@
        "safe-buffer": {
          "version": "5.1.2",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@@ -5853,6 +5890,7 @@
          "version": "1.0.2",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@@ -5872,6 +5910,7 @@
          "version": "3.0.1",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@@ -5915,12 +5954,14 @@
        "wrappy": {
          "version": "1.0.2",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "yallist": {
          "version": "3.1.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        }
      }
    },
@@ -6022,6 +6063,11 @@
      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
      "dev": true
    },
+    "get-size": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
+      "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q=="
+    },
    "get-stdin": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
@@ -6591,6 +6637,14 @@
      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
      "dev": true
    },
+    "imagesloaded": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/imagesloaded/-/imagesloaded-4.1.4.tgz",
+      "integrity": "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==",
+      "requires": {
+        "ev-emitter": "^1.0.0"
+      }
+    },
    "import-cwd": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -7536,6 +7590,15 @@
        "object-visit": "^1.0.0"
      }
    },
+    "masonry-layout": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz",
+      "integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==",
+      "requires": {
+        "get-size": "^2.0.2",
+        "outlayer": "^2.1.0"
+      }
+    },
    "md5.js": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -8519,6 +8582,16 @@
        "os-tmpdir": "^1.0.0"
      }
    },
+    "outlayer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
+      "integrity": "sha1-KYY7beEOpdrf/8rfoNcokHOH6aI=",
+      "requires": {
+        "ev-emitter": "^1.0.0",
+        "fizzy-ui-utils": "^2.0.0",
+        "get-size": "^2.0.2"
+      }
+    },
    "p-finally": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -8751,7 +8824,8 @@
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
-      "dev": true
+      "dev": true,
+      "optional": true
    },
    "pify": {
      "version": "4.0.1",
@@ -8792,6 +8866,11 @@
        "ts-pnp": "^1.1.6"
      }
    },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
    "portfinder": {
      "version": "1.0.26",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
@@ -11963,6 +12042,16 @@
        }
      }
    },
+    "vue-masonry": {
+      "version": "0.11.8",
+      "resolved": "https://registry.npmjs.org/vue-masonry/-/vue-masonry-0.11.8.tgz",
+      "integrity": "sha512-O+T+3zUghbKpjc+5aubXr8Kg1h9P334+Or9euYyXsQYa3mtScUqZFI6A16BijR9v4hYdtKksuPzU0mQplUvhDA==",
+      "requires": {
+        "imagesloaded": "4.1.4",
+        "masonry-layout": "^4.2.2",
+        "vue": "^2.0.0"
+      }
+    },
    "vue-router": {
      "version": "3.1.6",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
--- a/client/package.json
+++ b/client/package.json
@@ -28,9 +28,12 @@
    },
    "dependencies": {
        "axios": "^0.19.2",
+        "bootstrap": "^4.5.0",
        "core-js": "^3.6.4",
        "jquery": "^3.5.1",
-        "vue": "^2.6.11"
+        "popper.js": "^1.16.1",
+        "vue": "^2.6.11",
+        "vue-masonry": "^0.11.8"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.2.0",
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -6,18 +6,15 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>img/favicon.ico">
    <title>Spellsaurus</title>
-    <link rel="stylesheet" href="<%= BASE_URL %>libs/bootstrap.min.css">
-    <script src="<%= BASE_URL %>libs/jquery-3.3.1.min.js"></script>
-    <script src="<%= BASE_URL %>libs/popper.min.js"></script>
-    <script src="<%= BASE_URL %>libs/bootstrap.min.js"></script>
    <link rel="stylesheet" href="<%= BASE_URL %>libs/style.css">
+    <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
+
    <div id="srs"></div>
-    <!-- built files will be auto injected -->
-    <script>console.log("test");console.log(window.$);</script>
+
  </body>
 </html>
--- a/client/src/components/global/navbar/navbar.vue
+++ b/client/src/components/global/navbar/navbar.vue
@@ -1,26 +1,19 @@
 <template>
-  <div class="sticky-top">
-    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
-      <a class="navbar-brand font-display font-weight-700" href="#">Auracle</a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav mr-auto" v-if="links.length != 0">
-          <li class="nav-item" v-for="(link, index) in links" :key="index">
-            <router-link v-bind:to="link.url" class="nav-link">{{ link.text }}</router-link>
-          </li>
-        </ul>
-      </div>
-    </nav>
-  </div>
-    <!--<nav class="navbar navbar-dark">
-        <ul v-if="links.length != 0">
-            <li v-for="(link, index) in links" :key="index">
-                <router-link v-bind:to="link.url">{{ link.text }}</router-link>
-            </li>
-        </ul>
-    </nav>-->
+    <div class="sticky-top">
+        <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
+            <a class="navbar-brand font-display font-weight-700" href="#">Auracle</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav mr-auto" v-if="links.length != 0">
+                    <li class="nav-item" v-for="(link, index) in links" :key="index">
+                        <router-link v-bind:to="link.url" class="nav-link">{{ link.text }}</router-link>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+    </div>
 </template>

 <script>
--- a/client/src/components/spells/spell-card.vue
+++ b/client/src/components/spells/spell-card.vue
@@ -1,67 +1,18 @@
 <template>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 grid-item grid-sizer">
-      <div class="bg-white p-4 rounded text-dark border-primary shadow-sm" style="border-left:4px solid;">
-        <div class="h3 font-display font-weight-bold text-wrap word-break line-height-100" :title="name"><a class="text-decoration-none text-primary" href="/spell/XXX">{{name}}</a></div>
-        <div class="font-weight-700 text-muted d-inline-block">Niveau {{level}}</div> <div class="text-muted d-inline-block">· <span v-for="(school, index) in schools" :key="index"><span v-if="index!=0">, </span>{{school.name}}</span></div>
-        <div class="small text-muted font-italic">{{description|truncate(256,"…")}}</div>
-      </div>
-    </div>
-    <!--<article class="spell-card">
-        <div class="content">
-            <header>
-                <h3>{{ name }}</h3>
-            </header>
-            <section class="casting-header">
-                <div class="casting-infos">
-                    <div class="type">
-                        <div class="level">
-                            <div class="label">
-                                <span>LV.</span>
-                                <br>
-                                <span>MIN</span>
-                            </div>
-                            <var>{{ level }}</var>
-                        </div>
-                        <ul class="schools">
-                            <li v-for="(school, index) in schools" :key="index">
-                                {{ school.name }}
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="cost">
-                        <span class="label">Malus</span>
-                        <var>{{ cost }}</var>
-                    </div>
-                    <div class="charge">
-                        <span class="label">Charge</span>
-                        <var>{{ charge }}</var>
-                    </div>
-                </div>
-                <div class="casting-ingredients">
-                    <p class="title">Nécessite :</p>
-                    <p class="content">
-                        <span v-for="(ingredient, index) in ingredients" :key="index">
-                            {{ ingredient.name }}<span v-if="index != Object.keys(ingredients).length - 1">, </span>
-                        </span>
-                    </p>
-                </div>
-            </section>
-            <hr>
-            <section class="spell-description">
-                <p>{{ description }}</p>
-            </section>
-            <hr>
-            <footer v-if="variables">
-                <div class="label">Variables</div>
-                <div class="variables">
-                    <div v-for="(variable, index) in variables" :key="index" class="xyz">
-                        <span>{{ variable.name }}</span>
-                        <var>{{ variable.description }}</var>
-                    </div>
-                </div>
-            </footer>
+        <div class="bg-white p-4 rounded text-dark border-primary shadow-sm" style="border-left:4px solid;">
+            <div class="h3 font-display font-weight-bold text-wrap word-break line-height-100" :title="name">
+                <a class="text-decoration-none text-primary" href="/spell/XXX">{{name}}</a>
+            </div>
+            <div class="font-weight-700 text-muted d-inline-block">Niveau {{level}}</div>
+            <div class="text-muted d-inline-block">·
+                <span v-for="(school, index) in schools" :key="index">
+                    <span v-if="index!=0">,
+                </span>{{school.name}}</span>
+            </div>
+            <div class="small text-muted font-italic">{{description|truncate(256,"…")}}</div>
        </div>
-    </article>-->
+    </div>
 </template>

 <script>
@@ -92,4 +43,4 @@ export default {

 </script>

-<style lang="scss"></style>
+<style lang="scss" scoped></style>
--- a/client/src/components/spells/spells-list.vue
+++ b/client/src/components/spells/spells-list.vue
@@ -1,13 +1,13 @@
 <template>
-    <div class="row grid">
-        <spell-card v-for="(spell, index) in spells" :key="index" v-bind="spell"/>
+    <div v-masonry item-selector=".spell-card" class="row spells-list">
+        <spell-card v-masonry-tile class="spell-card" v-for="(spell, index) in spells" :key="index" v-bind="spell"/>
    </div>
 </template>

 <script>
-
 // Components
 import spellcard from "./spell-card"
+
 // API
 import { RepositoryFactory } from "../../../api/repositories"
 const spellsRepository = RepositoryFactory.get('spells')
@@ -26,6 +26,8 @@ export default {
    created() {
        this.computeSpells()
    },
+    mounted() {
+    },
    methods: {
        async fetchSpells() {
            const { data } = await spellsRepository.getSpells()
@@ -43,4 +45,8 @@ export default {

 </script>

-<style lang="scss"></style>
+<style lang="scss">
+    .spells-list {
+        animation: none !important;
+    }
+</style>
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,13 +1,26 @@
+// Core
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from './app.vue'

+import { VueMasonryPlugin } from 'vue-masonry';
+
+// Router
 import routes from './routes'

-window.$ = window.jQuery = require('jquery');
+// Jquery
+import jquery from 'jquery'
+window.$ = jquery
+window.jquery = jquery
+
+// Bootstrap
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap/dist/js/bootstrap.js'

 Vue.config.productionTip = false
 Vue.use(VueRouter)
+Vue.use(VueMasonryPlugin)
+

 var filter = function(text, length, clamp){
    clamp = clamp || '...';
--- a/client/src/pages/spells-page.vue
+++ b/client/src/pages/spells-page.vue
@@ -6,17 +6,11 @@

 <script>
  import spellslist from "../components/spells/spells-list"
+
  export default {
    name: 'spells',
    components: {
-      'spell-list': spellslist,
-    },
-    mounted(){
-      window.$(".grid").masonry({
-        itemSelector:".grid-item",
-        columnWidth:".grid-sizer",
-        percentPosition: true
-      });
+        'spell-list': spellslist,
    }
  }
 </script>
--- a/client/vue.config.js
+++ b/client/vue.config.js
@@ -1,14 +1,2 @@
 module.exports = {
-    css: {
-        loaderOptions: {
-            sass: {
-                prependData: `
-                @import "@/assets/scss/_global.scss";
-                @import "@/assets/scss/_variables.scss";
-                @import "@/assets/scss/_mixins.scss";
-                @import "@/assets/scss/_fonts.scss";
-                `
-            }
-        }
-    }
 };