classes

docs/.vuepress/theme/components/Breadcrumb.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-breadcrumbs :items="bread">
+    <template v-slot:item="{ item }">
+      <v-breadcrumbs-item :to="item.to" :exact="true" :disabled="item.disabled">
+        {{ item.text }}
+      </v-breadcrumbs-item>
+    </template>
+  </v-breadcrumbs>
+</template>
+
+<script>
+  export default {
+    name: "Breadcrumb",
+
+    computed: {
+      bread() {
+        const parts = this.$page.path.split("/");
+        if (!parts[parts.length - 1].length) { parts.pop() }
+        let link = ""
+        const crumbs = []
+        for (let i = 0; i < parts.length; i++) {
+          let disabled = false
+          if (i == parts.length - 1) {
+            console.log(parts[i])
+            disabled = true
+          }
+          link += parts[i]
+          const page = this.$site.pages.find((el) => el.path === link || el.path === link + "/")
+          link += "/"
+          if (page != null) {
+            if (page.path == '/grimoire/') {
+              crumbs.push({to: page.path, disabled: disabled, text: 'Grimoire'})
+            } else if (page.path == '/classes/') {
+              crumbs.push({to: page.path, disabled: disabled, text: 'Classes'})
+            } else {
+              crumbs.push({to: page.path, disabled: disabled, text: page.frontmatter.breadcrumb || page.title})
+            }
+          }
+        }
+        return crumbs;
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+@import '../styles/colors';
+
+.v-breadcrumbs {
+  // background-color: lighten($color-gray, 50);
+}
+
+.theme--light.v-breadcrumbs .v-breadcrumbs__item--disabled {
+  // color: rgba(0,0,0,.87);
+}
+</style>

docs/.vuepress/theme/components/NavDrawer.vue

@@ -2,7 +2,7 @@
   <v-navigation-drawer class="main-drawer" v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" width="300" app>
     <v-list dense nav>
       <template v-for="item in items">
-        <v-list-group v-if="item.children" :key="item.title" v-model="item.expanded" :color="$site.themeConfig.accentColor">
+        <v-list-group v-if="item.children" :key="item.title" v-model="item.expanded" color="accent">
           <template v-slot:activator>
             <v-list-item-content>
               <v-list-item-title>
@@ -12,7 +12,7 @@
           </template>
 
           <template v-for="child in item.children">
-            <v-list-group v-if="child.children" :key="child.title" sub-group v-model="child.expanded" :color="$site.themeConfig.accentColor">
+            <v-list-group v-if="child.children" :key="child.title" sub-group v-model="child.expanded" color="accent">
               <template v-slot:activator>
                 <v-list-item-content>
                   <v-list-item-title>
@@ -20,7 +20,7 @@
                   </v-list-item-title>
                 </v-list-item-content>
               </template>
-              <v-list-item v-for="subchild in child.children" link :to="{path: subchild.path}">
+              <v-list-item v-for="subchild in child.children" link :to="{path: subchild.path}" exact>
                 <v-list-item-content>
                   <v-list-item-title>
                     {{ subchild.title }}
@@ -28,7 +28,7 @@
                 </v-list-item-content>
               </v-list-item>
             </v-list-group>
-            <v-list-item v-else :key="child.title" link :to="{path: child.path}">
+            <v-list-item v-else :key="child.title" link :to="{path: child.path}" exact>
               <v-list-item-content>
                 <v-list-item-title>
                   {{ child.title }}
@@ -37,7 +37,7 @@
             </v-list-item>
           </template>
         </v-list-group>
-        <v-list-item v-else :key="item.title" link :to="{path: item.path}" :color="$site.themeConfig.accentColor">
+        <v-list-item v-else :key="item.title" link :to="{path: item.path}" color="accent" exact>
           <v-list-item-content>
             <v-list-item-title>
               {{ item.title }}

docs/.vuepress/theme/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" :clipped-right="$vuetify.breakpoint.lgAndUp" app :color="$site.themeConfig.primaryColor" dark>
+  <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" :clipped-right="$vuetify.breakpoint.lgAndUp" app color="navbar" dark>
     <v-app-bar-nav-icon @click.stop="setDrawer" />
     <v-toolbar-title class="ml-0 mr-4 pl-4">
       <v-btn class="hidden-sm-and-down site-title" text link :to="{ path: '/' }">{{ $site.title }}</v-btn>

docs/.vuepress/theme/components/Page.vue

@@ -10,7 +10,7 @@
 
 export default {
   name: 'Page',
-  components: { }
+  components: {  }
 }
 </script>
 

docs/.vuepress/theme/components/Spell.vue

@@ -1,13 +1,10 @@
 <template>
-  <main class="page">
+  <main class="page content">
+
     <div class="theme-default-content">
       <h1>{{ $page.title }}</h1>
       <div class="spell-details">
-        <div class="spell-school-level">
-          <template v-if="$page.frontmatter.level != 0">{{ $page.frontmatter.school }} de niveau {{ $page.frontmatter.level }}</template>
-          <template v-else>{{ $page.frontmatter.school }}, Tour de magie</template>
-          <template v-if="$page.frontmatter.ritual"> (rituel)</template>
-        </div>
+        <div class="spell-school-level" v-html="displaySchoolLevel()"></div>
         <div class="spell-casting-time"><strong>Temps d'incantation</strong> : {{ $page.frontmatter.casting_time }}</div>
         <div class="spell-range"><strong>Portée</strong> : {{ $page.frontmatter.range }}</div>
         <div class="spell-components"><strong>Composantes</strong> :
@@ -29,7 +26,14 @@
 </template>
 
 <script>
+import { displaySchoolLevel } from '@theme/util/spellHelpers'
+
 export default {
+  methods: {
+    displaySchoolLevel () {
+      return displaySchoolLevel(this.$page.frontmatter)
+    }
+  }
 }
 </script>
 

docs/.vuepress/theme/components/SpellFilters.vue

@@ -7,7 +7,7 @@
       label="Filtrer"
       single-line
       hide-details
-      :color="$site.themeConfig.accentColor"
+      color="accent"
       ></v-text-field>
 
     <v-expansion-panels multiple flat hover v-model="panels">
@@ -15,16 +15,16 @@
       <v-expansion-panel>
         <v-expansion-panel-header>Classes</v-expansion-panel-header>
         <v-expansion-panel-content>
-          <v-btn class="mb-2 mt-2" small :color="$site.themeConfig.primaryColor" @click="resetClasses" dark>Réinitialiser</v-btn>
-          <v-switch v-for="(c, idx) in classes" v-model="c.value" :label="c.label" dense class="ma-0" @change="switchClass" :color="$site.themeConfig.accentColor"></v-switch>
+          <v-btn class="mb-2 mt-2" small color="primary" @click="resetClasses" dark>Réinitialiser</v-btn>
+          <v-switch v-for="(c, idx) in classes" v-model="c.value" :label="c.label" dense class="ma-0" @change="switchClass" color="accent"></v-switch>
         </v-expansion-panel-content>
       </v-expansion-panel>
 
       <v-expansion-panel>
         <v-expansion-panel-header>Niveaux de sorts</v-expansion-panel-header>
         <v-expansion-panel-content>
-          <v-btn class="mb-2 mt-2" small :color="$site.themeConfig.primaryColor" @click="resetLevels" dark>Réinitialiser</v-btn>
-          <v-switch v-for="level in levels" v-model="level.value" dense class="ma-0" @change="switchLevel" :color="$site.themeConfig.accentColor">
+          <v-btn class="mb-2 mt-2" small color="primary" @click="resetLevels" dark>Réinitialiser</v-btn>
+          <v-switch v-for="level in levels" v-model="level.value" dense class="ma-0" @change="switchLevel" color="accent">
             <template v-slot:label>
               <span v-html="levelDisplay(level)"></span>
             </template>
@@ -35,8 +35,8 @@
       <v-expansion-panel>
         <v-expansion-panel-header>Écoles de magie</v-expansion-panel-header>
         <v-expansion-panel-content>
-          <v-btn class="mb-2 mt-2" small :color="$site.themeConfig.primaryColor" @click="resetSchools" dark>Réinitialiser</v-btn>
-          <v-switch v-for="school in schools" v-model="school.value" :label="school.label" dense class="ma-0" @change="switchSchool" :color="$site.themeConfig.accentColor"></v-switch>
+          <v-btn class="mb-2 mt-2" small color="primary" @click="resetSchools" dark>Réinitialiser</v-btn>
+          <v-switch v-for="school in schools" v-model="school.value" :label="school.label" dense class="ma-0" @change="switchSchool" color="accent"></v-switch>
         </v-expansion-panel-content>
       </v-expansion-panel>
 
@@ -325,7 +325,6 @@ export default {
   },
 
   mounted () {
-    console.log('filter mounted')
     this.$store.dispatch('spellFilters/reset')
 
     let selectedSchools = getUrlParameter(window.location.href, "ecoles").split(",")

docs/.vuepress/theme/components/search/SRDSearchBox.vue

@@ -32,6 +32,7 @@
 
 <script>
 import matchQuery from './match-query'
+import { displaySchoolLevel } from '@theme/util/spellHelpers'
 
 /* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
 export default {
@@ -104,7 +105,15 @@ export default {
         }
 
         if (matchQuery(query, p)) {
-          res.push(p)
+          if (p.pid && p.pid == 'spell') {
+            res.push(Object.assign({}, p, {
+              subtitle: displaySchoolLevel(p.frontmatter),
+              title: p.title,
+              path: p.path
+            }))
+          } else {
+            res.push(p)
+          }
         } else if (p.headers) {
           for (let j = 0; j < p.headers.length; j++) {
             if (res.length >= max) break

docs/.vuepress/theme/enhanceApp.js

@@ -3,6 +3,7 @@ import store from '../store'
 import '@mdi/font/css/materialdesignicons.css'
 import Vuetify from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'
+import fr from 'vuetify/es5/locale/fr';
 
 import colors from 'vuetify/es5/util/colors'
 
@@ -18,11 +19,25 @@ export default ({
   Vue.use(Vuetify)
   options.vuetify = new Vuetify({
     theme: {
-      light: {
-        primary: '#563f5a', // Héros
-        // secondary: colors.red.lighten4, // #FFCDD2
-        accent: '#9b1c47' // Dragons
+      options: {
+        customProperties: true,
+      },
+      themes: {
+        light: {
+          primary: '#9b1c47', // Dragons
+          navbar: '#563f5a', // Héros
+          accent: '#563f5a', // Héros
+        },
+        dark: {
+          primary: '#c38dcc', // Héros
+          navbar: '#563f5a', // Héros
+          accent: '#e02867', // Dragons
+        }
       }
-    }
+    },
+    lang: {
+      locales: { fr },
+      current: 'fr',
+    },
   })
 }

docs/.vuepress/theme/layouts/GlobalLayout.vue

@@ -46,6 +46,7 @@ export default {
   },
 
   mounted () {
+    this.$vuetify.theme.dark = this.$store.state.isThemeDark
   },
 
   methods: {

docs/.vuepress/theme/layouts/Layout.vue

@@ -1,16 +1,19 @@
 <template>
   <div>
+    <Breadcrumb />
     <Page></Page>
   </div>
 </template>
 
 <script>
-import Page from '@theme/components/Page.vue'
+import Breadcrumb from '@theme/components/Breadcrumb'
+import Page from '@theme/components/Page'
 
 export default {
   name: 'Layout',
 
   components: {
+    Breadcrumb,
     Page
   },
 
@@ -25,7 +28,7 @@ export default {
 
       if (this.$page.headers && this.$page.headers.length > 0 && this.$page.frontmatter.toc !== false) {
         this.$store.commit('setHasRightDrawer', true)
-        this.$store.commit('setRightDrawer', true)
+        this.$store.commit('setRightDrawer', this.$vuetify.breakpoint.lgAndUp)
         this.$store.commit('setInRightDrawer', 'pageToc')
       }
     }

docs/.vuepress/theme/layouts/SpellLayout.vue

@@ -1,16 +1,19 @@
 <template>
   <div class="spell">
+    <Breadcrumb />
     <Spell />
   </div>
 </template>
 
 <script>
-import Spell from '@theme/components/Spell.vue'
+import Breadcrumb from '@theme/components/Breadcrumb'
+import Spell from '@theme/components/Spell'
 
 export default {
   name: 'SpellLayout',
 
   components: {
+    Breadcrumb,
     Spell
   },
 

docs/.vuepress/theme/layouts/SpellsLayout.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="spells">
 
+    <Breadcrumb />
+
     <v-data-table
+      class="data-table"
       :headers="headers"
       :items="spells"
       item-key="key"
@@ -45,8 +48,11 @@
 
 <script>
 import { mapState } from 'vuex'
+import Breadcrumb from '@theme/components/Breadcrumb'
 
 export default {
+  components: { Breadcrumb },
+
   data () {
     return {
       sortBy: 'title',
@@ -166,17 +172,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../styles/colors';
-
-.v-data-table {
-  a {
-    color: $color-dragon;
-    text-decoration: none;
-  }
-
-  .v-data-table__mobile-row {
-    min-height: 32px;
-  }
-}
 
 </style>

docs/.vuepress/theme/styles/_anchors.scss

@@ -1,3 +1,7 @@
+a.header-anchor {
+  text-decoration: none;
+}
+
 h1 {
   a.header-anchor {
     display: none;
@@ -7,9 +11,13 @@ h1 {
 h2, h3, h4, h5, h6 {
   padding-top: 64px;
   margin-top: -64px;
-  
+
   a.header-anchor {
     display: none;
+
+    .v-icon {
+      font-size: inherit;
+    }
   }
 
   &:hover {

docs/.vuepress/theme/styles/_blocks.scss

@@ -0,0 +1,22 @@
+.block-highlight {
+  padding: 24px;
+  border-top: 6px double;
+  border-bottom: 2px solid;
+}
+
+.hero {
+  @extend .block-highlight;
+  background-color: lighten($color-hero, 55);
+  color: $color-hero;
+  border-color: $color-hero;
+}
+
+.dragon {
+  @extend .block-highlight;
+  background-color: $color-dragon;
+  color: #fff;
+  border-color: darken($color-dragon, 10);
+  a {
+    color: #fff;
+  }
+}

docs/.vuepress/theme/styles/_breakpoints.scss

@@ -0,0 +1,4 @@
+$breakpointXS: 600;
+$breakpointSM: 960;
+$breakpointMD: 1264;
+$breakpointLG: 1904;

docs/.vuepress/theme/styles/_colors.scss

@@ -1,3 +1,5 @@
 $color-hero: #563f5a;
 $color-dragon: #9b1c47;
 $color-gray: #6f6f6f;
+$color-light-gray: #ededed;
+$color-table-header-bg: #b5aab9;

docs/.vuepress/theme/styles/_layout.scss

@@ -0,0 +1,3 @@
+.page.content {
+  padding: 0 24px;
+}

docs/.vuepress/theme/styles/_tables.scss

@@ -1,7 +1,71 @@
+.table-container {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
 .v-data-table {
   &.width-auto {
     table {
       width: auto;
     }
   }
+
+  .v-data-table__mobile-row {
+    min-height: 32px;
+
+    &:first-child {
+      background-color: $color-table-header-bg;
+      color: #fff;
+    }
+  }
+}
+
+.v-data-table-header-mobile {
+  th {
+    display: none;
+  }
+}
+
+table {
+  margin-bottom: 2rem;
+  border-collapse: collapse;
+
+  a {
+    text-decoration: none;
+  }
+
+  tr {
+
+  }
+
+  th, td {
+    padding: 6px 12px;
+    border-bottom: none !important;
+  }
+
+  thead {
+    background-color: $color-table-header-bg;
+    color: #fff;
+
+    tr {
+      th {
+        color: #fff !important;
+        i {
+          color: #fff !important;
+        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      &:nth-of-type(even) {
+        background-color: $color-light-gray;
+      }
+      &:nth-of-type(odd):hover {
+        background-color: inherit !important;
+      }
+      td {
+      }
+    }
+  }
 }

docs/.vuepress/theme/styles/_typography.scss

@@ -1,3 +1,11 @@
+.srd {
+  .content {
+    a {
+      //color: #9b1c47;
+    }
+  }
+}
+
 .source {
   font-size: 0.8rem;
 }

docs/.vuepress/theme/styles/main.scss

@@ -1,12 +1,7 @@
+@import "breakpoints";
 @import "colors";
 @import "typography";
 @import "anchors";
 @import "tables";
-
-.srd {
-  .content {
-    a {
-      color: #9b1c47;
-    }
-  }
-}
+@import "blocks";
+@import "layout";

docs/.vuepress/theme/util/spellHelpers.js

@@ -0,0 +1,11 @@
+export function displaySchoolLevel (spell) {
+  let result = ''
+  if (spell.level == 0) {
+    result = spell.school + ', Tour de magie'
+  }
+  result = spell.school + ' de niveau ' + spell.level
+  if (spell.ritual) {
+    result = result + ' (rituel)'
+  }
+  return result
+}