Post list: Improve lazy chat message edit button layout.

Change-Id: I46100b4b0039f241c7fb13905fb203303f1a466d

1 files changed, 14 insertions, 7 deletions

diff --git a/src/main/resources/templates/benki/posts/postList.html b/src/main/resources/templates/benki/posts/postList.html
index a66528b..3cd4e49 100644
--- a/src/main/resources/templates/benki/posts/postList.html
+++ b/src/main/resources/templates/benki/posts/postList.html
@@ -17,6 +17,8 @@
 {#head}
   <link href="{feedUri}" rel="alternate" type="application/atom+xml" />
 
+  <script type="module" src="/web_modules/elix/define/Button.js"></script>
+  <script type="module" src="/web_modules/elix/define/ExpandablePanel.js"></script>
   <script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script>
   <script type="module" src="/bookmarks/MlkBookmarkSubmissionForm.js"></script>
   <script type="module" src="/lazychat/MlkLazychatSubmissionForm.js"></script>
@@ -69,24 +71,29 @@
       {#else}
         <article class="lazychat-message">
           <header>
-            <div class="lazychat-message-info" style="display: inline-block">
+            <div class="lazychat-message-info">
               <time datetime="{date.htmlDateTime}">{date.humanDateTime}</time>
               <span class="lazychat-message-owner">{owner.firstName} {owner.lastName}</span>
             </div>
 
+            <div class="lazychat-message-controls">
+              {#if showLazychatForm}
+                <button class="pure-button lazychat-edit-button">Edit</button>
+              {/if}
+            </div>
+          </header>
+
+          <section class="lazychat-editor">
             {#if showLazychatForm}
-              <elix-expandable-section class="lazychat-editor-pane editor-pane">
+              <elix-expandable-panel class="lazychat-editor-pane editor-pane">
                 <mlk-lazychat-submission-form edited-id="{post.id}"></mlk-lazychat-submission-form>
-              </elix-expandable-section>
+              </elix-expandable-panel>
             {/if}
-          </header>
+          </section>
 
           <section class="lazychat-message-content">
             {contentHtml.raw}
           </section>
-
-          <section class="lazychat-editor">
-          </section>
         </article>
       {/if}
     {/with}