Skip to content

Commit

Permalink
feat: add post summary micro variant
Browse files Browse the repository at this point in the history 
resolves #966
  • Loading branch information
@dancormier
dancormier committed May 31, 2022
1 parent 12de0e9 commit 3cc9620
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 1 deletion.
99 changes: 99 additions & 0 deletions docs/product/components/post-summary.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -557,6 +557,105 @@ <h3 class="s-post-summary--content-title">
</div>
</div>


{% header "h3", "Micro" %}
<!-- TODO: Update copy for Micro -->
<p class="stacks-copy">There are compact views where it’s appropriate to reduce the amount of information within the post summary. The micro view forces the smallest breakpoint layout in any context, stacking the meta data on top and putting everything into a single column.</p>
<div class="stacks-preview">
{% highlight html %}
<div class="s-post-summary s-post-summary__micro">
<div class="s-post-summary--stats">
<div class="s-post-summary--stats-item">
@Svg.CheckmarkSm
<span class="s-post-summary--stats-item-number">
…
</span>
<span class="s-post-summary--stats-item-unit">
answers
</span>
</div>
</div>
<div class="s-post-summary--content">
<h3 class="s-post-summary--content-title">
<a href="…">…</a>
</h3>
<div class="s-post-summary--meta">
<div class="s-user-card s-user-card__micro">
<time class="s-user-card--time">…</time>
</div>
</div>
</div>
</div>
{% endhighlight %}
<div class="stacks-preview--example p0">
<div class="py16">
<div class="s-card bs-sm mx-auto my16 p0 wmx3">
<div class="s-post-summary s-post-summary__micro">
<div class="s-post-summary--stats">
<div class="s-post-summary--stats-item">
<span class="s-post-summary--stats-item-number">
0
</span>
<span class="s-post-summary--stats-item-unit">
answers
</span>
</div>
</div>
<div class="s-post-summary--content">
<h3 class="s-post-summary--content-title">
<a href="#">Clicking through a viewpager2?</a>
</h3>
</div>
</div>
<div class="s-post-summary s-post-summary__micro">
<div class="s-post-summary--stats">
<div class="s-post-summary--stats-item has-answers">
<span class="s-post-summary--stats-item-number">
1
</span>
<span class="s-post-summary--stats-item-unit">
answer
</span>
</div>
</div>
<div class="s-post-summary--content">
<h3 class="s-post-summary--content-title">
<a href="#">What permissions does github_token require for releases from a github action</a>
</h3>
<div class="s-post-summary--meta">
<div class="s-user-card s-user-card__minimal">
<time class="s-user-card--time">Apr 1, 2022</time>
</div>
</div>
</div>
</div>
<div class="s-post-summary s-post-summary__micro">
<div class="s-post-summary--stats">
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
<span class="s-post-summary--stats-item-number">
32
</span>
<span class="s-post-summary--stats-item-unit">
answer
</span>
</div>
</div>
<div class="s-post-summary--content">
<h3 class="s-post-summary--content-title">
<a href="#">Parentheses is Invalid Bash</a>
</h3>
<div class="s-post-summary--meta">
<div class="s-user-card s-user-card__minimal">
<time class="s-user-card--time">Mar 25, 2022</time>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

{% header "h3", "Legacy" %}
<p class="stacks-copy">If you only need to display the original three stats and don’t need to interleave different content types, a legacy layout may be appropriate. This view is considered deprecated and will not receive updates. Care will be needed to move bounties to within the title block.</p>
<div class="stacks-preview">
Expand Down
46 changes: 45 additions & 1 deletion lib/css/components/post-summary.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@
}

#stacks-internals #screen-md({
flex-direction: column;
&:not(.s-post-summary__micro) {
flex-direction: column;
}
});

&.s-post-summary__minimal {
Expand All @@ -35,6 +37,48 @@
}
}

&.s-post-summary__micro {
align-items: center;
border-bottom: none;
gap: var(--su12);
padding: var(--su12);

.s-post-summary--stats {
align-items: center;
flex-direction: row;
font-size: var(--fs-caption);
margin: 0;
width: auto;

.s-post-summary--stats-item {
border-radius: var(--br-sm);
padding: calc(var(--su2) + var(--su1)) var(--su4);
width: calc(var(--su32) + var(--su6));

&:not(.has-answers) {
border: 1px solid var(--black-150);
}
}
}
.s-post-summary--stats-item-unit {
.v-visible-sr;
}
.s-post-summary--content {
display: flex;
flex-direction: row;
}
.s-post-summary--content-title{
flex-grow: 1;
font-size: var(--fs-body1);
margin-bottom: 0;
}
.s-post-summary--meta {
.s-user-card {
flex-wrap: nowrap;
}
}
}

&.s-post-summary__legacy {
padding-left: 0; // Since stats have padding, we don't need it on the parent

Expand Down

0 comments on commit 3cc9620

Please sign in to comment.