From a658d10eac714680e7f19d7c6102dc04f0a45018 Mon Sep 17 00:00:00 2001
From: Ricky Kenendy <13516105@std.stei.itb.ac.id>
Date: Sun, 14 Apr 2019 18:35:25 +0700
Subject: [PATCH] fix padding desain on detail card component
---
src/components/pages/BiayaLangsungPage.vue | 8 ++++++++
src/components/partials/Comments.vue | 2 +-
src/components/partials/SimpleCard.vue | 4 ++--
.../partials/SimpleCardContainer.vue | 4 +---
.../partials/SimpleCardContainerScroll.vue | 19 ++++++++++++-------
5 files changed, 24 insertions(+), 13 deletions(-)
diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue
index da9fccd..be6c6b3 100644
--- a/src/components/pages/BiayaLangsungPage.vue
+++ b/src/components/pages/BiayaLangsungPage.vue
@@ -92,6 +92,14 @@ export default {
judul : "anggaran X",
biaya : "1000.0000"
},
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
{
judul : "anggaran X",
biaya : "1000.0000"
diff --git a/src/components/partials/Comments.vue b/src/components/partials/Comments.vue
index 1ed71ad..ff10261 100644
--- a/src/components/partials/Comments.vue
+++ b/src/components/partials/Comments.vue
@@ -1,7 +1,7 @@
<template>
<div id="placeholder">
+ <h4 class="font-weight-bold">Komentar ({{rows}})</h4>
<div id="comments-container">
- <h4 class="font-weight-bold">Komentar ({{rows}})</h4>
<b-card
bg-variant="light"
class="item"
diff --git a/src/components/partials/SimpleCard.vue b/src/components/partials/SimpleCard.vue
index f7ce78e..8cc3f54 100644
--- a/src/components/partials/SimpleCard.vue
+++ b/src/components/partials/SimpleCard.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <b-col class="px-2" md="6" lg="12" cols="12">
<b-card bg-variant="info" text-variant="white">
<b-card-text class="text-right">
{{ jenisAnggaran }}
@@ -7,7 +7,7 @@
<b>{{ total }}</b>
</b-card-text>
</b-card>
- </div>
+ </b-col>
</template>
<script>
diff --git a/src/components/partials/SimpleCardContainer.vue b/src/components/partials/SimpleCardContainer.vue
index 8f914b9..73da827 100644
--- a/src/components/partials/SimpleCardContainer.vue
+++ b/src/components/partials/SimpleCardContainer.vue
@@ -1,8 +1,6 @@
<template>
- <b-row id="content-detail" class="justify-content-md-center">
- <b-col class="px-2" md="6" lg="12" cols="12">
+ <b-row id="content-detail">
<simple-card v-for="data in dataBubble" :key="data.judul" v-bind:jenisAnggaran="data.judul" v-bind:totalAnggaran="data.biaya" />
- </b-col>
</b-row>
</template>
diff --git a/src/components/partials/SimpleCardContainerScroll.vue b/src/components/partials/SimpleCardContainerScroll.vue
index ab8e46b..ec7a19a 100644
--- a/src/components/partials/SimpleCardContainerScroll.vue
+++ b/src/components/partials/SimpleCardContainerScroll.vue
@@ -1,9 +1,10 @@
<template>
<div id="placeholder">
- <b-row id="content-detail" class="justify-content-md-center">
- <b-col class="px-2" md="6" lg="12" cols="12">
+ <h4 class="font-weight-bold">
+ {{"Detail KEGIATAN"+ "(" + rows + ")" }}
+ </h4>
+ <b-row id="content-detail">
<simple-card v-for="data in dataBubble" :key="data.judul" v-bind:jenisAnggaran="data.judul" v-bind:totalAnggaran="data.biaya" />
- </b-col>
</b-row>
</div>
</template>
@@ -18,11 +19,15 @@ export default {
return {
}
},
+ computed : {
+ rows() {
+ return this.dataBubble.length;
+ }
+ },
components: {
- 'simple-card':SimpleCard,
+ 'simple-card':SimpleCard,
},
methods : {
-
},
}
</script>
@@ -38,12 +43,12 @@ b-col {
#placeholder {
width: 100%;
- height: 100%;
padding: 20px;
+ margin : 10px;
#content-detail {
padding-top: 20px;
- height: 60%;
+ max-height: 45.3125rem; //725px
padding: 0 10px 10px;
overflow-y: scroll;
border-top: 1px solid #fff;
--
GitLab