From cd0115deecdc92b170033fe3ff80aa9220c71f94 Mon Sep 17 00:00:00 2001 From: Djordje Vlaisavljevic Date: Tue, 28 Feb 2023 13:37:27 +0000 Subject: [PATCH] Added static design for grouped mentions with popover refs https://github.com/TryGhost/Team/issues/2606 --- ghost/admin/app/styles/layouts/mentions.css | 30 +++++++++++++++++++-- ghost/admin/app/templates/mentions.hbs | 13 ++++++++- 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/ghost/admin/app/styles/layouts/mentions.css b/ghost/admin/app/styles/layouts/mentions.css index b78f20abd7..01ae0ff5c5 100644 --- a/ghost/admin/app/styles/layouts/mentions.css +++ b/ghost/admin/app/styles/layouts/mentions.css @@ -24,7 +24,6 @@ border: 1px solid #e6e9eb; border-radius: 5px; text-decoration: none; - overflow: hidden; color: var(--midgrey); } @@ -39,7 +38,8 @@ justify-content: space-between; align-items: center; font-size: 1.35rem; - margin-bottom: 12px; + line-height: 1.2; + margin-bottom: 14px; white-space: nowrap; } @@ -72,6 +72,32 @@ overflow: hidden; } +.gh-mention-your-link.has-multiple-links { + border-bottom: 1px dashed var(--lightgrey); + margin-bottom: -2px; + padding-bottom: 1px; +} + +.gh-mention-multiple-links { + list-style: none; + margin: 0; + padding: 0; + font-size: 13.5px; +} + +.gh-mention-multiple-links li:last-of-type { + margin-bottom: 0; +} + +.gh-mention-header .popover { + border: none; + /* border: 1px solid var(--whitegrey-l1); */ + color: var(--darkgrey); + /* box-shadow: var(--shadow-1); */ + box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 20px -3px rgba(0,0,0,.2); + padding: 12px 14px; +} + .gh-mention-timestamp { margin-left: auto; padding-left: 32px; diff --git a/ghost/admin/app/templates/mentions.hbs b/ghost/admin/app/templates/mentions.hbs index e9e6de5b85..3af2491b84 100644 --- a/ghost/admin/app/templates/mentions.hbs +++ b/ghost/admin/app/templates/mentions.hbs @@ -53,7 +53,18 @@ - {{if mention.resource mention.resource.name mention.target}} +
+ {{!-- TODO: Add logic so when there are multiple links, this span gets a .has-multiple-links class --}} + {{if mention.resource mention.resource.name mention.target}} + + + +
{{/unless}} {{moment-from-now mention.timestamp}}