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

fml

Browse Source
This commit is contained in:
BlackMageMathos
2020-06-03 18:08:32 +02:00
parent 0804eb5ec3
commit 966804efe1
10 changed files with 657 additions and 648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

972
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
client/package.json
View File

@@ -29,6 +29,7 @@
"dependencies": { "dependencies": {
"axios": "^0.19.2", "axios": "^0.19.2",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"jquery": "^3.5.1",
"vue": "^2.6.11" "vue": "^2.6.11"
}, },
"devDependencies": { "devDependencies": {

1
client/public/index.html
View File

@@ -18,5 +18,6 @@
</noscript> </noscript>
<div id="srs"></div> <div id="srs"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<script>console.log("test");console.log(window.$);</script>
</body> </body>
</html> </html>

8
client/public/libs/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

79
client/src/components/global/navbar/navbar.vue
View File

@@ -1,4 +1,5 @@
<template> <template>
<div class="sticky-top">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand font-display font-weight-700" href="#">Auracle</a> <a class="navbar-brand font-display font-weight-700" href="#">Auracle</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -12,6 +13,7 @@
</ul> </ul>
</div> </div>
</nav> </nav>
</div>
<!--<nav class="navbar navbar-dark"> <!--<nav class="navbar navbar-dark">
<ul v-if="links.length != 0"> <ul v-if="links.length != 0">
<li v-for="(link, index) in links" :key="index"> <li v-for="(link, index) in links" :key="index">
@@ -22,7 +24,6 @@
</template> </template>
<script> <script>
export default { export default {
name: 'navbar', name: 'navbar',
data() { data() {
@@ -49,78 +50,4 @@
} }
</script> </script>
<style lang="scss"> <style lang="scss"></style>
/*
nav {
width: 100%;
position: fixed;
top: 0;
padding-left: 2rem;
ul {
display: flex;
li {
a {
position: relative;
margin-right: 1rem;
padding: 1.5rem;
display: block;
font-size: .83rem;
font-weight: $font-bold;
text-transform: uppercase;
text-shadow: none;
transition: text-shadow .5s cubic-bezier(0.645, 0.045, 0.355, 1);
&:after {
position: absolute;
display: block;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 0;
height: 3px;
content: '';
box-shadow: none;
transition: width .5s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
&:hover,
&.router-link-exact-active {
@include blue-glow-text(.5);
&:after {
width: 80%;
transition: width .5s cubic-bezier(0.645, 0.045, 0.355, 1);
@include blue-glow-box(.5);
}
}
}
}
}
&.navbar-light {
ul {
li {
a {
color: $black;
&:after {
background: $black;
}
}
}
}
}
&.navbar-dark {
ul {
li {
a {
color: $white;
&:after {
background: $white;
}
}
}
}
}
}
*/
</style>

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

@@ -1,5 +1,12 @@
<template> <template>
<article class="spell-card"> <div 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/XXX">{{name}}</a></div>
<div class="font-weight-700 text-muted d-inline-block">Niveau {{level}}</div> <div class="text-muted d-inline-block">· <span v-for="(school, index) in schools" :key="index"><span v-if="index!=0">, </span>{{school.name}}</span></div>
<div class="small text-muted font-italic">{{description|truncate(256,"…")}}</div>
</div>
</div>
<!--<article class="spell-card">
<div class="content"> <div class="content">
<header> <header>
<h3>{{ name }}</h3> <h3>{{ name }}</h3>
@@ -54,7 +61,7 @@
</div> </div>
</footer> </footer>
</div> </div>
</article> </article>-->
</template> </template>
<script> <script>
@@ -85,124 +92,4 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss"></style>
/*
.spell-card {
max-width: 35rem;
padding: .5rem;
margin: .5rem auto .5rem;
background: $spell-card--innerborder;
border: solid 1px rgba($primary--base, .5);
border-radius: .5rem;
box-shadow: .0 .0 .75rem rgba($primary--base, .25);
> .content {
max-width: 35rem;
height: 100%;
padding: .75rem;
background: $white;
header {
h3 {
padding: .5rem;
text-align: center;
color: $white;
text-transform: uppercase;
background: $black;
}
}
.casting-header {
display: flex;
> * {
width: 50%;
}
.casting-infos {
margin: .75rem 0;
padding-right: .75rem;
border-right: 1px solid rgba($black, .25);
.type {
margin-bottom: .5rem;
display: flex;
> * {
width: 50%;
}
.level {
.label {
margin-right: .25rem;
display: inline-block;
}
var {
display: inline-block;
font-size: 2.3em;
}
}
}
.cost, .charge {
font-size: 0.9rem;
> * {
vertical-align: middle;
}
.label {
display: inline-block;
width: 30%;
text-transform: uppercase;
}
var {
display: inline-block;
}
}
}
.casting-ingredients {
margin: .75rem 0;
padding-left: .75rem;
.title {
margin-bottom: .25rem;
font-size: .9rem;
font-weight: bold;
text-transform: uppercase;
}
.content {
padding-top: 1rem;
font-size: .85rem;
text-align: justify;
text-align-last: center;
}
}
}
.spell-description {
padding: .75rem 0;
font-size: .85rem;
p {
&:not(:last-of-type) {
margin-bottom: .5rem;
}
}
}
footer {
padding: .75rem 0 0;
display: flex;
align-items: center;
.label {
margin-right: 1rem;
}
.variables {
.xyz {
span {
font-size: 1.1rem;
font-weight: bold;
margin-right: 1rem;
}
}
}
}
}
}
*/
</style>

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

@@ -1,5 +1,5 @@
<template> <template>
<div class="spells-list"> <div class="row grid">
<spell-card v-for="(spell, index) in spells" :key="index" v-bind="spell"/> <spell-card v-for="(spell, index) in spells" :key="index" v-bind="spell"/>
</div> </div>
</template> </template>
@@ -36,13 +36,11 @@ export default {
this.loading = true this.loading = true
const displaySpells = await this.fetchSpells(); const displaySpells = await this.fetchSpells();
this.loading = false this.loading = false
this.spells = displaySpells.slice(0, 10) this.spells = displaySpells
} }
} }
} }
</script> </script>
<style> <style lang="scss"></style>
</style>

11
client/src/main.js
View File

@@ -4,9 +4,20 @@ import App from './app.vue'
import routes from './routes' import routes from './routes'
window.$ = window.jQuery = require('jquery');
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(VueRouter) Vue.use(VueRouter)
var filter = function(text, length, clamp){
clamp = clamp || '...';
var node = document.createElement('div');
node.innerHTML = text;
var content = node.textContent;
return content.length > length ? content.slice(0, length) + clamp : content;
};
Vue.filter('truncate', filter);
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',
routes, routes,

63
client/src/pages/index-page.vue
View File

@@ -1,15 +1,15 @@
<template> <template>
<div class="home-page"> <div class="container">
<section class="landing"> <section class="fullpage">
<div class="splash-title"> <div class="px-4">
<h1>Auracle</h1> <div class="display-2 text-dark mb-4 font-display" style="line-height:100%;font-weight:900;">"C'est magique, ta gueule."</div>
<div> <div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
<p>Recueil de savoirs arcaniques et ésotériques des contrées lointaines de Léïm</p> <hr class="w-50">
<p>Découvrez ses sortilèges et maléfices...</p> <div class="lead"><span class="font-display" style="font-weight:700;">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Wunderwelt</span>.</div>
</div> <!--<a class="mt-4 btn btn-primary btn-lg font-display text-uppercase" href="/register" role="button" style="font-weight:800;">Create a free account</a>-->
</div> </div>
</section> </section>
</div> </div>
</template> </template>
<script> <script>
@@ -19,39 +19,10 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.home-page { .fullpage{
.landing { min-height: 100vh;
min-height: 100vh; display: flex;
display: flex; justify-content: center;
justify-content: center; align-items: center;
align-items: center; }
background: $dull--black;
.splash-title {
padding-bottom: 1rem;
color: $white;
text-align: center;
@include blue-glow-text(.8);
h1 {
margin-bottom: 1.5rem;
font-size: 4rem;
font-family: 'Montserrat', sans-serif;
font-weight: $font-bold;
text-transform: uppercase;
}
div {
padding-top: 1rem;
p {
margin-bottom: 1.5rem;
font-size: 1.2rem;
font-style: italic;
}
}
}
}
}
</style> </style>

29
client/src/pages/spells-page.vue
View File

@@ -1,23 +1,24 @@
<template> <template>
<section class="spells-page"> <div class="container-fluid p-4">
<spell-list/> <spell-list/>
</section> </div>
</template> </template>
<script> <script>
import spellslist from "../components/spells/spells-list"
// Components export default {
import spellslist from "../components/spells/spells-list"
export default {
name: 'spells', name: 'spells',
components: { components: {
'spell-list': spellslist, 'spell-list': spellslist,
},
mounted(){
window.$(".grid").masonry({
itemSelector:".grid-item",
columnWidth:".grid-sizer",
percentPosition: true
});
} }
} }
</script> </script>
<style> <style lang="scss"></style>
</style>