作品集Editor介面優化

backstage/static/js/editor.js

@@ -128,14 +128,14 @@ axios.get(contentApiUrl).then(({ data }) => {
         }
       }
       ,
-      warning: {
-        class: Warning,
-        inlineToolbar: true,
-        config: {
-          titlePlaceholder: 'Title',
-          messagePlaceholder: 'Message',
-        },
-      },
+      // warning: {
+      //   class: Warning,
+      //   inlineToolbar: true,
+      //   config: {
+      //     titlePlaceholder: 'Title',
+      //     messagePlaceholder: 'Message',
+      //   },
+      // },
       table: Table,
       delimiter: Delimiter,
       embed: Embed,

backstage/templates/collections.html

@@ -4,17 +4,17 @@
   {% if collections[idx].url != '/collection' %}
     <tbody>
       <tr>
-        <td class="table__data">{{ idx }}</td>
+        <td class="table__data">{{ idx + 1 }}</td>
         <td class="table__data">{{ collections[idx].title }}</td>
         <td class="table__data">{{ collections[idx].date }}</td>
         <!-- <td class="table__data">1</td> -->
         <td class="table__data"><input type="checkbox" disabled {{ 'checked' if (collections[idx].draft.lower()=='false') }} /></td>
         <td>
           <div class="d-flex justify-content-center">
-            <button onclick="getHeader('{{ collections[idx].url }}');" >編輯檔頭</button>
+            <button class="btn btn_light mr-1" onclick="getHeader('{{ collections[idx].url }}');" ><b>主資訊</b> <i class="fas fa-pencil-alt"></i></button>
             <a class="m-1 btn__edit" href="{{ url_for('editor.editor', url=collections[idx].url) }}"><i 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 class="fas fa-trash-alt"></i></button>
+              <button class="btn__delete" type="submit" value="delete" onclick=" return confirm('確定要刪除此作品?');"><i class="fas fa-trash-alt"></i></button>
             </form>
           </div>
         </td>
@@ -28,11 +28,11 @@
 {% block modal_body %}
   <form action="{{ url_for('collections.create') }}" method="POST" enctype="multipart/form-data">
     <div class="form-group">
-      {{ form.title.label(class="form-control-label modal__label mb-1") }}
+      {{ form.title.label(class="form-control-label modal__label mb-1") }} <span class="text-danger">(建議字數: 15字內)</span>
       {{ form.title(class="form-control form-control-lg") }}
       {{ form.image.label(class="form-control-label modal__label mt-3 mb-1") }}
       {{ form.image(class="form-control form-control-lg modal__file") }}
-      {{ form.description.label(class="form-control-label modal__label mt-3 mb-1") }}
+      {{ form.description.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(建議字數: 50字內)</span>
       {{ form.description(class="form-control form-control-lg textarea") }}
     </div>
     <div class="modal-footer  pb-0 border-0">

backstage/templates/editor.html

@@ -10,11 +10,11 @@
         <tbody>
           <tr>
             <td><h4>標題</h4></td>
-            <td><input class="form-control" id="ctitle" type="text" /></td>
+            <td><input class="form-control" id="ctitle" type="text" /> <div class="mt-1 text-danger">(建議字數: 15字內)</div></td>
           </tr>
           <tr>
             <td><h4>描述</h4></td>
-            <td><textarea class="form-control" rows="3" id="cdescription"></textarea></td>
+            <td><textarea class="form-control" rows="3" id="cdescription"></textarea> <div class="mt-1 text-danger">(建議字數: 50字內)</div></td>
           </tr>
         </tbody>
       </table>

backstage/templates/tables/editor_table.html

@@ -4,7 +4,7 @@
 <table id="example" class="table" cellspacing="0" width="60%">
   <thead>
     <tr>
-      <th class="table__head">編號</th>
+      <th class="table__head">#</th>
       <th class="table__head">標題</th>
       <th class="table__head">日期</th>
       <!-- <th class="table__head">順序</th> -->
@@ -23,7 +23,55 @@
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script type="text/javascript" src="{{url_for('static', filename='config.js')}}"></script>
 <script type="text/javascript" src="{{url_for('static', filename='js/yo.js')}}"></script>
-<div id="dialog-form">
+
+<div class="modal fade" id="myModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+    
+      <div class="modal-header">
+        <h4 class="modal-title">作品主資訊修改</h4>
+        <button type="button" class="close" data-dismiss="modal">×</button>
+      </div>
+      
+      <div class="modal-body">
+        <table class="table table-bordered">
+          <tbody>
+            <tr>
+              <td><h4>標題</h4></td>
+              <td><input class="form-control" id="ctitle" type="text" /> <div class="mt-1 text-danger">(建議字數: 15字內)</div></td>
+            </tr>
+            <tr>
+              <td><h4>描述</h4></td>
+              <td><textarea class="form-control" rows="3" id="cdescription"></textarea> <div class="mt-1 text-danger">(建議字數: 50字內)</div></td>
+            </tr>
+            <tr>
+              <td><h4>日期</h4></td>
+              <td><input class="form-control" id="cdate" type="text" /></td>
+            </tr>
+            <tr>
+              <td><h4>是否顯示</h4></td>
+              <td><input id="cdraft" type="checkbox" checked="true" /></td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="d-none">
+          <input id="ctype" type="text" /><br />
+          <input id="curl" type="text" /><br />
+          <input id="cimage" type="text" /><br />
+          <input id="cweight" type="text" /><br />
+          <input id="ctag" type="text" /><br />
+        </div>        
+      </div>
+      
+      <div class="modal-footer">
+        <button type="button" class="btn btn-danger" onclick="updateHeader();location.reload();">完成修改</button>
+      </div>
+      
+    </div>
+  </div>
+</div>
+
+<!-- <div id="dialog-form">
   <input id="ctitle" type="text" /><br />
   <input id="cdate" type="text" /><br />
   <input id="cdraft" type="checkbox" checked="true" /><br />
@@ -34,7 +82,7 @@
   <input id="cweight" type="text" /><br />
   <input id="ctag" type="text" /><br />
   <button onclick="updateHeader();location.reload();">完成修改</button>
-</div>
+</div> -->
 <script>
   editTarget = "";
   frontMatters = [];
@@ -45,7 +93,8 @@
       aa = data[0]['content'];
       const content = _.get(data, '0.content', '');
       blocks = parseMd(content);
-      $("#dialog-form").dialog();
+      // $("#dialog-form").dialog();
+      $("#myModal").modal();
       editTarget = url;
       //console.log(frontMatters);
     });