Merge pull request #36 from CMU-313/answer-post-ui

Adding Answer Dropdown Toggle to Topics

.github/workflows/f24_nodebb-yerim-test.yml

@@ -0,0 +1,62 @@
+# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
+# More GitHub Actions for Azure: https://github.com/Azure/actions
+
+name: Build and deploy Node.js app to Azure Web App - nodebb-yerim-test
+
+on:
+  push:
+    branches:
+      - f24
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js version
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+
+      - name: npm install, build, and test
+        run: |
+          npm install
+          npm run build --if-present
+          npm run test --if-present
+
+      - name: Zip artifact for deployment
+        run: zip release.zip ./* -r
+
+      - name: Upload artifact for deployment job
+        uses: actions/upload-artifact@v3
+        with:
+          name: node-app
+          path: release.zip
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: 'Production'
+      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
+
+    steps:
+      - name: Download artifact from build job
+        uses: actions/download-artifact@v3
+        with:
+          name: node-app
+
+      - name: Unzip artifact for deployment
+        run: unzip release.zip
+
+      - name: 'Deploy to Azure Web App'
+        id: deploy-to-webapp
+        uses: azure/webapps-deploy@v2
+        with:
+          app-name: 'nodebb-yerim-test'
+          slot-name: 'Production'
+          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_7987CBBA808B4A44A7974B909CC34E48 }}
+          package: .

nodebb-theme-slackers/templates/partials/topic/topic-menu-list.tpl

@@ -0,0 +1,82 @@
+{{{ if privileges.editable }}}
+<li {{{ if locked }}}hidden{{{ end }}}>
+	<a component="topic/lock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if locked }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-lock text-secondary"></i> [[topic:thread-tools.lock]]</a>
+</li>
+
+<li {{{ if !locked }}}hidden{{{ end }}}>
+	<a component="topic/unlock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !locked }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-unlock text-secondary"></i> [[topic:thread-tools.unlock]]</a>
+</li>
+
+<li {{{ if ed }}}hidden{{{ end }}}>
+	<a component="topic/answer" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if answered }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-lock text-secondary"></i> [[topic:thread-tools.answer]]</a>
+</li>
+
+<li {{{ if !answered }}}hidden{{{ end }}}>
+	<a component="topic/unanswer" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !answered }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-unlock text-secondary"></i> [[topic:thread-tools.unanswer]]</a>
+</li>
+
+<li {{{ if pinned }}}hidden{{{ end }}}>
+	<a component="topic/pin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if pinned }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-thumb-tack text-secondary"></i> [[topic:thread-tools.pin]]</a>
+</li>
+
+<li {{{ if !pinned }}}hidden{{{ end }}}>
+	<a component="topic/unpin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !pinned }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-thumb-tack fa-rotate-90 text-secondary"></i> [[topic:thread-tools.unpin]]</a>
+</li>
+
+<li>
+	<a component="topic/move" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-arrows text-secondary"></i> [[topic:thread-tools.move]]</a>
+</li>
+
+<li>
+	<a component="topic/merge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-code-fork text-secondary"></i> [[topic:thread-tools.merge]]</a>
+</li>
+
+<li>
+	<a component="topic/fork" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-code-fork text-secondary"></i> [[topic:thread-tools.fork]]</a>
+</li>
+
+<li>
+	<a component="topic/tag" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-tag text-secondary"></i> [[topic:thread-tools.tag]]</a>
+</li>
+
+{{{ if !scheduled }}}
+<li>
+	<a component="topic/move-posts" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-arrows text-secondary"></i> [[topic:thread-tools.move-posts]]</a>
+</li>
+{{{ end }}}
+
+<li>
+	<a component="topic/mark-unread-for-all" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-inbox text-secondary"></i> [[topic:thread-tools.markAsUnreadForAll]]</a>
+</li>
+
+<li class="dropdown-divider"></li>
+{{{ end }}}
+
+{{{ if privileges.deletable }}}
+<li {{{ if deleted }}}hidden{{{ end }}}>
+	<a component="topic/delete" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if deleted }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-trash-o text-secondary"></i> [[topic:thread-tools.delete]]</a>
+</li>
+
+{{{ if !scheduled }}}
+<li {{{ if !deleted }}}hidden{{{ end }}}>
+	<a component="topic/restore" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !deleted }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-history text-secondary"></i> [[topic:thread-tools.restore]]</a>
+</li>
+{{{ end }}}
+
+{{{ if privileges.purge }}}
+<li {{{ if !deleted }}}hidden{{{ end }}}>
+	<a component="topic/purge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !deleted }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-eraser text-secondary"></i> [[topic:thread-tools.purge]]</a>
+</li>
+{{{ end }}}
+{{{ if privileges.isAdminOrMod }}}
+<li>
+	<a component="topic/delete/posts" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-trash-o text-secondary"></i> [[topic:thread-tools.delete-posts]]</a>
+</li>
+{{{ end }}}
+
+{{{ each thread_tools }}}
+<li>
+	<a href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {./class}" role="menuitem"><i class="fa fa-fw text-secondary {./icon}"></i> {./title}</a>
+</li>
+{{{ end }}}
+{{{ end }}}

nodebb-theme-slackers/templates/partials/topics_list.tpl

@@ -0,0 +1,135 @@
+<ul component="category" class="topics-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
+
+	{{{ each topics }}}
+	<li component="category/topic" class="category-item hover-parent border-bottom py-3 py-lg-4 d-flex flex-column flex-lg-row align-items-start {function.generateTopicClass}" <!-- 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="{increment(./index, "1")}" />
+		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
+
+		<div class="d-flex p-0 col-12 col-lg-7 gap-2 gap-lg-3 pe-1 align-items-start {{{ if config.theme.mobileTopicTeasers }}}mb-2 mb-lg-0{{{ end }}}">
+			<div class="flex-shrink-0 position-relative">
+				<a class="text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+					{buildAvatar(./user, "40px", true, "avatar avatar-tooltip")}
+				</a>
+				{{{ if showSelect }}}
+				<div class="checkbox position-absolute top-100 start-50 translate-middle-x pt-2 m-0 d-none d-lg-flex" style="max-width:max-content">
+					<i component="topic/select" class="fa text-muted pointer fa-square-o p-1 hover-visible"></i>
+				</div>
+				{{{ end }}}
+			</div>
+			<div class="flex-grow-1 d-flex flex-wrap gap-1 position-relative">
+				<h3 component="topic/header" class="title text-break fs-5 fw-semibold m-0 tracking-tight w-100 {{{ if showSelect }}}me-4 me-lg-0{{{ end }}}">
+					<a class="text-reset" href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{./title}</a>
+				</h3>
+				<span component="topic/labels" class="d-flex flex-wrap gap-1 w-100">
+					<span component="topic/watched" class="badge border border-gray-300 text-body {{{ if !./followed }}}hidden{{{ end }}}">
+						<i class="fa fa-bell-o"></i>
+						<span>[[topic:watching]]</span>
+					</span>
+					<span component="topic/ignored" class="badge border border-gray-300 text-body {{{ if !./ignored }}}hidden{{{ end }}}">
+						<i class="fa fa-eye-slash"></i>
+						<span>[[topic:ignoring]]</span>
+					</span>
+					<span component="topic/scheduled" class="badge border border-gray-300 text-body {{{ if !./scheduled }}}hidden{{{ end }}}">
+						<i class="fa fa-clock-o"></i>
+						<span>[[topic:scheduled]]</span>
+					</span>
+					<span component="topic/pinned" class="badge border border-gray-300 text-body {{{ if (./scheduled || !./pinned) }}}hidden{{{ end }}}">
+						<i class="fa fa-thumb-tack"></i>
+						<span>{{{ if !./pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {isoTimeToLocaleString(./pinExpiryISO, config.userLang)}]]{{{ end }}}</span>
+					</span>
+					<span component="topic/locked" class="badge border border-gray-300 text-body {{{ if !./locked }}}hidden{{{ end }}}">
+						<i class="fa fa-lock"></i>
+						<span>[[topic:locked]]</span>
+					</span>
+                    <span component="topic/answered" class="badge border border-gray-300 text-body {{{ if !./answered }}}hidden{{{ end }}}">
+						<i class="fa fa-lock"></i>
+						<span>[[topic:answered]]</span>
+					</span>
+					<span component="topic/moved" class="badge border border-gray-300 text-body {{{ if !./oldCid }}}hidden{{{ end }}}">
+						<i class="fa fa-arrow-circle-right"></i>
+						<span>[[topic:moved]]</span>
+					</span>
+					{{{each ./icons}}}<span class="lh-1">{@value}</span>{{{end}}}
+
+					{{{ if !template.category }}}
+					{function.buildCategoryLabel, ./category, "a", "border"}
+					{{{ end }}}
+
+					<span data-tid="{./tid}" component="topic/tags" class="lh-1 tag-list hidden-xs d-flex flex-wrap gap-1 {{{ if !./tags.length }}}hidden{{{ end }}}">
+						{{{ each ./tags }}}
+						<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
+						{{{ end }}}
+					</span>
+
+					<div class="d-flex gap-1 d-block d-lg-none w-100">
+						<span class="badge text-body border stats text-xs text-muted">
+							<i class="fa-regular fa-fw fa-message"></i>
+							<span component="topic/post-count" class="fw-normal">{humanReadableNumber(./postcount, 0)}</span>
+						</span>
+
+						<a href="{config.relative_path}/topic/{./slug}{{{ if (./teaser.timestampISO && !config.theme.mobileTopicTeasers) }}}/{./teaser.index}{{{ end }}}" class="border badge bg-transparent text-muted fw-normal timeago" title="{{{ if (./teaser.timestampISO && !config.theme.mobileTopicTeasers) }}}{./teaser.timestampISO}{{{ else }}}{./timestampISO}{{{ end }}}"></a>
+					</div>
+
+					<a href="{config.relative_path}/topic/{./slug}" class="d-none d-lg-block badge bg-transparent text-muted fw-normal timeago" title="{./timestampISO}"></a>
+				</span>
+				{{{ if showSelect }}}
+				<div class="checkbox position-absolute top-0 end-0 m-0 d-flex d-lg-none" style="max-width:max-content">
+					<i component="topic/select" class="fa fa-square-o text-muted pointer p-1"></i>
+				</div>
+				{{{ end }}}
+			</div>
+			{{{ if ./thumbs.length }}}
+			<a class="topic-thumbs position-relative text-decoration-none flex-shrink-0 d-none d-xl-block" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}" aria-label="[[topic:thumb-image]]">
+				<img class="topic-thumb rounded-1 bg-light" style="width:auto;max-width: 5.33rem;height: 3.33rem;object-fit: contain;" src="{./thumbs.0.url}" alt=""/>
+				<span data-numthumbs="{./thumbs.length}" class="px-1 position-absolute top-0 start-100 translate-middle badge rounded text-bg-info" style="z-index: 1;">+{increment(./thumbs.length, "-1")}</span>
+			</a>
+			{{{ end }}}
+		</div>
+
+		<div class="d-flex p-0 col-lg-5 col-12 align-content-stretch">
+			<div class="meta stats d-none d-lg-grid col-6 gap-1 pe-2 text-muted" style="grid-template-columns: 1fr 1fr 1fr;">
+				{{{ if !reputation:disabled }}}
+				<div class="stats-votes card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="fs-5 ff-secondary lh-1" title="{./votes}">{humanReadableNumber(./votes, 0)}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:votes]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-chevron-up"></i>
+				</div>
+				{{{ end }}}
+				<div class="stats-postcount card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="fs-5 ff-secondary lh-1" title="{./postcount}">{humanReadableNumber(./postcount, 0)}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:posts]]</span>
+					<i class="d-xl-none fa-regular fa-fw text-xs text-muted opacity-75 fa-message"></i>
+				</div>
+				<div class="stats-viewcount card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="fs-5 ff-secondary lh-1" title="{./viewcount}">{humanReadableNumber(./viewcount, 0)}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:views]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-eye"></i>
+				</div>
+			</div>
+			<div component="topic/teaser" class="meta teaser col-lg-6 col-12 {{{ if !config.theme.mobileTopicTeasers }}}d-none d-lg-block{{{ end }}}">
+				<div class="lastpost border-start border-2 lh-sm h-100 d-flex flex-column gap-1" style="border-color: {./category.bgColor}!important;">
+					{{{ if ./unreplied }}}
+					<div class="ps-2 text-xs">
+						[[category:no-replies]]
+					</div>
+					{{{ else }}}
+					{{{ if ./teaser.pid }}}
+					<div class="ps-2">
+						<a href="{{{ if ./teaser.user.userslug }}}{config.relative_path}/user/{./teaser.user.userslug}{{{ else }}}#{{{ end }}}" class="text-decoration-none">{buildAvatar(./teaser.user, "18px", true, "avatar-tooltip not-responsive")}</a>
+						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}" aria-label="[[global:lastpost]]"></a>
+					</div>
+					<div class="post-content text-xs ps-2 line-clamp-sm-2 lh-sm text-break position-relative flex-fill">
+						<a class="stretched-link" tabindex="-1" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" aria-label="[[global:lastpost]]"></a>
+						{./teaser.content}
+					</div>
+					{{{ end }}}
+					{{{ end }}}
+				</div>
+			</div>
+		</div>
+	</li>
+	{{{end}}}
+</ul>