Redone to use popover

Also modified popovers to allow for scrolling
ctrlo · Oct 9, 2023 · 2107363 · 2107363
1 parent da12486
commit 2107363
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 6 deletions.
diff --git a/src/frontend/components/popover/_popover.scss b/src/frontend/components/popover/_popover.scss
@@ -72,8 +72,29 @@
     top: 1.5rem;
     max-width: 100%;
     margin-top: 0.375rem;
-    overflow-y: auto;
+    overflow-y: scroll;
     border-color: $brand-secundary;
+    max-height: 15rem;
+
+    &::-webkit-scrollbar {
+      width: 0.5rem;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: $white;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: $brand-secundary;
+    }
+
+    &::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-button {
+      display: none;
+    }
   }
 
   .popover.show {

diff --git a/views/topic.tt b/views/topic.tt
@@ -17,7 +17,7 @@
 
       <div class="content-block__main-content">
         <div class="row">
-          <div class="col-7">
+          <div class="col">
             <div class="card card--primary mb-3">
               <div class="card__content">
                 [%
@@ -41,7 +41,71 @@
                       value = topic.description
                       filter = "html"
                       help_text = "Use Markdown for formatting"
-                      rows = 5;
+                      rows = 5
+                      popover_body = '<table class="table table-bordered">
+        <thead>
+            <tr>
+                <th>Markdown</th>
+                <th>HTML</th>
+            </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>
+                <pre># Heading 1</pre>
+            </td>
+            <td>
+                <h1>Heading 1</h1>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <pre>## Heading 2</pre>
+            </td>
+            <td>
+                <h2>Heading 2</h2>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <pre>- bullet
+- bullet
+  - bullet
+  - bullet</pre>
+            </td>
+            <td>
+                <ul>
+                    <li>bullet</li>
+                    <li>bullet
+                        <ul>
+                            <li>bullet</li>
+                            <li>bullet</li>
+                        </ul>
+                    </li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <pre>*italic*</pre>
+            </td>
+            <td><em>italic</em></td>
+        </tr>
+        <tr>
+            <td>
+                <pre>**bold**</pre>
+            </td>
+            <td><strong>bold</strong></td>
+        </tr>
+        <tr>
+            <td>
+                <pre>[link](https://www.google.com)</pre>
+            </td>
+            <td><a href="https://www.google.com">link</a></td>
+        </tr>
+        </tbody>
+    </table>'
+                      popover_title = "Markdown Help";
                   %]
                   <div class="textarea__label">
                     <label for="preview"><strong>Preview</strong></label>
@@ -64,9 +128,6 @@
               </div>
             </div>
           </div>
-          <div class="col-5">
-            [% INCLUDE snippets/markdown.tt %]
-          </div>
         </div>
       </div>
     </div>