Changed root alias from ~ to @ in the client

client/src/components/global/loader.vue

@@ -23,88 +23,88 @@ export default {
 
 <style scoped lang="scss">
 .lds-roller {
-    display: inline-block;
-    position: relative;
-    width: 80px;
-    height: 80px;
-    div {
-        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-        transform-origin: 40px 40px;
-        &:after {
-            content: "";
-            display: block;
-            position: absolute;
-            width: 7px;
-            height: 7px;
-            border-radius: 50%;
-            background: var(--primary);
-            margin: -4px 0 0 -4px;
-        }
-        &:nth-child(1) {
-            animation-delay: -0.036s;
-            &:after {
-                top: 63px;
-                left: 63px;
-            }
-        }
-        &:nth-child(2) {
-            animation-delay: -0.072s;
-            &:after {
-                top: 68px;
-                left: 56px;
-            }
-        }
-        &:nth-child(3) {
-            animation-delay: -0.108s;
-            &:after {
-                top: 71px;
-                left: 48px;
-            }
-        }
-        &:nth-child(4) {
-            animation-delay: -0.144s;
-            &:after {
-                top: 72px;
-                left: 40px;
-            }
-        }
-        &:nth-child(5) {
-            animation-delay: -0.18s;
-            &:after {
-                top: 71px;
-                left: 32px;
-            }
-        }
-        &:nth-child(6) {
-            animation-delay: -0.216s;
-            &:after {
-                top: 68px;
-                left: 24px;
-            }
-        }
-        &:nth-child(7) {
-            animation-delay: -0.252s;
-            &:after {
-                top: 63px;
-                left: 17px;
-            }
-        }
-        &:nth-child(8) {
-            animation-delay: -0.288s;
-            &:after {
-                top: 56px;
-                left: 12px;
-            }
-        }
-
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+  div {
+    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    transform-origin: 40px 40px;
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: var(--primary);
+      margin: -4px 0 0 -4px;
     }
+    &:nth-child(1) {
+      animation-delay: -0.036s;
+      &:after {
+        top: 63px;
+        left: 63px;
+      }
+    }
+    &:nth-child(2) {
+      animation-delay: -0.072s;
+      &:after {
+        top: 68px;
+        left: 56px;
+      }
+    }
+    &:nth-child(3) {
+      animation-delay: -0.108s;
+      &:after {
+        top: 71px;
+        left: 48px;
+      }
+    }
+    &:nth-child(4) {
+      animation-delay: -0.144s;
+      &:after {
+        top: 72px;
+        left: 40px;
+      }
+    }
+    &:nth-child(5) {
+      animation-delay: -0.18s;
+      &:after {
+        top: 71px;
+        left: 32px;
+      }
+    }
+    &:nth-child(6) {
+      animation-delay: -0.216s;
+      &:after {
+        top: 68px;
+        left: 24px;
+      }
+    }
+    &:nth-child(7) {
+      animation-delay: -0.252s;
+      &:after {
+        top: 63px;
+        left: 17px;
+      }
+    }
+    &:nth-child(8) {
+      animation-delay: -0.288s;
+      &:after {
+        top: 56px;
+        left: 12px;
+      }
+    }
+  }
 }
+
 @keyframes lds-roller {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 </style>

client/src/components/spells/add-spell-card.vue

@@ -73,7 +73,7 @@
 
 <script>
 // API
-import { RepositoryFactory } from "~/api/repositories"
+import { RepositoryFactory } from "@/api/repositories"
 
 const Spells = RepositoryFactory.get('spells')
 const Schools = RepositoryFactory.get('schools')

client/src/components/spells/edit-spell-card.vue

@@ -69,7 +69,7 @@
 
 <script>
 // API
-import { RepositoryFactory } from "~/api/repositories"
+import { RepositoryFactory } from "@/api/repositories"
 const Spells = RepositoryFactory.get('spells')
 const Schools = RepositoryFactory.get('schools')
 const Variables = RepositoryFactory.get('variables')

client/src/components/spells/spell-card.vue

@@ -42,11 +42,11 @@
                 placement="bottom"
                 title="Description copiée !"
                 class="small text-muted mt-2">
-                <span style="white-space: pre-wrap;">{{spell.description}}</span>
+                <span class="prewrap">{{spell.description}}</span>
             </div>
 
             <div class="mt-2">
-                <div class="font-weight-bold d-inline-block"><span>Coût </span>{{spell.cost}}</div>
+                <div class="font-weight-bold d-inline-block"><span>Coût : </span>{{spell.cost}}</div>
                 <div v-if="spell.variables.length>0" class="small d-inline-block">, où&nbsp;:</div>
                 <div class=small>
                     <span v-for="(variable,index) in spell.variables" :key="index">
@@ -72,7 +72,7 @@
 
 <script>
 // API
-import { RepositoryFactory } from "~/api/repositories"
+import { RepositoryFactory } from "@/api/repositories"
 const Spells = RepositoryFactory.get('spells')
 
 export default {

client/src/pages/schools/single-school-page.vue

@@ -8,7 +8,7 @@
 
 <script>
 // API
-import { RepositoryFactory } from "~/api/repositories";
+import { RepositoryFactory } from "@/api/repositories";
 const Schools = RepositoryFactory.get('schools');
 
 import SpellsList from "~/components/spells/spells-list";

client/src/pages/spells/single-spell-page.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="container-fluid p-4" id="spell-container">
     <h1 class="display-3 font-display mb-3">{{ spell.name }}</h1>
-    <p>{{ spell.description }}</p>  </div>
+    <p class="prewrap">{{ spell.description }}</p>  </div>
 </template>
 
 <script>
 // API
-import { RepositoryFactory } from "~/api/repositories";
+import { RepositoryFactory } from "@/api/repositories";
 const Spells = RepositoryFactory.get('spells');
 
 export default {
   name: 'single-spell-page',
   metaInfo() {
     return {
-      titleTemplate: `%s - ${this.spell.name}`,
+      titleTemplate: this.spell.name ? `%s - ${this.spell.name}` : '%s',
     }
   },
   data() {

client/src/pages/spells/spells-page.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import SpellsList from "~/components/spells/spells-list"
+import SpellsList from "@/components/spells/spells-list.vue";
 
 export default {
   name: 'spells-page',

client/src/routes.js

@@ -3,19 +3,19 @@ import VueRouter from 'vue-router'
 import store from './store'
 
 // Pages
-import Index from "~/pages/index-page"
+import Index from "@/pages/index-page"
 
-  import Spells from "~/pages/spells/spells-page"
-  import SpellSingle from "~/pages/spells/single-spell-page"
+  import Spells from "@/pages/spells/spells-page"
+  import SpellSingle from "@/pages/spells/single-spell-page"
 
   import Schools from "./pages/schools/schools-page"
-  import SchoolSingle from "~/pages/schools/single-school-page"
+  import SchoolSingle from "@/pages/schools/single-school-page"
 
   import Timeline from "./pages/timelines/timeline-page"
   
-  import Profile from "~/pages/user/profile-page"
-  import Login from "~/pages/user/login-page"
-  import Register from "~/pages/user/register-page"
+  import Profile from "@/pages/user/profile-page"
+  import Login from "@/pages/user/login-page"
+  import Register from "@/pages/user/register-page"
 
 // Routes
 const routes = [