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

- Fixed masonry setup, need to npm install

Browse Source
This commit is contained in:
Alexis
2020-06-03 19:27:43 +02:00
parent 966804efe1
commit 5a0ebf078b
9 changed files with 161 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,26 +1,19 @@
<template>
<div class="sticky-top">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" v-if="links.length != 0">
<li class="nav-item" v-for="(link, index) in links" :key="index">
<router-link v-bind:to="link.url" class="nav-link">{{ link.text }}</router-link>
</li>
</ul>
</div>
</nav>
</div>
<!--<nav class="navbar navbar-dark">
<ul v-if="links.length != 0">
<li v-for="(link, index) in links" :key="index">
<router-link v-bind:to="link.url">{{ link.text }}</router-link>
</li>
</ul>
</nav>-->
<div class="sticky-top">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" v-if="links.length != 0">
<li class="nav-item" v-for="(link, index) in links" :key="index">
<router-link v-bind:to="link.url" class="nav-link">{{ link.text }}</router-link>
</li>
</ul>
</div>
</nav>
</div>
</template>
<script>

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

@@ -1,67 +1,18 @@
<template>
<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">
<header>
<h3>{{ name }}</h3>
</header>
<section class="casting-header">
<div class="casting-infos">
<div class="type">
<div class="level">
<div class="label">
<span>LV.</span>
<br>
<span>MIN</span>
</div>
<var>{{ level }}</var>
</div>
<ul class="schools">
<li v-for="(school, index) in schools" :key="index">
{{ school.name }}
</li>
</ul>
</div>
<div class="cost">
<span class="label">Malus</span>
<var>{{ cost }}</var>
</div>
<div class="charge">
<span class="label">Charge</span>
<var>{{ charge }}</var>
</div>
</div>
<div class="casting-ingredients">
<p class="title">Nécessite :</p>
<p class="content">
<span v-for="(ingredient, index) in ingredients" :key="index">
{{ ingredient.name }}<span v-if="index != Object.keys(ingredients).length - 1">, </span>
</span>
</p>
</div>
</section>
<hr>
<section class="spell-description">
<p>{{ description }}</p>
</section>
<hr>
<footer v-if="variables">
<div class="label">Variables</div>
<div class="variables">
<div v-for="(variable, index) in variables" :key="index" class="xyz">
<span>{{ variable.name }}</span>
<var>{{ variable.description }}</var>
</div>
</div>
</footer>
<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>
</article>-->
</div>
</template>
<script>
@@ -92,4 +43,4 @@ export default {
</script>
<style lang="scss"></style>
<style lang="scss" scoped></style>

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

@@ -1,13 +1,13 @@
<template>
<div class="row grid">
<spell-card v-for="(spell, index) in spells" :key="index" v-bind="spell"/>
<div v-masonry item-selector=".spell-card" class="row spells-list">
<spell-card v-masonry-tile class="spell-card" v-for="(spell, index) in spells" :key="index" v-bind="spell"/>
</div>
</template>
<script>
// Components
import spellcard from "./spell-card"
// API
import { RepositoryFactory } from "../../../api/repositories"
const spellsRepository = RepositoryFactory.get('spells')
@@ -26,6 +26,8 @@ export default {
created() {
this.computeSpells()
},
mounted() {
},
methods: {
async fetchSpells() {
const { data } = await spellsRepository.getSpells()
@@ -43,4 +45,8 @@ export default {
</script>
<style lang="scss"></style>
<style lang="scss">
.spells-list {
animation: none !important;
}
</style>

15
client/src/main.js
View File

@@ -1,13 +1,26 @@
// Core
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
import { VueMasonryPlugin } from 'vue-masonry';
// Router
import routes from './routes'
window.$ = window.jQuery = require('jquery');
// Jquery
import jquery from 'jquery'
window.$ = jquery
window.jquery = jquery
// Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(VueMasonryPlugin)
var filter = function(text, length, clamp){
clamp = clamp || '...';

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

@@ -6,17 +6,11 @@
<script>
import spellslist from "../components/spells/spells-list"
export default {
name: 'spells',
components: {
'spell-list': spellslist,
},
mounted(){
window.$(".grid").masonry({
itemSelector:".grid-item",
columnWidth:".grid-sizer",
percentPosition: true
});
'spell-list': spellslist,
}
}
</script>