Merge pull request #30 from atilacamurca/issue-29

Preço do jogador na página de atletas do clube
atilacamurca · Aug 1, 2020 · 8d825e6 · 8d825e6
2 parents b382cac + 48712c2
commit 8d825e6
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 25 deletions.
diff --git a/src/components/atleta/BadgePreco.vue b/src/components/atleta/BadgePreco.vue
@@ -0,0 +1,45 @@
+<template functional>
+    <span class="badge-preco bg-danger text-center"
+        :class="[`badge-left-${props.leftPos}`]">$ {{ props.preco_num }}</span>
+</template>
+
+<script>
+export default {
+    props: {
+        preco_num: {
+            type: Number,
+            required: true
+        },
+        leftPos: {
+            type: String,
+            default: 'normal'
+        }
+    }
+}
+</script>
+
+<style scoped>
+.badge-preco {
+    top: .75rem;
+    position: absolute;
+    display: block;
+    z-index: 10;
+    padding: 2px 7px;
+    font-size: 12px;
+    color: #fff;
+    font-weight: bold;
+    border-radius: 4px;
+    min-width: 48px;
+}
+@media (min-width: 992px) {
+    .badge-preco {
+        top: .75rem;
+    }
+}
+.badge-left-normal {
+    left: 1.5rem;
+}
+.badge-left-wide {
+    left: .75rem;
+}
+</style>
diff --git a/src/components/atleta/DadosAtleta.vue b/src/components/atleta/DadosAtleta.vue
@@ -1,6 +1,6 @@
 <template functional>
     <div :class="data.staticClass || ''">
-        <span class="badge-preco bg-danger text-center">$ {{ props.preco_num }}</span>
+        <badge-preco :preco_num="props.preco_num"></badge-preco>
         <div class="d-flex flex-column align-items-center">
             <div>
                 <a :href="parent.$url(props.urlPontuacao)">
@@ -80,25 +80,3 @@ export default {
     }
 }
 </script>
-
-<style scoped>
-.badge-preco {
-    top: .75rem;
-    left: 1.5rem;
-    position: absolute;
-    display: block;
-    z-index: 10;
-    padding: 2px 7px;
-    font-size: 12px;
-    color: #fff;
-    font-weight: bold;
-    border-radius: 4px;
-    min-width: 48px;
-}
-@media (min-width: 992px) {
-    .badge-preco {
-        top: .75rem;
-        left: 1.75rem;
-    }
-}
-</style>
diff --git a/src/plugins/components.js b/src/plugins/components.js
@@ -25,6 +25,7 @@ import RowAcimaMedia from '~/components/melhores/RowAcimaMedia'
 import RowRadarRodada from '~/components/melhores/RowRadarRodada'
 import VariacaoNum from '~/components/atleta/VariacaoNum'
 import DadosAtleta from '~/components/atleta/DadosAtleta'
+import BadgePreco from '~/components/atleta/BadgePreco'
 import ScoutsAta from '~/components/atleta/ScoutsAta'
 import ScoutsGol from '~/components/atleta/ScoutsGol'
 import ScoutsLat from '~/components/atleta/ScoutsLat'
@@ -44,8 +45,8 @@ import SumarioEstatisticas from '~/components/SumarioEstatisticas'
 import SumarioClubes from '~/components/SumarioClubes'
 import SumarioPartida from '~/components/SumarioPartida'
 import RowSumarioGols from '~/components/RowSumarioGols'
-import TwitterButton from "~/components/social-media/TwitterButton";
-import FacebookButton from "~/components/social-media/FacebookButton";
+import TwitterButton from "~/components/social-media/TwitterButton"
+import FacebookButton from "~/components/social-media/FacebookButton"
 
 export default {
     install (Vue) {
@@ -94,6 +95,7 @@ export default {
         Vue.component('row-radar-rodada', RowRadarRodada)
         Vue.component('variacao-num', VariacaoNum)
         Vue.component('dados-atleta', DadosAtleta)
+        Vue.component('badge-preco', BadgePreco)
         Vue.component('scouts-ata', ScoutsAta)
         Vue.component('scouts-gol', ScoutsGol)
         Vue.component('scouts-lat', ScoutsLat)

diff --git a/src/templates/ClubesTemplate.vue b/src/templates/ClubesTemplate.vue
@@ -43,6 +43,7 @@
                                         :key="item.id"
                                         :href="$url(urlPontuacao()(item.id))">
                                         <div class="d-flex justify-content-between">
+                                            <badge-preco :preco_num="item.preco_num" left-pos="wide"></badge-preco>
                                             <div class="d-flex flex-column align-items-center"
                                                 style="width: 120px">
                                                 <div>