Bug 1843823: Fixing up styling for resume blocks

Flushing parent list-group-items, giving headings more visual
definition, spacing around elements so there's better grouping
of elements visually.

behatnotneeded

Change-Id: I0031e7a27849de3dd16a150a9899ca775e1f75ba

htdocs/theme/raw/plugintype/artefact/blog/blocktype/recentposts/templates/recentposts.tpl

@@ -42,15 +42,16 @@
         <a class="outer-link collapsed" data-toggle="collapse" href="#recent_post_{$post->id}" aria-expanded="false">
             <span class="sr-only">{$post->title}</span>
         </a>
-        <h4 class="list-group-item-heading text-inline">
+        <h4 class="list-group-item-heading">
             {if !($editing)}
-                 <a class="modal_link inner-link" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$post->id}">
+                 <a class="modal_link inner-link text-left" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$post->id}">
                      {$post->title}
                  </a>
             {else}
                 <span class="list-group-item-heading no-link">{$post->title}</span>
             {/if}
         </h4>
+        <span class="icon icon-chevron-up collapse-indicator float-right" role="presentation" aria-hidden="true"></span>
         <div>
             <span class="text-small">
                 {str tag='postedin' section='blocktype.blog/recentposts'}
@@ -72,10 +73,9 @@
                 {/if}
             </span>
         </div>
-        <span class="icon icon-chevron-down collapse-indicator float-right" role="presentation" aria-hidden="true"></span>
-    </div>
-    <div  id="recent_post_{$post->id}" class="collapse content-text">
-        <span>{$post->description|safe}</span>
+        <div  id="recent_post_{$post->id}" class="collapse content-text">
+            <span>{$post->description|safe}</span>
+        </div>
     </div>
 {/foreach}
 </div>

htdocs/theme/raw/plugintype/artefact/blog/blocktype/taggedposts/templates/taggedposts.tpl

@@ -23,7 +23,7 @@
 {/if}
 
 <div class="taggedpost-title text-midtone card-body flush">
-    {$blockheading|clean_html|safe}
+    <p>{$blockheading|clean_html|safe}</p>
 </div>
 
 {if $configerror}
@@ -35,7 +35,7 @@
 {elseif $badtag}
     <span class="text-midtone">{str tag='notags' section='blocktype.blog/taggedposts' arg1=$badtag}</span>
 {elseif $full}
-<div id="blogdescription">
+
     <div id="postlist_{$blockid}" class="list-group">
         {foreach from=$results item=post}
         {if !$editing}
@@ -51,8 +51,8 @@
                 justdetails=$justdetails
                 displayiconsonly=true}
         {/if}
-        <div class="list-group-item">
-            <h4 class="list-group-item-heading text-inline">
+        <div class="post list-group-item">
+            <h4 class="title">
                 {if !($editing)}
                      <a class="modal_link inner-link" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$post->id}">
                          {$post->title}
@@ -80,7 +80,6 @@
         </div>
         {/foreach}
     </div>
-</div>
 {else}
 <div class="taggedposts list-group">
     {foreach from=$results item=post}
@@ -101,7 +100,7 @@
         <a class="outer-link collapsed" data-toggle="collapse" href="#tagged_post_{$post->id}" aria-expanded="false">
             <span class="sr-only">{$post->title}</span>
         </a>
-        <h4 class="list-group-item-heading text-inline">
+        <h4 class="list-group-item-heading">
             {if !($editing)}
             <a class="modal_link inner-link list-group-item-heading" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$post->id}">
                 {$post->title}
@@ -110,6 +109,7 @@
             <span class="list-group-item-heading no-link">{$post->title}</span>
             {/if}
         </h4>
+        <span class="icon icon-chevron-up collapse-indicator float-right" role="presentation" aria-hidden="true"></span>
         <div>
             <span class="metadata">
                 {str tag='postedon' section='blocktype.blog/taggedposts'}
@@ -121,10 +121,9 @@
                 {/if}
             </span>
         </div>
-        <span class="icon icon-chevron-down collapse-indicator float-right" role="presentation" aria-hidden="true"></span>
-    </div>
-    <div  id="tagged_post_{$post->id}" class="collapse content-text">
-        <span>{$post->description|safe}</span>
+        <div  id="tagged_post_{$post->id}" class="collapse content-text">
+            <span>{$post->description|safe}</span>
+        </div>
     </div>
     {/foreach}
 </div>

htdocs/theme/raw/plugintype/artefact/blog/templates/blog.tpl

@@ -9,7 +9,7 @@
         </a>
     {/if}
 
-    <div id="blogdescription" class="content-text">{$description|clean_html|safe}
+    <div id="blogdescription">{$description|clean_html|safe}
     {if $tags}
     <div class="tags">
         <strong>{str tag=tags}:</strong> {list_tags owner=$owner tags=$tags view=$view}

htdocs/theme/raw/plugintype/artefact/blog/templates/view.tpl

@@ -14,9 +14,9 @@
 </div>
 {/if}
 <div id="myblogs" class="myblogs view-container">
-    <p id="blogdescription">
+    <div id="blogdescription">
         {clean_html($blog->get('description'))|safe}
-    </p>
+    </div>
     {if $blog->get('tags')}
     <div class="tags">
         <strong>{str tag=tags}:</strong> {list_tags owner=$blog->get('owner') tags=$blog->get('tags')}

htdocs/theme/raw/plugintype/artefact/plans/blocktype/plans/templates/content.tpl

@@ -20,7 +20,7 @@
             </div>
         {/if}
         {if count($plans) > 1}
-            <h4>{$plan.title}</h4>
+            <h4 class="title">{$plan.title}</h4>
         {/if}
         <p>{$plan.description}</p>
 

htdocs/theme/raw/plugintype/artefact/plans/templates/view/plantasks.tpl

 {foreach from=$tasks.data item=task}
     {if $task->completed == -1}
-        <div class="task-item plan_incomplete list-group-item {if $task->description || $task->tags}list-group-item-default{/if}">
+        <div class="task-item plan_incomplete list-group-item">
             {if $editing}
                 <div class="float-right btn-group">
                     <a class="btn btn-secondary btn-sm" href="{$WWWROOT}artefact/plans/task/edit.php?id={$task->id}{if $view}&view={$view}{/if}" title="{str tag='editthistask' section='artefact.plans' arg1=$task->title}"><span class="icon icon-pencil-alt text-default"></span></a>

htdocs/theme/raw/plugintype/artefact/resume/blocktype/entireresume/templates/content.tpl

@@ -3,54 +3,54 @@
 {else}
 <div class="list-group">
     {if $coverletter}
-    <div class="list-group-item">
-        <h4>{str tag=coverletter section=artefact.resume}</h4>
+    <div class="list-group-item flush">
+        <h4 class="title">{str tag=coverletter section=artefact.resume}</h4>
         {$coverletter|safe}
     </div>
     {/if}
 
     {if $interest}
-    <div class="list-group-item">
-        <h4>{str tag=interest section=artefact.resume}</h4>
+    <div class="list-group-item flush">
+        <h4 class="title">{str tag=interest section=artefact.resume}</h4>
         {$interest|safe}
     </div>
     {/if}
 
     {if $contactinformation}
-    <div class="list-group-item">
-        <h4>{str tag=contactinformation section=artefact.resume}</h4>
+    <div class="list-group-item flush">
+        <h4 class="title">{str tag=contactinformation section=artefact.resume}</h4>
         {$contactinformation|safe}
     </div>
     {/if}
 
     {if $personalinformation}
-    <div class="list-group-item">
-        <h4>{str tag=personalinformation section=artefact.resume}</h4>
+    <div class="list-group-item flush">
+        <h4 class="title">{str tag=personalinformation section=artefact.resume}</h4>
         {$personalinformation|safe}
     </div>
     {/if}
 
     {if $personalgoal || $academicgoal || $careergoal}
-        <div class="list-group-item">
-            <h4>{str tag=goals section=artefact.resume}</h4>
+        <div class="list-group-item flush">
+            <h4 class="title">{str tag=goals section=artefact.resume}</h4>
 
             {if $personalgoal}
             <div class="resume-content">
-                <h5>{str tag=personalgoal section=artefact.resume}</h5>
+                <h5 class="title">{str tag=personalgoal section=artefact.resume}</h5>
                 {$personalgoal|safe}
             </div>
             {/if}
 
             {if $academicgoal}
             <div class="resume-content">
-                <h5>{str tag=academicgoal section=artefact.resume}</h5>
+                <h5 class="title">{str tag=academicgoal section=artefact.resume}</h5>
                 {$academicgoal|safe}
             </div>
             {/if}
 
             {if $careergoal}
             <div class="resume-content">
-                <h5>{str tag=careergoal section=artefact.resume}</h5>
+                <h5 class="title">{str tag=careergoal section=artefact.resume}</h5>
                 {$careergoal|safe}
             </div>
             {/if}
@@ -59,26 +59,26 @@
     {/if}
 
     {if $personalskill || $academicskill || $workskill}
-        <div class="list-group-item">
-            <h4>{str tag=skills section=artefact.resume}</h4>
+        <div class="list-group-item flush">
+            <h4 class="title">{str tag=skills section=artefact.resume}</h4>
 
             {if $personalskill}
             <div class="resume-content">
-                <h5>{str tag=personalskill section=artefact.resume}</h5>
+                <h5 class="title">{str tag=personalskill section=artefact.resume}</h5>
                 {$personalskill|safe}
             </div>
             {/if}
 
             {if $academicskill}
             <div class="resume-content">
-                <h5>{str tag=academicskill section=artefact.resume}</h5>
+                <h5 class="title">{str tag=academicskill section=artefact.resume}</h5>
                 {$academicskill|safe}
             </div>
             {/if}
 
             {if $workskill}
             <div class="resume-content">
-                <h5>{str tag=workskill section=artefact.resume}</h5>
+                <h5 class="title">{str tag=workskill section=artefact.resume}</h5>
                 {$workskill|safe}
             </div>
             {/if}
@@ -86,19 +86,19 @@
     {/if}
 
     {if $employmenthistory || $educationhistory}
-        <div class="list-group-item">
-            <h4>{str tag=History section=blocktype.resume/entireresume}</h4>
+        <div class="list-group-item flush">
+            <h4 class="title">{str tag=History section=blocktype.resume/entireresume}</h4>
 
             {if $employmenthistory}
             <div class="resume-content">
-                <h5>{str tag=employmenthistory section=artefact.resume}</h5>
+                <h5 class="title">{str tag=employmenthistory section=artefact.resume}</h5>
                 {$employmenthistory|safe}
             </div>
             {/if}
 
             {if $educationhistory}
             <div class="resume-content">
-                <h5>{str tag=educationhistory section=artefact.resume}</h5>
+                <h5 class="title">{str tag=educationhistory section=artefact.resume}</h5>
                 {$educationhistory|safe}
             </div>
             {/if}
@@ -107,24 +107,24 @@
 
 
     {if $certification}
-    <div class="list-group-item">
-        <h4>{str tag=certification section=artefact.resume}</h4>
-        {$certification|safe}
+    <div class="list-group-item flush">
+        <h4 class="title">{str tag=certification section=artefact.resume}</h4>
+        <div class="resume-content">{$certification|safe}</div>
     </div>
     {/if}
 
     {if $book}
-    <div class="list-group-item">
-        <h4>{str tag=book section=artefact.resume}</h4>
-        {$book|safe}
+    <div class="list-group-item flush">
+        <h4 class="title">{str tag=book section=artefact.resume}</h4>
+        <div class="resume-content">{$book|safe}</div>
     </div>
     {/if}
 
     {if $membership}
-    <div class="list-group-item">
-        <h4>{str tag=membership section=artefact.resume}</h4>
-        {$membership|safe}
+    <div class="list-group-item flush">
+        <h4 class="title">{str tag=membership section=artefact.resume}</h4>
+        <div class="resume-content">{$membership|safe}</div>
     </div>
     {/if}
 </div>
-{/if}
\ No newline at end of file
+{/if}

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/book.tpl

@@ -13,7 +13,7 @@
                     <span class="accessible-hidden sr-only">{str tag=move}</span>
                 </th>
                 <th>{str tag='title' section='artefact.resume'}</th>
-                <th class="resumeattachments text-center">
+                <th class="resumeattachments">
                     <span>{str tag=Attachments section=artefact.resume}</span>
                 </th>
                 <th class="resumecontrols">
@@ -90,9 +90,9 @@
             {/if}
 
             {if $row->attachments}
-            <h5 class="list-group-item-heading">
+            <h5 class="has-attachment list-group-item-heading">
                 <span class="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
-                <span>{str tag='attachedfiles' section='artefact.blog'}</span>
+                <span class="text-small">{str tag='attachedfiles' section='artefact.blog'}</span>
                 ({$row->clipcount})
             </h5>
             <ul class="list-group list-group-unbordered">

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/certification.tpl

@@ -16,7 +16,7 @@
 
                 <th>{str tag='title' section='artefact.resume'}</th>
 
-                <th class="resumeattachments text-center">
+                <th class="resumeattachments">
                     <span>{str tag=Attachments section=artefact.resume}</span>
                 </th>
 
@@ -85,9 +85,9 @@
             {/if}
 
             {if $row->attachments}
-            <h5 class="list-group-item-heading">
+            <h5 class="has-attachment list-group-item-heading">
                 <span class="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
-                <span>{str tag='attachedfiles' section='artefact.blog'}</span>
+                <span class="text-small">{str tag='attachedfiles' section='artefact.blog'}</span>
                 ({$row->clipcount})
             </h5>
             <ul class="list-group list-group-unbordered">

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/contactinformation.tpl

+<div class="card-body flush">
 {if $hascontent}
 <table class="table resumecontactinfo profile-info">
 {if $address}
@@ -55,3 +56,4 @@
 {$license|safe}
 </div>
 {/if}
+</div>

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/educationhistory.tpl

@@ -14,7 +14,7 @@
                     <span class="accessible-hidden sr-only">{str tag=move}</span>
                 </th>
                 <th>{str tag='qualification' section='artefact.resume'}</th>
-                <th class="resumeattachments text-center">
+                <th class="resumeattachments">
                     <span class="">{str tag=Attachments section=artefact.resume}</span>
                 </th>
                 <th class="resumecontrols">
@@ -90,9 +90,9 @@
             {/if}
 
             {if $row->attachments}
-            <div class="list-group-item-heading">
+            <div class="has-attachment list-group-item-heading">
                 <span class="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
-                <span>{str tag='attachedfiles' section='artefact.blog'}</span>
+                <span class="text-small">{str tag='attachedfiles' section='artefact.blog'}</span>
                 ({$row->clipcount})
             </div>
             <ul class="list-group list-group-unbordered">

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/employmenthistory.tpl

@@ -14,7 +14,7 @@
                     <span class="accessible-hidden sr-only">{str tag=move}</span>
                 </th>
                 <th>{str tag='position' section='artefact.resume'}</th>
-                <th class="resumeattachments text-center">
+                <th class="resumeattachments">
                     <span>{str tag=Attachments section=artefact.resume}</span>
                 </th>
                 <th class="resumecontrols">
@@ -89,9 +89,9 @@
             {/if}
 
             {if $row->attachments}
-            <div class="list-group-item-heading">
+            <div class="has-attachment list-group-item-heading">
                 <span class="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
-                <span>{str tag='attachedfiles' section='artefact.blog'}</span>
+                <span class="text-small">{str tag='attachedfiles' section='artefact.blog'}</span>
                 ({$row->clipcount})
             </div>
             <ul class="list-group list-group-unbordered">

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/membership.tpl

@@ -17,7 +17,7 @@
 
                 <th>{str tag='title' section='artefact.resume'}</th>
 
-                <th class="resumeattachments text-center">
+                <th class="resumeattachments">
                     <span>{str tag=Attachments section=artefact.resume}</span>
                 </th>
 
@@ -88,9 +88,9 @@
             {/if}
 
             {if $row->attachments}
-            <h5 class="list-group-item-heading">
+            <h5 class="has-attachment list-group-item-heading">
                 <span class="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
-                <span>{str tag='attachedfiles' section='artefact.blog'}</span>
+                <span class="text-small">{str tag='attachedfiles' section='artefact.blog'}</span>
                 ({$row->clipcount})
             </h5>
             <ul class="list-group list-group-unbordered">

htdocs/theme/raw/plugintype/blocktype/myviews/templates/myviewspaginator.tpl

 {foreach from=$items item=view}
-    <div class="list-group-item">
-        <a href="{$view.fullurl}" class="outer-link">
-            <span class="sr-only">{$view.title}</span>
-        </a>
-
+    <div class="list-group-item flush">
         <h4 class="title list-group-item-heading text-inline">
             <a href="{$view.fullurl}">{$view.title}</a>
         </h4>
@@ -13,7 +9,7 @@
             ({str tag=nviews section=view arg1=$view.numpages})
         </span>
         {/if}
-        
+
         {if $view.description}
         <div class="list-group-item-text text-small">
             {$view.description|str_shorten_html:100:true|strip_tags|safe}

htdocs/theme/raw/plugintype/blocktype/newviews/templates/newviews.tpl

 {if $views}
 <div class="list-group">
     {foreach from=$views item=view}
-    <div class="list-group-item">
+    <div class="list-group-item flush">
         <h4 class="list-group-item-heading text-inline">
             <a href="{$view.fullurl}">{$view.title}</a>
         </h4>

htdocs/theme/raw/sass/_custom.scss

@@ -851,6 +851,16 @@ a.online-users {
     padding: 0px !important;
 }
 
+// giving top margin to blog description only when it exists
+.bt-blog #blogdescription > * {
+    margin-top: 10px;
+}
+
+// tagged post title needs padding bottom
+.bt-taggedposts .taggedpost-title {
+    padding: 10px 0;
+}
+
 // fixes ie11 flex issues making panels go to bottom of page
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .col-lg-3 {

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

@@ -35,6 +35,7 @@
         }
     }
     &.list-group-unbordered {
+        border: 0;
         li {
             border:0;
             padding: 5px 7px;
@@ -74,6 +75,7 @@
     a {
         &:hover {
             color: $link-color;
+            text-decoration: none;
             &.inner-link {
                 text-decoration: underline;
             }
@@ -93,6 +95,11 @@
     .postedon {
         font-family: $font-family-base;
     }
+
+    &.has-attachment {
+        font-family: $font-family-sans-serif;
+        font-weight: bold;
+    }
 }
 
 .list-group-item h4.list-group-item-heading {
@@ -283,8 +290,8 @@
         }
         &:last-child .list-group-item:last-child{
             border-bottom: 0;
-            border-bottom-right-radius: 3px;
-            border-bottom-left-radius: 3px;
+            border-bottom-right-radius: $card-border-radius;
+            border-bottom-left-radius: $card-border-radius;
         }
     }
 }
@@ -375,3 +382,35 @@
 .card.bt-wall > .block .list-group:last-child .list-group-item:last-child {
     border-bottom: 1px solid $list-group-border;
 }
+
+.bt-taggedposts .list-group,
+.taggedposts.list-group,
+.blog .list-group,
+.bt-plans .list-group,
+.resume-content .list-group {
+    border-top: 1px solid $list-group-border-color;
+    margin-top: -1px;
+}
+
+.bt-entireresume,
+.bt-entireresume-editor {
+    .list-group {
+        h4.title {
+            font-weight: bold;
+            margin: 10px 0;
+        }
+        .list-group-item {
+            &.flush {
+                border: 0;
+            }
+        }
+        .resume-content {
+            h5.title {
+              font-weight: bold;
+            }
+            .card-body {
+              padding: 0 0 15px 0;
+            }
+        }
+    }
+}

htdocs/theme/raw/sass/layout/_block-comments-details-header.scss

@@ -49,12 +49,14 @@
       }
     }
 
-    ~ .list-group-item h4.title {
+    ~ .list-group-item h4.title,
+    ~ .list-group-item h4.list-group-item-heading {
       margin-right: 100px;
     }
 
     &.d-none {
-      ~ .list-group-item h4.title {
+      ~ .list-group-item h4.title,
+      ~ .list-group-item h4.list-group-item-heading {
         margin-right: 0;
       }
     }

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

@@ -203,6 +203,7 @@
     &.has-attachment {
         border-radius: $border-radius-sm;
         border-width: 1px;
+        margin-bottom: 10px;
     }
 }
 

htdocs/theme/raw/sass/typography/_tables.scss

@@ -305,3 +305,20 @@ table.table tr {
         border-top-width: 1px;
     }
 }
+// unless being displayed in a block
+.bt-entireresume,
+.bt-entireresume-editor,
+.bt-resumefield,
+.bt-resumefield-editor
+ {
+    .table.profile-info {
+        >tbody>tr:first-child>th,
+        >tbody>tr:first-child>td {
+            border-top-width: 0;
+        }
+        td, th {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+}

htdocs/theme/raw/sass/typography/_typography.scss

@@ -331,7 +331,9 @@ pre {
 .note-name div,
 .view-description,
 .forum-post .postedits,
-.mce-content-body {
+.mce-content-body,
+.bt-entireresume,
+.bt-entireresume-editor {
   h1, h2, h3, h4, h5, h6  {
     font-family: $font-family-base;
     font-weight: bold;