Adds See More option for releases to see release note #141

SaptarshiSarkar12 · Oct 22, 2022 · 6645793 · 6645793
1 parent bde36d4
commit 6645793
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 20 deletions.
diff --git a/Website/index.html b/Website/index.html
@@ -18,6 +18,7 @@
   <link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png" />
   <link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png" />
   <link rel="manifest" href="./favicons/site.webmanifest" />
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 </head>
 
 <body>
@@ -106,13 +107,12 @@ <h2 class="text-gradient-blue">Be a part of Drifty Family!</h2>
       <h4>✨Download Here✨</h4>
     </div>
     <div id="download_section" class="download_section">
-      <a onclick="download_alert_window()"
-        class="btn4">Download Now <i class="fab fa-windows"></i></a>
+      <a onclick="download_alert_window()" class="btn4">Download Now <i class="fab fa-windows"></i></a>
       <a onclick="download_alert_apple()" class="btn4">Download
         Now <i class="fab fa-apple"></i> <i class="fab fa-linux"></i></a>
     </div>
     <span><b>All releases</b></span>
-     <div id="releases" class="release_section">
+    <div id="releases" class="release_section">
 
 
     </div>
@@ -133,18 +133,18 @@ <h2>Contact Us</h2>
       <a href="https://github.com/SaptarshiSarkar12/Drifty/discussions" type="button">
         <i class="fa-solid fa-headset"></i> Support
       </a>
-      
+
       <a href="mailto:saptarshi.programmer@gmail.com" type="button"><i class="fa-sharp fa-solid fa-envelope"></i>
         Email</a>
     </div>
   </section>
 
   <footer class="footer">
     <div class="social">
-        <a href="https://www.twitter.com/SSarkar2007" id="twitter"><i class="fab fa-twitter"></i></a>
-        <a href="https://github.com/SaptarshiSarkar12" ><i class="fab fa-github"></i></a>
-        <a href="https://saptarshisarkar.hashnode.dev/"><i class="fa-brands fa-hashnode"></i></a>
-        <a href="https://www.bio.link/saptarshi" ><i class="fa-sharp fa-solid fa-link"></i></a>
+      <a href="https://www.twitter.com/SSarkar2007" id="twitter"><i class="fab fa-twitter"></i></a>
+      <a href="https://github.com/SaptarshiSarkar12"><i class="fab fa-github"></i></a>
+      <a href="https://saptarshisarkar.hashnode.dev/"><i class="fa-brands fa-hashnode"></i></a>
+      <a href="https://www.bio.link/saptarshi"><i class="fa-sharp fa-solid fa-link"></i></a>
       <!--added footers -->
     </div>
     <p><i class="fa-solid fa-copyright"></i> Drifty
@@ -154,4 +154,5 @@ <h2>Contact Us</h2>
   <!-- Scripts -->
   <script src="script.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/Website/script.js b/Website/script.js
@@ -1,29 +1,30 @@
 "use strict";
 
 /* Javascript alert */
-function download_alert_window(){
+function download_alert_window() {
   var w = confirm("Do you want to Downlaod");
-  if(w==true){
+  if (w == true) {
     alert("Thanks for Downloading");
-    window.open("https://github.com/SaptarshiSarkar12/Drifty/releases/latest/download/Drifty_CLI.exe");
-  }
-  else{
+    window.open(
+      "https://github.com/SaptarshiSarkar12/Drifty/releases/latest/download/Drifty_CLI.exe"
+    );
+  } else {
     alert("Sorry! You cancelled the Download!");
   }
 }
 
-function download_alert_apple(){
+function download_alert_apple() {
   var a = confirm("Do you want to Downlaod");
-  if(a==true){
+  if (a == true) {
     alert("Thanks for Downloading");
-    window.open("https://github.com/SaptarshiSarkar12/Drifty/releases/latest/download/Drifty.jar");
-  }
-  else{
+    window.open(
+      "https://github.com/SaptarshiSarkar12/Drifty/releases/latest/download/Drifty.jar"
+    );
+  } else {
     alert("Sorry! You cancelled the Download!");
   }
 }
 
-
 const date = new Date();
 
 let darkMode = localStorage.getItem("darkMode");
@@ -185,12 +186,31 @@ function renderRelease(all, release) {
   return `${all} <div class="release">
   <div><b>${release.name}</b></div>
   <div>${new Date(release.published_at)}</div>
+  <span onclick="toggleMore(this,'${
+    release.id
+  }')" style="cursor:pointer;font-weight:bolder;opacity: 0.4;">Click here for More</span>
+  <div id="${release.id}" class="release-note">
+    ${marked.parse(release.body)}
+  </div>
       <div class="assets">
              ${assets}
       </div>
   </div>`;
 }
 
+function toggleMore(btn, id) {
+  let release_note = document.getElementById(id);
+  if (release_note.style.maxHeight == "1000px") {
+    release_note.style.maxHeight = "0";
+    release_note.style.margin = "0";
+    btn.innerText = "See More";
+  } else {
+    release_note.style.maxHeight = "1000px";
+    release_note.style.margin = "1rem";
+    btn.innerText = "Hide";
+  }
+}
+
 function renderAssets(assets) {
   return assets.reduce((all, asset) => {
     //check if it is for windows

diff --git a/Website/style.css b/Website/style.css
@@ -539,6 +539,7 @@ header {
   flex-direction: column;
   justify-content: center;
   text-align: left;
+  max-width: max(50%,500px);
 }
 
 .release{
@@ -970,3 +971,19 @@ header {
 .lightTxt {
   display: none;
 }
+
+.release-note {
+  overflow: hidden;
+  transition: max-height 200ms;
+  max-height: 0;
+}
+
+.release-note a, .release-note li {
+ color: var(--black);
+}
+.release h2, .release h3{
+  color: var(--text-color);;
+}
+.release ul{
+  margin-left:2rem;
+}