Skip to content

Commit

Permalink
Update the resolution status in the topic list
Browse files Browse the repository at this point in the history 
Previously, we had issues where the resolution status on the topic list looked ugly. This makes it look nice.
  • Loading branch information
@ruiminggu
ruiminggu committed Oct 12, 2023
1 parent 825b2fe commit d11995d
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 2 deletions.
15 changes: 15 additions & 0 deletions themes/nodebb-theme-persona/less/topics_list.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,19 @@
margin-bottom: 10px;
border-top: 1px solid @post-border-color;
border-bottom: 1px solid @post-border-color;
}

.resolved-status {
font-weight: bold;
color: green;
font-size: 8px;
border: 2px solid green;
padding: 3px;
}


/* Style for the unsolved post section with a light red background */
li.unsolved-post {
background-color: rgb(239, 210, 210); /* Change to your desired light red color */
/* Add any other styles you want here */
}
129 changes: 127 additions & 2 deletions themes/nodebb-theme-persona/templates/partials/topics_list.tpl
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<ul component="category" class="topic-list" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
{{{each topics}}}
<!-- IF topics.resolved -->
<li component="category/topic" class="row clearfix category-item {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
<link itemprop="url" content="{config.relative_path}/topic/{../slug}" />
<meta itemprop="name" content="{function.stripTags, ../title}" />
Expand Down Expand Up @@ -46,7 +47,7 @@
<!-- ENDIF !topics.noAnchor -->

<!-- IF topics.resolved -->
<span>Resolved</span><br />
<span class="resolved-status">Resolved</span><br />
<!-- ENDIF topics.resolved -->

<!-- IF !template.category -->
Expand Down Expand Up @@ -119,5 +120,129 @@
</div>
</div>
</li>
<!-- ENDIF topics.resolved -->


<!-- IF !topics.resolved -->
<li component="category/topic" class="row clearfix category-item {function.generateTopicClass} unsolved-post" <!-- IMPORT partials/data/category.tpl -->>
<link itemprop="url" content="{config.relative_path}/topic/{../slug}" />
<meta itemprop="name" content="{function.stripTags, ../title}" />
<meta itemprop="itemListOrder" content="descending" />
<meta itemprop="position" content="{../index}" />
<a id="{../index}" data-index="{../index}" component="topic/anchor"></a>

<div class="col-md-6 col-sm-9 col-xs-10 content">
<div class="avatar pull-left">
<!-- IF showSelect -->
<div class="select" component="topic/select">
{{{ if ./thumbs.length }}}
<img src="{./thumbs.0.url}" class="user-img not-responsive" />
{{{ else }}}
{buildAvatar(../user, "46", true, "not-responsive")}
{{{ end }}}
<i class="fa fa-check"></i>
</div>
<!-- ENDIF showSelect -->

<!-- IF !showSelect -->
<a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->" class="pull-left">
{{{ if ./thumbs.length }}}
<img src="{./thumbs.0.url}" class="user-img not-responsive" />
{{{ else }}}
{buildAvatar(../user, "46", true, "not-responsive")}
{{{ end }}}
</a>
<!-- ENDIF !showSelect -->
</div>

<h2 component="topic/header" class="title">
<i component="topic/scheduled" class="fa fa-clock-o <!-- IF !topics.scheduled -->hide<!-- ENDIF !topics.scheduled -->" title="[[topic:scheduled]]"></i>
<i component="topic/pinned" class="fa fa-thumb-tack <!-- IF (topics.scheduled || !topics.pinned) -->hide<!-- ENDIF (topics.scheduled || !topics.pinned) -->" title="{{{ if !../pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {../pinExpiryISO}]]{{{ end }}}"></i>
<i component="topic/locked" class="fa fa-lock <!-- IF !topics.locked -->hide<!-- ENDIF !topics.locked -->" title="[[topic:locked]]"></i>
<i component="topic/moved" class="fa fa-arrow-circle-right <!-- IF !topics.oldCid -->hide<!-- ENDIF !topics.oldCid -->" title="[[topic:moved]]"></i>
{{{each topics.icons}}}{@value}{{{end}}}


<!-- IF !topics.noAnchor -->
<a href="{config.relative_path}/topic/{topics.slug}<!-- IF topics.bookmark -->/{topics.bookmark}<!-- ENDIF topics.bookmark -->">{topics.title}</a><br />
<!-- ELSE -->
<span>{topics.title}</span><br />
<!-- ENDIF !topics.noAnchor -->

<!-- IF topics.resolved -->
<span class="resolved-status">Resolved</span><br />
<!-- ENDIF topics.resolved -->

<!-- IF !template.category -->
<small>
<a href="{config.relative_path}/category/{topics.category.slug}"><span class="fa-stack fa-lg" style="{function.generateCategoryBackground, topics.category}"><i style="color:{topics.category.color};" class="fa {topics.category.icon} fa-stack-1x"></i></span> {topics.category.name}</a> &bull;
</small>
<!-- ENDIF !template.category -->

{{{ if topics.tags.length }}}
<span class="tag-list hidden-xs">
{{{each topics.tags}}}
<a href="{config.relative_path}/tags/{topics.tags.valueEncoded}"><span class="tag tag-item tag-class-{topics.tags.class}">{topics.tags.valueEscaped}</span></a>
{{{end}}}
<small>&bull;</small>
</span>
{{{ end }}}

<small class="hidden-xs"><span class="timeago" title="{topics.timestampISO}"></span> &bull; <a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->">{topics.user.displayname}</a></small>
<small class="visible-xs-inline">
<!-- IF topics.teaser.timestamp -->
<span class="timeago" title="{topics.teaser.timestampISO}"></span>
<!-- ELSE -->
<span class="timeago" title="{topics.timestampISO}"></span>
<!-- ENDIF topics.teaser.timestamp -->
</small>
</h2>
</div>

<div class="mobile-stat col-xs-2 visible-xs text-right">
<span class="human-readable-number">{topics.postcount}</span> <a href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"><i class="fa fa-arrow-circle-right"></i></a>
</div>

<div class="col-md-1 hidden-sm hidden-xs stats stats-votes">
<!-- IF !reputation:disabled -->
<span class="human-readable-number" title="{topics.votes}">{topics.votes}</span><br />
<small>[[global:votes]]</small>
<!-- END -->
</div>

<div class="col-md-1 hidden-sm hidden-xs stats stats-postcount">
<span class="human-readable-number" title="{topics.postcount}">{topics.postcount}</span><br />
<small>[[global:posts]]</small>
</div>

<div class="col-md-1 hidden-sm hidden-xs stats stats-viewcount">
<span class="human-readable-number" title="{topics.viewcount}">{topics.viewcount}</span><br />
<small>[[global:views]]</small>
</div>

<div class="col-md-3 col-sm-3 teaser hidden-xs" component="topic/teaser">
<div class="card background-link-container" style="border-color: {topics.category.bgColor}">
<a class="background-link" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"></a>
<!-- IF topics.unreplied -->
<p>
[[category:no_replies]]
</p>
<!-- ELSE -->
<!-- IF topics.teaser.pid -->
<p>
<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">{buildAvatar(topics.teaser.user, "24", true, "not-responsive")}</a>
<a class="permalink" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
<span class="timeago" title="{topics.teaser.timestampISO}"></span>
</a>
</p>
<div class="post-content">
{topics.teaser.content}
</div>
<!-- ENDIF topics.teaser.pid -->
<!-- ENDIF topics.unreplied -->
</div>
</div>
</li>
<!-- ENDIF !topics.resolved -->
{{{end}}}
</ul>
</ul>

0 comments on commit d11995d

Please sign in to comment.