faq update

backstage/templates/frequently_asked_questions.html

@@ -7,28 +7,79 @@
 <link rel="stylesheet" href="/static/styles/richtext.min.css">
 <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
-<input type="text" id="input_q" style="width:600px" />
-<button onclick="addQa();">新增</button><button onclick="saveQa();">修改項目</button><button
-    onclick="removeQa();">移除項目</button><button onclick="writeAllQa();">完成儲存</button>
-<div style="width:800px;"><textarea id='input_a'></textarea></div>
-<hr />
-<input id="curl" type="text" style="display: none;" /><br />
-<div>
-    <ul id='qaData1'></ul>
+
+<div class="faq-content">
+    <div class="row px-0 mx-0">
+     
+        <div class="col-lg-6">
+            <input id="curl" type="text" style="display: none;" />
+            <div>
+                <div>
+                    <ul id='qaData1'></ul>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div class="faq-editor">
+                <h1 class="h3"><i class="fas fa-pen mr-3 mb-3"></i>{{ title }}</h1>
+                <input type="text" class="form-control mb-3 w-100" id="input_q"
+                    placeholder="EX:小寶優居的規劃師服務和一般的室內設計有什麼不同嗎？" />
+                <div><textarea id='input_a'></textarea></div>
+                <div class="mt-4 d-flex justify-content-end">
+                    <div>
+                        <button class="btn faq-btn" onclick="addQa();">新增</button>
+                        <button class="btn faq-btn" onclick="saveQa();">修改項目</button>
+                        <button class="btn faq-btn" onclick="removeQa();">移除項目</button>
+                        <button class="btn faq-btn" onclick="writeAllQa();">完成儲存</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
+
+
 <style>
+    .faq-editor{
+        position:sticky !important;
+        top: 21px;
+    }
     #qaData1 li {
-        vertical-align: top;
+        vertical-align: center;
+        list-style-type:none;
     }
-
+    ul{
+        padding-inline-start: 0px !important;
+    }
+    
     #qaData1 tr {
         border: inset 2px
     }
 
     #qaData1 td {
         vertical-align: top;
-        border: inset 1px
+        padding: 0.475rem 0.475rem;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        font-size: 1rem;
+        /* border-collapse: unset; */
+        cursor: pointer;
+    }
+    table{
+        border-collapse: unset;
+        width: 100%;
+    }
+    .faq-btn {
+        background-color: rgb(179, 179, 179);
+        color: white;
+        transition: all 0.3s;
+        margin-right: 5px;
     }
+    .faq-btn:hover{
+        background-color: grey;
+    }
+
+
 </style>
 <script>
 
@@ -67,11 +118,11 @@
                 //alert(qa.length);
                 for (i = 0; i < qa.length; i++) {
                     //$('#qaData').append("<tr><td>" + qa[i].q + "</td><td>" + qa[i].a + "</td></tr>");
-                    $('#qaData1').append("<li data-si='" + i + "''><table><tr class='qa_q'><td>" + qa[i].q + "</td></tr><tr class='qa_a'><td>" + qa[i].a + "</td></tr></table></li>");
+                    $('#qaData1').append("<li class='mb-1' data-si='" + i + "''><table><tr class='qa_q'><td>" + qa[i].q + "</td></tr><tr class='qa_a'><td>" + qa[i].a + "</td></tr></table></li>");
 
                 }
                 $('.qa_a').hide();
-                $('.qa_q').dblclick(setTarget);
+                $('.qa_q').click(setTarget);
                 /* $('.qa_q').dblclick(function () {
                     //alert($(this).next()[0].childNodes[0].innerHTML);
                     //$('#editorjs')[0].innerHTML = "";