KB54 Group posts by date, use floating to make style sheet even more compact.

Change-Id: I41346eb51481d4c2c4e7066373fba5b7073e3e4f

1 files changed, 36 insertions, 32 deletions

diff --git a/src/main/resources/templates/benki/posts/postList.html b/src/main/resources/templates/benki/posts/postList.html
index 2911be4..f178927 100644
--- a/src/main/resources/templates/benki/posts/postList.html
+++ b/src/main/resources/templates/benki/posts/postList.html
@@ -54,67 +54,71 @@
 <section id="main-content">
   {#for day in postDays}
     <div class="post-day">
+      <div class="post-day-info">
+        <time datetime="{day.date.htmlDate}">{day.date.humanDate}</time>
+      </div>
+
       {#for post in day.posts}
         {#with post}
           {#if post.isBookmark}
-            <article class="bookmark">
+            <article class="bookmark {#if descriptionHtml != ""}post-with-nonempty-body{/if}">
+              <section class="bookmark-editor post-editor">
+                {#if showBookmarkForm}
+                <elix-expandable-panel class="bookmark-editor-pane editor-pane">
+                  <mlk-bookmark-submission-form edited-id="{post.id}"></mlk-bookmark-submission-form>
+                </elix-expandable-panel>
+                {/if}
+              </section>
+
               <header>
                 <div class="bookmark-info">
+                  <span class="bookmark-owner post-owner">{owner.firstName}</span>
                   <a class="post-link" href="/posts/{post.id}">
-                    <time datetime="{date.htmlDateTime}">{date.humanDateTime}</time>
-                    <span class="bookmark-owner">{owner.firstName} {owner.lastName}</span>
+                    <span class="post-self-link">#</span>
                   </a>
-                </div>
 
-                <div class="bookmark-controls">
-                  {#if showBookmarkForm}
-                  <button class="pure-button bookmark-edit-button">Edit</button>
-                  {/if}
+                  <a href="{uri}" class="bookmark-title">
+                    <h1 class="bookmark-title">⇢&nbsp;{title}</h1>.
+                  </a>
                 </div>
               </header>
 
-              <section class="bookmark-editor post-editor">
+              <div class="bookmark-controls">
                 {#if showBookmarkForm}
-                <elix-expandable-panel class="bookmark-editor-pane editor-pane">
-                  <mlk-bookmark-submission-form edited-id="{post.id}"></mlk-bookmark-submission-form>
-                </elix-expandable-panel>
+                <button class="pure-button bookmark-edit-button">Edit</button>
                 {/if}
-              </section>
-
-              <section class="bookmark-title-section">
-                <a href="{uri}" class="bookmark-title"><h1 class="bookmark-title">⇢&nbsp;{title}</h1></a>
-              </section>
+              </div>
 
-              <section class="bookmark-description">
+              <section class="bookmark-description post-content">
                 {descriptionHtml.raw}
               </section>
             </article>
           {#else}
             <article class="lazychat-message">
+              <section class="lazychat-editor post-editor">
+                {#if showLazychatForm}
+                <elix-expandable-panel class="lazychat-editor-pane editor-pane">
+                  <mlk-lazychat-submission-form edited-id="{post.id}"></mlk-lazychat-submission-form>
+                </elix-expandable-panel>
+                {/if}
+              </section>
+
               <header>
                 <div class="lazychat-message-info">
+                  <span class="lazychat-message-owner post-owner">{owner.firstName}</span>
                   <a class="post-link" href="/posts/{post.id}">
-                    <time datetime="{date.htmlDateTime}">{date.humanDateTime}</time>
-                    <span class="lazychat-message-owner">{owner.firstName} {owner.lastName}</span>
+                    <span class="post-self-link">#</span>
                   </a>
                 </div>
-
-                <div class="lazychat-message-controls">
-                  {#if showLazychatForm}
-                    <button class="pure-button lazychat-edit-button">Edit</button>
-                  {/if}
-                </div>
               </header>
 
-              <section class="lazychat-editor post-editor">
+              <div class="lazychat-message-controls">
                 {#if showLazychatForm}
-                  <elix-expandable-panel class="lazychat-editor-pane editor-pane">
-                    <mlk-lazychat-submission-form edited-id="{post.id}"></mlk-lazychat-submission-form>
-                  </elix-expandable-panel>
+                <button class="pure-button lazychat-edit-button">Edit</button>
                 {/if}
-              </section>
+              </div>
 
-              <section class="lazychat-message-content">
+              <section class="lazychat-message-content post-content">
                 {contentHtml.raw}
               </section>
             </article>