Test page for extensible text options

web/app/main.py

@@ -25,3 +25,8 @@ def index():
 @login_required
 def profile():
     return render_template('profile.html', name=current_user.name)
+
+# route for test page
+@main.route('/test')
+def test():
+    return render_template('test.html')

web/app/templates/base.html

@@ -122,8 +122,7 @@
     <!-- JavaScript -->
     <!-- jQuery first, then Popper JS, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
     <script>
     $("#resource_type").change(function() {
         var resource_type = $(this).val();
@@ -132,6 +131,20 @@
         });
     });
     </script>
+    <script>
+    // Initialize tooltips
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl)
+    })
+    </script>
+
+    <script>
+    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+      return new bootstrap.Popover(popoverTriggerEl)
+    })
+    </script>
 </body>
 
 </html>

web/app/templates/test.html

@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+
+{% block content %}
+<style>
+
+.collapse_text {
+  padding: 0 18px;
+  background-color: #f1f1f1;
+}
+
+</style>
+
+<h2>Collapsible text</h2>
+
+<b>HackMD</b>'s online writing environment supports practices of <a data-bs-toggle="collapse" href="#collapse_editing" role="button" aria-expanded="false" aria-controls="collapse_editing">collaborative editing</a>, <a data-bs-toggle="collapse" href="#collapse_writing" role="button" aria-expanded="false" aria-controls="collapse_writing">collaborative writing</a>, and <a data-bs-toggle="collapse" href="#collapse_versioning" role="button" aria-expanded="false" aria-controls="collapse_versioning">versioning</a>.
+
+<div class="collapse collapse_text" id="collapse_editing">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</div>
+
+<div class="collapse collapse_text" id="collapse_writing">
+  <p>Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</div>
+
+<div class="collapse collapse_text" id="collapse_versioning">
+  <p>Versioning text goes here.</p>
+</div>
+
+<br><br>
+
+<h2>Tooltips</h2>
+
+<b>HackMD</b>'s online writing environment supports practices of <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">collaborative editing</a>, <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">collaborative writing</a>, and <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Versioning text goes here.">versioning</a>.
+
+<br><br>
+
+<h2>Popover</h2>
+
+<b>HackMD</b>'s online writing environment supports practices of <a href="#" data-bs-toggle="popover" title="collaborative editing description" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">collaborative editing</a>, <a href="#" data-bs-toggle="popover" title="collaborative writing description" data-bs-content="Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">collaborative writing</a>, and <a href="#" data-bs-toggle="popover" title="versioning description" data-bs-content="Versioning text goes here.">collaborative editing</a>versioning</a>.
+
+{% endblock %}