Skip to content

Commit dd20e70

Browse files
benhalpernbenhalpern
authored
Simplify article show page reactions (forem#2827)
* Simplify article show page reactions * Clean up styling and adjust zen mode logic * Remove unused variables * Update app/views/articles/_actions.html.erb Co-Authored-By: Nick Taylor <[email protected]> * Small style mods * Slight padding change * Finalize new show page button design
1 parent 166e26b commit dd20e70

File tree

18 files changed

+118
-124
lines changed

18 files changed

+118
-124
lines changed

‎app/assets/javascripts/initializers/initializeArticleReactions.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,6 @@ function initializeArticleReactions() {
7979
behavior: 'instant',
8080
block: 'start',
8181
});
82-
setTimeout(function(){
83-
e.target.blur();
84-
},50)
8582
};
8683
}
8784
}, 3)

‎app/assets/javascripts/initializers/initializeCommentDropdown.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
function initializeCommentDropdown() {
33
const announcer = document.getElementById('article-copy-link-announcer');
44

5+
56
function isIOSDevice() {
67
return (
78
navigator.userAgent.match(/iPhone/i) ||

‎app/assets/javascripts/initializers/initializeCommentsPage.js.erb

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ function initializeCommentsPage() {
6666
var butt = butts[i];
6767
butt.onclick = function (event) {
6868
var thisButt = this;
69-
thisButt.blur();
7069
event.preventDefault();
7170
sendHapticMessage('medium');
7271
var userStatus = document.getElementsByTagName('body')[0].getAttribute('data-user-status');

‎app/assets/javascripts/initializers/initializeTouchDevice.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11

22
function initializeTouchDevice() {
33
var isTouchDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|DEV-Native-ios/i.test(navigator.userAgent);
4-
if (navigator.userAgent === 'DEV-Native-ios') {
5-
document.getElementsByTagName("body")[0].classList.add("dev-ios-native-body");
6-
}
74
setTimeout(function(){
85
removeShowingMenu();
96
if (isTouchDevice) {

‎app/assets/stylesheets/article-show.scss

Lines changed: 85 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ article {
9898
theme-container-background,
9999
white
100100
);
101-
margin: 68px auto 20px;
101+
margin: 66px auto 20px;
102102
text-align: left;
103103
@include themeable(
104104
box-shadow,
@@ -922,10 +922,9 @@ article {
922922
margin-right: -1px;
923923
width: calc(55px + 1.1vw);
924924
top: 0%;
925-
padding: calc(10px + 5.5%) 0px;
925+
padding: calc(11px + 6%) 0px;
926926
bottom: 5%;
927927
left: calc(50% - 672px);
928-
border-radius: 20px;
929928
background: transparent;
930929
border: 0;
931930
box-shadow: none;
@@ -938,31 +937,23 @@ article {
938937

939938
button,
940939
a {
941-
margin-bottom: 10px !important;
942940
display: block !important;
943941
width: 100% !important;
944-
padding: 6px 0px !important;
942+
padding: 7px 0px !important;
945943
margin-left: 0px !important;
946944
margin-right: 0px !important;
947-
border-radius: 100px !important;
948-
border: 0 !important;
945+
border: 0px !important;
949946
transition-delay: 0.1s;
950947

951948
&.user-animated {
952949
animation: wide-reaction-animation 0.25s !important;
950+
img {
951+
animation: image-reaction-animation 0.25s !important;
952+
}
953953
}
954-
955-
&:not(.user-activated) {
956-
@include themeable-important(
957-
background,
958-
theme-container-background,
959-
darken($light-gray, 1%)
960-
);
961-
}
962-
963-
&:focus {
954+
&:focus-visible {
964955
outline: 0;
965-
box-shadow: 0 0 7px $medium-gray !important;
956+
box-shadow: 0px 0px 4px $medium-gray !important;
966957
}
967958
}
968959

@@ -976,9 +967,8 @@ article {
976967
}
977968

978969
.dropdown-content {
979-
left: 150px !important;
980-
bottom: 0 !important;
981-
970+
left: 80px !important;
971+
bottom: 0px !important;
982972
a {
983973
background: transparent !important;
984974
padding-left: 10px !important;
@@ -991,40 +981,55 @@ article {
991981
a {
992982
font-size: 0.70em !important;
993983
}
984+
button {
985+
padding: 9px 0px !important;
986+
}
987+
.dropdown-content {
988+
left: 100px !important;
989+
}
994990
}
995991
@media screen and (min-width: 1530px) {
996992
width: 156px;
997-
left: calc(50% - 756px);
993+
left: calc(50% - 750px);
998994
button,
999995
a {
1000996
width: 140px !important;
1001997
}
1002998
a {
1003999
font-size: 0.79em !important;
10041000
}
1001+
.dropdown-content {
1002+
left: 150px !important;
1003+
}
1004+
button {
1005+
padding: 11px 0px !important;
1006+
}
10051007
}
10061008
button {
1007-
@include themeable(
1008-
background,
1009-
theme-container-background,
1010-
transparent
1011-
);
1009+
background: transparent;
10121010
margin: 0px calc(0.22vw + 2px);
1013-
padding: 3px calc(0.88vw + 8px);
1014-
border-radius: 100px;
1015-
border: 2px solid darken($light-gray, 20%);
1011+
padding: 3px calc(0.88vw + 6px);
1012+
padding-right: calc(0.88vw + 10px);
1013+
border: 0px;
10161014
// background: linear-gradient(60deg, #f4d2d2, #ffffff);
1017-
font-family: $helvetica-condensed;
1015+
font-weight: bold;
10181016
font-stretch: condensed;
10191017

10201018
img {
10211019
height: 23px;
10221020
width: 23px;
1023-
transition: -webkit-filter 0.2s, opacity 0.2s, background-color 0.2s;
1024-
1021+
transition: -webkit-filter 0.2s, opacity 0.2s;
1022+
padding: 4px;
1023+
border-radius: 100px;
1024+
transition: box-shadow 0.18s;
1025+
@include themeable(
1026+
background,
1027+
theme-container-accent-background,
1028+
darken($light-gray, 3%)
1029+
);
10251030
@media screen and (min-width: 500px) {
1026-
height: 28px;
1027-
width: 28px;
1031+
height: 26px;
1032+
width: 26px;
10281033
}
10291034
@media screen and (min-width: 1365px) {
10301035
height: 19px;
@@ -1037,47 +1042,50 @@ article {
10371042
@media screen and (min-width: 1530px) {
10381043
height: 28px;
10391044
width: 28px;
1045+
padding: 7px;
1046+
}
1047+
}
1048+
&:hover {
1049+
img {
1050+
box-shadow: 0px 0px 0px 2px var(--theme-container-accent-background, $purple);
10401051
}
10411052
}
10421053

10431054
.reaction-number {
10441055
display: inline-block;
1045-
vertical-align: 5px;
1046-
margin-left: 4px;
1056+
vertical-align: 6px;
1057+
margin-left: 5px;
1058+
vertical-align: 10px;
10471059
@include themeable(
10481060
color,
10491061
theme-secondary-color,
10501062
$medium-gray
10511063
);
1052-
font-size: 14px;
1064+
font-size: 13px;
10531065
width: 27px;
10541066

10551067
@media screen and (min-width: 500px) {
10561068
width: 37px;
1057-
font-size: 18px;
1058-
vertical-align: 7px;
1059-
margin-left: 7px;
1069+
font-size: 16px;
1070+
vertical-align: 9px;
10601071
}
10611072
@media screen and (min-width: 1365px) {
1062-
font-size: 13px;
1063-
vertical-align: 4px;
1073+
font-size: 12px;
1074+
vertical-align: 9px;
1075+
margin-left: 1px;
10641076
width: 28px;
10651077
}
10661078
@media screen and (min-width: 1439px) {
10671079
font-size: 15px;
1068-
vertical-align: 5px;
1080+
vertical-align: 9px;
10691081
width: 37px;
1082+
margin-left: 7px;
10701083
}
10711084
@media screen and (min-width: 1530px) {
1072-
font-size: 18px;
1073-
vertical-align: 7px;
1085+
font-size: 16px;
1086+
vertical-align: 15px;
10741087
}
10751088
}
1076-
1077-
&:hover {
1078-
border: 2px solid #8ac;
1079-
}
1080-
10811089
&.activated {
10821090
img {
10831091
filter: none;
@@ -1086,28 +1094,32 @@ article {
10861094
}
10871095

10881096
&.user-activated {
1089-
border: 2px solid darken($bold-blue, 35%);
1090-
background: linear-gradient(60deg, #f4d2d2, #efb6b6);
1091-
10921097
img {
10931098
filter: none;
10941099
opacity: 1;
1100+
box-shadow: 0px 0px 0px 2px #ffc0d3;
1101+
background: linear-gradient(60deg, #ffc0d3, #ff90b3);
10951102
}
10961103

10971104
&.unicorn-reaction-button {
1098-
background: linear-gradient(60deg, #d6e5fc, #c9deff);
1105+
img {
1106+
box-shadow: 0px 0px 0px 2px #d0e3ff;
1107+
background: linear-gradient(60deg, #d0e3ff, #adccff);
1108+
}
10991109
}
11001110

11011111
&.readinglist-reaction-button {
1102-
background: linear-gradient(60deg, #d2cdf2, #beb8ef);
1103-
}
1104-
1105-
.reaction-number {
1106-
color: darken($bold-blue, 40%);
1112+
img {
1113+
box-shadow: 0px 0px 0px 2px #cfc9f3;
1114+
background: linear-gradient(60deg, #cfc9f3, #b0a7f0);
1115+
}
11071116
}
11081117

11091118
&.user-animated {
11101119
animation: reaction 0.25s;
1120+
img {
1121+
animation: image-reaction-animation 0.25s !important;
1122+
}
11111123
}
11121124
}
11131125
}
@@ -1118,7 +1130,6 @@ article {
11181130
width: 40px;
11191131

11201132
button {
1121-
border: 2px solid transparent;
11221133
min-width: 38px;
11231134
opacity: 0.7;
11241135

@@ -1130,7 +1141,9 @@ article {
11301141
vertical-align: -2px;
11311142
}
11321143
}
1133-
1144+
img {
1145+
background: transparent !important;
1146+
}
11341147
.dropdown-content {
11351148
display: none;
11361149
position: fixed;
@@ -1142,7 +1155,6 @@ article {
11421155
font-size: 1em;
11431156
text-align: left;
11441157
min-width: 300px;
1145-
border-top: 2px solid $light-medium-gray;
11461158
padding-bottom: 15px;
11471159
padding-top: 15px;
11481160

@@ -1200,7 +1212,6 @@ article {
12001212
font-weight: bold;
12011213
font-size: calc(0.8em + 0.1vw);
12021214
vertical-align: calc(7px - 0.07vw);
1203-
border: 2px solid darken($light-gray, 20%);
12041215
font-family: $helvetica-condensed;
12051216
font-stretch: condensed;
12061217
padding: 4px 0.88vw;
@@ -1226,7 +1237,6 @@ article {
12261237
.article-actions-tweet-button {
12271238
padding: 2px 0 2px !important;
12281239
border-radius: 3px;
1229-
border: 2px solid darken($light-gray, 20%);
12301240
margin-right: 0.15vw;
12311241
margin-left: calc(0.2vw + 11px);
12321242
vertical-align: calc(3px - 0.07vw);
@@ -1501,3 +1511,13 @@ article {
15011511
100% {
15021512
}
15031513
}
1514+
1515+
@keyframes image-reaction-animation {
1516+
0% {
1517+
}
1518+
50% {
1519+
transform: rotate(10deg);
1520+
}
1521+
100% {
1522+
}
1523+
}

‎app/assets/stylesheets/comments.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -420,7 +420,7 @@ a.header-link {
420420
outline: 0;
421421
box-shadow: 0px 0px 0px $light-medium-gray !important;
422422
}
423-
&:focus {
423+
&:focus-visible {
424424
outline: 0;
425425
&:not(:active) {
426426
box-shadow: 0px 0px 6px $light-medium-gray !important;

‎app/assets/stylesheets/more-articles.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,12 @@
113113
margin: 15px 20px 0px;
114114
}
115115
.content-classification-text {
116-
background: $light-gray;
117116
display: inline-block;
118117
padding: 3px 25px;
119-
color: $dark-gray;
118+
border-radius: 3px;
119+
@include themeable(background, theme-container-accent-background, $light-gray);
120+
@include themeable(color, theme-color, $black);
121+
120122
}
121123
}
122124
.main-content-display {

‎app/assets/stylesheets/scaffolds.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ body {
1818
}
1919
}
2020

21+
*:focus:not(.focus-visible) {
22+
outline: none;
23+
}
24+
2125
.ptr--ptr {
2226
margin-top: 70px;
2327
margin-bottom: -70px;
@@ -30,6 +34,12 @@ body {
3034
height: 90vh;
3135
}
3236

37+
.zen-mode {
38+
.top-bar, .primary-sticky-nav, .article-actions {
39+
display: none !important;
40+
}
41+
}
42+
3343
.universal-page-content-wrapper {
3444
overflow: hidden;
3545
min-height: 88vh;

0 commit comments

Comments
 (0)