Skip to content

Commit 4ff3b26

Browse files
aaronshekeyaaronshekey
authored
Post summary states (#794)
1 parent 2b874a4 commit 4ff3b26

File tree

2 files changed

+248
-14
lines changed

2 files changed

+248
-14
lines changed

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

Lines changed: 197 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
<div class="s-post-summary">
4747
<div class="s-post-summary--stats">
4848
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
49-
@Svg.CheckmarkSm.With("va-text-bottom")
49+
@Svg.CheckmarkSm
5050
… answers
5151
</div>
5252
<div class="s-post-summary--stats-item">
@@ -91,7 +91,7 @@
9191
<div class="s-post-summary">
9292
<div class="s-post-summary--stats">
9393
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
94-
{% icon "CheckmarkSm", "va-text-bottom" %}
94+
{% icon "CheckmarkSm" %}
9595
5 answers
9696
</div>
9797
<div class="s-post-summary--stats-item">
@@ -283,7 +283,7 @@
283283
<div class="s-post-summary s-post-summary__minimal">
284284
<div class="s-post-summary--stats">
285285
<div class="s-post-summary--stats-item">
286-
@Svg.CheckmarkSm.With("va-text-bottom")
286+
@Svg.CheckmarkSm
287287
… answers
288288
</div>
289289
<div class="s-post-summary--stats-item">
@@ -428,7 +428,7 @@
428428
<div class="s-post-summary--answer">
429429
<div class="s-post-summary--stats">
430430
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
431-
@Svg.CheckmarkSm.With("va-text-bottom") Accepted answer
431+
@Svg.CheckmarkSm Accepted answer
432432
</div>
433433
<div class="s-post-summary--stats-item">
434434
… votes
@@ -458,7 +458,7 @@
458458
<div class="s-post-summary">
459459
<div class="s-post-summary--stats">
460460
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
461-
{% icon "CheckmarkSm", "va-text-bottom" %} 2 answers
461+
{% icon "CheckmarkSm" %} 2 answers
462462
</div>
463463
<div class="s-post-summary--stats-item">
464464
2 votes
@@ -493,7 +493,7 @@
493493
<div class="s-post-summary--answer">
494494
<div class="s-post-summary--stats">
495495
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
496-
{% icon "CheckmarkSm", "va-text-bottom" %} Accepted answer
496+
{% icon "CheckmarkSm" %} Accepted answer
497497
</div>
498498
<div class="s-post-summary--stats-item">
499499
2 votes
@@ -564,7 +564,7 @@
564564

565565
<!-- Has accepted answers -->
566566
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
567-
@Svg.CheckmarkSm.With("va-text-bottom")
567+
@Svg.CheckmarkSm
568568
5 answers
569569
</div>
570570
{% endhighlight %}
@@ -596,7 +596,7 @@
596596

597597
<div class="flex--item w-auto s-post-summary--stats">
598598
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
599-
{% icon "CheckmarkSm", "va-text-bottom" %}
599+
{% icon "CheckmarkSm" %}
600600
5 answers
601601
</div>
602602
<div class="s-post-summary--stats-item">
@@ -637,7 +637,7 @@
637637

638638
<!-- Supernova -->
639639
<div class="s-post-summary--stats-item is-supernova">
640-
@Svg.FireSm.With("va-text-bottom mrn2")
640+
@Svg.FireSm.With("mrn2")
641641
100k views
642642
</div>
643643
{% endhighlight %}
@@ -657,7 +657,7 @@
657657

658658
<div class="flex--item w-auto s-post-summary--stats">
659659
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
660-
{% icon "CheckmarkSm", "va-text-bottom" %}
660+
{% icon "CheckmarkSm" %}
661661
3 answers
662662
</div>
663663
<div class="s-post-summary--stats-item">
@@ -670,7 +670,7 @@
670670

671671
<div class="flex--item w-auto s-post-summary--stats">
672672
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
673-
{% icon "CheckmarkSm", "va-text-bottom" %}
673+
{% icon "CheckmarkSm" %}
674674
10 answers
675675
</div>
676676
<div class="s-post-summary--stats-item">
@@ -683,18 +683,202 @@
683683

684684
<div class="flex--item w-auto s-post-summary--stats">
685685
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
686-
{% icon "CheckmarkSm", "va-text-bottom" %}
686+
{% icon "CheckmarkSm" %}
687687
18 answers
688688
</div>
689689
<div class="s-post-summary--stats-item">
690690
126 votes
691691
</div>
692692
<div class="s-post-summary--stats-item is-supernova">
693-
{% icon "FireSm", "va-text-bottom" %}
693+
{% icon "FireSm" %}
694694
100k views
695695
</div>
696696
</div>
697697
</div>
698698
</div>
699699
</div>
700+
</section>
701+
702+
<section class="stacks-section">
703+
{% header "h2", "States" %}
704+
<p class="stacks-copy">Post summaries change their appearance based on being watched, ignored, or deleted.</p>
705+
<div class="stacks-preview">
706+
{% highlight html %}
707+
<div class="s-post-summary s-post-summary__watched">
708+
<div class="s-post-summary--stats">
709+
<div class="s-post-summary--stats-item is-watched">
710+
@Svg.EyeSm
711+
Watched
712+
</div>
713+
…
714+
</div>
715+
…
716+
</div>
717+
718+
<div class="s-post-summary s-post-summary__ignored">
719+
<div class="s-post-summary--stats">
720+
<div class="s-post-summary--stats-item is-ignored">
721+
@Svg.EyeOffSm
722+
Ignored
723+
</div>
724+
…
725+
</div>
726+
…
727+
</div>
728+
729+
<div class="s-post-summary s-post-summary__deleted">
730+
<div class="s-post-summary--stats">
731+
<div class="s-post-summary--stats-item is-deleted">
732+
@Svg.TrashSm
733+
Deleted
734+
</div>
735+
…
736+
</div>
737+
…
738+
</div>
739+
{% endhighlight %}
740+
<div class="stacks-preview--example p0">
741+
<div class="s-post-summary s-post-summary__watched">
742+
<div class="s-post-summary--stats">
743+
<div class="s-post-summary--stats-item is-watched">
744+
{% icon "EyeSm" %}
745+
Watched
746+
</div>
747+
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
748+
{% icon "CheckmarkSm" %}
749+
2 answers
750+
</div>
751+
<div class="s-post-summary--stats-item">
752+
10 votes
753+
</div>
754+
<div class="s-post-summary--stats-item is-warm">
755+
10k views
756+
</div>
757+
</div>
758+
<div class="s-post-summary--content">
759+
<a class="s-post-summary--content-title s-link">
760+
Could not load type 'System.Web.Optimization.StyleBundle'
761+
</a>
762+
<p class="s-post-summary--content-excerpt">
763+
Sometimes after build and launch my MVC4 web app I got this error. It can dissapear after rebuild or not. Same issue I got after publish to Windows Azure. Does anybody know how to fix this error?
764+
</p>
765+
<div class="s-post-summary--meta">
766+
<div class="s-post-summary--meta-tags">
767+
<a class="s-tag" href="#">asp.net</a>
768+
<a class="s-tag" href="#">asp.net-mvc</a>
769+
</div>
770+
771+
<div class="s-user-card s-user-card__minimal">
772+
<a href="#" class="s-avatar s-user-card--avatar">
773+
<img class="s-avatar--image" src="{{ "/assets/img/placeholder.svg" | relative_url }}" />
774+
</a>
775+
<a href="#" class="s-user-card--link">Nimantha</a>
776+
<ul class="s-user-card--awards">
777+
<li class="s-user-card--rep">5,337</li>
778+
</ul>
779+
<time class="s-user-card--time">modified 18 minutes ago</time>
780+
</div>
781+
</div>
782+
<a href="#" class="s-btn s-btn__muted s-post-summary--content-menu-button">
783+
{% icon "EllipsisVertical" %}
784+
</a>
785+
</div>
786+
</div>
787+
788+
<div class="s-post-summary s-post-summary__ignored">
789+
<div class="s-post-summary--stats">
790+
<div class="s-post-summary--stats-item is-ignored">
791+
{% icon "EyeOffSm" %}
792+
Ignored
793+
</div>
794+
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
795+
2 answers
796+
</div>
797+
<div class="s-post-summary--stats-item">
798+
205 views
799+
</div>
800+
</div>
801+
<div class="s-post-summary--content">
802+
<a class="s-post-summary--content-title s-link">
803+
PHP URL Param redirects - with wildcards/regex
804+
</a>
805+
<p class="s-post-summary--content-excerpt">
806+
I recently found this solution for doing php url variable to header location redirects. It's so much more manageable compared to htaccess for mass redirects, however one thing I want to next work out templates, guides, and links, see this article.
807+
</p>
808+
<div class="s-post-summary--meta">
809+
<div class="s-post-summary--meta-tags">
810+
<a class="s-tag" href="#">php</a>
811+
<a class="s-tag" href="#">regex</a>
812+
<a class="s-tag" href="#">redirect</a>
813+
<a class="s-tag" href="#">parameters</a>
814+
<a class="s-tag" href="#">wildcard</a>
815+
</div>
816+
817+
<div class="s-user-card s-user-card__minimal">
818+
<a href="#" class="s-avatar s-user-card--avatar">
819+
<img class="s-avatar--image" src="{{ "/assets/img/placeholder.svg" | relative_url }}" />
820+
</a>
821+
<a href="#" class="s-user-card--link">Jase Wolf</a>
822+
<ul class="s-user-card--awards">
823+
<li class="s-user-card--rep">93</li>
824+
</ul>
825+
<time class="s-user-card--time">modified 22 minutes ago</time>
826+
</div>
827+
</div>
828+
<a href="#" class="s-btn s-btn__muted s-post-summary--content-menu-button">
829+
{% icon "EllipsisVertical" %}
830+
</a>
831+
</div>
832+
</div>
833+
834+
<div class="s-post-summary s-post-summary__deleted">
835+
<div class="s-post-summary--stats">
836+
<div class="s-post-summary--stats-item is-deleted">
837+
{% icon "TrashSm" %}
838+
Deleted
839+
</div>
840+
<div class="s-post-summary--stats-item">
841+
0 answers
842+
</div>
843+
<div class="s-post-summary--stats-item">
844+
0 votes
845+
</div>
846+
<div class="s-post-summary--stats-item">
847+
5 views
848+
</div>
849+
</div>
850+
<div class="s-post-summary--content">
851+
<a class="s-post-summary--content-title s-link">
852+
Adding authentication based on API key and API secret to APIs in Spring Boot application
853+
</a>
854+
<p class="s-post-summary--content-excerpt">
855+
I am working on a Spring Boot application with user authentication is based on Oauth2 2ith 2FA. Now, I would like to call the APIs in my application from the third-party client as well, say from another service.
856+
</p>
857+
<div class="s-post-summary--meta">
858+
<div class="s-post-summary--meta-tags">
859+
<a class="s-tag" href="#">spring</a>
860+
<a class="s-tag" href="#">spring-boot</a>
861+
<a class="s-tag" href="#">authentication</a>
862+
<a class="s-tag" href="#">spring-security</a>
863+
<a class="s-tag" href="#">oauth-2.0</a>
864+
</div>
865+
866+
<div class="s-user-card s-user-card__minimal">
867+
<a href="#" class="s-avatar s-user-card--avatar">
868+
<img class="s-avatar--image" src="{{ "/assets/img/placeholder.svg" | relative_url }}" />
869+
</a>
870+
<a href="#" class="s-user-card--link">Joy</a>
871+
<ul class="s-user-card--awards">
872+
<li class="s-user-card--rep">3,622</li>
873+
</ul>
874+
<time class="s-user-card--time">asked 38 minutes ago</time>
875+
</div>
876+
</div>
877+
<a href="#" class="s-btn s-btn__muted s-post-summary--content-menu-button">
878+
{% icon "EllipsisVertical" %}
879+
</a>
880+
</div>
881+
</div>
882+
</div>
883+
</div>
700884
</section>

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

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,10 @@
7070
border: 1px solid transparent;
7171

7272
&.has-answers,
73-
&.has-bounty {
73+
&.has-bounty,
74+
&.is-watched,
75+
&.is-ignored,
76+
&.is-deleted {
7477
border-radius: @br-sm;
7578
padding: @su2 @su4;
7679
}
@@ -221,3 +224,50 @@
221224
.v-truncate4;
222225
}
223226
}
227+
228+
.s-post-summary__watched .is-watched {
229+
color: var(--white);
230+
background-color: var(--yellow-600);
231+
}
232+
233+
.s-post-summary__ignored .is-ignored {
234+
color: var(--white);
235+
background-color: var(--black-600);
236+
}
237+
238+
.s-post-summary__deleted .is-deleted {
239+
color: @white;
240+
background-color: var(--red-500);
241+
}
242+
243+
.s-post-summary__ignored,
244+
.s-post-summary__deleted {
245+
.s-post-summary--content {
246+
opacity: 0.7;
247+
}
248+
249+
.s-post-summary--stats-item:not(.is-ignored):not(.is-deleted) {
250+
opacity: 0.7;
251+
filter: grayscale(100%);
252+
}
253+
254+
.s-post-summary--content-title {
255+
color: var(--black-600);
256+
257+
&:hover {
258+
color: var(--black-500);
259+
}
260+
261+
&:visited {
262+
color: var(--black-700);
263+
}
264+
}
265+
266+
.s-post-summary--content-excerpt {
267+
color: var(--black-500);
268+
}
269+
270+
.s-post-summary--meta {
271+
filter: grayscale(100%);
272+
}
273+
}

0 commit comments

Comments
 (0)