From b695179c79c76dbfdf4f00c0bfbf1247e62825d1 Mon Sep 17 00:00:00 2001
From: Ben Busby <benbusby@protonmail.com>
Date: Tue, 15 Dec 2020 11:09:48 -0500
Subject: [PATCH] Add ability to collapse "people also ask"

This adds a step in the filter process to wrap the "people also ask"
section in a <details> element, which automatically collapses the
contents of the section. Clicking/tapping the details element expands
the view as normal.

See #113
---
 app/filter.py                  | 21 +++++++++++++++++++--
 app/static/css/search-dark.css |  7 ++++++-
 app/static/css/search.css      |  7 ++++++-
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/app/filter.py b/app/filter.py
index 64455ef..5299b92 100644
--- a/app/filter.py
+++ b/app/filter.py
@@ -95,9 +95,26 @@ class Filter:
         if not self.main_divs:
             return
 
-        question_divs = [_ for _ in self.main_divs.find_all('div', recursive=False) if len(_.find_all('h2')) > 0]
+        question_divs = [_ for _ in self.main_divs.find_all(
+            'div', recursive=False
+            ) if len(_.find_all('h2')) > 0]
+
+        if len(question_divs) == 0:
+            return
+
+        # Wrap section in details element to allow collapse/expand
+        details = BeautifulSoup(features='lxml').new_tag('details')
+        summary = BeautifulSoup(features='lxml').new_tag('summary')
+        summary.string = question_divs[0].find('h2').text
+        question_divs[0].find('h2').decompose()
+        details.append(summary)
+        question_divs[0].wrap(details)
+
         for question_div in question_divs:
-            questions = [_ for _ in question_div.find_all('div', recursive=True) if _.text.endswith('?')]
+            questions = [_ for _ in question_div.find_all(
+                'div', recursive=True
+                ) if _.text.endswith('?')]
+
             for question in questions:
                 question['style'] = 'padding: 10px; font-style: italic;'
 
diff --git a/app/static/css/search-dark.css b/app/static/css/search-dark.css
index 2ac5b47..cef079e 100644
--- a/app/static/css/search-dark.css
+++ b/app/static/css/search-dark.css
@@ -32,4 +32,9 @@
 .autocomplete-active {
     background-color: #685e79 !important;
     color: #ffffff;
-}
\ No newline at end of file
+}
+
+details summary {
+    padding: 10px;
+    font-weight: bold;
+}
diff --git a/app/static/css/search.css b/app/static/css/search.css
index a79522b..155cfcf 100644
--- a/app/static/css/search.css
+++ b/app/static/css/search.css
@@ -31,4 +31,9 @@
 .autocomplete-active {
     background-color: #685e79 !important;
     color: #ffffff;
-}
\ No newline at end of file
+}
+
+details summary {
+    padding: 10px;
+    font-weight: bold;
+}