Bladeren bron

Merge branch 'master' of http://git.choozmo.com:3000/choozmo/bhouse_backstage

mike 3 jaren geleden
bovenliggende
commit
5107d4b195
2 gewijzigde bestanden met toevoegingen van 89 en 19 verwijderingen
  1. 1 1
      backstage/templates/collections.html
  2. 88 18
      backstage/templates/frequently_asked_questions.html

+ 1 - 1
backstage/templates/collections.html

@@ -21,7 +21,7 @@
             class="fas fa-edit"></i></a>
         <form action="{{ url_for('collections.remove', url=collections[idx].url) }}" method="POST" method="POST"
           class="m-1 inline_block">
-          <button class="btn__delete" type="submit" value="delete" onclick=" return confirm('確定要刪除此作品?');"><i
+          <button class="btn__delete" type="submit" value="delete" onclick="return confirm('確定要刪除此作品?');"><i
               class="fas fa-trash-alt"></i></button>
         </form>
       </div>

+ 88 - 18
backstage/templates/frequently_asked_questions.html

@@ -10,7 +10,7 @@
 
 <div class="faq-content">
     <div class="row px-0 mx-0">
-     
+
         <div class="col-lg-6">
             <h1 class="h3"><i class="fas fa-pen mr-3 mb-3"></i>{{ title }}</h1>
 
@@ -19,17 +19,27 @@
                 <div>
                     <ul id='qaData1'></ul>
                 </div>
+                <div class="text-center">
+
+                    <button style="border: none; background: none; outline: none;" onclick="addQa();"><i
+                            class="addfaq fas fa-plus-circle"></i></button>
+                </div>
+
             </div>
         </div>
         <div class="col-lg-6">
-            <div class="faq-editor">
+
+            <div class="card faq-editor p-3">
+                <div class="text-right mb-3">
+                    <i class="close_edit_faq fas fa-times"></i>
+                </div>
                 <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="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>
@@ -41,18 +51,38 @@
 
 
 <style>
-    .faq-editor{
-        position:sticky !important;
+    .addfaq {
+        color: #ADB5BD;
+        font-size: 32px;
+        cursor: pointer;
+        transition: all 0.3s;
+
+    }
+
+    .addfaq:hover {
+        color: grey;
+
+    }
+
+    .close_edit_faq {
+        font-size: 24px;
+        cursor: pointer;
+    }
+
+    .faq-editor {
+        position: sticky !important;
         top: 21px;
     }
+
     #qaData1 li {
         vertical-align: center;
-        list-style-type:none;
+        list-style-type: none;
     }
-    ul{
+
+    ul {
         padding-inline-start: 0px !important;
     }
-    
+
     #qaData1 tr {
         border: inset 2px
     }
@@ -66,21 +96,22 @@
         /* border-collapse: unset; */
         cursor: pointer;
     }
-    table{
+
+    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{
+
+    .faq-btn:hover {
         background-color: grey;
     }
-
-
 </style>
 <script>
 
@@ -159,20 +190,48 @@
         });
 
     });
+    $(".faq-editor").hide();
+
 
     function setTarget() {
+        $(".faq-editor").fadeIn();
         $('.qa_q').css("background-color", "white");
         $(this).css("background-color", "lightpink");
         targetItem = $(this);
         $("#input_q").val($(this).children().html());
         $("#input_a").val($(this).next().children().html()).trigger('change');
-        $('html, body').animate({ scrollTop: '0px' }, 300);
+        // $('html, body').animate({ scrollTop: '0px' }, 300);
     }
 
+    $(".close_edit_faq").click(function () {
+        $(".faq-editor").fadeOut();
+    });
+
+
+
+
+
+
+
+
+
+
+
+
     function addQa() {
-        $('#qaData1').append("<li data-si='" + i + "''><table><tr class='qa_q'><td>" + $("#input_q").val() + "</td></tr><tr class='qa_a'><td>" + $("#input_a").val() + "</td></tr></table></li>");
+
+        var QaItem = document.getElementById('qaData1');
+
+        $('#qaData1').append("<li data-si='" + i + "''><table><tr class='qa_q'><td></td></tr><tr class='qa_a'><td></td></tr></table></li>");
         $('.qa_a').hide();
-        $('.qa_q').dblclick(setTarget);
+        $('.qa_q').click(setTarget);
+
+        $(".qa_q").trigger("click");
+
+        $("#input_q").focus();
+
+        // QaItem.lastChild.innerHTML.triggerHandler('click');
+
     };
 
     function saveQa() {
@@ -181,10 +240,21 @@
     };
 
     function removeQa() {
-        targetItem.parent().parent().parent().remove()
+        // targetItem.parent().parent().parent().remove()
+        var r = confirm("確定要刪除此作品?");
+        if (r == true) {
+            targetItem.parent().parent().parent().remove();
+            writeAllQa();
+            $(".faq-editor").fadeOut();
+        }
     };
-
+    
+ 
     function writeAllQa() {
+
+        targetItem.children().html($("#input_q").val());
+        targetItem.next().children().html($("#input_a").val());
+
         qa = [];
         for (i = 0; i < $('#qaData1 .qa_q').length; i++) {
             qa.push({ q: $('#qaData1 .qa_q')[i].childNodes[0].innerHTML, a: $('#qaData1 .qa_a')[i].childNodes[0].innerHTML });