Change image-only notes, add images to custom themes, fixed core them…

…es, and added core themes
katniny · Oct 7, 2024 · 6a04863 · 6a04863
1 parent c18f509
commit 6a04863
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 10 deletions.
diff --git a/assets/css/mainSite.css b/assets/css/mainSite.css
@@ -2862,15 +2862,48 @@ textarea.borderBlack:focus {
    cursor: pointer;
    float: left;
    margin-left: 10px;
-   margin-top: 10px;
-   height: 150px;
+   margin-top: 10px; 
+   max-height: 250px;
    transition: all 0.15s linear;
 }
 
+#availableThemes .theme img {
+   width: 100%;
+   height: auto;
+   display: block;
+   border-radius: 15px;
+   margin-bottom: 3px;
+}
+
+#availableThemes .theme p {
+   display: -webkit-box;
+   -webkit-line-clamp: 3;
+   line-clamp: 3;
+   -webkit-box-orient: vertical;
+   overflow: hidden;
+   text-overflow: ellipsis;   
+}
+
 #availableThemes .theme:hover {
    transform: translateY(-3px);
 }
 
+#availableThemes .theme .badge {
+   background: var(--warning-text);
+   padding: 2px 8px;
+   border-radius: 12px;
+   font-size: 0.8em;
+   margin-left: 5px;
+   color: var(--hovered-button-text);
+   display: block;
+   max-width: 50px;
+   margin-bottom: 10px;
+}
+
+#availableThemes .theme .badge i {
+   color: var(--hovered-button-text);
+}
+
 /* Markdown Toolbar */
 #toolbar {
    position: absolute;
@@ -3074,4 +3107,11 @@ a:hover {
 /* small */
 small {
    color: var(--text-semi-transparent);
+}
+
+/* theme selected */
+#themeSelected img {
+   max-width: 100%;
+   border-radius: 15px;
+   height: 200px;
 }
diff --git a/assets/imgs/themeimgunavailable.png b/assets/imgs/themeimgunavailable.png
diff --git a/assets/js/ts_fas_acih.js b/assets/js/ts_fas_acih.js
@@ -29,8 +29,8 @@ const pathName = pageURL.pathname;
 let isOnDesktopApp = null;
 
 // TransSocial Version
-let transsocialVersion = "v2024.10.5";
-let transsocialUpdate = "v2024105-1";
+let transsocialVersion = "v2024.10.6";
+let transsocialUpdate = "v2024106-1";
 let transsocialReleaseVersion = "pre-alpha";
 
 const notices = document.getElementsByClassName("version-notice");
@@ -2843,7 +2843,11 @@ if (pathName === "/note.html" || pathName === "/note") {
 
             database.ref(`users/${noteData.whoSentIt}`).once("value", (snapshot) => {
                const profileData = snapshot.val();
-               document.title = `"${noteData.text}" / @${profileData.username} on TransSocial`;
+               if (noteData.text !== "") {
+                  document.title = `"${noteData.text}" / @${profileData.username} on TransSocial`;
+               } else {
+                  document.title = `@${profileData.username} on TransSocial`;
+               }
                document.getElementById(`melissa`).style.display = "block";
                document.getElementById(`userImage-profile`).src = `https://firebasestorage.googleapis.com/v0/b/${firebaseConfig.storageBucket}/o/images%2Fpfp%2F${noteData.whoSentIt}%2F${profileData.pfp}?alt=media`;
                document.getElementById(`userImage-profile`).setAttribute("onclick", `window.location.href="/u?id=${profileData.username}"`);
@@ -4023,10 +4027,6 @@ if (pathName === "/settings" || pathName === "/settings.html") {
                                     text : themeData.themeColors.text,
                                     textHalfTransparent : themeData.themeColors.textHalfTransparent,
                                     textSemiTransparent : themeData.themeColors.textSemiTransparent,
-                                    buttonText : themeData.themeColors.buttonText,
-                                    hoveredButtonText : themeData.themeColors.hoveredButtonText,
-                                    createNoteButton : themeData.themeColors.createNoteButton,
-                                    createNoteButtonHover : themeData.themeColors.createNoteButtonHover
                                  }).then(() => {
                                     window.location.reload();
                                  });
@@ -4053,6 +4053,10 @@ if (pathName === "/settings" || pathName === "/settings.html") {
                                     buttonText : themeData.themeColors.buttonText,
                                     hoveredButtonText : themeData.themeColors.hoveredButtonText,
                                     createNoteButton : themeData.themeColors.createNoteButton,
+                                    createNoteButtonHover : themeData.themeColors.createNoteButtonHover,
+                                    buttonText : themeData.themeColors.buttonText,
+                                    hoveredButtonText : themeData.themeColors.hoveredButtonText,
+                                    createNoteButton : themeData.themeColors.createNoteButton,
                                     createNoteButtonHover : themeData.themeColors.createNoteButtonHover
                                  }).then(() => {
                                     window.location.reload();
@@ -6511,7 +6515,22 @@ if (pathName === "/userstudio") {
             const themeDiv = document.createElement("div");
             themeDiv.classList.add("theme");
 
-            // add title/desc/creator to div
+            // add pic/title/desc/creator to div
+            // if legacy, then add a warning
+            if (themeData.legacy) {
+               const warning = document.createElement("div");
+               warning.className = "badge";
+               warning.innerHTML = `<i class="fa-solid fa-triangle-exclamation"></i> Core`;
+               themeDiv.appendChild(warning);
+            }
+
+            const thumbnail = document.createElement("img");
+            if (themeData.hasThumbnail) {
+               thumbnail.src = `https://firebasestorage.googleapis.com/v0/b/${firebaseConfig.storageBucket}/o/images%2Fthemes%2F${themeKey}%2Fthumbnail.png?alt=media`;
+            } else {
+               thumbnail.src = `/assets/imgs/themeimgunavailable.png`;
+            }
+
             const title = document.createElement("h3");
             title.textContent = themeData.title;
 
@@ -6526,6 +6545,7 @@ if (pathName === "/userstudio") {
             })
 
             // append elements to the theme div
+            themeDiv.appendChild(thumbnail);
             themeDiv.appendChild(title);
             themeDiv.appendChild(desc);
             themeDiv.appendChild(creator);
@@ -6545,13 +6565,18 @@ if (pathName === "/userstudio") {
       firebase.database().ref(`themes/${themeParam}`).once("value", (snapshot) => {
          const themeExists = snapshot.exists();
          const themeData = snapshot.val();
+         const themeKey = snapshot.key;
 
          if (themeExists === false) {
             // 404 the user
             document.getElementById("themeNotFound").style.display = "block";
          } else {
             // show the user the theme
             document.getElementById("themeSelected").style.display = "block";
+            console.log(themeData);
+            if (themeData.hasThumbnail) {
+               document.getElementById("themeImg").src = `https://firebasestorage.googleapis.com/v0/b/${firebaseConfig.storageBucket}/o/images%2Fthemes%2F${themeKey}%2Fthumbnail.png?alt=media`;
+            }
             document.getElementById("themeName_title").textContent = themeData.title;
             document.getElementById("themeDesc").textContent = themeData.desc;
             firebase.database().ref(`users/${themeData.creator}/username`).once("value", (snapshot) => {

diff --git a/updates.html b/updates.html
@@ -147,6 +147,10 @@ <h1 id="selectedFilter" style="text-decoration: underline; margin-bottom: 5px;">
                            <h2>v2024.10.5_pre-alpha</h2>
                            <h3 style="color: var(--text-semi-transparent);">Released: October 5, 2024</h3>
                               <li>Added warning if a user tries to post NSFW content without flagging it as such</li>
+                              <li>If a note only contains an image/video, make sure the site title doesn't change to '"" / @user on TransSocial'</li>
+                              <li>Added an image for custom themes</li>
+                              <li>Fixed bug where you couldn't apply a theme if it's not updated</li>
+                              <li>Added "core themes", which are just themes that are not updated to the latest TransSocial color palette</li>
                         </div>
 
                         <br />

diff --git a/userstudio.html b/userstudio.html
@@ -149,13 +149,19 @@ <h1><i class="fa-solid fa-palette"></i> TransSocial User Studio</h1>
                   <br />
 
                   <h1><a href="/userstudio"><i class="fa-solid fa-arrow-left"></i></a></h1> <h1 id="themeName_title">Theme Title</h1>
+                  <img src="/assets/imgs/themeimgunavailable.png" alt="Theme Image" id="themeImg" draggable="false" />
                   <h3 id="themeDesc">This is a fun, silly and long description for this theme.</h3>
+                  <div id="legacyTheme" style="color: var(--warning-text); margin-top: 5px; margin-bottom: 5px;">
+                     <i class="fa-solid fa-triangle-exclamation" style="color: var(--warning-text);"></i>
+                     Core Theme: This theme still works in the latest version of TransSocial, but only features the core colors of TransSocial and does not feature the latest color additions. Some elements of TransSocial (such as text on hovered buttons) may be hard to see. 
+                  </div>
                   <a id="themeCreator" href="/u" style="color: var(--main-color);">by {creator}</a>
 
                   <br />
                   <br />
 
                   <button id="installTheme">Get this theme</button>
+
                   <p style="font-size: 14px; color: var(--text-semi-transparent);">The store page is a work in progress.</p>
                </div>