indicate articles that are targets of in-product links #5948
Conversation
escattone
force-pushed
the
display-inproduct-message-for-kb-articles-1607
branch
from
f85947b
to
1bb3e06
Compare
escattone
force-pushed
the
display-inproduct-message-for-kb-articles-1607
branch
6 times, most recently
from
3a3eaf2
to
2b88c75
Compare
escattone
force-pushed
the
display-inproduct-message-for-kb-articles-1607
branch
2 times, most recently
from
4065293
to
139d4e0
Compare
| @@ -57,6 +57,13 @@ | |||
| {{ search_box(settings, id='support-search-sidebar', params=search_params) }} | |||
| </div> | |||
|
|
|||
| {% if in_staff_group(user) and document.is_linked_in_product %} | |||
| <figure id="linked-in-product-indicator"> | |||
There was a problem hiding this comment.
let's indent this 2 spaces in
There was a problem hiding this comment.
I would also move this as a list item under the sidebar_nav in the sidebar_modules.html for consistency
There was a problem hiding this comment.
Instead of using grid for CSS I would go for something like:
figure {
&.foobar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: p.$spacing-xl;
}
img {
width: 24px;
height: 24px;
}
figcaption {
font-weight: 500;
line-height: normal;
}
}There was a problem hiding this comment.
Regarding the SCSS, I used flex instead of grid, but not some of the other things, like align-items: center; and justify-content: space-between;, since those deviated from what Josh wanted.
Here's what it looks like on both desktop and mobile with the CSS you have above:
There was a problem hiding this comment.
that was merely a suggestion, the main point was to use flexbox instead of grid for this
escattone
force-pushed
the
display-inproduct-message-for-kb-articles-1607
branch
from
139d4e0
to
f9c90f5
Compare
mozilla/sumo#1607
Notes
Staffgroup will see the indicator.