Gallery modals (#81)

* first pass at modals

* add javascript for modal

* fix modal close

* adjust modal-content margin

* back to original css

* change z-index

* academind method

* change js to absolute path

* dev sesh 6/23

* add content to modal

* height auto

* important

* add link

* add image and fix top

* make email and affiliation urls links

* remove mailto: email lilnk

* bold title in modal

* change modal button text

* Update content/_static/custom.js

Co-authored-by: Anderson Banihirwe <axbanihirwe@ualr.edu>

Co-authored-by: Anderson Banihirwe <axbanihirwe@ualr.edu>

Author: jukent

content/_ext/yaml_gallery_generator.py

@@ -100,7 +100,7 @@ def build_from_items(items, filename, display_name, menu_html):
         affiliation_url_str = (
             '' 
             if affiliation_url is None 
-            else f'{affiliation} Site: {affiliation_url}'
+            else f'{affiliation} Site: <{affiliation_url}>'
         )
 
         panels_body.append(
@@ -110,17 +110,23 @@ def build_from_items(items, filename, display_name, menu_html):
 +++
 **{item["title"]}**
 
+<button class="modal-btn">See Details</button>
+<div class="modal">
+  <div class="content">
+<p>
+<img src={thumbnail} />
+
+**{item["title"]}**
+
 {authors_str}
 
 {email_str}
 
 {affiliation_str}
 
 {affiliation_url_str}
- 
-```{{dropdown}} {item['description'][0:100]} ... <br> **See Full Description:**
+
 {item['description']}
-```
 
 ```{{link-button}} {item["url"]}
 :type: url
@@ -129,8 +135,13 @@ def build_from_items(items, filename, display_name, menu_html):
 ```
 
 {tags}
-"""
-        )
+</p>
+  </div>
+</div>
+
+{tags}
+""")
+
     panels_body = '\n'.join(panels_body)
 
     panels = f"""
@@ -143,8 +154,11 @@ def build_from_items(items, filename, display_name, menu_html):
 :card: +my-2
 :img-top-cls: w-75 m-auto p-2
 :body: d-none
+
 {dedent(panels_body)}
 ````
+<div class="backdrop"></div>
+<script src="/_static/custom.js"> </script>
 """
 
     pathlib.Path(f'pages/{filename}.md').write_text(panels)

content/_static/custom.css

@@ -0,0 +1,52 @@
+
+/*modal*/
+.backdrop {
+  display: none;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.5);
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+  z-index: 10000;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  background: white;
+  padding: 10px;
+  width: 260px;
+  height: auto !important;
+  top: 100px;
+  left: calc(50% - 140px);
+  z-index: 10001;    
+}
+
+.modal h1 {
+  margin: 0;
+}
+
+.modal button {
+  background: #fa923f;
+  color: white;
+  border: 1px solid #521751;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.modal button:hover,
+.modal button:active {
+  background: #521751;
+}
+
+.modal button:focus {
+  outline: none;
+}
+
+@media (min-width: 400px) {
+  .modal {
+      width: 360px;
+      left: calc(50% - 190px);
+  }
+}

content/_static/custom.js

@@ -0,0 +1,30 @@
+var buttons = document.querySelectorAll('.modal-btn');
+var backdrop = document.querySelector('.backdrop');
+var modals = document.querySelectorAll('.modal');
+
+function openModal(i) {
+    backdrop.style.display = 'block';
+    modals[i].style.display = 'block';
+}
+
+function closeModal (i) {
+    backdrop.style.display = 'none';
+    modals[i].style.display = 'none';
+}
+
+for (i = 0; i < buttons.length; i++) {
+    buttons[i].addEventListener('click', 
+        function(j) {
+            return function() {
+                openModal(j);
+            }
+        } (i)
+    );
+    backdrop.addEventListener('click', 
+        function(j) {
+            return function() { 
+                closeModal(j);
+            }
+        } (i)
+    );
+}

content/conf.py

@@ -42,6 +42,8 @@
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ['_static']
+html_css_files = ["custom.css"]
+html_js_files = ["custom.js"]
 html_logo = '_static/images/ProjectPythia_Logo_Final-01-Blue.svg'
 html_title = ''
 # html_logo = '_static/images/ProjectPythia_Logo_Final-01-Blue-NoText.svg'