design░dream (ちま欧)

𝕖𝕧𝕖𝕣𝕪𝕥𝕙𝕚𝕟𝕘 𝕚𝕤 𝕓𝕖𝕒𝕦𝕥𝕚𝕗𝕦𝕝
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

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>

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">, &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,