Bug 1845273 Rejig CSS for wall posts

Removed double <h1>. Changed the markup to reflect a list-group
so it aligns with comments. Clean up styles.

behatnotneeded

Change-Id: I4920fa2c99ea057401128b4c126004345f6cc56a

htdocs/lib/user.php

@@ -2992,7 +2992,7 @@ function profile_icon_url($user, $maxwidth=40, $maxheight=40) {
     }
 
     // Available sizes of the 'no_userphoto' image:
-    $allowedsizes = array(16, 20, 25, 40, 50, 60, 100);
+    $allowedsizes = array(16, 20, 25, 30, 40, 50, 60, 100);
     if ($maxwidth != $maxheight || !in_array($maxwidth, $allowedsizes)) {
         log_warn('profile_icon_url: maxwidth, maxheight should be equal and in (' . join(', ', $allowedsizes) . ')');
     }

htdocs/theme/raw/plugintype/blocktype/wall/templates/inlineposts.tpl

@@ -3,40 +3,41 @@
         <div class="card-body lead text-small text-center">{$wallmessage}</div>
     {/if}
     {if $wallposts}
+        <div class="list-group list-group-lite">
         {foreach from=$wallposts item=wallpost}
-            <div class="card {if $wallpost->private} bg-warning{/if} wallpost">
-                <h4 class="card-header has-link">
-                    <a href="{$wallpost->profileurl}" class="userinfo has-user-icon">
-                        <span class="user-icon user-icon-40 left">
-                            <img src="{profile_icon_url user=$wallpost maxheight=40 maxwidth=40}" alt="{str tag=profileimagetext arg1=$wallpost|display_default_name}" />
-                        </span>
-                            {$wallpost->displayname}<span class="postedon text-small text-midtone"> - {$wallpost->postdate|format_date}</span>
-                    </a>
-                {if $wallpost->deletable}
-                    <a href="{$WWWROOT}blocktype/wall/deletepost.php?postid={$wallpost->postid}&return={if $wholewall}wall{else}profile{/if}" class="card-control card-header-action">
-                        <span class="icon icon-trash-alt left text-danger icon-sm" role="presentation" aria-hidden="true"></span>
-                        <span class="sr-only">{str tag='delete' section='blocktype.wall'}</span>
-                    </a>
-                {/if}
-                </h4>
-                <div class="card-body">
+            <div class="list-group-item {if $wallpost->private} list-group-item-private{/if} wallpost">
+                <div class="usericon-heading">
+                    <span class="user-icon user-icon-30 float-left" role="presentation" aria-hidden="true">
+                        <a href="{$wallpost->profileurl}"><img src="{profile_icon_url user=$wallpost maxheight=30 maxwidth=30}" alt="{str tag=profileimagetext arg1=$wallpost|display_default_name}" /></a>
+                    </span>
+                    <h5 class="float-left list-group-item-heading"><a href="{$wallpost->profileurl}">{$wallpost->displayname}</a><br /><span class="postedon text-small text-midtone">{$wallpost->postdate|format_date}</span></h5>
+
+                    {if $wallpost->deletable}
+                    <div class="btn-group btn-group-top comment-item-buttons">
+                        {* {if $ownwall}
+                            <a href="{$WWWROOT}blocktype/wall/wall.php?instance={$instanceid}&amp;replyto={$wallpost->id}" class="btn btn-secondary btn-group-item form-as-button float-left">
+                                <span class="icon icon-reply icon-lg" role="presentation" aria-hidden="true"></span>
+                                <span class="sr-only">{str tag='reply' section='blocktype.wall'}</span>
+                            </a>
+                        {/if}*}
+                        <a href="{$WWWROOT}blocktype/wall/deletepost.php?postid={$wallpost->postid}&return={if $wholewall}wall{else}profile{/if}" class="btn btn-secondary btn-group-item form-as-button float-left">
+                            <span class="icon icon-trash-alt text-danger icon-lg" role="presentation" aria-hidden="true"></span>
+                            <span class="sr-only">{str tag='delete' section='blocktype.wall'}</span>
+                        </a>
+                    </div>
+                    {/if}
+                </div>
+
+                <div class="wallpost-text">
                     {$wallpost->text|safe}
                     <div class="metadata">
                     {if $wallpost->private}<em class="privatemessage">{str tag='wallpostprivate' section='blocktype.wall'}</em>{/if}
                     </div>
                 </div>
-                {* {if $ownwall}
-                <div class="card-footer">
-                    <a href="{$WWWROOT}blocktype/wall/wall.php?instance={$instanceid}&amp;replyto={$wallpost->id}">
-                        <span class="icon icon-reply left" role="presentation" aria-hidden="true"></span>
-                        <span class="pull">{str tag='reply' section='blocktype.wall'}</span>
-                    </a>
-                </div>
-                {/if}*}
 
             </div>
         {/foreach}
-
+        </div>
     {/if}
 </div>
 {if !$wholewall}

htdocs/theme/raw/plugintype/blocktype/wall/templates/wallposts.tpl

 {include file="header.tpl"}
 
-    <h1>{$displayname}: {str tag='wall' section='blocktype.wall'}</h1>
+    <h2>{$displayname}: {str tag='wall' section='blocktype.wall'}</h2>
 
     <a href="{profile_url($owner)}" class="btn btn-secondary">
         <span class="icon icon-arrow-left left" role="presentation" aria-hidden="true"></span>

htdocs/theme/raw/sass/components/_list-group.scss

@@ -89,6 +89,10 @@
     .collection-item & {
         font-size: $h3-font-size;
     }
+
+    .postedon {
+        font-family: $font-family-base;
+    }
 }
 
 .list-group-item h4.list-group-item-heading {
@@ -110,6 +114,12 @@
 
     }
 }
+.list-group-item-private {
+    background-color: $gray-100;
+    .text-midtone {
+        color: $theme-text-color;
+    }
+}
 
 // Sidebar notification item styles
 .list-group-item-profile-notification {
@@ -357,3 +367,11 @@
     width: 100%;
     cursor: pointer;
 }
+
+// wallpost block borders
+.card.card-secondary .list-group .wallpost:first-child {
+    border-top: 1px solid $list-group-border;
+}
+.card.bt-wall > .block .list-group:last-child .list-group-item:last-child {
+    border-bottom: 1px solid $list-group-border;
+}

htdocs/theme/raw/sass/components/_user-icon.scss

@@ -117,6 +117,12 @@ a.user-icon, a .user-icon {
         height: 25px;
     }
 }
+.user-icon-30 {
+    img {
+        width: 30px;
+        height: 30px;
+    }
+}
 .user-icon-40 {
     img {
         width: 40px;

htdocs/theme/raw/sass/layout/_layout.scss

@@ -46,12 +46,11 @@ body {
     clear:both;
 }
 
-.wallpost {
-    &:first-child {
-        margin-top: 20px;
-    }
-    p {
-        margin-bottom: 0;
+.wall {
+    margin-top: 20px;
+    .lead {
+        background-color: $gray-100;
+        padding: $alert-padding-y $alert-padding-x;
     }
 }
 

htdocs/theme/raw/sass/layout/card/_card-secondary.scss

@@ -82,13 +82,6 @@
         }
     }
 
-    // wallpost blocks don't need secdonary card border color
-    .wallpost {
-        .card-header {
-            border-color: $card-border-color;
-        }
-    }
-
     // pdf blocks need padding taken away
     &.bt-pdf .block > .card-body {
       padding: 0;

htdocs/theme/raw/sass/layout/card/_card.scss

@@ -48,7 +48,6 @@
     }
     //don't want border around the message
     &.wallpost {
-      border: none;
     }
 }