format

traP-jp · Jun 16, 2024 · 4c37bbb · 4c37bbb
1 parent 7c82ca7
commit 4c37bbb
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 25 deletions.
diff --git a/frontend/src/components/Post.vue b/frontend/src/components/Post.vue
@@ -77,13 +77,19 @@ const vTwemoji = {
         <div v-if="detail" class="detail-original-message">{{ originalContent }}</div>
       </div>
       <div class="post-reactions">
-        <button v-for="reaction in copiedReactions" :key="reaction.id" class="post-reaction"
-          :class="{ clicked: reaction.clicked, ripple: newReaction === reaction.id }" @click="(e) => {
-            toggleReaction(reaction);
-            e.stopPropagation();
-            e.preventDefault();
-          }
-            ">
+        <button
+          v-for="reaction in copiedReactions"
+          :key="reaction.id"
+          class="post-reaction"
+          :class="{ clicked: reaction.clicked, ripple: newReaction === reaction.id }"
+          @click="
+            (e) => {
+              toggleReaction(reaction);
+              e.stopPropagation();
+              e.preventDefault();
+            }
+          "
+        >
           <span class="post-reaction-icon" v-twemoji>{{ reactionIcons[reaction.id] }}</span>
           <span class="post-reaction-count">{{ reaction.count }}</span>
         </button>
@@ -154,7 +160,7 @@ const vTwemoji = {
       transform: translateY(-16px);
     }
 
-    .post-message:hover+.original-message {
+    .post-message:hover + .original-message {
       visibility: visible;
       opacity: 100%;
       transform: translateY(0);
@@ -192,7 +198,7 @@ const vTwemoji = {
           animation: ripple 0.5s ease-out forwards;
         }
 
-        &>* {
+        & > * {
           opacity: 40%;
         }
 
@@ -211,7 +217,7 @@ const vTwemoji = {
         &.clicked {
           background-color: var(--accent-color-10);
 
-          &>* {
+          & > * {
             opacity: 100%;
           }
 

diff --git a/frontend/src/components/UserViewMain.vue b/frontend/src/components/UserViewMain.vue
@@ -41,9 +41,16 @@ const { data, loading } = useFetcher(() => getUser(props.username));
         </div>
       </div>
       <div class="user-view-posts">
-        <Post v-for="post in data?.posts" :id="post.id" :key="post.id" :name="post.user_name"
-          :date="new Date(post.created_at)" :content="post.converted_message" :original-content="post.original_message"
-          :reactions="convertReactions(post.reactions, post.my_reactions)" />
+        <Post
+          v-for="post in data?.posts"
+          :id="post.id"
+          :key="post.id"
+          :name="post.user_name"
+          :date="new Date(post.created_at)"
+          :content="post.converted_message"
+          :original-content="post.original_message"
+          :reactions="convertReactions(post.reactions, post.my_reactions)"
+        />
       </div>
     </div>
     <div v-if="loading" class="user-view-loader">

diff --git a/frontend/src/views/PostView.vue b/frontend/src/views/PostView.vue
@@ -24,24 +24,40 @@ loadPost();
     <div class="post-view-container">
       <div v-if="postContent != undefined">
         <div v-for="ancestor in postContent.ancestors" :key="ancestor.post.id">
-          <Post :content="ancestor.post.converted_message" :originalContent="ancestor.post.original_message"
-            :date="new Date(ancestor.post.created_at)" :name="ancestor.post.user_name"
-            :reactions="convertReactions(ancestor.post.reactions, ancestor.post.my_reactions)" :id="ancestor.post.id"
-            @react="loadPost" />
+          <Post
+            :content="ancestor.post.converted_message"
+            :originalContent="ancestor.post.original_message"
+            :date="new Date(ancestor.post.created_at)"
+            :name="ancestor.post.user_name"
+            :reactions="convertReactions(ancestor.post.reactions, ancestor.post.my_reactions)"
+            :id="ancestor.post.id"
+            @react="loadPost"
+          />
         </div>
         <hr />
-        <Post :content="postContent.converted_message" :originalContent="postContent.original_message"
-          :date="new Date(postContent.created_at)" :name="postContent.user_name"
-          :reactions="convertReactions(postContent.reactions, postContent.my_reactions)" :id="postContent.id" detail
-          @react="loadPost" />
+        <Post
+          :content="postContent.converted_message"
+          :originalContent="postContent.original_message"
+          :date="new Date(postContent.created_at)"
+          :name="postContent.user_name"
+          :reactions="convertReactions(postContent.reactions, postContent.my_reactions)"
+          :id="postContent.id"
+          detail
+          @react="loadPost"
+        />
         <hr />
         <NewPostSection :parent-id="postContent.id" @submit="loadPost" />
         <!-- TODO: -->
         <div v-for="child in postContent.children" :key="child.post.id">
-          <Post :content="child.post.converted_message" :originalContent="child.post.original_message"
-            :date="new Date(child.post.created_at)" :name="child.post.user_name"
-            :reactions="convertReactions(child.post.reactions, child.post.my_reactions)" :id="child.post.id"
-            @react="loadPost" />
+          <Post
+            :content="child.post.converted_message"
+            :originalContent="child.post.original_message"
+            :date="new Date(child.post.created_at)"
+            :name="child.post.user_name"
+            :reactions="convertReactions(child.post.reactions, child.post.my_reactions)"
+            :id="child.post.id"
+            @react="loadPost"
+          />
         </div>
       </div>
     </div>