122 fenftギャラリーのデザイン作成 (#130)

* [追加]NFTgallery * [変更]動画モーダルを縦長に対応 --------- Co-authored-by: sayako21 <>
teritamas · Nov 18, 2023 · 132bd61 · 132bd61
1 parent e4df059
commit 132bd61
Show file tree

Hide file tree

Showing 9 changed files with 216 additions and 78 deletions.
diff --git a/app.vue b/app.vue
@@ -77,11 +77,11 @@ body {
 .main {
   /*max-width: 600px;*/
   margin: 0 auto;
-  padding-top: 5rem;
+  padding-top: 4rem;
 }
 .bingo-card-frame {
   max-width: 500px;
-  margin: 1rem auto;
+  margin: 0 auto;
   padding-top: 2rem;
   padding-left: 1rem;
   padding-right: 1rem;

diff --git a/components/AppControlArea.vue b/components/AppControlArea.vue
@@ -0,0 +1,117 @@
+<template>
+  <footer
+    class="text-gray-600 body-font fixed bottom-2 border border-gray-700 w-11/12"
+  >
+    <div class="bg-footer grid grid-cols-3">
+      <router-link class="footer-item block text-gray-500" to="/login">
+        <div class="p-1 py-2 grid justify-items-center">
+          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 16 16">
+            <path
+              fill-rule="evenodd"
+              d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"
+            />
+            <path
+              d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"
+            />
+          </svg>
+          <small>画面を更新</small>
+        </div>
+      </router-link>
+      <router-link class="footer-item block text-gray-500" to="/mypage">
+        <div class="p-1 py-2 grid justify-items-center">
+          <w3m-core-button themeVariables="--w3m-accent-color: #000" />
+        </div>
+      </router-link>
+      <a class="footer-item block text-gray-500" @click="logout">
+        <div class="p-1 py-2 grid justify-items-center">
+          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 16 16">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"
+            />
+          </svg>
+          <small>ログアウト</small>
+        </div>
+      </a>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts" setup>
+const emits = defineEmits(["logout"]);
+const logout = () => {
+  emits("logout", logout);
+};
+</script>
+
+<style scoped>
+footer {
+  border-radius: 1rem;
+  margin: 1rem;
+  z-index: 10000;
+}
+.bg-footer {
+  background: white;
+  border-radius: 1rem;
+  box-shadow: 10px;
+}
+.footer-item:hover {
+  background: #878c8d;
+  color: white;
+  border-radius: 1rem;
+  cursor: pointer;
+}
+path {
+  fill: gray;
+  stroke: transparent;
+}
+
+.footer-item:hover path {
+  -webkit-animation: stroke 2s ease-in-out forwards;
+  animation: stroke 2s ease-in-out forwards;
+  stroke: white;
+  stroke-dasharray: 1800;
+  stroke-dashoffset: 0;
+  stroke-width: 1;
+}
+
+@-webkit-keyframes stroke {
+  0% {
+    fill: #eee;
+    stroke-dashoffset: 1800;
+  }
+  10% {
+    fill: transparent;
+  }
+  80% {
+    fill: transparent;
+  }
+  100% {
+    fill: white;
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes stroke {
+  0% {
+    fill: #eee;
+    stroke-dashoffset: 1800;
+  }
+  10% {
+    fill: transparent;
+  }
+  80% {
+    fill: transparent;
+  }
+  100% {
+    fill: white;
+    stroke-dashoffset: 0;
+  }
+}
+</style>
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -55,9 +55,6 @@ const currentUser = useCurrentUser();
   text-transform: uppercase;
   letter-spacing: 2px;
 }
-header {
-  z-index: 10;
-}
 .router-link-active {
   border-bottom: 2px solid var(--c5);
   -webkit-background-clip: text;

diff --git a/components/BingoCardCarousel.vue b/components/BingoCardCarousel.vue
@@ -1,14 +1,15 @@
 <template>
   <div
     id="vue-carousel"
-    style="height: 32rem; width: 100vw; overflow: hidden"
+    class="h-[90vh]"
+    style="width: 100vw; overflow: hidden"
     @touchstart="onTouchStartCard"
     @mousedown="onTouchStartCard"
   >
     <div class="carousel">
       <button
         class="nav left text-4xl"
-        v-if="state.currentNum > 0 && !modalIsOpen"
+        v-if="state.currentNum > 0 && !modalIsOpen && !videoModalIsOpen"
         @click="activeDecrement"
       >
         <svg
@@ -59,6 +60,8 @@
         >
           <BingoCardView
             @openBingoCardDetailModal="openBingoCardDetailModal"
+            @openVideoModal="openVideoModal"
+            @closeVideoModal="closeVideoModal"
             @changeBingoViewSetting="
               emits('changeBingoViewSetting', bingoCard.id, $event)
             "
@@ -70,19 +73,19 @@
       </div>
       <button
         class="nav right text-4xl"
-        v-if="state.currentNum < props.bingoCards.length - 1 && !modalIsOpen"
+        v-if="
+          state.currentNum < props.bingoCards.length - 1 &&
+          !modalIsOpen &&
+          !videoModalIsOpen
+        "
         @click="activeIncrement"
       >
         <svg
           stroke="currentColor"
           fill="currentColor"
-          stroke-width="0"
-          version="1.2"
-          baseProfile="tiny"
           viewBox="0 0 24 24"
           height="1em"
           width="1em"
-          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             d="M10 20c-.802 0-1.555-.312-2.122-.879-.566-.566-.878-1.32-.878-2.121s.312-1.555.879-2.122l2.878-2.878-2.878-2.879c-.567-.566-.879-1.32-.879-2.121s.312-1.555.879-2.122c1.133-1.132 3.109-1.133 4.243.001l7.121 7.121-7.122 7.121c-.566.567-1.319.879-2.121.879zm0-14c-.268 0-.518.104-.707.292-.189.19-.293.441-.293.708s.104.518.293.707l4.292 4.293-4.292 4.293c-.189.189-.293.439-.293.707s.104.518.293.707c.378.379 1.037.378 1.414.001l5.708-5.708-5.708-5.707c-.189-.189-.439-.293-.707-.293z"
@@ -240,6 +243,15 @@ const selectedBingoCardCellNo = computed(() => {
  */
 // ビンゴカード詳細モーダルを開く
 const modalIsOpen = ref(false);
+const videoModalIsOpen = ref(false); //孫の  MovieModalのステータス管理のため
+const openVideoModal = () => {
+  //孫の  MovieModalのステータス管理のため
+  videoModalIsOpen.value = true;
+};
+const closeVideoModal = () => {
+  //孫の  MovieModalのステータス管理のため
+  videoModalIsOpen.value = false;
+};
 const openNextBingoCardDetailModal = (index: number) => {
   openBingoCardDetailModal(selectedBingoCard.value.bingoCells[index].id);
 };

diff --git a/components/BingoCardView.vue b/components/BingoCardView.vue
@@ -98,6 +98,7 @@
     :clearMovieUrl="bingoCard.clearMovieUrl"
     :bingoCard="bingoCard"
     @closeMovieModal="closeMovieModal"
+    @closeVideoModal="closeVideoModal"
   />
 </template>
 
@@ -123,9 +124,14 @@ const props = defineProps({
 const emits = defineEmits([
   "openBingoCardDetailModal",
   "changeBingoViewSetting",
+  "closeVideoModal", //親の BingoCardCarouselでのステータス管理のため
+  "openVideoModal", //親の BingoCardCarouselでのステータス管理のため
 ]);
-const openBingoCardDetailModal = async (bingoCellId: string) => {
-  await emits("openBingoCardDetailModal", bingoCellId);
+const closeVideoModal = () => {
+  emits("closeVideoModal"); //親の BingoCardCarouselでのステータス管理のため
+};
+const openBingoCardDetailModal = (bingoCellId: string) => {
+  emits("openBingoCardDetailModal", bingoCellId);
 };
 // computed プロパティを作成
 const createdAt = computed(() => {
@@ -181,6 +187,7 @@ const movieModalIsOpen = ref(false);
 const openMovieModal = (clearMovieUrl: String) => {
   if (!clearMovieUrl) return false;
   movieModalIsOpen.value = true;
+  emits("openVideoModal");
 };
 // ビンゴカード詳細モーダルを閉じる
 const closeMovieModal = async () => {

diff --git a/components/MovieModal.vue b/components/MovieModal.vue
@@ -11,7 +11,7 @@
         :url="props.clearMovieUrl"
       ></ShareButton>
       <!-- Modal header -->
-      <div class="flex items-center justify-between p-5 rounded-t">
+      <div class="flex items-center justify-between pt-5 px-5 rounded-t">
         <h3 class="text-lg font-extrabold text-gray-00 pl-2"></h3>
         <button
           @click="closeMovieModal()"
@@ -39,13 +39,13 @@
       <!-- Modal body -->
       <div class="px-6">
         <video
-          class="m-auto w-11/12 md:w-8/12 lg:w-6/12"
+          class="m-auto w-11/12 md:w-8/12 lg:w-6/12 sm:h-[74vh]"
           :src="clearMovieUrl"
           controls
         ></video>
       </div>
       <!-- Modal footer -->
-      <div class="flex justify-between p-6 space-x-2 rounded-b">
+      <div class="flex justify-between pb-6 px-6 space-x-2 rounded-b">
         <button
           @click="closeMovieModal()"
           data-modal-hide="extralarge-modal"
@@ -72,14 +72,15 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(["closeMovieModal"]);
+const emits = defineEmits(["closeMovieModal", "closeVideoModal"]);
 
 /**
  * モーダルの状態に関する定義
  */
 // モーダルクローズのイベント発火
-const closeMovieModal = async () => {
-  await emits("closeMovieModal");
+const closeMovieModal = () => {
+  emits("closeMovieModal");
+  emits("closeVideoModal"); //親の親の BingoCardCarouselでのステータス管理のため
 };
 </script>
 

diff --git a/components/MyProfile.vue b/components/MyProfile.vue
@@ -36,8 +36,6 @@
         </v-icon>
       </div>
     </div>
-    <!-- NFTギャラリー -->
-    <NftGalley class="card card-one" :nfts="ownNfts" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -59,10 +57,6 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  ownNfts: {
-    type: Array as PropType<NFT[]>,
-    required: true,
-  },
   bingoToken: {
     type: Object as PropType<NFT | undefined>,
     required: true,

diff --git a/components/NftGalley.vue b/components/NftGalley.vue
@@ -1,13 +1,23 @@
 <template>
-  <div v-for="nft in nfts">
-    <div>
-      <p>タイトル: {{ nft.metadata.name }}</p>
-      <p>概要: {{ nft.metadata.description ?? "なし" }}</p>
-      <p>NFTの規格: {{ nft.metadata.type }}</p>
-      <p>保持数: {{ nft.quantityOwned }}</p>
+  <div
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-2"
+    style="margin: 0rem 3rem"
+  >
+    <h1 class="m-2 mt-8 text-xl mx-auto col-span-1 md:col-span-2 lg:col-span-5">
+      獲得したNFTリスト
+    </h1>
+    <div v-for="(nft, index) in nfts" class="galley-video">
+      <video
+        @playing="onVideoPlaying(index)"
+        @pause="onVideoPaused()"
+        :src="nft.metadata.animation_url!"
+        :class="!videoPlaying[index] ? 'color' : ''"
+        controls
+      ></video>
+      <p v-show="!videoPlaying[index]">
+        {{ nft.metadata.name }}
+      </p>
     </div>
-    <!-- ここを有効化すると動画がダウンロードされてしまうため、一旦コメントアウト -->
-    <!-- <iframe :src="nft.metadata.animation_url!" frameborder="0"></iframe> -->
   </div>
 </template>
 
@@ -19,4 +29,44 @@ const props = defineProps({
     required: true,
   },
 });
+
+const videoPlaying = ref(Array(props.nfts.length).fill(false));
+
+const onVideoPlaying = (index) => {
+  videoPlaying.value = videoPlaying.value.map((value, i) => i === index);
+};
+
+const onVideoPaused = () => {
+  videoPlaying.value = Array(props.nfts.length).fill(false);
+};
 </script>
+
+<style>
+.galley-video {
+  position: relative;
+  display: inline;
+  margin: 0 auto;
+}
+
+.galley-video video {
+  border-radius: 10px;
+}
+
+.galley-video .color {
+  background: white;
+  filter: opacity(0.5);
+}
+
+.galley-video p {
+  font-family: "Kiwi Maru", serif;
+  font-size: 1.25rem;
+  padding: 16px;
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  max-height: 70%;
+  border-radius: 10px;
+  color: black;
+  font-weight: bold;
+}
+</style>