Merge pull request #142 from redet-G/master

Adds See More option for releases to see release note #141
SaptarshiSarkar12 · Oct 22, 2022 · d502eb2 · d502eb2
2 parents de10516 + d25e2e6
commit d502eb2
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 24 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:[email protected]" 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(){
-  var w = confirm("Do you want to Downlaod");
-  if(w==true){
+function download_alert_window() {
+  var w = confirm("Do you want to download Drifty?");
+  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(){
-  var a = confirm("Do you want to Downlaod");
-  if(a==true){
+function download_alert_apple() {
+  var a = confirm("Do you want to download Drifty?");
+  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");
@@ -183,14 +184,38 @@ function renderRelease(all, release) {
   console.log(release);
   let assets = renderAssets(release.assets.reverse());
   return `${all} <div class="release">
-  <div><b>${release.name}</b></div>
-  <div>${new Date(release.published_at)}</div>
+  <div style="text-align:center"><b>${release.name}</b></div>
+  <div style="text-align:center">${new Date(release.published_at)}</div>
+  <div onclick="toggleMore(this,'${
+    release.id
+  }')" style="text-align:center;cursor:pointer;font-weight:bolder;opacity: 0.4;">Learn More</div>
+  <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);
+  // calculate the real height of the element which is scrollHeight + margin(1rem top and 1 rem bottom) + border(0)
+  // let height = release_note.scrollHeight + parseFloat( getComputedStyle(document.documentElement).fontSize.split("px")[0] ) *2;
+  // or simply we could multiply the scroll height by two and the height could not be more that this
+  let height = release_note.scrollHeight * 2;
+
+  if (btn.innerText == "Hide") {
+    release_note.style.maxHeight = "0px";
+    release_note.style.margin = "0rem";
+    btn.innerText = "Learn More";
+  } else {
+    release_note.style.maxHeight = height + "px";
+    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: min(100%,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;
+}