fix: result page is now hidden until user clicks on get result (#176)

result page is hidden until user clicks on get result, this is managed with CSS property 'display'.
It usually remains 'none' and becames 'flex' when user clicks on get result button.

fix #168

Author: thepushkaraj

src/lib/general.ts

@@ -125,6 +125,9 @@ export function triggerEmptyAnimation(inputElement: HTMLInputElement): void {
   }, 1000);
 }
 
+export const getResultPage = (): HTMLElement =>
+  <HTMLElement>document.querySelector('.side-results');
+
 export const getCopyCodeButton = (attribute: string): HTMLElement =>
   <HTMLElement>document.querySelector(`[data-download = ${attribute}-code]`);
 

src/main.ts

@@ -250,7 +250,7 @@ function showResult(attribute: string | null) {
 
 generators.forEach((generator) => {
   generator?.addEventListener('click', (): void => {
-    sidebar.style.left = '100%';
+    sidebar.style.display = 'none';
     const checking = generator.getAttribute('data-gen');
     if (checking === 'gradient-border') {
       generatorsFunction(checking);
@@ -278,6 +278,9 @@ closeBar?.addEventListener('click', () => {
   sidebar.animate(sideBarSlide, sideBarTiming);
   sidebar.style.left = '100%';
   showResult(null);
+  setTimeout(() => {
+    sidebar.style.display = 'none'
+  }, 600);
 });
 
 for (let i = 0; i < gradientBackgroundInputs.length; i++) {

src/pages/animation.ts

@@ -21,6 +21,10 @@ export function animationGenerator() {
 
   const Stylesheet = utils.getStyleSheet();
   const getCodeButtonElement = utils.getCopyCodeButton(attribute);
+  const resultPage = utils.getResultPage();
+  
+  resultPage.style.display = 'flex';
+
   initial_length = Stylesheet.cssRules.length - 1;
 
   initialConfiguration(radio_button_set, DegreeElement, OutputElement);

src/pages/gradient-background.ts

@@ -14,6 +14,9 @@ export function gradientBackgroundGenerator() {
   const getDegreeElement = utils.getRange(attribute);
 
   const getOutputElement = utils.getOutput(attribute);
+  const resultPage = utils.getResultPage();
+  
+  resultPage.style.display = 'flex';
 
   const values: Values = {
     firstColor: color1.value,

src/pages/gradient-border.ts

@@ -17,6 +17,9 @@ export function gradientBorderGenerator(): void {
   const getBorderRadiusInput = utils.getRadiusInput(attribute);
   const showRadiusInput = utils.showRadius;
   const hideRadiusInput = utils.hideRadius;
+  const resultPage = utils.getResultPage();
+  
+  resultPage.style.display = 'flex';
 
   getCheckboxElement.addEventListener('change', (e: Event): void => {
     const target = e.target as HTMLInputElement;

src/pages/gradient-text.ts

@@ -10,6 +10,9 @@ export function gradientTextGenerator(): void {
   const attribute = 'gradient-text';
   const getInputElement = utils.getInputText(attribute);
   const getOutputElement = utils.getOutput(attribute);
+  const resultPage = utils.getResultPage();
+  
+  resultPage.style.display = 'flex';
   if (getOutputElement === null) return;
   getOutputElement.style.display = 'grid';
   getOutputElement.style.placeItems = 'center';

src/pages/pic-text.ts

@@ -7,6 +7,7 @@ import * as utils from '../lib/general';
 export function picTextGenerator(image: string, imageHeight: number): void {
   const attribute = 'pic-text';
   const outputNode = utils.getOutput(attribute);
+  const resultPage = utils.getResultPage();
 
   // The value 19 is the result I got by dividing the height of the image by
   // the number of lines of text necessary to cover its full height.
@@ -16,6 +17,7 @@ export function picTextGenerator(image: string, imageHeight: number): void {
     Math.ceil(imageHeight / 19)
   );
 
+  resultPage.style.display = 'flex';
   outputNode.style.background = `url(${image}) center no-repeat`;
   outputNode.style.width = 'var(--output-width)';
   outputNode.style.height = `${imageHeight}px`;

src/style.css

@@ -300,7 +300,7 @@ textarea {
 
 /* Results */
 .side-results {
-  display: flex;
+  display: none;
   background-color: var(--secondary-color);
   min-height: var(--content-container);
   min-width: var(--content-container);