media scroll feature

_data/theme.yml

@@ -87,6 +87,7 @@ search-child-objects: true # true / false - if true, child objects will appear o
 # 
 transcript-fields: "description,date,location,interviewer,image" # choose from the following fields --> description,date,location,interviewer,interviewee,bio,image 
 # list the fields you'd like displayed, separated by comma
+media-scroll: true ## true/false --> determines if the media and vizualization will appear to the lower right as a user scrolls down a transcript. This only appears on larger screens (min width 1024px).
 
 
 

_includes/transcript/js/transcript-js.html

@@ -267,12 +267,14 @@
         // Update the class of the filter tab element based on stickiness
         if (isSticky) {
             filterTabElement.classList.remove('d-none');
+            {% if site.data.theme.media-scroll == true %}document.getElementById("upper-content").classList.add("media-scroll-wrapper");{% endif %}
         } else {
             filterTabElement.classList.add('d-none');
             if (filtersSearch.classList.contains("retracted")) {
           filtersSearch.classList.remove("retracted");
           console.log("removing retracted");
           };
+          {% if site.data.theme.media-scroll == true %}document.getElementById("upper-content").classList.remove("media-scroll-wrapper");{% endif %}
         }
     }
 

_includes/transcript/style/media-scroll-wrapper.html

@@ -0,0 +1,29 @@
+<p class="h3" id="side-title">{{page.interviewee | default: page.title }}</p>
+<style>
+#side-title{
+    display: none;
+}
+
+.media-scroll-wrapper {
+    position: fixed;
+    right: 10px;
+    bottom: 300px;
+    height: 200px;
+    width: 370px
+}
+
+.media-scroll-wrapper .meta {
+    display: none
+}
+
+.media-scroll-wrapper #side-title {
+    display: flex;
+}
+
+@media screen and (max-width: 998px) {
+
+    .media-scroll-wrapper {
+        display: none
+    }
+}
+</style>

_includes/transcript/style/visualization-filter-legend.html

@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row meta">
         {% for n in site.data.filters %}
         {% if uniqueSubjects contains n.tag %}
         <div class="col-md-2 col-4 ">