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

ｄｅｓｉｇｎ░ｄｒｅａｍ　（ちま欧）

Browse Source 
𝕖𝕧𝕖𝕣𝕪𝕥𝕙𝕚𝕟𝕘 𝕚𝕤 𝕓𝕖𝕒𝕦𝕥𝕚𝕗𝕦𝕝
This commit is contained in:
BlackMageMathos
2020-06-04 15:49:21 +02:00
parent 5a0ebf078b
commit 897e8841eb
7 changed files with 48 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/package.json
View File

@@ -42,7 +42,7 @@
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"node-sass": "^4.13.1",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"vue-router": "^3.1.6",
"vue-template-compiler": "^2.6.11"

BIN
client/public/img/bg1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 228 KiB

4
client/public/index.html
View File

@@ -7,14 +7,12 @@
<link rel="icon" href="<%= BASE_URL %>img/favicon.ico">
<title>Spellsaurus</title>
<link rel="stylesheet" href="<%= BASE_URL %>libs/style.css">
<script async defer src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>
<script async defer src="<%= BASE_URL %>libs/masonry-4.2.2.min"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="srs"></div>
</body>
</html>

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

@@ -1,19 +1,17 @@
<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-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>
</template>
<script>

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

@@ -2,15 +2,28 @@
<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>
<a class="text-decoration-none text-primary" :href="'/spell/'+id">{{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="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>
</div>
</div>
<div class="small text-muted font-italic">{{description|truncate(256,"…")}}</div>
<div v-if="charge!=0" class="small font-weight-bold">Charge {{charge}} tour(s)</div>
<div v-if="ingredients.length>0" class="small"><span class="font-weight-bold">Nécessite</span> <span v-for="(ingredient,index) in ingredients" :key="index"><span v-if="index!=0">, </span>{{ingredient.name}}</span></div>
<div class="small text-muted font-italic mt-2">{{description}}</div>
<div class="mt-2">
<div class="font-weight-bold d-inline-block">Coût {{cost}}</div>
<div v-if="variables.length>0" class="small d-inline-block">, où&nbsp;:</div>
<div class=small>
<span v-for="(variable,index) in variables" :key="index"><span class="font-weight-bold"><span v-if="index!=0"><br></span>{{String.fromCharCode(120+index)}}</span> = {{variable.description}}</span>
</div>
</div>
<!----><div class="text-right">
<a class="h5 text-secondary mr-1" :href="'/spell/'+id+'/edit'"><i class="mad">edit</i></a>
<a class="h5 text-danger" :href="'/spell/'+id+'/delete'"><i class="mad">delete</i></a>
</div><!---->
</div>
</div>
</template>
@@ -20,6 +33,7 @@
export default {
name: 'spell-card',
props: {
id: Number,
name: String,
description: String,
level: Number,

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

@@ -1,5 +1,5 @@
<template>
<div class="container">
<div class="container-fluid" id="index-container">
<section class="fullpage">
<div class="px-4">
<div class="display-2 text-dark mb-4 font-display" style="line-height:100%;font-weight:900;">"C'est magique, ta gueule."</div>
@@ -20,9 +20,12 @@ export default {
<style lang="scss">
.fullpage{
min-height: 100vh;
min-height: calc(100vh - 56px);
display: flex;
justify-content: center;
align-items: center;
}
#index-container{
background: url('/img/bg1.png') center center fixed repeat;
}
</style>

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

@@ -1,5 +1,6 @@
<template>
<div class="container-fluid p-4">
<div class="container-fluid p-4" id="spell-container">
<h1 class="display-3 font-display mb-4">Sortilèges</h1>
<spell-list/>
</div>
</template>
@@ -15,4 +16,8 @@
}
</script>
<style lang="scss"></style>
<style lang="scss">
#spell-container{
background: url('/img/bg1.png') center center fixed repeat;
}
</style>