mirror of
https://github.com/em-squared/5e-drs.git
synced 2025-10-28 20:24:20 +00:00
optimisation d'affichage des tables (monstres, sorts, objets magiques) pour les mobiles
This commit is contained in:
Maxime Moraine
parent
63fb1d4ca5
commit
f7750b5034
7 changed files with 81 additions and 9058 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -3,3 +3,5 @@ docs/.vuepress/dist
|
|||
tmp/
|
||||
import/
|
||||
regex
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
[{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target" : { "namespace": "android_app", "package_name": "fr.heros_et_dragons.twa",
|
||||
"sha256_cert_fingerprints": [": 25:82:3F:F7:25:C0:53:A3:C6:C6:A1:D3:D9:F0:55:EE:08:A9:F9:BD:D0:FC:50:24:F1:99:8D:39:75:E0:76:3A"] }
|
||||
}]
|
||||
|
|
@ -40,6 +40,7 @@
|
|||
hide-default-footer
|
||||
show-expand
|
||||
@click:row="onClickRow"
|
||||
mobile-breakpoint="0"
|
||||
>
|
||||
|
||||
<template v-slot:expanded-item="{ headers, item }">
|
||||
|
|
@ -97,13 +98,11 @@ export default {
|
|||
],
|
||||
page: 1,
|
||||
pageCount: 0,
|
||||
headers: [
|
||||
{ text: "", align: 'center', sortable: false, value: 'isInTreasureChest' },
|
||||
{ text: "Nom", align: 'start', sortable: true, value: 'title' },
|
||||
{ text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' },
|
||||
{ text: "Rareté", align: 'start', sortable: false, value: 'frontmatter.rarity' },
|
||||
{ text: "Harmonisation", align: 'start', sortable: false, value: 'frontmatter.attunement' },
|
||||
],
|
||||
showColumn: {
|
||||
type: true,
|
||||
rarity: true,
|
||||
attunement: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -115,6 +114,23 @@ export default {
|
|||
hasAttunement: state => state.magicItemFilters.hasAttunement,
|
||||
}),
|
||||
|
||||
headers() {
|
||||
let headers = [
|
||||
{ text: "", align: 'center', sortable: false, value: 'isInTreasureChest' },
|
||||
{ text: "Nom", align: 'start', sortable: true, value: 'title' },
|
||||
]
|
||||
if (this.showColumn.school && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' })
|
||||
}
|
||||
if (this.showColumn.castingTime && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Rareté", align: 'start', sortable: false, value: 'frontmatter.rarity' })
|
||||
}
|
||||
if (this.showColumn.duration && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Harmonisation", align: 'start', sortable: false, value: 'frontmatter.attunement' })
|
||||
}
|
||||
return headers
|
||||
},
|
||||
|
||||
selectedTypes() {
|
||||
let result = []
|
||||
for (let type of this.types) {
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
hide-default-footer
|
||||
show-expand
|
||||
@click:row="onClickRow"
|
||||
mobile-breakpoint="0"
|
||||
>
|
||||
|
||||
<template v-slot:expanded-item="{ headers, item }">
|
||||
|
|
@ -112,16 +113,13 @@ export default {
|
|||
],
|
||||
page: 1,
|
||||
pageCount: 0,
|
||||
headers: [
|
||||
{ text: "", align: 'center', sortable: false, value: 'isInBestiary' },
|
||||
{ text: "Nom", align: 'start', sortable: true, value: 'title' },
|
||||
{ text: "ID", align: 'center', sortable: true, value: 'frontmatter.challenge' },
|
||||
{ text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' },
|
||||
{ text: "Taille", align: 'center', sortable: false, value: 'frontmatter.size' },
|
||||
{ text: "Sous-type", align: 'start', sortable: false, value: 'frontmatter.subtype' },
|
||||
{ text: "Environnements", align: 'start', sortable: false, value: 'frontmatter.environments' },
|
||||
{ text: "Type de donjons", align: 'start', sortable: false, value: 'frontmatter.dungeonTypes' },
|
||||
],
|
||||
showColumn: {
|
||||
type: true,
|
||||
size: true,
|
||||
subtype: true,
|
||||
environments: true,
|
||||
dungeonTypes: true,
|
||||
},
|
||||
challenges: CHALLENGES
|
||||
}
|
||||
},
|
||||
|
|
@ -136,6 +134,30 @@ export default {
|
|||
dungeonTypes: state => state.monsterFilters.dungeonTypes,
|
||||
}),
|
||||
|
||||
headers() {
|
||||
let headers = [
|
||||
{ text: "", align: 'center', sortable: false, value: 'isInBestiary' },
|
||||
{ text: "Nom", align: 'start', sortable: true, value: 'title' },
|
||||
{ text: "ID", align: 'center', sortable: true, value: 'frontmatter.challenge' }
|
||||
]
|
||||
if (this.showColumn.type && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' })
|
||||
}
|
||||
if (this.showColumn.size && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Taille", align: 'center', sortable: false, value: 'frontmatter.size' })
|
||||
}
|
||||
if (this.showColumn.subtype && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Sous-type", align: 'start', sortable: false, value: 'frontmatter.subtype' })
|
||||
}
|
||||
if (this.showColumn.environments && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Environnements", align: 'start', sortable: false, value: 'frontmatter.environments' })
|
||||
}
|
||||
if (this.showColumn.dungeonTypes && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Type de donjons", align: 'start', sortable: false, value: 'frontmatter.dungeonTypes' })
|
||||
}
|
||||
return headers
|
||||
},
|
||||
|
||||
selectedTypes() {
|
||||
let result = []
|
||||
for (let type of this.types) {
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
|
||||
<h1>Grimoire</h1>
|
||||
|
||||
<div><strong>Colonnes affichées :</strong></div>
|
||||
<div class="columns-toggles d-flex mb-2">
|
||||
<div class="columns-toggles d-md-flex d-none align-center mb-2">
|
||||
<div><strong>Colonnes affichées :</strong></div>
|
||||
<v-checkbox
|
||||
class="mt-0 mr-4"
|
||||
v-model="showColumn.school"
|
||||
|
|
@ -112,6 +112,7 @@
|
|||
hide-default-footer
|
||||
show-expand
|
||||
@click:row="onClickRow"
|
||||
mobile-breakpoint="0"
|
||||
>
|
||||
|
||||
<template v-slot:expanded-item="{ headers, item }">
|
||||
|
|
@ -191,18 +192,6 @@ export default {
|
|||
],
|
||||
page: 1,
|
||||
pageCount: 0,
|
||||
// headers: [
|
||||
// { text: "", align: 'center', sortable: false, value: 'isInSpellBook' },
|
||||
// { text: "Nom", align: 'start', sortable: true, value: 'title' },
|
||||
// { text: "Niveau", align: 'center', sortable: true, value: 'frontmatter.level' },
|
||||
// { text: "École", align: 'start', sortable: false, value: 'frontmatter.school' },
|
||||
// { text: "Temps d'incantation", align: 'start', sortable: false, value: 'frontmatter.casting_time' },
|
||||
// { text: "Durée", align: 'start', sortable: false, value: 'frontmatter.duration' },
|
||||
// { text: "Concentration", align: 'center', sortable: false, value: 'frontmatter.concentration' },
|
||||
// { text: "Rituel", align: 'center', sortable: false, value: 'frontmatter.ritual' },
|
||||
// { text: "Composantes", align: 'center', sortable: false, value: 'frontmatter.components' },
|
||||
// { text: "Description", align: 'start', sortable: false, value: 'frontmatter.description' },
|
||||
// ],
|
||||
showColumn: {
|
||||
school: true,
|
||||
castingTime: true,
|
||||
|
|
@ -234,25 +223,25 @@ export default {
|
|||
{ text: "Nom", align: 'start', sortable: true, value: 'title' },
|
||||
{ text: "Niveau", align: 'center', sortable: true, value: 'frontmatter.level' }
|
||||
]
|
||||
if (this.showColumn.school) {
|
||||
if (this.showColumn.school && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "École", align: 'start', sortable: false, value: 'frontmatter.school' })
|
||||
}
|
||||
if (this.showColumn.castingTime) {
|
||||
if (this.showColumn.castingTime && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Temps d'incantation", align: 'start', sortable: false, value: 'frontmatter.casting_time' })
|
||||
}
|
||||
if (this.showColumn.duration) {
|
||||
if (this.showColumn.duration && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Durée", align: 'start', sortable: false, value: 'frontmatter.duration' })
|
||||
}
|
||||
if (this.showColumn.concentration) {
|
||||
if (this.showColumn.concentration && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Concentration", align: 'center', sortable: false, value: 'frontmatter.concentration' })
|
||||
}
|
||||
if (this.showColumn.ritual) {
|
||||
if (this.showColumn.ritual && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Rituel", align: 'center', sortable: false, value: 'frontmatter.ritual' })
|
||||
}
|
||||
if (this.showColumn.components) {
|
||||
if (this.showColumn.components && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Composantes", align: 'center', sortable: false, value: 'frontmatter.components' })
|
||||
}
|
||||
if (this.showColumn.description) {
|
||||
if (this.showColumn.description && this.$vuetify.breakpoint.mdAndUp) {
|
||||
headers.push({ text: "Description", align: 'start', sortable: false, value: 'frontmatter.description' })
|
||||
}
|
||||
return headers
|
||||
|
|
@ -291,31 +280,7 @@ export default {
|
|||
spells() {
|
||||
let results = this.$pagination.pages
|
||||
|
||||
// JSON Migration Generation
|
||||
// console.log(results)
|
||||
// let json = []
|
||||
// for (var spell of results) {
|
||||
// json.push({
|
||||
// 'nom':spell.frontmatter.title,
|
||||
// 'ecole':spell.frontmatter.school,
|
||||
// 'niveau':spell.frontmatter.level,
|
||||
// 'portee':spell.frontmatter.range,
|
||||
// 'duree':spell.frontmatter.duration,
|
||||
// 'temps_incantation':spell.frontmatter.casting_time,
|
||||
// 'composante_v':spell.frontmatter.components.material,
|
||||
// 'composante_s':spell.frontmatter.components.somatic,
|
||||
// 'composante_m':spell.frontmatter.components.material,
|
||||
// 'composante_m_description':spell.frontmatter.components.materials,
|
||||
// 'concentration':spell.frontmatter.concentration,
|
||||
// 'rituel':spell.frontmatter.ritual,
|
||||
// 'description':spell.rawContent,
|
||||
// 'resume':spell.frontmatter.description,
|
||||
// 'source':spell.frontmatter.source,
|
||||
// })
|
||||
// }
|
||||
// console.log(json)
|
||||
|
||||
// Filter concetration
|
||||
// Filter concentration
|
||||
if (this.mustBeConcentration !== undefined) {
|
||||
results = results.filter(item => {
|
||||
return item.frontmatter.concentration === this.mustBeConcentration
|
||||
|
|
|
|||
|
|
@ -6,17 +6,19 @@ main.content {
|
|||
}
|
||||
}
|
||||
|
||||
.column-count-2 {
|
||||
column-count: 2;
|
||||
column-gap: 25pt;
|
||||
}
|
||||
.column-count-3 {
|
||||
column-count: 3;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.column-count-4 {
|
||||
column-count: 4;
|
||||
margin-bottom: 12px;
|
||||
@media screen and (min-width: $breakpointMD) {
|
||||
.column-count-2 {
|
||||
column-count: 2;
|
||||
column-gap: 25pt;
|
||||
}
|
||||
.column-count-3 {
|
||||
column-count: 3;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.column-count-4 {
|
||||
column-count: 4;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue