Merge pull request #19 from miku4k/note-buttons

note buttons look a bit better now
katniny · Sep 8, 2024 · c52cacf · c52cacf
2 parents 446cca6 + 41b20d8
commit c52cacf
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 47 deletions.
diff --git a/assets/css/mainSite.css b/assets/css/mainSite.css
@@ -658,7 +658,7 @@ body {
    max-width: 99.5%;
    border: 1px solid var(--note-seperator);
    padding-top: 10px;
-   padding-bottom: 30px;
+   padding-bottom: 1em;
    position: relative;
    background: var(--note-seperator);
    cursor: pointer;
@@ -792,20 +792,33 @@ body {
    margin-left: 0px;
 }
 
+.note .buttonRow {
+   display: flex;
+   justify-content: flex-start;
+   align-items: center;
+   gap: 1em;
+   margin-left: 1em;
+   margin-top: 1em;
+   font-size: large;
+}
+
+#buttonRow {
+   display: flex;
+   justify-content: flex-start;
+   align-items: center;
+   gap: 1em;
+   margin-left: 1em;
+   margin-top: 1em;
+   font-size: large;
+}
+
 .note .likeBtn {
-   float: left;
    width: auto;
-   margin-left: 10px;
-   margin-top: 5px;
    cursor: pointer;
 }
 
 #likeButton {
-   float: left;
-   font-size: large;
    width: auto;
-   margin-left: 15px;
-   margin-top: 7px;
    cursor: pointer;
    max-width: 50px;
 }
@@ -819,66 +832,42 @@ body {
 }
 
 .note .renoteBtn {
-   float: left;
    width: auto;
-   margin-left: 10px;
-   margin-top: 5px;
    cursor: pointer;
 }
 
 #renoteButton {
-   float: left;
-   font-size: large;
    width: auto;
-   margin-left: 55px;
    cursor: pointer;
    max-width: 50px;
-   margin-top: -22px;
 }
 
 #quoteRenoteButton {
-   float: left;
-   font-size: large;
    width: auto;
-   margin-left: 97px;
    cursor: pointer;
    max-width: 50px;
-   margin-top: -22px;
 }
 
 #favoriteButton {
-   float: left;
    width: auto;
    cursor: pointer;
    max-width: 50px;
-   transform: translate(-3px, 1px);
 }
 
 .note .quoteRenoteBtn {
-   float: left;
    width: auto;
-   margin-left: 10px;
-   margin-top: 3px;
    cursor: pointer;
-   font-size: 19px;
 }
 
 .note .favoriteBtn {
-   float: left;
    width: auto;
-   margin-left: 10px;
-   margin-top: 6px;
    cursor: pointer;
-   font-size: 14px;
 }
 
 #favoriteButton {
-   float: left;
    width: auto;
-   margin-left: 125px;
    cursor: pointer;
    max-width: 50px;
-   margin-top: -22px;
 }
 
 #renoteButton.renoted .fa-solid.fa-retweet {
@@ -890,18 +879,12 @@ body {
 }
 
 .note .replyBtn {
-   float: left;
    width: auto;
-   margin-left: 10px;
-   margin-top: 5px;
    cursor: pointer;
 }
 
 .note .more {
-   float: left;
    width: auto;
-   margin-left: 10px;
-   margin-top: 5px;
    cursor: pointer;
 }
 
@@ -3019,4 +3002,4 @@ footer .footerBottom {
 /* add to note */
 .addToNote {
    transform: translateY(-25px);
-}
+}
diff --git a/assets/js/ts_fas_acih.js b/assets/js/ts_fas_acih.js
@@ -1985,6 +1985,10 @@ if (pathName === "/home" || pathName === "/home.html" || pathName === "/u" || pa
                noteDiv.appendChild(contentWarning);
             }
 
+
+            const buttonRow = document.createElement("div");
+            buttonRow.classList.add("buttonRow");
+
             // Add love button
             const loveBtn = document.createElement("p");
             loveBtn.classList.add("likeBtn");
@@ -2000,7 +2004,7 @@ if (pathName === "/home" || pathName === "/home.html" || pathName === "/u" || pa
                loveBtn.innerHTML = `<i class="fa-solid fa-heart"></i> 0`;
             }
             loveBtn.setAttribute("id", `like-${noteContent.id}`);
-            noteDiv.appendChild(loveBtn);
+            buttonRow.appendChild(loveBtn);
 
             // Add renote button
             const renoteBtn = document.createElement("p");
@@ -2017,7 +2021,7 @@ if (pathName === "/home" || pathName === "/home.html" || pathName === "/u" || pa
                renoteBtn.innerHTML = `<i class="fa-solid fa-retweet"></i> 0`;
             }
             renoteBtn.setAttribute("id", `renote-${noteContent.id}`);
-            noteDiv.appendChild(renoteBtn);
+            buttonRow.appendChild(renoteBtn);
 
             // Add reply button
             const replyBtn = document.createElement("p");
@@ -2032,14 +2036,14 @@ if (pathName === "/home" || pathName === "/home.html" || pathName === "/u" || pa
             } else {
                replyBtn.setAttribute("onclick", "replyToNote(this);");
             }
-            noteDiv.appendChild(replyBtn);
+            buttonRow.appendChild(replyBtn);
 
             // Add quote renote button
             const quoteRenote = document.createElement("p");
             quoteRenote.classList.add("quoteRenoteBtn");
             quoteRenote.innerHTML = `<i class="fa-solid fa-quote-left"></i>`;
             quoteRenote.setAttribute("onclick", `quoteRenote("${noteContent.id}")`);
-            noteDiv.appendChild(quoteRenote);
+            buttonRow.appendChild(quoteRenote);
 
             // Add favorite button
             const favorite = document.createElement("p");
@@ -2056,7 +2060,7 @@ if (pathName === "/home" || pathName === "/home.html" || pathName === "/u" || pa
                   });
                }
             });
-            noteDiv.appendChild(favorite);
+            buttonRow.appendChild(favorite);
 
             // If user created the note, allow them to edit/delete
             firebase.auth().onAuthStateChanged((user) => {
@@ -2065,11 +2069,13 @@ if (pathName === "/home" || pathName === "/home.html" || pathName === "/u" || pa
                      const more = document.createElement("p");
                      more.classList.add("more");
                      more.innerHTML = `<i class="fa-solid fa-pen-to-square"></i>`;
-                     noteDiv.appendChild(more);
+                     buttonRow.appendChild(more);
                   }
                }
             })
 
+            noteDiv.appendChild(buttonRow);
+
             // Render note
             // BUT check for certain things first (such as if user is suspended, if user is blocked, etc.)
             // Prevent suspended users notes from rendering
@@ -8245,4 +8251,4 @@ function setNoteMusic(trackId) {
    swapNoteTab("note");
    pickedMusic = trackId;
    console.log(trackId);
-}
+}
diff --git a/note.html b/note.html
@@ -192,7 +192,12 @@ <h2 id="pronouns-profile" class="canBeUnderlined" style="position: absolute; flo
                     </div>
                 </div>
 
-                <span id="likeButton" onclick="likeNote()"><i class="fa-solid fa-heart"></i></span> <span id="renoteButton" onclick="renoteNote()"><i class="fa-solid fa-retweet"></i></span> <span id="quoteRenoteButton" onclick="null"><i class="fa-solid fa-quote-left"></i></span> <span id="favoriteButton" onclick="null"><i class="fa-solid fa-bookmark" id="favoriteButton_icon"></i></span>
+                <div id="buttonRow">
+                    <span id="likeButton" onclick="likeNote()"><i class="fa-solid fa-heart"></i></span>
+                    <span id="renoteButton" onclick="renoteNote()"><i class="fa-solid fa-retweet"></i></span>
+                    <span id="quoteRenoteButton" onclick="null"><i class="fa-solid fa-quote-left"></i></span>
+                    <span id="favoriteButton" onclick="null"><i class="fa-solid fa-bookmark" id="favoriteButton_icon"></i></span>
+                </div>
 
                 <div class="divider"></div>