discourse/app/assets/stylesheets/common/components/user-card.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

344 lines
6.4 KiB
SCSS
Raw Normal View History

@use "sass:math";
.fk-d-menu[data-identifier="usercard"] {
max-width: calc(100vw - 2em);
width: auto;
.fk-d-menu__inner-content {
min-width: 0;
2024-08-27 07:47:55 +08:00
overflow: visible;
}
}
.user-card,
.group-card {
--card-width: 39em;
--avatar-width: 8em;
--avatar-margin: -3.3em; // extends the avatar above the card
}
2015-08-19 04:28:02 +08:00
2019-04-24 16:55:09 +08:00
.animated-placeholder {
height: 20px;
position: relative;
}
2019-04-24 16:55:09 +08:00
.card-avatar-placeholder {
width: var(--avatar-width);
height: var(--avatar-width);
2019-04-24 16:55:09 +08:00
border-radius: 100%;
position: relative;
overflow: hidden;
&:before {
@media (prefers-reduced-motion: no-preference) {
animation: placeHolderShimmer 4s linear infinite forwards;
}
position: absolute;
left: 0;
content: "";
background: linear-gradient(
to right,
var(--primary-very-low) 10%,
var(--primary-low) 18%,
var(--primary-very-low) 33%
);
height: var(--avatar-width);
width: var(--card-width);
}
2019-04-24 16:55:09 +08:00
}
// shared styles for user and group cards
.user-card,
.group-card {
min-width: 0;
width: var(--card-width);
color: var(--primary);
background: var(--secondary) center center;
2015-10-16 08:10:02 +08:00
background-size: cover;
DEV: FloatKit (#23650) This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit": - menu - tooltip - toast ## Tooltips ### Component Simple cases can be express with an API similar to DButton: ```hbs <DTooltip @Label={{i18n "foo.bar"}} @ICON="check" @content="Something" /> ``` More complex cases can use blocks: ```hbs <DTooltip> <:trigger> {{d-icon "check"}} <span>{{i18n "foo.bar"}}</span> </:trigger> <:content> Something </:content> </DTooltip> ``` ### Service You can manually show a tooltip using the `tooltip` service: ```javascript const tooltipInstance = await this.tooltip.show( document.querySelector(".my-span"), options ) // and later manual close or destroy it tooltipInstance.close(); tooltipInstance.destroy(); // you can also just close any open tooltip through the service this.tooltip.close(); ``` The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service: ```javascript const tooltipInstance = this.tooltip.register( document.querySelector(".my-span"), options ) // when done you can destroy the instance to remove the listeners tooltipInstance.destroy(); ``` Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args: ```javascript const tooltipInstance = await this.tooltip.show( document.querySelector(".my-span"), { component: MyComponent, data: { foo: 1 } } ) ``` ## Menus Menus are very similar to tooltips and provide the same kind of APIs: ### Component ```hbs <DMenu @ICON="plus" @Label={{i18n "foo.bar"}}> <ul> <li>Foo</li> <li>Bat</li> <li>Baz</li> </ul> </DMenu> ``` They also support blocks: ```hbs <DMenu> <:trigger> {{d-icon "plus"}} <span>{{i18n "foo.bar"}}</span> </:trigger> <:content> <ul> <li>Foo</li> <li>Bat</li> <li>Baz</li> </ul> </:content> </DMenu> ``` ### Service You can manually show a menu using the `menu` service: ```javascript const menuInstance = await this.menu.show( document.querySelector(".my-span"), options ) // and later manual close or destroy it menuInstance.close(); menuInstance.destroy(); // you can also just close any open tooltip through the service this.menu.close(); ``` The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service: ```javascript const menuInstance = this.menu.register( document.querySelector(".my-span"), options ) // when done you can destroy the instance to remove the listeners menuInstance.destroy(); ``` Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args: ```javascript const menuInstance = await this.menu.show( document.querySelector(".my-span"), { component: MyComponent, data: { foo: 1 } } ) ``` ## Toasts Interacting with toasts is made only through the `toasts` service. A default component is provided (DDefaultToast) and can be used through dedicated service methods: - this.toasts.success({ ... }); - this.toasts.warning({ ... }); - this.toasts.info({ ... }); - this.toasts.error({ ... }); - this.toasts.default({ ... }); ```javascript this.toasts.success({ data: { title: "Foo", message: "Bar", actions: [ { label: "Ok", class: "btn-primary", action: (componentArgs) => { // eslint-disable-next-line no-alert alert("Closing toast:" + componentArgs.data.title); componentArgs.close(); }, } ] }, }); ``` You can also provide your own component: ```javascript this.toasts.show(MyComponent, { autoClose: false, class: "foo", data: { baz: 1 }, }) ``` Co-authored-by: Martin Brennan <mjrbrennan@gmail.com> Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com> Co-authored-by: David Taylor <david@taylorhq.com> Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-26 19:39:52 +08:00
position: unset !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: unset !important;
z-index: unset !important;
2023-01-31 04:12:30 +08:00
2014-10-30 07:48:20 +08:00
.card-content {
padding: 10px;
background: rgba(var(--secondary-rgb), 0.85);
2014-10-30 07:48:20 +08:00
&:after {
content: "";
2014-10-30 07:48:20 +08:00
display: block;
clear: both;
}
a.card-huge-avatar {
display: block;
}
.bio {
@include line-clamp(2);
}
2014-10-30 07:48:20 +08:00
}
.card-row:not(.first-row) {
margin-top: 0.5em;
}
// avatar - names - controls
.first-row {
.names {
padding-left: 1.25em;
.user-profile-link {
display: flex;
align-items: center;
&:focus-visible {
border: 1px solid;
@include default-focus;
}
}
.d-icon {
margin: 0 0.25em;
}
.name-username-wrapper {
margin-right: 0;
flex: 0 1 auto;
@include ellipsis;
}
span {
display: block;
}
}
.usercard-controls {
list-style-type: none;
margin: 0;
button {
width: 100%;
}
}
}
.btn {
margin-bottom: 5px;
}
.names__primary {
line-height: var(--line-height-medium);
font-size: var(--font-up-5);
font-weight: bold;
Upgrade to FontAwesome 5 (take two) (#6673) * Add missing icons to set * Revert FA5 revert This reverts commit 42572ff * use new SVG syntax in locales * Noscript page changes (remove login button, center "powered by" footer text) * Cast wider net for SVG icons in settings - include any _icon setting for SVG registry (offers better support for plugin settings) - let themes store multiple pipe-delimited icons in a setting - also replaces broken onebox image icon with SVG reference in cooked post processor * interpolate icons in locales * Fix composer whisper icon alignment * Add support for stacked icons * SECURITY: enforce hostname to match discourse hostname This ensures that the hostname rails uses for various helpers always matches the Discourse hostname * load SVG sprite with pre-initializers * FIX: enable caching on SVG sprites * PERF: use JSONP for SVG sprites so they are served from CDN This avoids needing to deal with CORS for loading of the SVG Note, added the svg- prefix to the filename so we can quickly tell in dev tools what the file is * Add missing SVG sprite JSONP script to CSP * Upgrade to FA 5.5.0 * Add support for all FA4.7 icons - adds complete frontend and backend for renamed FA4.7 icons - improves performance of SvgSprite.bundle and SvgSprite.all_icons * Fix group avatar flair preview - adds an endpoint at /svg-sprites/search/:keyword - adds frontend ajax call that pulls icon in avatar flair preview even when it is not in subset * Remove FA 4.7 font files
2018-11-27 05:49:57 +08:00
.d-icon {
color: var(--primary);
2014-11-02 10:58:18 +08:00
}
}
.names__secondary {
font-size: var(--font-up-1);
}
.metadata {
display: flex;
flex-wrap: wrap;
gap: 0.15em 0.5em;
color: var(--primary);
2019-04-12 19:55:01 +08:00
&.email,
.desc,
a {
color: var(--primary-high);
}
}
.names__secondary,
[class*="metadata__"] {
2018-05-09 03:38:55 +08:00
margin: 0;
@include ellipsis;
}
.names__primary,
.names__secondary {
a {
color: var(--primary);
}
}
p {
margin: 0 0 5px 0;
}
}
// styles for user cards only
.user-card {
// avatar - names - controls
.first-row {
display: flex;
.avatar-placeholder {
width: var(--avatar-width);
height: var(--avatar-width);
}
.user-card-avatar {
margin-top: var(--avatar-margin);
max-height: var(--avatar-width);
}
.avatar {
width: var(--avatar-width);
height: var(--avatar-width);
}
.new-user a {
color: var(--primary-low-mid);
}
}
// user bio - suspension reason
.second-row {
max-height: 150px;
overflow: auto;
.bio {
a:not(.mention) {
color: var(--tertiary);
}
.overflow {
max-height: 60px;
overflow: hidden;
}
}
.suspended {
color: var(--danger);
.suspension-reason-title,
.suspension-date {
font-weight: bold;
}
}
.profile-hidden,
.inactive-user {
font-size: var(--font-up-1);
margin-top: 0.5em;
}
}
// featured topic
.featured-topic {
.desc {
color: var(--primary-high);
}
a {
color: var(--primary);
text-decoration: underline;
}
}
// location and website
.location-and-website {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
.location,
.website-name {
display: flex;
overflow: hidden;
align-items: center;
.d-icon {
margin-right: 0.25em;
}
}
.website-name a,
.location span {
@include ellipsis;
color: var(--primary);
}
.location,
.local-time,
.website-name {
margin-right: 0.5em;
}
.website-name a {
text-decoration: underline;
}
}
// custom user fields
.public-user-fields {
margin: 0;
.user-field-value-list-item:not(:last-of-type) {
&:after {
// create comma separated list
content: ",";
}
}
}
// badges
.badge-section {
line-height: 0;
.user-badge {
@include ellipsis;
background: var(--primary-very-low);
border: 1px solid var(--primary-low);
color: var(--primary);
}
.user-card-badge-link {
overflow: hidden;
}
.user-card-badge-link,
.more-user-badges {
vertical-align: top;
display: inline-block;
}
.more-user-badges a {
@extend .user-badge;
}
}
.user-status {
display: flex;
img.emoji {
margin-bottom: 1px;
margin-right: 0.3em;
}
.relative-date {
flex: 1 0 auto;
text-align: left;
font-size: var(--font-down-3);
padding-top: 0.5em;
margin-left: 0.6em;
color: var(--primary-medium);
}
&__description {
@include ellipsis;
}
}
}
// styles for group cards only
.group-card {
// avatar - names and controls
.first-row {
2018-12-15 11:16:18 +08:00
display: flex;
.group-card-avatar {
margin-top: var(--avatar-margin);
}
.avatar-flair {
display: flex;
background-size: contain;
background-repeat: no-repeat;
width: var(--avatar-width);
height: var(--avatar-width);
color: var(--primary);
.d-icon {
margin: auto;
2023-06-06 00:57:33 +08:00
font-size: calc(var(--avatar-width) / 1.5);
}
&.rounded {
border-radius: 50%;
}
2014-04-16 18:02:57 +08:00
}
2014-04-14 13:58:36 +08:00
}
// group bio
.second-row {
max-height: 150px;
overflow: auto;
.bio {
a:not(.mention) {
color: var(--tertiary);
}
img {
max-width: 100%;
height: auto;
}
.overflow {
max-height: 60px;
overflow: hidden;
}
}
}
2014-04-14 13:58:36 +08:00
}