Skip to content

Commit

Permalink
Merge pull request #35 from CMU-313/css-changes
Browse files Browse the repository at this point in the history 
Improves the CSS for post resolution.
  • Loading branch information
@gonzalezjo
gonzalezjo authored Oct 12, 2023
2 parents 825b2fe + d11995d commit fca4391
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 fca4391

Please sign in to comment.