From d92127cc0d667738c2ddaae33c4aadeada32c5ab Mon Sep 17 00:00:00 2001
From: Ali <79793867+alicalimli@users.noreply.github.com>
Date: Sat, 8 Oct 2022 12:37:02 +0300
Subject: [PATCH 1/3] fix: sidebar sliding out bug (#246)

---
 src/main.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index 6ae8bec9..f75adde8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -139,7 +139,9 @@ if (getComputedStyle(menu).display == 'block') {
 
 for (let i = 0; i < generators.length; i++) {
   generators[i].addEventListener('click', () => {
-    navBar?.animate(navBarSlideOut, navBarAnimationOptions);
+    if (!navBar?.classList.contains('closed-nav')) {
+      navBar?.animate(navBarSlideOut, navBarAnimationOptions);
+    }
     navBar?.classList.add('closed-nav');
     menuIcon?.setAttribute('icon', 'dashicons:menu-alt');
   });

From 37812bc314185eaca463a1448cd10a0fc3497a14 Mon Sep 17 00:00:00 2001
From: Jashan Mago <codinghashira@gmail.com>
Date: Sat, 8 Oct 2022 18:35:17 +0530
Subject: [PATCH 2/3] fix: made the label of filepond file uploader responsive
 (#249)

made the label of filepond file

closes #175
---
 src/main.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index f75adde8..560bc6c4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -150,6 +150,11 @@ for (let i = 0; i < generators.length; i++) {
 FilePond.create(getImageEntryElement, {
   imagePreviewMaxHeight: 200,
 
+  labelIdle:
+    window.innerWidth < 768
+      ? '<span class="filepond--label-action">Browse</span>'
+      : 'Drag & Drop your files or <span class="filepond--label-action"> Browse </span>',
+
   onpreparefile: (fileItem, output): void => {
     // create a new image object
     const img = new Image();

From 0efc88b25580d3a72d546194fc72450fd5e50188 Mon Sep 17 00:00:00 2001
From: Elijah Trillionz <60356516+Elijah-trillionz@users.noreply.github.com>
Date: Sat, 8 Oct 2022 14:09:45 +0100
Subject: [PATCH 3/3] fix: the animator range indicator issue on displaying
 wrong units (#241)

* added the html and css for the degree display

* finished adding degree display element

* changed the unit

* removed function call duplicates

* resolving conflict

* fixed issue of restoring to default

fixed issue of restoring to default when transitioning to different sections of the animation generator

* changed the title display for the animation range inputs

* changed the unit for different title

Co-authored-by: Dunsin <78784850+Dun-sin@users.noreply.github.com>
---
 index.html             | 15 ++++++++++-----
 src/main.ts            | 20 +++++++++++++++++---
 src/pages/animation.ts | 32 ++++++++++++++++++++------------
 src/style.css          | 13 +++++++------
 4 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 399903ec..4f534159 100644
--- a/index.html
+++ b/index.html
@@ -191,7 +191,8 @@ <h1 id="head">Code Magic</h1>
           <label id="degree">
             <span class="label-title">
               <span>Degree</span>
-              <span id="degree-display">deg</span>
+              <span class="unit-display">deg</span>
+
             </span>
             <input
               type="range"
@@ -248,7 +249,9 @@ <h1 id="head">Code Magic</h1>
           <label id="degree">
             <span class="label-title">
               <span>Degree</span>
-              <span id="degree-display">deg</span>
+
+              <span class="unit-display">deg</span>
+
             </span>
             <input
               type="range"
@@ -291,7 +294,8 @@ <h1 id="head">Code Magic</h1>
           <label id="degree">
             <span class="label-title">
               <span>Degree</span>
-              <span id="degree-display">deg</span>
+              <span class="unit-display">deg</span>
+
             </span>
             <input
               type="range"
@@ -357,8 +361,9 @@ <h1 id="head">Code Magic</h1>
 
           <label id="degree">
             <span class="label-title">
-              <span>Speed</span>
-              <span id="degree-display">deg</span>
+              <span class="title-display">Angle</span>
+              <span class="unit-display animation">deg</span>
+
             </span>
             <input
               type="range"
diff --git a/src/main.ts b/src/main.ts
index 560bc6c4..27adf106 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -111,6 +111,12 @@ const gradientBackgroundDegree = getRange('gradient-background');
 // get all range inputs
 const gradientRangeInputs = document.querySelectorAll('.degree-range');
 
+
+// get title display element for animation
+const titleDisplayElement = <HTMLElement>(
+  document.querySelector('.title-display')
+);
+
 menuIcon?.addEventListener('click', () => {
   if (navBar?.classList.contains('closed-nav')) {
     navBar?.animate(navBarSlideIn, navBarAnimationOptions);
@@ -123,9 +129,11 @@ menuIcon?.addEventListener('click', () => {
   }
 });
 
+
 const menu = document.querySelector('.menu') as HTMLElement;
 const body = document.querySelector('body') as HTMLElement;
 
+
 if (getComputedStyle(menu).display == 'block') {
   body.onclick = (e) => {
     if (e.target !== navBar) {
@@ -307,10 +315,16 @@ closeBar?.addEventListener('click', () => {
 const displayGradientValue = (gradientElement: HTMLInputElement) => {
   gradientElement.addEventListener('input', (e) => {
     const target = e.target as HTMLInputElement;
-    const degreeDisplayElement = <HTMLElement>(
-      target.parentElement?.querySelector('#degree-display')
+    const unitDisplayElement = <HTMLElement>(
+      target.parentElement?.querySelector('.unit-display')
     );
-    degreeDisplayElement.innerText = `${target.value}deg`;
+
+    // change the unit for opacity
+    const unit = titleDisplayElement.innerText.toLowerCase().includes('opacity')
+      ? ''
+      : 'deg';
+    unitDisplayElement.innerText = `${target.value}${unit}`;
+
   });
 };
 
diff --git a/src/pages/animation.ts b/src/pages/animation.ts
index f0184dd3..90058b1c 100644
--- a/src/pages/animation.ts
+++ b/src/pages/animation.ts
@@ -12,27 +12,25 @@ type Values = {
 };
 
 const attribute = 'animation';
-let getCodeButtonElement =  utils.getCopyCodeButton(attribute);
+let getCodeButtonElement = utils.getCopyCodeButton(attribute);
+
+const OutputElement = utils.getOutput(attribute);
+const DegreeElement = utils.getRange(attribute);
+const radio_button_set = utils.getRadioButtonSet(attribute);
+
+initialConfiguration(radio_button_set, DegreeElement, OutputElement);
 
 export function animationGenerator() {
-  const DegreeElement = utils.getRange(attribute);
   const duration = utils.getInputSpinner(attribute);
-  const radio_button_set = utils.getRadioButtonSet(attribute);
-
-  const OutputElement = utils.getOutput(attribute);
 
   const Stylesheet = utils.getStyleSheet();
   // getCodeButtonElement = utils.getCopyCodeButton(attribute);
   const resultPage = utils.getResultPage();
-  
-  resultPage.style.display = 'flex';
 
- 
+  resultPage.style.display = 'flex';
 
   initial_length = Stylesheet.cssRules.length - 1;
 
-  initialConfiguration(radio_button_set, DegreeElement, OutputElement);
-
   if (OutputElement === null) return;
 
   let i = 0;
@@ -58,8 +56,6 @@ getCodeButtonElement.addEventListener('click', () => {
   );
 });
 
-
-
 /**
  * sets the animation to the output element
  *
@@ -166,6 +162,14 @@ function initialConfiguration(
 
   OutputElement.innerText = 'Lorem Ipsum';
 
+  // get the unit display element for animator
+  const unitDisplayElement = <HTMLElement>(
+    document.querySelector('.unit-display.animation')
+  );
+  const titleDisplayElement = <HTMLElement>(
+    document.querySelector('.title-display')
+  );
+
   elements.forEach((el) =>
     el.addEventListener('click', () => {
       const type = el.value;
@@ -174,11 +178,15 @@ function initialConfiguration(
         DegreeElement.max = '90';
         DegreeElement.step = '1';
         DegreeElement.value = '50';
+        unitDisplayElement.innerText = `${DegreeElement.value}deg`;
+        titleDisplayElement.innerText = 'Angle';
       } else {
         DegreeElement.min = '0';
         DegreeElement.max = '1';
         DegreeElement.step = '.1';
         DegreeElement.value = '.5';
+        unitDisplayElement.innerText = `${DegreeElement.value}`;
+        titleDisplayElement.innerText = 'Opacity';
       }
     })
   );
diff --git a/src/style.css b/src/style.css
index d3f2c7d5..aaa3c9f6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -255,12 +255,12 @@ textarea {
   font-family: inherit;
 }
 
-input[type=number]::-webkit-inner-spin-button, 
-input[type=number]::-webkit-outer-spin-button { 
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  margin: 0; 
+  margin: 0;
 }
 
 #degree {
@@ -289,7 +289,7 @@ input[type=number]::-webkit-outer-spin-button {
   align-items: center;
 }
 
-#degree-display {
+.unit-display {
   opacity: 0.7;
 }
 
@@ -313,8 +313,9 @@ input[type=number]::-webkit-outer-spin-button {
   padding: 4px;
 }
 
-.styled-input:focus, .styled-input:focus-visible {
-  outline:none;
+.styled-input:focus,
+.styled-input:focus-visible {
+  outline: none;
 }
 
 .styled-input::-webkit-inner-spin-button,