UX: fix link for user menu, add requested settings

common/common.scss

@@ -1,19 +1,13 @@
-.user-portfolio {
-  grid-row-start: 2;
-  grid-row-end: 4;
-  grid-column-start: 1;
-  grid-column-end: 3;
-}
 .empty-portfolio {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: center;
 
   .empty-portfolio-message {
-    margin: 20px;
+    margin-top: 2em;
     font-size: $font-up-2;
-    max-width: 500px;
+    max-width: 30em;
     text-align: center;
   }
 }

javascripts/discourse/connectors/user-card-additional-buttons/portfolio-link.hbs

@@ -1,6 +1,11 @@
 {{d-button
   class="btn-default"
-  href=(concat "/u/" user.username_lower "/activity/portfolio")
+  href=(concat
+    "/u/"
+    user.username_lower
+    "/activity/"
+    (theme-setting "portfolio_route_name")
+  )
   icon=(theme-setting "portfolio_icon")
   label=(theme-prefix "portfolio")
 }}

javascripts/discourse/connectors/user-main-nav/portfolio-link.hbs

@@ -1,3 +1,4 @@
 {{#link-to "user.portfolio"}}
   {{d-icon (theme-setting "portfolio_icon")}}
-  {{theme-i18n "portfolio"}}{{/link-to}}
+  <span>{{theme-i18n "portfolio"}}</span>
+{{/link-to}}

javascripts/discourse/portfolio-route-map.js

@@ -1,6 +1,8 @@
 export default {
   resource: "user",
   map() {
-    this.route("portfolio", { path: "activity/portfolio" });
+    this.route("portfolio", {
+      path: `activity/${settings.portfolio_route_name}`,
+    });
   },
 };

javascripts/discourse/routes/user-portfolio.js

@@ -1,5 +1,3 @@
-const filterTags = settings.portfolio_tags.split("|").filter((val) => val);
-
 import DiscourseRoute from "discourse/routes/discourse";
 import Category from "discourse/models/category";
 
@@ -17,20 +15,21 @@ export default DiscourseRoute.extend({
     });
   },
 
-  model: function () {
+  model() {
     const filterParams = {};
+    const filterTags = settings.portfolio_tags.replace(/\|/g, "+");
+    const tagQuery = filterTags ? `?tags=${filterTags}+` : "";
 
     if (settings.portfolio_category > 0) {
       filterParams["category"] = settings.portfolio_category;
     }
 
-    if (filterTags.length > 0) {
-      filterParams["tags"] = filterTags;
-    }
+    filterParams["order"] = settings.portfolio_order;
 
     return this.store.findFiltered("topicList", {
-      filter:
-        "topics/created-by/" + this.modelFor("user").get("username_lower"),
+      filter: `topics/created-by/${this.modelFor("user").get(
+        "username_lower"
+      )}${tagQuery}`,
       params: filterParams,
     });
   },

javascripts/discourse/templates/user-portfolio.hbs

@@ -1,4 +1,4 @@
-<div class="user-portfolio">
+<div class="user-content user-portfolio">
   {{#if model.topics}}
     {{#load-more
       class="paginated-topics-list"
@@ -12,10 +12,14 @@
     <div class="empty-portfolio">
       <div class="empty-portfolio-message">
         {{html-safe (theme-i18n "empty_portfolio")}}
-
-        <a href={{category.url}}>
-          {{category.name}}
-        </a>
+        {{#if category}}
+          <p>
+            {{html-safe (theme-i18n "empty_portfolio_link")}}
+            <a href={{category.url}}>
+              {{category.name}}
+            </a>
+          </p>
+        {{/if}}
       </div>
     </div>
   {{/if}}

locales/en.yml

@@ -8,5 +8,5 @@ en:
       portfolio_thumbnail_style: Thumbnail style for portfolio page (requires discourse-topic-thumbnails to be installed and added to the active theme)
       user_card_portfolio_link: Display a portfolio link on user cards?
   portfolio: Portfolio
-  empty_portfolio: |
-    This portfolio is waiting to be filled<br/>Get started by adding topics to
+  empty_portfolio: This portfolio is waiting to be filled
+  empty_portfolio_link: Get started by adding topics to

settings.yml

@@ -16,3 +16,14 @@ portfolio_thumbnail_style:
     - list
     - none
 user_card_portfolio_link: true
+portfolio_order:
+  default: "latest"
+  type: enum
+  choices:
+    - latest
+    - created
+portfolio_route_name: 
+  default: "portfolio"
+  type: string
+  description: |
+    name of the portfolio page in the URL, for example /u/username/activity/<strong>porfolio</strong>