Skip to content

M
Menteur
Unverified Commit 9739e214 by PLN (Algolia)
Options

feat(UI): Bootstrap cards

parent 4463aee3
Showing with 77 additions and 39 deletions
client/package.json
......@@ -8,6 +8,8 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.12.0",
"core-js": "^3.6.4",
"es6-promise": "^4.2.8",
"socket.io-client": "^2.3.0",
......
client/public/index.html
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
......
client/src/App.vue
......@@ -92,4 +92,8 @@ export default {
#game {
margin-top: 20px;
}
.card-deck {
justify-content: center;
}
</style>
client/src/components/Card.vue
<template>
<div class="card">
<div>
<b-card
title="Card Title"
img-src="https://picsum.photos/600/300/?image=25"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2"
>
<b-card-text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</b-card-text>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
</div>
<img class="card-pic" v-bind:src="imageSrc()" />
<p>{{ text() }}</p>
</div>
<b-card
:title="text()"
:img-src="imageSrc()"
:img-alt="text()"
img-top
style="max-width: 20rem;"
class="mb-4"
>
</b-card>
</template>
<script>
export default {
......@@ -66,7 +53,4 @@ export default {
};
</script>
<style scoped>
.card-pic {
max-width: 150px;
}
</style>
client/src/components/Hand.vue
<template>
<div id="hand">
<p>{{ count() }} cartes.</p>
<Card
v-for="card in cards"
v-bind:key="card.value + ' ' + card.color"
v-bind:value="card.value"
v-bind:color="card.color"
/>
<h3>Tu as <b>{{ count() }}</b> cartes en main.</h3>
<b-card-group deck>
<Card
v-for="card in cards"
v-bind:key="card.value + ' ' + card.color"
v-bind:value="card.value"
v-bind:color="card.color"
/>
</b-card-group>
</div>
</template>
<script>
......@@ -26,9 +28,4 @@ export default {
}
}
};
</script>
<style scoped>
.card-pic {
max-width: 100px;
}
</style>
</script>
\ No newline at end of file
client/yarn.lock
......@@ -770,6 +770,14 @@
"@nodelib/fs.scandir" "2.1.3"
fastq "^1.6.0"
"@nuxt/opencollective@^0.3.0":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@nuxt/opencollective/-/opencollective-0.3.0.tgz#11d8944dcf2d526e31660bb69570be03f8fb72b7"
dependencies:
chalk "^2.4.2"
consola "^2.10.1"
node-fetch "^2.6.0"
"@samverschueren/stream-to-observable@^0.3.0":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
......@@ -1567,6 +1575,20 @@ boolbase@^1.0.0, boolbase@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
bootstrap-vue@^2.12.0:
version "2.12.0"
resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.12.0.tgz#4298c9652f17ac403db226ff811fa146d7d185ca"
dependencies:
"@nuxt/opencollective" "^0.3.0"
bootstrap ">=4.4.1 <5.0.0"
popper.js "^1.16.1"
portal-vue "^2.1.7"
vue-functional-data-merge "^3.1.0"
"bootstrap@>=4.4.1 <5.0.0", bootstrap@^4.4.1:
version "4.4.1"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.4.1.tgz#8582960eea0c5cd2bede84d8b0baf3789c3e8b01"
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
......@@ -2108,6 +2130,10 @@ connect-history-api-fallback@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
consola@^2.10.1:
version "2.11.3"
resolved "https://registry.yarnpkg.com/consola/-/consola-2.11.3.tgz#f7315836224c143ac5094b47fd4c816c2cd1560e"
console-browserify@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
......@@ -2845,6 +2871,10 @@ es-to-primitive@^1.2.1:
is-date-object "^1.0.1"
is-symbol "^1.0.2"
es6-promise@^4.2.8:
version "4.2.8"
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
escape-html@~1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
......@@ -4940,6 +4970,10 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"
node-fetch@^2.6.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
node-forge@0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
......@@ -5504,6 +5538,14 @@ pnp-webpack-plugin@^1.6.4:
dependencies:
ts-pnp "^1.1.6"
popper.js@^1.16.1:
version "1.16.1"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
portal-vue@^2.1.7:
version "2.1.7"
resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"
portfinder@^1.0.25:
version "1.0.25"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
......@@ -7303,6 +7345,10 @@ vue-eslint-parser@^7.0.0:
esquery "^1.0.1"
lodash "^4.17.15"
vue-functional-data-merge@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"
vue-hot-reload-api@^2.3.0:
version "2.3.4"
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
......@@ -7345,6 +7391,10 @@ vue@^2.6.11:
version "2.6.11"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
vuex@^3.1.3:
version "3.3.0"
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.3.0.tgz#665b4630ea1347317139fcc5cb495aab3ec5e513"
watchpack@^1.6.0:
version "1.6.1"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment