show 'no drafts yet' message

src/client/js/components/MyDraftList/MyDraftList.jsx

@@ -221,11 +221,23 @@ export default class MyDraftList extends React.Component {
 
     return (
       <div className="page-list-container-create">
-        <button type="button" className="btn-danger mb-3" onClick={this.clearAllDrafts}>Delete All</button>
-        <div className="tab-pane m-t-30 accordion" id="draft-list">
-          {draftList}
-        </div>
-        <Pagination bsSize="small">{paginationItems}</Pagination>
+
+        { draftList.length === 0
+          && <span>No drafts yet.</span>
+        }
+
+        { draftList.length > 0
+          && (
+            <React.Fragment>
+              <button type="button" className="btn-danger mb-3" onClick={this.clearAllDrafts}>Delete All</button>
+              <div className="tab-pane m-t-30 accordion" id="draft-list">
+                {draftList}
+              </div>
+              <Pagination bsSize="small">{paginationItems}</Pagination>
+            </React.Fragment>
+          )
+        }
+
       </div>
     );
   }

src/server/views/widget/user_page_content.html

@@ -19,13 +19,13 @@
   <div class="m-t-10 user-page-content-tab tab-content">
 
     <div class="tab-pane user-bookmark-list page-list active" id="user-bookmark-list">
-      <div class="page-list-container">
-        {% if bookmarkList.length == 0 %}
+      {% if bookmarkList.length == 0 %}
         No bookmarks yet.
-        {% else %}
+      {% else %}
+        <div class="page-list-container">
           {% include 'page_list.html' with { pages: bookmarkList, pagePropertyName: 'page' } %}
-        {% endif %}
-      </div>
+        </div>
+      {% endif %}
     </div>
 
     <div class="tab-pane user-created-list page-list" id="user-created-list">