DEV: Use classes for styling user and group cards (#8913)

Styling based on element-ids, it is impossible for themes/plugins to display multiple cards on a single page. Using classes is a more flexible approach. The element-ids are maintained for backwards compatibility with existing plugins/themes.
This commit is contained in:
David Taylor
2020-02-13 09:58:17 +00:00
committed by GitHub
parent 3875785dcc
commit 8d50f092b5
12 changed files with 30 additions and 29 deletions

View File

@@ -7,9 +7,9 @@ QUnit.test("Do not track mentions", async assert => {
server.post("/clicks/track", () => assert.ok(false));
await visit("/t/internationalization-localization/280");
assert.ok(invisible("#user-card"), "card should not appear");
assert.ok(invisible(".user-card"), "card should not appear");
await click("article[data-post-id=3651] a.mention");
assert.ok(visible("#user-card"), "card should appear");
assert.ok(visible(".user-card"), "card should appear");
assert.equal(currentURL(), "/t/internationalization-localization/280");
});

View File

@@ -6,12 +6,12 @@ acceptance("Group Card - Mobile", { mobileView: true });
QUnit.skip("group card", async assert => {
await visit("/t/-/301/1");
assert.ok(
invisible("#group-card"),
invisible(".group-card"),
"mobile group card is invisible by default"
);
await click("a.mention-group:first");
assert.ok(visible("#group-card"), "mobile group card should appear");
assert.ok(visible(".group-card"), "mobile group card should appear");
sandbox.stub(DiscourseURL, "routeTo");
await click(".card-content a.group-page-link");

View File

@@ -5,10 +5,10 @@ acceptance("Group Card");
QUnit.test("group card", async assert => {
await visit("/t/-/301/1");
assert.ok(invisible("#group-card"), "user card is invisible by default");
assert.ok(invisible(".group-card"), "user card is invisible by default");
await click("a.mention-group:first");
assert.ok(visible("#group-card"), "card should appear");
assert.ok(visible(".group-card"), "card should appear");
sandbox.stub(DiscourseURL, "routeTo");
await click(".card-content a.group-page-link");

View File

@@ -6,12 +6,12 @@ acceptance("User Card - Mobile", { mobileView: true });
QUnit.skip("user card", async assert => {
await visit("/t/internationalization-localization/280");
assert.ok(
invisible("#user-card"),
invisible(".user-card"),
"mobile user card is invisible by default"
);
await click("a[data-user-card=eviltrout]:first");
assert.ok(visible("#user-card"), "mobile user card should appear");
assert.ok(visible(".user-card"), "mobile user card should appear");
sandbox.stub(DiscourseURL, "routeTo");
await click(".card-content a.user-profile-link");

View File

@@ -5,12 +5,12 @@ acceptance("User Card", { loggedIn: true });
QUnit.test("user card", async assert => {
await visit("/t/internationalization-localization/280");
assert.ok(invisible("#user-card"), "user card is invisible by default");
assert.ok(invisible(".user-card"), "user card is invisible by default");
await click("a[data-user-card=eviltrout]:first");
assert.ok(visible("#user-card"), "card should appear");
assert.ok(visible(".user-card"), "card should appear");
assert.equal(
find("#user-card .username")
find(".user-card .username")
.text()
.trim(),
"eviltrout",
@@ -25,9 +25,9 @@ QUnit.test("user card", async assert => {
);
await click("a[data-user-card=charlie]:first");
assert.ok(visible("#user-card"), "card should appear");
assert.ok(visible(".user-card"), "card should appear");
assert.equal(
find("#user-card .username")
find(".user-card .username")
.text()
.trim(),
"charlie",
@@ -36,7 +36,7 @@ QUnit.test("user card", async assert => {
await click(".card-content .compose-pm button");
assert.ok(
invisible("#user-card"),
invisible(".user-card"),
"user card dismissed after hitting Message button"
);
@@ -45,9 +45,9 @@ QUnit.test("user card", async assert => {
icon.classList.add("icon");
mention.append(icon);
await click("a.mention .icon");
assert.ok(visible("#user-card"), "card should appear");
assert.ok(visible(".user-card"), "card should appear");
assert.equal(
find("#user-card .username")
find(".user-card .username")
.text()
.trim(),
"eviltrout",