finish up FAQ page

frontend/templates/faqmenu.html

@@ -1,7 +1,7 @@
 <div class="">
     <h3 class="jsmod-title"><span>FAQs</span></h3>
     <div class="jsmod-content">
-        <ul class="faq-toplevel-nav">
+        <ul class="faq-toplevel-nav vertical menu">
 
             <li class="first parent">
                 <a href="/faq/"><span>All</span></a>
@@ -9,7 +9,7 @@
 
             <li class="parent {% if location != 'basics' %}collapse{% endif %}">
                 <a href="{% url 'faq_location' 'basics' %}"><span>About the site</span></a>
-                <ul class="level2">
+                <ul class="nested vertical menu">
                     <li class="first"><a href="{% url 'faq_sublocation' 'basics' 'howitworks' %}"><span>About Unglue.it</span></a></li>
                     <li><a href="{% url 'faq_sublocation' 'basics' 'account' %}"><span>Your Account</span></a></li>
                     <li class="last"><a href="{% url 'faq_sublocation' 'basics' 'company' %}"><span>The Organization</span></a></li>
@@ -18,7 +18,7 @@
 
             <li class="parent {% if location != 'unglued_ebooks' %}collapse{% endif %}">
                 <a href="{% url 'faq_location' 'unglued_ebooks' %}"><span>Unglued Ebooks</span></a>
-                <ul class="level2">
+                <ul class="nested vertical menu">
                     <li class="first"><a href="{% url 'faq_sublocation' 'unglued_ebooks' 'general' %}"><span>General Questions</span></a></li>
                     <li><a href="{% url 'faq_sublocation' 'unglued_ebooks' 'using' %}"><span>Using Your Unglued Ebook</span></a></li>
                     <li class="last"><a href="{% url 'faq_sublocation' 'unglued_ebooks' 'copyright' %}"><span>Ungluing and Copyright</span></a></li>
@@ -27,7 +27,7 @@
 
             <li class="parent {% if location != 'campaigns' %}collapse{% endif %}">
                 <a href="{% url 'faq_location' 'campaigns' %}"><span>Campaigns</span></a>
-                <ul class="level2">
+                <ul class="nested vertical menu">
                     <li class="first"><a href="{% url 'faq_sublocation' 'campaigns' 't4u' %}"><span>Thanks-for-Ungluing Campaigns</span></a></li>
                     <li><a href="{% url 'faq_sublocation' 'campaigns' 'b2u' %}"><span>Buy-to-Unglue Campaigns</span></a></li>
                     <li><a href="{% url 'faq_sublocation' 'campaigns' 'supporting' %}"><span>Pledge Campaigns</span></a></li>
@@ -38,7 +38,7 @@
 
             <li class="parent {% if location != 'rightsholders' and 'smashwords' not in request.path %}collapse{% endif %}">
                 <a href="{% url 'faq_location' 'rightsholders' %}"><span>For Rights Holders</span></a>
-                <ul class="level2">
+                <ul class="nested vertical menu">
                     <li class="first"><a href="{% url 'faq_sublocation' 'rightsholders' 'authorization' %}"><span>Becoming Authorized</span></a></li>
                     <li><a href="{% url 'faq_sublocation' 'rightsholders' 'claiming' %}"><span>Claiming Works</span></a></li>
                     <li><a href="{% url 'faq_sublocation' 'rightsholders' 'campaigns' %}"><span>Running Campaigns</span></a></li>

static/js/sitewide1.js

@@ -11,57 +11,6 @@ $j(document).ready(function() {
         var isDownload =$j(this).attr("href").indexOf("download");
         var vars = $j(this).attr("href").split("next=");
 
-		$j("#lightbox").load($j(this).attr("href") + " #lightbox_content", function() {
-		    // centering divs of dynamic width: shockingly hard. make sure lightbox is centered on load.
-            var hijaxWidth = $j('#about_expandable').width() + 28;
-            var windowWidth = $j(document).width();
-            var marginWidth = (windowWidth - hijaxWidth)/2;
-            $j('#about_expandable').css({'margin-left': marginWidth, 'margin-right': marginWidth});
-
-            // position div vertically relative to top of viewport, to ensure visibility
-            // regardless of where on the page the user clicked to activate it
-            var marginTop = window.pageYOffset;
-            $j('#about_expandable').css({'margin-top': marginTop});
-
-            if (isDownload !== -1) {
-                $j.getScript('/static/js/download_page.js');
-                if(typeof(Dropbox) != "undefined"){
-                    Dropbox._dropinsjs_loaded=false;
-                }
-                $j.getScript('https://www.dropbox.com/static/api/2/dropins.js');
-                $j.cookie('next', work_page, {path: '/'});
-            }
-            else {
-                //need to push next cookie for sign-in links
-
-                if (vars.length>1){
-                    next=vars[1];
-                    if(next!='') {
-                        next = next.replace(/[\x22\x27\x3c\x3e]/g,'');
-                        $j.cookie('next', next, {path: '/'});
-                    }
-                }
-            }
-            // fade-out rest of page elements on expand
-            $j('#feedback, #js-page-wrap, #footer').css({"opacity": "0.07"});
-            $j('#about_expandable').css({'position': 'absolute'});
-            $j('#about_expandable').fadeTo("slow", 1);
-
-            // if we're on a supporter page, personalize our about box
-            // by writing the supporter's name in
-            if ($j(location).attr('pathname').slice(0,11) == '/supporter/') {
-                var ungluer = $j(location).attr('pathname').slice(11, -1);
-
-                if (ungluer != null) {
-                    // span.ungluer doesn't exist until the ajax call so we
-                    // can't bind to the DOM on document ready; need to use
-                    // the ajaxComplete event
-                    $j('#lightbox').ajaxComplete(function() {
-                        $j('#lightbox span.ungluer').replaceWith(ungluer);
-                    });
-                }
-            }
-		});
 	});
 
 	// fade-in normal page elements on collapse
@@ -99,4 +48,8 @@ $j(document).ready(function() {
         new Foundation.DropdownMenu($j(element), {});
     });
 
+    document.querySelectorAll('[data-responsive-menu]').forEach(element => {
+        new Foundation.ResponsiveToggle(element, {});
+    });
+
 });

static/scss/faq.scss

@@ -4,17 +4,29 @@
 
 .faq-container {
     display: flex;
+    flex-direction: column;
 
-    ul > * {
+    margin: 0 auto;
-        padding: 0.7rem 1rem;
+    max-width: 1024px;
-    }
+}
 
-    ul {
+.faq-menu {
-        list-style: none;
+    min-width: 200px;
-    }
 }
 
 .faq-toplevel-nav {
-    display: flex;
+    width: fit-content;
-    flex-direction: column;
+    margin: 0 auto;
+
+    li {
+        width: fit-content;
+    }
+
+}
+
+
+@include breakpoint (medium) {
+    .faq-container {
+        flex-direction: row;
+    }
 }

static/scss/sitewide4.scss

@@ -237,12 +237,6 @@ input[type="submit"], a.fakeinput {
     font-size: $font-size-larger;
 }
 
-ul.menu{
-    list-style:none;
-    padding:0;
-    margin:0;
-}
-
 .errorlist {
 	@include errors;
 }