Skip to content

Commit b49d27b

Browse files
aaronshekeyaaronshekey
authored
Further refinement of post summary states (#819)
1 parent c092750 commit b49d27b

File tree

2 files changed

+74
-60
lines changed

2 files changed

+74
-60
lines changed

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

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -882,47 +882,47 @@
882882

883883
<div class="s-post-summary">
884884
<div class="s-post-summary--stats">
885-
<div class="s-post-summary--stats-item is-published">
886-
{% icon "CheckmarkSm" %}
887-
Published
885+
<div class="s-post-summary--stats-item is-draft">
886+
{% icon "PencilSm" %}
887+
Draft
888888
</div>
889889
<div class="s-post-summary--stats-item">
890-
-22 votes
890+
-3 votes
891891
</div>
892-
<div class="s-post-summary--stats-item is-warm">
893-
1k views
892+
<div class="s-post-summary--stats-item">
893+
541 views
894894
</div>
895895
<div class="s-post-summary--stats-item">
896-
5 comments
896+
4 comments
897897
</div>
898898
<div class="s-post-summary--stats-item">
899899
1 min read
900900
</div>
901901
</div>
902902
<div class="s-post-summary--content">
903903
<div class="s-post-summary--content-type">
904-
<a href="#" class="s-link s-link__grayscale">{% icon "DocumentAlt" %} Announcement</a>
904+
<a href="#" class="s-link s-link__grayscale">{% icon "DocumentAlt" %} How-to guide</a>
905905
</div>
906906
<a class="s-post-summary--content-title s-link">
907-
Faster Cloud Storage transfers using the gcloud command-line
907+
How to make sql_mode empty on Cloud SQL
908908
</a>
909909
<p class="s-post-summary--content-excerpt">
910-
We’re pleased to announce gcloud storage, a new set of Cloud Storage commands in Cloud SDK that includes a new approach to parallelization that can accelerate both small and large data migrations.
910+
Cloud SQL allows users to customize several flags that allow you to adjust options and configure and tune a database instance. In the case of the sql_mode flag, there are several options that are
911911
</p>
912912
<div class="s-post-summary--meta">
913913
<div class="s-post-summary--meta-tags">
914-
<a class="s-tag" href="#">google-cloud-storage</a>
915-
<a class="s-tag" href="#">gcloud</a>
916-
<a class="s-tag" href="#">gsutil</a>
914+
<a class="s-tag" href="#">google-cloud-sql</a>
915+
<a class="s-tag" href="#">sql-mode</a>
916+
<a class="s-tag" href="#">sqlmod</a>
917917
</div>
918918

919919
<div class="s-user-card s-user-card__minimal">
920920
<a href="#" class="s-avatar s-user-card--avatar">
921921
<img class="s-avatar--image" src="{{ "/assets/img/placeholder.svg" | relative_url }}" />
922922
</a>
923-
<a href="#" class="s-user-card--link">thomasmaclean</a>
923+
<a href="#" class="s-user-card--link">gabidavila</a>
924924
<ul class="s-user-card--awards">
925-
<li class="s-user-card--rep">165</li>
925+
<li class="s-user-card--rep">874</li>
926926
</ul>
927927
<time class="s-user-card--time">asked 38 minutes ago</time>
928928
</div>
@@ -935,47 +935,46 @@
935935

936936
<div class="s-post-summary">
937937
<div class="s-post-summary--stats">
938-
<div class="s-post-summary--stats-item is-draft">
939-
{% icon "PencilSm" %}
940-
Draft
938+
<div class="s-post-summary--stats-item is-review">
939+
{% icon "EyeSm" %}
940+
Review
941941
</div>
942942
<div class="s-post-summary--stats-item">
943-
-3 votes
943+
26 votes
944944
</div>
945-
<div class="s-post-summary--stats-item">
946-
541 views
945+
<div class="s-post-summary--stats-item is-warm">
946+
2k views
947947
</div>
948948
<div class="s-post-summary--stats-item">
949-
4 comments
949+
1 comment
950950
</div>
951951
<div class="s-post-summary--stats-item">
952952
1 min read
953953
</div>
954954
</div>
955955
<div class="s-post-summary--content">
956956
<div class="s-post-summary--content-type">
957-
<a href="#" class="s-link s-link__grayscale">{% icon "DocumentAlt" %} How-to guide</a>
957+
<a href="#" class="s-link s-link__grayscale">{% icon "DocumentAlt" %} How-to Guide</a>
958958
</div>
959959
<a class="s-post-summary--content-title s-link">
960960
How to make sql_mode empty on Cloud SQL
961961
</a>
962962
<p class="s-post-summary--content-excerpt">
963-
Cloud SQL allows users to customize several flags that allow you to adjust options and configure and tune a database instance. In the case of the sql_mode flag, there are several options that are
963+
In Android apps that use Firebase Authentication, you can always get the user who is currently signed in with code like: FirebaseAuth auth = FirebaseAuth.getInstance(); FirebaseUser user = auth.get
964964
</p>
965965
<div class="s-post-summary--meta">
966966
<div class="s-post-summary--meta-tags">
967-
<a class="s-tag" href="#">google-cloud-sql</a>
968-
<a class="s-tag" href="#">sql-mode</a>
969-
<a class="s-tag" href="#">sqlmod</a>
967+
<a class="s-tag" href="#">firebase-realtime-database</a>
968+
<a class="s-tag" href="#">firebase-authentication</a>
970969
</div>
971970

972971
<div class="s-user-card s-user-card__minimal">
973972
<a href="#" class="s-avatar s-user-card--avatar">
974973
<img class="s-avatar--image" src="{{ "/assets/img/placeholder.svg" | relative_url }}" />
975974
</a>
976-
<a href="#" class="s-user-card--link">gabidavila</a>
975+
<a href="#" class="s-user-card--link">Frank van Puffelen</a>
977976
<ul class="s-user-card--awards">
978-
<li class="s-user-card--rep">874</li>
977+
<li class="s-user-card--rep">464.3k</li>
979978
</ul>
980979
<time class="s-user-card--time">asked 38 minutes ago</time>
981980
</div>
@@ -988,21 +987,15 @@
988987

989988
<div class="s-post-summary">
990989
<div class="s-post-summary--stats">
991-
<div class="s-post-summary--stats-item is-review">
992-
{% icon "LockSm" %}
993-
In review
994-
</div>
995-
<div class="s-post-summary--stats-item">
996-
26 votes
997-
</div>
998-
<div class="s-post-summary--stats-item is-warm">
999-
2k views
990+
<div class="s-post-summary--stats-item is-closed">
991+
{% icon "NotInterestedSm" %}
992+
Closed
1000993
</div>
1001994
<div class="s-post-summary--stats-item">
1002-
1 comment
995+
0 votes
1003996
</div>
1004997
<div class="s-post-summary--stats-item">
1005-
1 min read
998+
12 views
1006999
</div>
10071000
</div>
10081001
<div class="s-post-summary--content">
@@ -1040,40 +1033,47 @@
10401033

10411034
<div class="s-post-summary">
10421035
<div class="s-post-summary--stats">
1043-
<div class="s-post-summary--stats-item is-rejected">
1044-
{% icon "NotInterestedSm" %}
1045-
Rejected
1036+
<div class="s-post-summary--stats-item is-archived">
1037+
{% icon "ArchiveSm" %}
1038+
Archived
10461039
</div>
10471040
<div class="s-post-summary--stats-item">
1048-
0 votes
1041+
-22 votes
1042+
</div>
1043+
<div class="s-post-summary--stats-item is-warm">
1044+
1k views
10491045
</div>
10501046
<div class="s-post-summary--stats-item">
1051-
12 views
1047+
5 comments
1048+
</div>
1049+
<div class="s-post-summary--stats-item">
1050+
1 min read
10521051
</div>
10531052
</div>
10541053
<div class="s-post-summary--content">
10551054
<div class="s-post-summary--content-type">
1056-
<a href="#" class="s-link s-link__grayscale">{% icon "DocumentAlt" %} How-to Guide</a>
1055+
<a href="#" class="s-link s-link__grayscale">{% icon "DocumentAlt" %} Announcement</a>
10571056
</div>
10581057
<a class="s-post-summary--content-title s-link">
1059-
How to make sql_mode empty on Cloud SQL
1058+
Faster Cloud Storage transfers using the gcloud command-line
10601059
</a>
10611060
<p class="s-post-summary--content-excerpt">
1062-
In Android apps that use Firebase Authentication, you can always get the user who is currently signed in with code like: FirebaseAuth auth = FirebaseAuth.getInstance(); FirebaseUser user = auth.get
1061+
We’re pleased to announce gcloud storage, a new set of Cloud Storage commands in Cloud SDK that includes a new approach to parallelization that can accelerate both small and large data migrations.
10631062
</p>
10641063
<div class="s-post-summary--meta">
10651064
<div class="s-post-summary--meta-tags">
1066-
<a class="s-tag" href="#">firebase-realtime-database</a>
1067-
<a class="s-tag" href="#">firebase-authentication</a>
1065+
<a class="s-tag" href="#">google-cloud-storage</a>
1066+
<a class="s-tag" href="#">gcloud</a>
1067+
<a class="s-tag" href="#">gsutil</a>
10681068
</div>
10691069

10701070
<div class="s-user-card s-user-card__minimal">
10711071
<a href="#" class="s-avatar s-user-card--avatar">
10721072
<img class="s-avatar--image" src="{{ "/assets/img/placeholder.svg" | relative_url }}" />
10731073
</a>
1074-
<a href="#" class="s-user-card--link">Frank van Puffelen</a>
1074+
<a href="#" class="s-user-card--link">thomasmaclean</a>
10751075
<ul class="s-user-card--awards">
1076-
<li class="s-user-card--rep">464.3k</li>
1076+
<li class="s-user-card--rep">165</li>
10771077
</ul>
10781078
<time class="s-user-card--time">asked 38 minutes ago</time>
10791079
</div>

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

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@
6969
white-space: nowrap;
7070
border: 1px solid transparent;
7171

72+
.svg-icon {
73+
vertical-align: text-bottom;
74+
}
75+
7276
&.has-answers,
7377
&.has-bounty,
7478
&.is-watched,
@@ -77,7 +81,8 @@
7781
&.is-published,
7882
&.is-draft,
7983
&.is-review,
80-
&.is-rejected {
84+
&.is-closed,
85+
&.is-archived {
8186
border-radius: @br-sm;
8287
padding: @su2 @su4;
8388
}
@@ -119,18 +124,27 @@
119124
}
120125

121126
&.is-draft {
122-
color: var(--white);
123-
background-color: var(--blue-700);
127+
color: var(--blue-900);
128+
background-color: var(--blue-100);
129+
border-color: var(--blue-600);
124130
}
125131

126132
&.is-review {
127-
color: var(--white);
128-
background-color: var(--yellow-700);
133+
color: var(--yellow-900);
134+
background-color: var(--yellow-100);
135+
border-color: var(--yellow-600);
129136
}
130137

131-
&.is-rejected {
132-
color: var(--white);
133-
background-color: var(--red-600);
138+
&.is-closed {
139+
color: var(--red-900);
140+
background-color: var(--red-100);
141+
border-color: var(--red-600);
142+
}
143+
144+
&.is-archived {
145+
color: var(--black-900);
146+
background-color: var(--black-100);
147+
border-color: var(--black-600);
134148
}
135149
}
136150

0 commit comments

Comments
 (0)