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

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 228 KiB

View File

@@ -7,14 +7,12 @@
<link rel="icon" href="<%= BASE_URL %>img/favicon.ico"> <link rel="icon" href="<%= BASE_URL %>img/favicon.ico">
<title>Spellsaurus</title> <title>Spellsaurus</title>
<link rel="stylesheet" href="<%= BASE_URL %>libs/style.css"> <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> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="srs"></div> <div id="srs"></div>
</body> </body>
</html> </html>

View File

@@ -1,5 +1,4 @@
<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">
@@ -13,7 +12,6 @@
</ul> </ul>
</div> </div>
</nav> </nav>
</div>
</template> </template>
<script> <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="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="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"> <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>
<div class="font-weight-700 text-muted d-inline-block">Niveau {{level}}</div> <div>
<div class="text-muted d-inline-block">· <div class="font-weight-700 text-muted d-inline-block">Niveau {{level}}</div><span> · </span>
<span v-for="(school, index) in schools" :key="index"> <div class="text-muted d-inline-block">
<span v-if="index!=0">, <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>{{school.name}}</span>
</div> </div>
<div class="small text-muted font-italic">{{description|truncate(256,"…")}}</div> </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>
</div> </div>
</template> </template>
@@ -20,6 +33,7 @@
export default { export default {
name: 'spell-card', name: 'spell-card',
props: { props: {
id: Number,
name: String, name: String,
description: String, description: String,
level: Number, level: Number,

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="container"> <div class="container-fluid" id="index-container">
<section class="fullpage"> <section class="fullpage">
<div class="px-4"> <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> <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"> <style lang="scss">
.fullpage{ .fullpage{
min-height: 100vh; min-height: calc(100vh - 56px);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
#index-container{
background: url('/img/bg1.png') center center fixed repeat;
}
</style> </style>

View File

@@ -1,5 +1,6 @@
<template> <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/> <spell-list/>
</div> </div>
</template> </template>
@@ -15,4 +16,8 @@
} }
</script> </script>
<style lang="scss"></style> <style lang="scss">
#spell-container{
background: url('/img/bg1.png') center center fixed repeat;
}
</style>