Update: [Client][Panel/Twitter] まだ1件もツイートが取得されていない時のプレースホルダーを設定

tsukumijima · Aug 22, 2024 · 86b3bd2 · 86b3bd2
1 parent 84fc972
commit 86b3bd2
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 2 deletions.
diff --git a/client/src/components/Watch/Panel/Twitter/Search.vue b/client/src/components/Watch/Panel/Twitter/Search.vue
@@ -33,7 +33,7 @@
             />
         </div>
         <DynamicScroller ref="scroller" class="search-tweets" :direction="'vertical'" :items="tweets"
-            :min-item-size="80" :buffer="400">
+            :min-item-size="80" :buffer="400" v-show="tweets.length > 0">
             <template v-slot="{item, active}">
                 <DynamicScrollerItem
                     :item="item"
@@ -43,6 +43,12 @@
                 </DynamicScrollerItem>
             </template>
         </DynamicScroller>
+        <div class="search-announce" v-show="tweets.length === 0">
+            <div class="search-announce__heading">まだツイートがありません。</div>
+            <div class="search-announce__text">
+                <p class="mt-0 mb-0">右上の更新ボタンを押すと、最新の検索結果を<br>時系列で表示できます。</p>
+            </div>
+        </div>
     </div>
 </template>
 <script lang="ts" setup>
@@ -277,4 +283,35 @@ onMounted(() => {
     animation: spin 1s linear infinite;
 }
 
+.search-announce {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 100%;
+    padding-left: 12px;
+    padding-right: 5px;
+    @include tablet-vertical {
+        padding-left: 24px;
+        padding-right: 24px;
+    }
+
+    &__heading {
+        font-size: 20px;
+        font-weight: bold;
+        @include smartphone-horizontal {
+            font-size: 16px;
+        }
+    }
+    &__text {
+        margin-top: 12px;
+        color: rgb(var(--v-theme-text-darken-1));
+        font-size: 13.5px;
+        text-align: center;
+        @include smartphone-horizontal {
+            font-size: 12px;
+        }
+    }
+}
+
 </style>
diff --git a/client/src/components/Watch/Panel/Twitter/Timeline.vue b/client/src/components/Watch/Panel/Twitter/Timeline.vue
@@ -23,7 +23,7 @@
             />
         </div>
         <DynamicScroller class="timeline-tweets" :direction="'vertical'" :items="tweets"
-            :min-item-size="80" :buffer="400">
+            :min-item-size="80" :buffer="400" v-show="tweets.length > 0">
             <template v-slot="{item, active}">
                 <DynamicScrollerItem
                     :item="item"
@@ -33,6 +33,12 @@
                 </DynamicScrollerItem>
             </template>
         </DynamicScroller>
+        <div class="timeline-announce" v-show="tweets.length === 0">
+            <div class="timeline-announce__heading">まだツイートがありません。</div>
+            <div class="timeline-announce__text">
+                <p class="mt-0 mb-0">右上の更新ボタンを押すと、最新の<br>ホームタイムラインを時系列で表示できます。</p>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -182,4 +188,35 @@ watch(selected_twitter_account, () => {
     animation: spin 1s linear infinite;
 }
 
+.timeline-announce {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 100%;
+    padding-left: 12px;
+    padding-right: 5px;
+    @include tablet-vertical {
+        padding-left: 24px;
+        padding-right: 24px;
+    }
+
+    &__heading {
+        font-size: 20px;
+        font-weight: bold;
+        @include smartphone-horizontal {
+            font-size: 16px;
+        }
+    }
+    &__text {
+        margin-top: 12px;
+        color: rgb(var(--v-theme-text-darken-1));
+        font-size: 13.5px;
+        text-align: center;
+        @include smartphone-horizontal {
+            font-size: 12px;
+        }
+    }
+}
+
 </style>