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

1
client/public/index.html
View File

@@ -7,6 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>img/favicon.ico">
<title>Spellsaurus</title>
<link rel="stylesheet" href="<%= BASE_URL %>libs/style.css">
<script src="<%= BASE_URL %>libs/clipboard.min.js"></script>
</head>
<body>
<noscript>

6
client/public/libs/style.css
View File

@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap&subset=cyrillic,latin-ext');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=cyrillic,latin-ext');/*&display=swap*/
@font-face {
font-family: "stgeorge";
src: url("/public/resources/stgeorge.woff2") format("woff2");
@@ -44,7 +44,7 @@
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
src: url('/libs/material-design-icons.woff2') format('woff2');
}
.mad{
font-family: 'Material Icons';
@@ -63,4 +63,4 @@
}
body{
background: url('/img/bg1.png') center center fixed repeat;
}
}

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
}
}
}

71
client/src/pages/world-page.vue
View File

@@ -1,7 +1,67 @@
<template>
<section class="world-page">
</section>
<section class="world-page">
<div class="container-fluid">
<div class="p-4">
<!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#spell_show_edit_modal">Spell show/edit modal</button>-->
<div class="" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="spell_show_edit_modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="h1 modal-title font-display font-weight-bold" id="spell_show_edit_modal"><div class="line-height-100">Sort #00069420</div></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="spell_name" class="font-weight-bold col-form-label">Nom&nbsp;:</label>
<input type="text" class="form-control" name="spell_name" id="spell_name" placeholder="(256 caractères max.)">
</div>
<div class="form-group">
<label for="spell_level" class="font-weight-bold col-form-label">Niveau&nbsp;:</label>
<input type="number" class="form-control" name="spell_level" id="spell_level" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)">
</div>
<div class="form-group">
<label for="spell_schools" class="font-weight-bold col-form-label">École(s)&nbsp;:</label>
<select class="form-control" id="spell_schools" name="spell_schools" multiple>
<option value="1">Lumomancie</option>
<option value="2">Vitamancie</option>
</select>
</div>
<div class="form-group">
<label for="spell_charge" class="font-weight-bold col-form-label">Charge&nbsp;:</label>
<input type="number" class="form-control" name="spell_charge" id="spell_charge" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)">
</div>
<div class="form-group">
<label for="spell_ingredients" class="font-weight-bold col-form-label">Ingrédients&nbsp;:</label>
<textarea class="form-control" name="spell_ingredients" id="spell_ingredients" placeholder="(1024 caractères max.)"></textarea>
</div>
<div class="form-group">
<label for="spell_description" class="font-weight-bold col-form-label">Description&nbsp;:</label>
<textarea class="form-control" name="spell_description" id="spell_description" placeholder="(2048 caractères max.)"></textarea>
</div>
<div class="form-group">
<label for="spell_cost" class="font-weight-bold col-form-label">Coût&nbsp;:</label>
<input type="text" class="form-control" name="spell_cost" id="spell_cost" placeholder="(32 caractères max.)">
</div>
<div class="form-group">
<label for="spell_variables" class="font-weight-bold col-form-label">Variables&nbsp;:</label>
<textarea class="form-control" name="spell_variables" id="spell_variables" placeholder="(1024 caractères max., 1 variable par ligne)"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary">Enregistrer</button>
<button type="button" class="btn btn-danger">Supprimer</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
@@ -10,6 +70,5 @@ export default {
}
</script>
<style>
</style>
<style lang="scss">
.world-page{position:relative;}</style>