Skip to content

GitLab

Commit fb0adb74 authored by Evonne's avatar Evonne Committed by Robert Lyon
Browse files

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
parent 4b545041
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 79 deletions
htdocs/theme/raw/plugintype/artefact/blog/blocktype/recentposts/templates/recentposts.tpl
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
{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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
<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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
{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
View file @ fb0adb74
{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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
......@@ -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
View file @ fb0adb74
......@@ -203,6 +203,7 @@
&.has-attachment {
border-radius: $border-radius-sm;
border-width: 1px;
margin-bottom: 10px;
}
}
......
htdocs/theme/raw/sass/typography/_tables.scss
View file @ fb0adb74
......@@ -305,3 +305,20 @@ table.table tr {
border-top-width: 1px;
}
}