FEATURE: user and group cards on mobile (#7246)

FEATURE: user and group cards on mobile (#7246)

diff --git a/app/assets/javascripts/discourse/components/group-card-contents.js.es6 b/app/assets/javascripts/discourse/components/group-card-contents.js.es6
index 93f2b20..994e553 100644
--- a/app/assets/javascripts/discourse/components/group-card-contents.js.es6
+++ b/app/assets/javascripts/discourse/components/group-card-contents.js.es6
@@ -2,6 +2,7 @@ import { setting } from "discourse/lib/computed";
 import { default as computed } from "ember-addons/ember-computed-decorators";
 import CardContentsBase from "discourse/mixins/card-contents-base";
 import CleansUp from "discourse/mixins/cleans-up";
+import { groupPath } from "discourse/lib/url";
 
 const maxMembersToDisplay = 10;
 
@@ -40,7 +41,7 @@ export default Ember.Component.extend(CardContentsBase, CleansUp, {
 
   @computed("group")
   groupPath(group) {
-    return `${Discourse.BaseUri}/g/${group.name}`;
+    return groupPath(group.name);
   },
 
   _showCallback(username, $target) {
@@ -88,6 +89,11 @@ export default Ember.Component.extend(CardContentsBase, CleansUp, {
     showGroup(group) {
       this.showGroup(group);
       this._close();
+    },
+
+    showUser(user) {
+      this.showUser(user);
+      this._close();
     }
   }
 });
diff --git a/app/assets/javascripts/discourse/components/user-card-contents.js.es6 b/app/assets/javascripts/discourse/components/user-card-contents.js.es6
index d3fb83d..a368163 100644
--- a/app/assets/javascripts/discourse/components/user-card-contents.js.es6
+++ b/app/assets/javascripts/discourse/components/user-card-contents.js.es6
@@ -205,8 +205,8 @@ export default Ember.Component.extend(
         this._close();
       },
 
-      showUser() {
-        this.showUser(this.get("user"));
+      showUser(username) {
+        this.showUser(username);
         this._close();
       },
 
diff --git a/app/assets/javascripts/discourse/controllers/user-card.js.es6 b/app/assets/javascripts/discourse/controllers/user-card.js.es6
index 3628989..b5d0ba3 100644
--- a/app/assets/javascripts/discourse/controllers/user-card.js.es6
+++ b/app/assets/javascripts/discourse/controllers/user-card.js.es6
@@ -1,3 +1,9 @@
+import {
+  default as DiscourseURL,
+  userPath,
+  groupPath
+} from "discourse/lib/url";
+
 export default Ember.Controller.extend({
   topic: Ember.inject.controller(),
   application: Ember.inject.controller(),
@@ -9,7 +15,11 @@ export default Ember.Controller.extend({
     },
 
     showUser(user) {
-      this.transitionToRoute("user", user);
+      DiscourseURL.routeTo(userPath(user.username_lower));
+    },
+
+    showGroup(group) {
+      DiscourseURL.routeTo(groupPath(group.name));
     }
   }
 });
diff --git a/app/assets/javascripts/discourse/lib/url.js.es6 b/app/assets/javascripts/discourse/lib/url.js.es6
index 3c13dbc..3732843 100644
--- a/app/assets/javascripts/discourse/lib/url.js.es6
+++ b/app/assets/javascripts/discourse/lib/url.js.es6
@@ -52,6 +52,10 @@ export function userPath(subPath) {
   return Discourse.getURL(subPath ? `/u/${subPath}` : "/u");
 }
 
+export function groupPath(subPath) {
+  return Discourse.getURL(subPath ? `/g/${subPath}` : "/g");
+}
+
 let _jumpScheduled = false;
 export function jumpToElement(elementId) {
   if (_jumpScheduled || Ember.isEmpty(elementId)) {
diff --git a/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 b/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6
index 756a249..1c4909d 100644
--- a/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6
+++ b/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6
@@ -26,8 +26,8 @@ export default Ember.Mixin.create({
 
     username = Ember.Handlebars.Utils.escapeExpression(username.toString());
 
-    // Don't show on mobile or nested
-    if (this.site.mobileView || $target.parents(".card-content").length) {
+    // Don't show if nested
+    if ($target.parents(".card-content").length) {
       this._close();
       DiscourseURL.routeTo($target.attr("href"));
       return false;
@@ -97,10 +97,6 @@ export default Ember.Mixin.create({
           }
 
           this._close();
-
-          if (this.site.mobileView) {
-            return false;
-          }
         }
 
         return true;
@@ -149,58 +145,67 @@ export default Ember.Mixin.create({
 
     Ember.run.schedule("afterRender", () => {
       if (target) {
-        let position = target.offset();
-        if (position) {
-          position.bottom = "unset";
-
-          if (rtl) {
-            // The site direction is rtl
-            position.right = $(window).width() - position.left + 10;
-            position.left = "auto";
-            let overage = $(window).width() - 50 - (position.right + width);
-            if (overage < 0) {
-              position.right += overage;
-              position.top += target.height() + 48;
-              verticalAdjustments += target.height() + 48;
-            }
-          } else {
-            // The site direction is ltr
-            position.left += target.width() + 10;
-
-            let overage = $(window).width() - 50 - (position.left + width);
-            if (overage < 0) {
-              position.left += overage;
-              position.top += target.height() + 48;
-              verticalAdjustments += target.height() + 48;
+        if (!this.site.mobileView) {
+          let position = target.offset();
+          if (position) {
+            position.bottom = "unset";
+
+            if (rtl) {
+              // The site direction is rtl
+              position.right = $(window).width() - position.left + 10;
+              position.left = "auto";
+              let overage = $(window).width() - 50 - (position.right + width);
+              if (overage < 0) {
+                position.right += overage;
+                position.top += target.height() + 48;
+                verticalAdjustments += target.height() + 48;
+              }
+            } else {
+              // The site direction is ltr
+              position.left += target.width() + 10;
+
+              let overage = $(window).width() - 50 - (position.left + width);
+              if (overage < 0) {
+                position.left += overage;
+                position.top += target.height() + 48;
+                verticalAdjustments += target.height() + 48;
+              }
             }
-          }
 
-          position.top -= $("#main-outlet").offset().top;
-          if (isFixed) {
-            position.top -= $("html").scrollTop();
-            //if content is fixed and will be cut off on the bottom, display it above...
-            if (
-              position.top + height + verticalAdjustments >
-              $(window).height() - 50
-            ) {
-              position.bottom =
-                $(window).height() -
-                (target.offset().top - $("html").scrollTop());
-              if (verticalAdjustments > 0) {
-                position.bottom += 48;
+            position.top -= $("#main-outlet").offset().top;
+            if (isFixed) {
+              position.top -= $("html").scrollTop();
+              //if content is fixed and will be cut off on the bottom, display it above...
+              if (
+                position.top + height + verticalAdjustments >
+                $(window).height() - 50
+              ) {
+                position.bottom =
+                  $(window).height() -
+                  (target.offset().top - $("html").scrollTop());
+                if (verticalAdjustments > 0) {
+                  position.bottom += 48;
+                }
+                position.top = "unset";
               }
-              position.top = "unset";
             }
-          }
 
-          const avatarOverflowSize = 44;
-          if (isDocked && position.top < avatarOverflowSize) {
-            position.top = avatarOverflowSize;
+            const avatarOverflowSize = 44;
+            if (isDocked && position.top < avatarOverflowSize) {
+              position.top = avatarOverflowSize;
+            }
+

[... diff too long, it was truncated ...]

GitHub sha: ec212380

2 Likes

This commit has been mentioned on Discourse Meta. There might be relevant details there:

This commit has been mentioned on Discourse Meta. There might be relevant details there: