Joururi/spellsaurus
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fancier spells + 1st modals

Browse Source 
- spells are even prettier (color, shadow, etc)
- first modal done (but sTILL NOT WORKING *THANK YOU VUE*)
This commit is contained in:
BlackMageMathos
2020-06-05 14:35:09 +02:00
parent dd72e296b3
commit ddc9122929
5 changed files with 105 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
client/src/components/spells/spell-card.vue
View File

@@ -2,14 +2,14 @@
<div
:class="main_school"
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/'+id">{{name}}</a>
<div class="spellcard bg-white p-4 rounded text-dark shadow" style="border-left-width:4px;border-left-style:solid;">
<div class="h3 font-display font-weight-bold text-wrap word-break" :title="name" style="line-height:100%;">
<a class="text-decoration-none" :href="'/spell/'+id">{{name}}</a>
</div>
<div>
<div class="font-weight-700 text-muted d-inline-block">Niveau {{level}}</div><span> · </span>
<div class="text-muted d-inline-block">
<span v-for="(school,index) in schools" :key="index"><span v-if="index!=0">, </span><a :href="'/school/'+school.id">{{school.name}}</a></span>
<span v-for="(school,index) in schools" :key="index"><span v-if="index!=0">, </span><a :href="'/school/'+school.id" class="text-secondary">{{school.name}}</a></span>
</div>
</div>
<div v-if="charge!=0" class="small font-weight-bold">Charge {{charge}} tour(s)</div>
@@ -61,12 +61,36 @@ export default {
</script>
<style lang="scss" scoped>
.spell-card {
&.lumomancie {
.border-primary {
border-left-color: #99dada !important;
color: #99dada;
}
}
.spell-card {
@mixin colorschool($sname,$scolor) {
&.#{$sname} {
.spellcard { border-left-color: $scolor; }
.h3>a { color: $scolor; }
}
}
@include colorschool(lumomancie,#babaa4);
@include colorschool(vitamancie,#57ab6e);
@include colorschool(obstrumancie,#bd4a66);
@include colorschool(tenebromancie,#404842);
@include colorschool(necromancie,#5d4777);
@include colorschool(morbomancie,#d8733d);
@include colorschool(pyromancie,#b6362a);
@include colorschool(hydromancie,#3f68c7);
@include colorschool(electromancie,#cd9731);
@include colorschool(terramancie,#7e5540);
@include colorschool(caelomancie,#a8a8a8);
@include colorschool(légimancie,#5dbabd);
@include colorschool(illusiomancie,#9f63a1);
@include colorschool(cruciomancie,#252451);
@include colorschool(chronomancie,#79896a);
@include colorschool(spatiomancie,#2d4776);
@include colorschool(kénomancie,#101010);
@include colorschool(lutomancie,#4e2827);
@include colorschool(échomancie,#6d9fd1);
@include colorschool(protomancie,#4f5751);
@include colorschool(rebumancie,#8e7245);
@include colorschool(vocamancie,#247864);
@include colorschool(somamancie,#976c67);
@include colorschool(antimancie,#ad95c1);
}
</style>

2
client/src/components/spells/spells-list.vue
View File

@@ -38,7 +38,7 @@ export default {
this.loading = true
const displaySpells = await this.fetchSpells();
this.loading = false
this.spells = displaySpells.slice(0,10)
this.spells = displaySpells
}
}
}