fix: カードを揃えた

hotsukai · Dec 28, 2020 · 1c4d66c · 1c4d66c
1 parent dbab08e
commit 1c4d66c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/components/CoffeeCards.vue b/components/CoffeeCards.vue
@@ -31,8 +31,8 @@ export default {
 .horizonal-item {
  display: inline-block;
  width: 80%;
- height: -webkit-fill-available;
- margin: 0em 1em;
+ max-width: 25em;
+ margin:0em 2em 1em 0em;
  vertical-align: top;
 }
 .view-more {

diff --git a/components/ReviewCards.vue b/components/ReviewCards.vue
@@ -1,6 +1,10 @@
 <template>
- <ul class="horizonal-list">
- <li v-for="review in reviews" :key="review.id" class="horizonal-item">
+ <ul :class="{ 'horizonal-list': isHorizonal }">
+ <li
+ v-for="review in reviews"
+ :key="review.id"
+ :class="{ 'horizonal-item': isHorizonal }"
+ >
  <ReviewCard :review="review" :key="'reviewCard-' + review.id" />
  </li>
  <a class="view-more"><i class="fas fa-angle-double-right"></i></a>
@@ -9,7 +13,7 @@
 
 <script>
 export default {
- props: { reviews: Array },
+ props: { reviews: Array, isHorizonal: { type: Boolean, default: false } },
 };
 </script>
 
@@ -22,9 +26,10 @@ export default {
 .horizonal-item {
  /* 横スクロール用 */
  display: inline-block;
- width: 80%;
- margin: 0em 1em;
  vertical-align: top;
+ width: 80%;
+ max-width: 25em;
+ margin: 0em 2em 1em 0em;
 }
 
 .view-more {

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -10,6 +10,6 @@
 
 <style>
 .section{
- padding-top: 60px;
+ padding-top: 70px;
 }
 </style>
diff --git a/pages/mypage.vue b/pages/mypage.vue
@@ -4,7 +4,7 @@
  <p class="subtitle">User-ID : {{ user.id }}</p>
  <p class="subtitle">あなたが書いたレビュー</p>
  <div v-show="isReviewExist">
- <ReviewCards :reviews="reviews" class="cards" />
+ <ReviewCards :reviews="reviews" :isHorizonal="true" class="cards" />
  </div>
  <div v-show="!isReviewExist">
  <p>まだレビューがありません</p>