Replaces dropdown with accordion menu for links

PRX · Apr 24, 2023 · 97bbbe9 · 97bbbe9
1 parent e5d8a9e
commit 97bbbe9
Showing 1 changed file with 50 additions and 27 deletions.
diff --git a/app/views/podcast_engagement/show.html.erb b/app/views/podcast_engagement/show.html.erb
@@ -4,18 +4,17 @@
 
 <div class="row mt-4 mb-4 justify-content-center">
     <div class="col-6">
-        <h3>Micropayments</h3>
-
         <div class="form-floating">
             <div class="form-floating mb-3">
                 <input class="form-control" id="floatingInput" aria-label="Donation Link">
                 <label for="floatingInput">Donation Link</label>
             </div>
         </div>
 
-        <hr style="height:.1rem; width:100%; border-width:0; background-color:black">
+        <hr style="height:.1rem background-color:black">
+
+        <h3>Micropayments</h3>
 
-        <div class="">
             <div class="form-floating mb-4">
                 <input class="form-control" id="floatingInput" aria-label="Coil ID">
                 <label for="floatingInput">Coil ID</label>
@@ -25,37 +24,61 @@
                 <input class="form-control" id="floatingInput" aria-label="Service 2 ID">
                 <label for="floatingInput">Service 2 ID</label>
             </div>
-        </div>
 
-            <div>
-                <h3>Subscribe and Follow Links</h3>
+        <div>
 
-                <div class="dropdown-center">
-                    <button class="btn btn-secondary dropdown-toggle card-title container-fluid" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                        Podcast Apps
-                    </button>
-                    <ul class="dropdown-menu container-fluid">
-                        <li><a class="dropdown-item" href="#">Action</a></li>
-                        <li><a class="dropdown-item" href="#">Action two</a></li>
-                        <div class="form-floating container-fluid">
-                        <input class="form-control" aria-label="Facebook">
+        <hr style="height:.1rem background-color:black">
+
+        <h3>Subscribe and Follow Links</h3>
+
+        <div class="accordion" id="accordionExample">
+            <div class="accordion-item">
+                <h2 class="accordion-header" id="headingOne">
+                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                    Podcast Apps
+                </button>
+                </h2>
+                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+                    <div class="form-floating container-fluid">
+                        <input class="form-control mb-4 mt-4" aria-label="Facebook">
                         <label for="floatingInput">Facebook</label>
                     </div>
-                    </ul>
+                </div>
+            </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="headingTwo">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                Social Media Links
+            </button>
+            </h2>
+            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+            <div class="accordion-body">
+            <div class="form-floating container-fluid">
+                <input class="form-control mb-4" aria-label="Facebook">
+                <label for="floatingInput">Facebook</label>
             </div>
 
-            <div class="dropdown-center">
-                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                    Social Media Links
-                </button>
-                <ul class="dropdown-menu">
-                    <li><a class="dropdown-item" href="#">Action</a></li>
-                    <li><a class="dropdown-item" href="#">Action two</a></li>
-                    <li><a class="dropdown-item" href="#">Action three</a></li>
-                </ul>
+            <div class="form-floating container-fluid">
+                <input class="form-control mb-4" aria-label="Twitter">
+                <label for="floatingInput">Instagram</label>
+            </div>
+
+            <div class="form-floating container-fluid">
+                <input class="form-control mb-4" aria-label="Twitter">
+                <label for="floatingInput">Twitter</label>
+            </div>
+
+            <div class="form-floating container-fluid">
+                <input class="form-control mb-4" aria-label="Youtube">
+                <label for="floatingInput">YouTube</label>
+            </div>
             </div>
         </div>
-    </div>
+  </div>
+</div>
+
+</div>
+</div>
 
     <div class="col-4">
     <section class="card shadow">