Style - Supported Events

- #18
aljawaid · Sep 13, 2023 · 371b65e · 371b65e
1 parent d5aaef6
commit 371b65e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 22 deletions.
diff --git a/Assets/css/kanboard-support.css b/Assets/css/kanboard-support.css
@@ -474,3 +474,32 @@ a.kb-updates-link {
     width: 22px;
     height: 22px;
 }
+
+.webhooks-info-page section .page-header h2 {
+    border: 0;
+}
+
+#SupportedEvents ul, #WebhookReceiver ul {
+    margin-bottom: 30px;
+}
+
+#SupportedEvents ul li {
+    margin-bottom: 10px;
+}
+
+#WebhookExamples {
+    margin-bottom: 50px;
+}
+
+#SupportedEvents ul > li > code.event-code, code.event-code {
+    white-space: nowrap;
+    max-width: 100%;
+    background: #FFFFFF;
+    border: 1px solid var(--pp-light-grey);
+    font-size: 75%;
+    padding: 2px 5px;
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace;
+    color: #E74C3C;
+    overflow-x: auto;
+    border-radius: 2px;
+}
diff --git a/Template/config/webhook-code-examples-http.php b/Template/config/webhook-code-examples-http.php
@@ -1,5 +1,5 @@
 <p class="">
-    <?= e('This is a general example based on the %s event', '<code><abbr title="' . t('See the Supported Events above') . '">task.move.column</abbr></code>') ?>
+    <?= e('This is a general example based on the %s event', '<code class="event-code"><abbr title="' . t('See the Supported Events above') . '">task.move.column</abbr></code>') ?>
 </p>
 <div class="panel">
 <pre class="">

diff --git a/Template/config/webhook_information.php b/Template/config/webhook_information.php
@@ -1,28 +1,28 @@
 <!-- KanboardSupport Plugin -->
 <div class="webhooks-info-page">
-    <section class="">
-        <div id="SupportedEvents" class="page-header" style="margin-top: 10px;">
+    <section id="SupportedEvents" class="">
+        <div class="page-header" style="margin-top: 10px;">
             <h2 class=""><span class="webhooks-icon"></span> <?= t('Supported Events') ?></h2>
         </div>
-        <ul class="">
-            <li class=""><code>comment.create</code></li>
-            <li class=""><code>comment.update</code></li>
-            <li class=""><code>comment.delete</code></li>
-            <li class=""><code>file.create</code></li>
-            <li class=""><code>task.move.project</code></li>
-            <li class=""><code>task.move.column</code></li>
-            <li class=""><code>task.move.position</code></li>
-            <li class=""><code>task.move.swimlane</code></li>
-            <li class=""><code>task.update</code></li>
-            <li class=""><code>task.create</code></li>
-            <li class=""><code>task.close</code></li>
-            <li class=""><code>task.open</code></li>
-            <li class=""><code>task.assignee_change</code></li>
-            <li class=""><code>subtask.update</code></li>
-            <li class=""><code>subtask.create</code></li>
-            <li class=""><code>subtask.delete</code></li>
-            <li class=""><code>task_internal_link.create_update</code></li>
-            <li class=""><code>task_internal_link.delete</code></li>
+        <ul class="fa-ul">
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">comment.create</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">comment.update</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">comment.delete</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">file.create</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">task.move.project</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">task.move.column</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">task.move.position</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">task.move.swimlane</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">task.update</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">task.create</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">task.close</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">task.open</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">task.assignee_change</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">subtask.update</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">subtask.create</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">subtask.delete</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">task_internal_link.create_update</code></li>
+            <li class=""><i class="fa-li fa fa-check-square pp-green"></i><code class="event-code">task_internal_link.delete</code></li>
         </ul>
     </section>
     <section class="">