From ac6a84d88a4fdad802c671ee97f60e45c33736d4 Mon Sep 17 00:00:00 2001
From: Nik Topler <nik.topler21@gmail.com>
Date: Wed, 2 Sep 2020 17:56:34 +0200
Subject: [PATCH] Updated search results

---
 CSS/*.css      | 13 +++++++++++++
 CSS/colors.css |  2 ++
 JS/main.js     | 13 +++++++++----
 headlines.php  |  2 +-
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/CSS/*.css b/CSS/*.css
index fefe42f..bf29e34 100644
--- a/CSS/*.css
+++ b/CSS/*.css
@@ -209,6 +209,19 @@ body{
     .visible{
         visibility: hidden;
     }
+
+    .visible-auto {
+        transition: ease-in-out .2;
+        height: auto;
+        visibility: visible;
+    }
+    .visible-absolute {
+        visibility: hidden;
+        height: 0;
+        width: 0;
+        position: absolute;
+    }
+
     .position-center{
         top: 50%;
         left: 50%;
diff --git a/CSS/colors.css b/CSS/colors.css
index a98b3fa..c12c0d0 100644
--- a/CSS/colors.css
+++ b/CSS/colors.css
@@ -36,3 +36,5 @@
 
     --side-bar-active: #e3edfd;
 }
+
+
diff --git a/JS/main.js b/JS/main.js
index de278e4..f26c7cc 100644
--- a/JS/main.js
+++ b/JS/main.js
@@ -693,12 +693,13 @@ function generateSuggestWords(array) {
     for(let i = 0; i < array.length; i++) {
         let div = document.createElement('div')
             div.innerHTML = array[i]
+            div.classList.add('visible-auto')
             // div.onclick = selectSuggestedSearchOption
         let hr = document.createElement('hr')
 
         if(i > 5) {
-            div.classList.add('disable')
-            hr.classList.add('disable')
+            div.classList.add('visible-absolute')
+            hr.classList.add('visible-absolute')
             moreSuggestWordsArray.push(div, hr)
         } 
         section.appendChild(div)
@@ -707,10 +708,14 @@ function generateSuggestWords(array) {
 }
 function moreSuggestWords() { 
     if(document.querySelector('.suggested-words footer').innerHTML.trim() === 'More') {
-        moreSuggestWordsArray.forEach(element => element.classList.remove('disable')) 
+        // moreSuggestWordsArray.forEach(element => element.classList.remove('visible-absolute')) 
+        let height = document.querySelectorAll('.suggested-words section div').length * 16 + document.querySelectorAll('.suggested-words section div').length + 
+        console.log(document.querySelectorAll('.suggested-words section div').length)
+        document.documentElement.style.cssText = `--suggest-more:${height}px`;
         document.querySelector('.suggested-words footer').innerHTML = 'Less'    
     } else {
-        moreSuggestWordsArray.forEach(element => element.classList.add('disable')) 
+        document.documentElement.style.cssText = `--suggest-more:auto`;
+        // moreSuggestWordsArray.forEach(element => element.classList.add('visible-absolute')) 
         document.querySelector('.suggested-words footer').innerHTML = 'More'    
     }
 }
diff --git a/headlines.php b/headlines.php
index 2245f5f..0a58b9c 100644
--- a/headlines.php
+++ b/headlines.php
@@ -110,7 +110,7 @@
 
     <?php include 'add-ons/navigation-bar.php' ?>
 
-    <div class="login-option-div grid absolute fixed" id="login-option-div">
+    <div class="login-option-div grid absolute fixed" id="login-option-div">    
         <header class="grid">
             <span class="flex align-center justify-center ">Sign in to</span>
             <h1 class="flex align-center justify-center ">News Website</h1>