Skip to content

Commit 9369bfa

Browse files
aaronshekeyaaronshekey
authored
Add answer previews to post summaries (#787)
* Add a treatment for quoted answers * Variables * Add the new classes to the json
1 parent c9139f5 commit 9369bfa

File tree

4 files changed

+178
-2
lines changed

4 files changed

+178
-2
lines changed

‎docs/_data/post-summary.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,16 @@
6565
"applies": ".s-post-summary--content",
6666
"description": "An optional content excerpt truncated at 2 lines."
6767
},
68+
{
69+
"class": ".s-post-summary--answer",
70+
"applies": ".s-post-summary--content",
71+
"description": "Adds blockquote styling and spacing for answer previews"
72+
},
73+
{
74+
"class": ".s-post-summary--answer-excerpt",
75+
"applies": ".s-post-summary--content",
76+
"description": "Provides padding, and truncation to 4 lines."
77+
},
6878
{
6979
"class": ".s-post-summary--content-menu-button",
7080
"applies": ".s-post-summary--content",

‎docs/product/components/post-summary.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,133 @@
414414
</div>
415415
</section>
416416

417+
<section class="stacks-section">
418+
{% header "h2", "Answers" %}
419+
<p class="stacks-copy">Previews of answers can also be attached to the post summary as needed.</p>
420+
<div class="stacks-preview">
421+
{% highlight html %}
422+
<div class="s-post-summary">
423+
…
424+
<div class="s-post-summary--content">
425+
<a href="…" class="s-post-summary--content-title s-link">…</a>
426+
<div class="s-post-summary--meta">…</div>
427+
428+
<div class="s-post-summary--answer">
429+
<div class="s-post-summary--stats">
430+
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
431+
@Svg.CheckmarkSm.With("va-text-bottom") Accepted answer
432+
</div>
433+
<div class="s-post-summary--stats-item">
434+
… votes
435+
</div>
436+
</div>
437+
<p class="s-post-summary--answer-excerpt">
438+
…
439+
</p>
440+
<div class="s-post-summary--meta">
441+
<a class="s-link" href="…">
442+
View answer
443+
</a>
444+
445+
<div class="s-user-card s-user-card__minimal">
446+
<a href="…" class="s-avatar s-user-card--avatar">
447+
<img class="s-avatar--image" src="…" />
448+
</a>
449+
<a href="…" class="s-user-card--link">…</a>
450+
<time class="s-user-card--time">…</time>
451+
</div>
452+
</div>
453+
</div>
454+
</div>
455+
</div>
456+
{% endhighlight %}
457+
<div class="stacks-preview--example p0">
458+
<div class="s-post-summary">
459+
<div class="s-post-summary--stats">
460+
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
461+
{% icon "CheckmarkSm", "va-text-bottom" %} 2 answers
462+
</div>
463+
<div class="s-post-summary--stats-item">
464+
2 votes
465+
</div>
466+
<div class="s-post-summary--stats-item">
467+
1k views
468+
</div>
469+
</div>
470+
<div class="s-post-summary--content">
471+
<a class="s-post-summary--content-title s-link">
472+
Azure API Management and Backend Web API
473+
</a>
474+
<p class="s-post-summary--content-excerpt">
475+
Right now, I have enabled basic authentication to the developer portal in API Management. Also, I have enabled OAuth 2.0 authentication for the back end server (user Authorization). So, if i login to the developer portal, i can see two fields - Subscription Key and Authorization. The Subscription key will be the developer's subscription to the portal and the Authorization will be the OAuth authorization which is required for the back end server.
476+
</p>
477+
<div class="s-post-summary--meta">
478+
<div class="s-post-summary--meta-tags">
479+
<a class="s-tag" href="#">azure</a>
480+
<a class="s-tag" href="#">asp.net-web-api</a>
481+
<a class="s-tag" href="#">oauth-2.0</a>
482+
<a class="s-tag" href="#">azure-active-directory</a>
483+
</div>
484+
485+
<div class="s-user-card s-user-card__minimal">
486+
<a href="…" class="s-avatar s-user-card--avatar">
487+
<img class="s-avatar--image" src="{{ "/assets/img/placeholder.svg" | relative_url }}" />
488+
</a>
489+
<a href="#" class="s-user-card--link">karel</a>
490+
<time class="s-user-card--time">asked 3 minutes ago</time>
491+
</div>
492+
</div>
493+
<div class="s-post-summary--answer">
494+
<div class="s-post-summary--stats">
495+
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
496+
{% icon "CheckmarkSm", "va-text-bottom" %} Accepted answer
497+
</div>
498+
<div class="s-post-summary--stats-item">
499+
2 votes
500+
</div>
501+
</div>
502+
<p class="s-post-summary--answer-excerpt">Subscription keys in APIM are tied to a user and product, thus if you change (or create new one) product to not require subscription (option available at creation time or in product settings) no subscription key would be needed to call any API included into such products. The downside is that all such calls would be treated by APIM as anonymous and shown in analytics as such.</p>
503+
<div class="s-post-summary--meta">
504+
<a class="s-link" href="#">
505+
View answer
506+
</a>
507+
508+
<div class="s-user-card s-user-card__minimal">
509+
<a href="…" class="s-avatar s-user-card--avatar">
510+
<img class="s-avatar--image" src="{{ "/assets/img/placeholder.svg" | relative_url }}" />
511+
</a>
512+
<a href="#" class="s-user-card--link">Aaron Shekey</a>
513+
<time class="s-user-card--time">answered 1 minute ago</time>
514+
</div>
515+
</div>
516+
</div>
517+
<div class="s-post-summary--answer">
518+
<div class="s-post-summary--stats">
519+
<div class="s-post-summary--stats-item">
520+
2 votes
521+
</div>
522+
</div>
523+
<p class="s-post-summary--answer-excerpt">Yeah, you can do that (a bit of a hack). You have to use REST Api for that, specifically this call. For me it didn't work to edit the existing API (they key was still there), but when I've created new API, key wasn't there:</p>
524+
<div class="s-post-summary--meta">
525+
<a class="s-link" href="#">
526+
View answer
527+
</a>
528+
529+
<div class="s-user-card s-user-card__minimal">
530+
<a href="…" class="s-avatar s-user-card--avatar">
531+
<img class="s-avatar--image" src="{{ "/assets/img/placeholder.svg" | relative_url }}" />
532+
</a>
533+
<a href="#" class="s-user-card--link">4c74356b41</a>
534+
<time class="s-user-card--time">answered 3 minutes ago</time>
535+
</div>
536+
</div>
537+
</div>
538+
</div>
539+
</div>
540+
</div>
541+
</div>
542+
</section>
543+
417544
<section class="stacks-section">
418545
{% header "h2", "Stats examples" %}
419546
{% header "h3", "Answered status" %}

‎lib/css/components/_stacks-post-summary.less‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,3 +182,42 @@
182182
margin-left: auto;
183183
}
184184
}
185+
186+
.s-post-summary--answer {
187+
position: relative;
188+
margin: @su16 1em 0 1em;
189+
padding: 0.5em 0 0.5em calc(1em + @su4);
190+
191+
+ .s-post-summary--answer {
192+
margin-top: @su16;
193+
}
194+
195+
&:before {
196+
content: "";
197+
display: block;
198+
position: absolute;
199+
top: 0;
200+
bottom: 0;
201+
left: 0;
202+
width: @su4;
203+
border-radius: @su8;
204+
background: var(--black-150);
205+
206+
.highcontrast-mode({
207+
background: var(--black-600);
208+
});
209+
}
210+
211+
.s-post-summary--stats {
212+
width: auto;
213+
flex-direction: row;
214+
align-items: center;
215+
margin-bottom: @su4;
216+
}
217+
218+
.s-post-summary--answer-excerpt {
219+
color: var(--black-600);
220+
margin-bottom: @su8;
221+
.v-truncate4;
222+
}
223+
}

‎lib/css/components/_stacks-prose.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -322,8 +322,8 @@
322322
top: 0;
323323
bottom: 0;
324324
left: 0;
325-
width: 4px;
326-
border-radius: 8px;
325+
width: @su4;
326+
border-radius: @su8;
327327
background: var(--black-150);
328328

329329
.highcontrast-mode({

0 commit comments

Comments
 (0)