Merge pull request #62 from NodeBB/bootstrap5

bootstrap5

library.js

@@ -177,6 +177,7 @@ Widget.renderModeratorsWidget = async function (widget) {
 	} else if (widget.templateData.template.topic && widget.templateData.category) {
 		cid = widget.templateData.category.cid;
 	}
+
 	const moderators = await categories.getModerators(cid);
 	if (!moderators.length) {
 		return null;
@@ -400,109 +401,109 @@ Widget.defineWidgets = async function (widgets) {
 			widget: 'html',
 			name: 'HTML',
 			description: 'Any text, html, or embedded script.',
-			content: 'admin/html',
+			content: 'admin/partials/widgets/html',
 		},
 		{
 			widget: 'text',
 			name: 'Text',
 			description: 'Text, optionally parsed as a post.',
-			content: 'admin/text',
+			content: 'admin/partials/widgets/text',
 		},
 		{
 			widget: 'search',
 			name: 'Search',
 			description: 'A search widget',
-			content: 'admin/search',
+			content: 'admin/partials/widgets/search',
 		},
 		{
 			widget: 'onlineusers',
 			name: 'Online Users',
 			description: 'List of online users',
-			content: 'admin/onlineusers',
+			content: 'admin/partials/widgets/onlineusers',
 		},
 		{
 			widget: 'activeusers',
 			name: 'Active Users',
 			description: 'List of active users in a category/topic',
-			content: 'admin/activeusers',
+			content: 'admin/partials/widgets/activeusers',
 		},
 		{
 			widget: 'latestusers',
 			name: 'Latest Users',
 			description: 'List of latest registered users.',
-			content: 'admin/latestusers',
+			content: 'admin/partials/widgets/latestusers',
 		},
 		{
 			widget: 'moderators',
 			name: 'Moderators',
 			description: 'List of moderators in a category.',
-			content: 'admin/categorywidget',
+			content: 'admin/partials/widgets/moderators',
 		},
 		{
 			widget: 'forumstats',
 			name: 'Forum Stats',
 			description: 'Lists user, topics, and post count.',
-			content: 'admin/forumstats',
+			content: 'admin/partials/widgets/forumstats',
 		},
 		{
 			widget: 'recentposts',
 			name: 'Recent Posts',
 			description: 'Lists the latest posts on your forum.',
-			content: 'admin/recentposts',
+			content: 'admin/partials/widgets/recentposts',
 		},
 		{
 			widget: 'recenttopics',
 			name: 'Recent Topics',
 			description: 'Lists the latest topics on your forum.',
-			content: 'admin/recenttopics',
+			content: 'admin/partials/widgets/recenttopics',
 		},
 		{
 			widget: 'recentview',
 			name: 'Recent View',
 			description: 'Renders the /recent page',
-			content: 'admin/defaultwidget',
+			content: 'admin/partials/widgets/defaultwidget',
 		},
 		{
 			widget: 'categories',
 			name: 'Categories',
 			description: 'Lists the categories on your forum',
-			content: 'admin/categorieswidget',
+			content: 'admin/partials/widgets/categories',
 		},
 		{
 			widget: 'populartags',
 			name: 'Popular Tags',
 			description: 'Lists popular tags on your forum',
-			content: 'admin/populartags',
+			content: 'admin/partials/widgets/populartags',
 		},
 		{
 			widget: 'populartopics',
 			name: 'Popular Topics',
 			description: 'Lists popular topics on your forum',
-			content: 'admin/populartopics',
+			content: 'admin/partials/widgets/populartopics',
 		},
 		{
 			widget: 'toptopics',
 			name: 'Top Topics',
 			description: 'Lists top topics on your forum',
-			content: 'admin/toptopics',
+			content: 'admin/partials/widgets/toptopics',
 		},
 		{
 			widget: 'mygroups',
 			name: 'My Groups',
 			description: 'List of groups that you are in',
-			content: 'admin/mygroups',
+			content: 'admin/partials/widgets/mygroups',
 		},
 		{
 			widget: 'newgroups',
 			name: 'New Groups',
 			description: 'List of newest groups',
-			content: 'admin/mygroups',
+			content: 'admin/partials/widgets/mygroups',
 		},
 		{
 			widget: 'suggestedtopics',
 			name: 'Suggested Topics',
 			description: 'Lists of suggested topics.',
-			content: 'admin/suggestedtopics',
+			content: 'admin/partials/widgets/suggestedtopics',
 		},
 	];
 
@@ -518,7 +519,7 @@ Widget.defineWidgets = async function (widgets) {
 		group.name = validator.escape(String(group.name));
 	});
 
-	const html = await app.renderAsync('admin/groupposts', { groups: groupsData });
+	const html = await app.renderAsync('admin/partials/widgets/groupposts', { groups: groupsData });
 	widgets.push({
 		widget: 'groupposts',
 		name: 'Group Posts',

package.json

@@ -29,7 +29,7 @@
   "readmeFilename": "README.md",
   "_from": "nodebb-widget-essentials@~0.0.1",
   "nbbpm": {
-    "compatibility": "^2.0.0"
+    "compatibility": "^3.0.0"
   },
   "devDependencies": {
     "eslint": "6.7.0",

public/css/widget.css

@@ -22,12 +22,6 @@
 	margin-bottom: 0;
 }
 
-.recent-replies ul li .avatar {
-	display: block;
-	float: left;
-	margin-right:8px;
-}
-
 .recent-replies ul li > div {
 	max-height: 250px;
 	overflow:hidden;
@@ -36,25 +30,14 @@
 
 .recent-replies ul li p {
 	display: block;
-
 	word-break: break-word;
 }
 
-.recent-replies ul li span {
-	font-size: 1.25rem;
-	overflow: hidden;
-	height: 16px;
-}
-
-.recent-replies .avatar, .active-users .avatar, .online-users .avatar, .moderators .avatar {
-	margin-top: 2px;
-}
-
 .forum-stats .stats-card {
 	text-align: center;
 }
 
-.forum-stats .stats-card h2 {
+.forum-stats .stats-card h4 {
 	line-height: 25px;
 }
 
@@ -85,11 +68,6 @@
 	vertical-align: top;
 }
 
-.widget-posts .avatar, .widget-topics .avatar {
-	font-size: 20px;
-	line-height: 24px;
-}
-
 [data-widget-area="sidebar"] .category .content {
 	width: 100%!important;
 }

public/templates/admin/partials/widgets/activeusers.tpl

@@ -0,0 +1,9 @@
+<div class="mb-3">
+	<label class="form-label">Amount of Users to display:</label>
+	<input type="text" class="form-control" name="numUsers" placeholder="4" />
+</div>
+<div class="mb-3">
+	<label class="form-text">Custom Category:</label>
+	<input type="text" class="form-control" name="cid" placeholder="0" />
+	<p class="form-text">Leave blank to to dynamically pull from current category</p>
+</div>

public/templates/admin/partials/widgets/forumstats.tpl

@@ -0,0 +1,4 @@
+<div class="mb-3">
+	<label class="form-label">Stats Class:</label>
+	<input type="text" class="form-control" name="statsClass" placeholder="card card-header p-3 mb-3" />
+</div>

public/templates/admin/partials/widgets/groupposts.tpl

@@ -0,0 +1,12 @@
+<div class="mb-3">
+	<label class="form-label">Amount of Posts to display:</label>
+	<input type="text" class="form-control" name="numPosts" placeholder="4" />
+</div>
+<div class="mb-3">
+	<label class="form-label">Select Group</label>
+	<select name="groupName" class="form-select">
+		<!-- BEGIN groups -->
+		<option value="{groups.name}">{groups.name}</option>
+		<!-- END groups -->
+	</select>
+</div>

public/templates/admin/partials/widgets/html.tpl

@@ -0,0 +1,13 @@
+<div class="mb-3">
+	<textarea class="form-control" rows="6" name="html" placeholder="Enter HTML"></textarea>
+</div>
+<div class="mb-3">
+	<label class="form-label">Category:</label>
+	<input type="text" class="form-control" name="cid" placeholder="0" />
+	<p class="form-text">Set the category IDs you want to display this widget on (separated by commas)</p>
+</div>
+<div class="mb-3">
+	<label class="form-label">Topic:</label>
+	<input type="text" class="form-control" name="tid" placeholder="0" />
+	<p class="form-text">Set the topic IDs you want to display this widget on (separated by commas)</p>
+</div>

public/templates/admin/partials/widgets/latestusers.tpl

@@ -0,0 +1,4 @@
+<div class="mb-3">
+	<label class="form-label">Amount of Users to display:</label>
+	<input type="text" class="form-control" name="numUsers" placeholder="4" />
+</div>

public/templates/admin/partials/widgets/moderators.tpl

@@ -0,0 +1,5 @@
+<div class="mb-3">
+	<label class="form-label">Custom Category:</label>
+	<input type="text" class="form-control" name="cid" placeholder="0" />
+	<p class="form-text">Leave blank to dynamically pull from current category</p>
+</div>

public/templates/admin/partials/widgets/mygroups.tpl

@@ -0,0 +1,4 @@
+<div class="mb-3">
+	<label class="form-label">Amount of Groups to display:</label>
+	<input type="text" class="form-control" name="numGroups" placeholder="8" />
+</div>

public/templates/admin/partials/widgets/onlineusers.tpl

@@ -0,0 +1,4 @@
+<div class="mb-3">
+	<label class="form-label">Amount of Users to display:</label>
+	<input type="text" class="form-control" name="numUsers" placeholder="16" />
+</div>

public/templates/admin/partials/widgets/populartags.tpl

@@ -0,0 +1,4 @@
+<div class="mb-3">
+	<label class="form-label">Amount of Tags to display:</label>
+	<input type="text" class="form-control" name="numTags" placeholder="8" />
+</div>

public/templates/admin/partials/widgets/populartopics.tpl

@@ -0,0 +1,13 @@
+<div class="mb-3">
+	<label class="form-label">Amount of Topics to display:</label>
+	<input type="text" class="form-control" name="numTopics" placeholder="8" />
+</div>
+<div class="mb-3">
+	<label class="form-label">Select Duration:</label>
+	<select name="duration" class="form-select">
+		<option value="day">Day</option>
+		<option value="week">Week</option>
+		<option value="month">Month</option>
+		<option value="alltime">Alltime</option>
+	</select>
+</div>

public/templates/admin/partials/widgets/recentposts.tpl

@@ -0,0 +1,9 @@
+<div class="mb-3">
+	<label class="form-label">Amount of Posts to display:</label>
+	<input type="text" class="form-control" name="numPosts" placeholder="4" />
+</div>
+<div class="mb-3">
+	<label class="form-label">Custom Category:</label>
+	<input type="text" class="form-control" name="cid" placeholder="0" />
+	<p class="form-text">Leave blank to dynamically pull from current category. If placed on a page other than a category will pull from all recent posts</p>
+</div>

public/templates/admin/partials/widgets/recenttopics.tpl

@@ -0,0 +1,10 @@
+<div class="mb-3">
+	<label class="form-label">Amount of Topics to display:</label>
+	<input type="text" class="form-control" name="numTopics" placeholder="8" />
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Custom Category:</label>
+	<input type="text" class="form-control" name="cid" placeholder="0" />
+	<p class="form-text">Leave blank to dynamically pull from current category. If placed on a page other than a category will pull from all recent posts</p>
+</div>

public/templates/admin/partials/widgets/search.tpl

@@ -0,0 +1,21 @@
+<div class="form-check mb-3">
+	<input type="checkbox" class="form-check-input" id="enableQuickSearch" name="enableQuickSearch" />
+	<label class=form-check-label" for="enableQuickSearch">Enable Quick Search</label>
+</div>
+
+<div class="form-check mb-3">
+	<input type="checkbox" class="form-check-input" id="showInControl" name="showInControl" />
+	<label class=form-check-label" for="showInControl">Show In Control</label>
+</div>
+
+<div class="mb-3">
+	<label class=form-label" for="defaultIn">Default In</label>
+	<select class="form-select" id="defaultIn" name="defaultIn">
+		<option value="titles">[[search:titles]]</option>
+		<option value="titlesposts">[[search:titles-posts]]</option>
+		<option value="posts">[[global:posts]]</option>
+		<option value="categories">[[global:header.categories]]</option>
+		<option value="users">[[global:users]]</option>
+		<option value="tags">[[tags:tags]]</option>
+	</select>
+</div>