Simplify article show page reactions (#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 <nick@iamdeveloper.com> * Small style mods * Slight padding change * Finalize new show page button design
This commit is contained in:
Ben Halpern
GitHub
parent
166e26bdf9
commit
dd20e70f12
18 changed files with 118 additions and 124 deletions
|
|
@ -79,9 +79,6 @@ function initializeArticleReactions() {
|
|||
behavior: 'instant',
|
||||
block: 'start',
|
||||
});
|
||||
setTimeout(function(){
|
||||
e.target.blur();
|
||||
},50)
|
||||
};
|
||||
}
|
||||
}, 3)
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
function initializeCommentDropdown() {
|
||||
const announcer = document.getElementById('article-copy-link-announcer');
|
||||
|
||||
|
||||
function isIOSDevice() {
|
||||
return (
|
||||
navigator.userAgent.match(/iPhone/i) ||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,6 @@ function initializeCommentsPage() {
|
|||
var butt = butts[i];
|
||||
butt.onclick = function (event) {
|
||||
var thisButt = this;
|
||||
thisButt.blur();
|
||||
event.preventDefault();
|
||||
sendHapticMessage('medium');
|
||||
var userStatus = document.getElementsByTagName('body')[0].getAttribute('data-user-status');
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
|
||||
function initializeTouchDevice() {
|
||||
var isTouchDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|DEV-Native-ios/i.test(navigator.userAgent);
|
||||
if (navigator.userAgent === 'DEV-Native-ios') {
|
||||
document.getElementsByTagName("body")[0].classList.add("dev-ios-native-body");
|
||||
}
|
||||
setTimeout(function(){
|
||||
removeShowingMenu();
|
||||
if (isTouchDevice) {
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ article {
|
|||
theme-container-background,
|
||||
white
|
||||
);
|
||||
margin: 68px auto 20px;
|
||||
margin: 66px auto 20px;
|
||||
text-align: left;
|
||||
@include themeable(
|
||||
box-shadow,
|
||||
|
|
@ -922,10 +922,9 @@ article {
|
|||
margin-right: -1px;
|
||||
width: calc(55px + 1.1vw);
|
||||
top: 0%;
|
||||
padding: calc(10px + 5.5%) 0px;
|
||||
padding: calc(11px + 6%) 0px;
|
||||
bottom: 5%;
|
||||
left: calc(50% - 672px);
|
||||
border-radius: 20px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
|
@ -938,31 +937,23 @@ article {
|
|||
|
||||
button,
|
||||
a {
|
||||
margin-bottom: 10px !important;
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
padding: 6px 0px !important;
|
||||
padding: 7px 0px !important;
|
||||
margin-left: 0px !important;
|
||||
margin-right: 0px !important;
|
||||
border-radius: 100px !important;
|
||||
border: 0 !important;
|
||||
border: 0px !important;
|
||||
transition-delay: 0.1s;
|
||||
|
||||
&.user-animated {
|
||||
animation: wide-reaction-animation 0.25s !important;
|
||||
img {
|
||||
animation: image-reaction-animation 0.25s !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.user-activated) {
|
||||
@include themeable-important(
|
||||
background,
|
||||
theme-container-background,
|
||||
darken($light-gray, 1%)
|
||||
);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 7px $medium-gray !important;
|
||||
box-shadow: 0px 0px 4px $medium-gray !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -976,9 +967,8 @@ article {
|
|||
}
|
||||
|
||||
.dropdown-content {
|
||||
left: 150px !important;
|
||||
bottom: 0 !important;
|
||||
|
||||
left: 80px !important;
|
||||
bottom: 0px !important;
|
||||
a {
|
||||
background: transparent !important;
|
||||
padding-left: 10px !important;
|
||||
|
|
@ -991,10 +981,16 @@ article {
|
|||
a {
|
||||
font-size: 0.70em !important;
|
||||
}
|
||||
button {
|
||||
padding: 9px 0px !important;
|
||||
}
|
||||
.dropdown-content {
|
||||
left: 100px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1530px) {
|
||||
width: 156px;
|
||||
left: calc(50% - 756px);
|
||||
left: calc(50% - 750px);
|
||||
button,
|
||||
a {
|
||||
width: 140px !important;
|
||||
|
|
@ -1002,29 +998,38 @@ article {
|
|||
a {
|
||||
font-size: 0.79em !important;
|
||||
}
|
||||
.dropdown-content {
|
||||
left: 150px !important;
|
||||
}
|
||||
button {
|
||||
padding: 11px 0px !important;
|
||||
}
|
||||
}
|
||||
button {
|
||||
@include themeable(
|
||||
background,
|
||||
theme-container-background,
|
||||
transparent
|
||||
);
|
||||
background: transparent;
|
||||
margin: 0px calc(0.22vw + 2px);
|
||||
padding: 3px calc(0.88vw + 8px);
|
||||
border-radius: 100px;
|
||||
border: 2px solid darken($light-gray, 20%);
|
||||
padding: 3px calc(0.88vw + 6px);
|
||||
padding-right: calc(0.88vw + 10px);
|
||||
border: 0px;
|
||||
// background: linear-gradient(60deg, #f4d2d2, #ffffff);
|
||||
font-family: $helvetica-condensed;
|
||||
font-weight: bold;
|
||||
font-stretch: condensed;
|
||||
|
||||
img {
|
||||
height: 23px;
|
||||
width: 23px;
|
||||
transition: -webkit-filter 0.2s, opacity 0.2s, background-color 0.2s;
|
||||
|
||||
transition: -webkit-filter 0.2s, opacity 0.2s;
|
||||
padding: 4px;
|
||||
border-radius: 100px;
|
||||
transition: box-shadow 0.18s;
|
||||
@include themeable(
|
||||
background,
|
||||
theme-container-accent-background,
|
||||
darken($light-gray, 3%)
|
||||
);
|
||||
@media screen and (min-width: 500px) {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
}
|
||||
@media screen and (min-width: 1365px) {
|
||||
height: 19px;
|
||||
|
|
@ -1037,47 +1042,50 @@ article {
|
|||
@media screen and (min-width: 1530px) {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
img {
|
||||
box-shadow: 0px 0px 0px 2px var(--theme-container-accent-background, $purple);
|
||||
}
|
||||
}
|
||||
|
||||
.reaction-number {
|
||||
display: inline-block;
|
||||
vertical-align: 5px;
|
||||
margin-left: 4px;
|
||||
vertical-align: 6px;
|
||||
margin-left: 5px;
|
||||
vertical-align: 10px;
|
||||
@include themeable(
|
||||
color,
|
||||
theme-secondary-color,
|
||||
$medium-gray
|
||||
);
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
width: 27px;
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
width: 37px;
|
||||
font-size: 18px;
|
||||
vertical-align: 7px;
|
||||
margin-left: 7px;
|
||||
font-size: 16px;
|
||||
vertical-align: 9px;
|
||||
}
|
||||
@media screen and (min-width: 1365px) {
|
||||
font-size: 13px;
|
||||
vertical-align: 4px;
|
||||
font-size: 12px;
|
||||
vertical-align: 9px;
|
||||
margin-left: 1px;
|
||||
width: 28px;
|
||||
}
|
||||
@media screen and (min-width: 1439px) {
|
||||
font-size: 15px;
|
||||
vertical-align: 5px;
|
||||
vertical-align: 9px;
|
||||
width: 37px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
@media screen and (min-width: 1530px) {
|
||||
font-size: 18px;
|
||||
vertical-align: 7px;
|
||||
font-size: 16px;
|
||||
vertical-align: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 2px solid #8ac;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
img {
|
||||
filter: none;
|
||||
|
|
@ -1086,28 +1094,32 @@ article {
|
|||
}
|
||||
|
||||
&.user-activated {
|
||||
border: 2px solid darken($bold-blue, 35%);
|
||||
background: linear-gradient(60deg, #f4d2d2, #efb6b6);
|
||||
|
||||
img {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
box-shadow: 0px 0px 0px 2px #ffc0d3;
|
||||
background: linear-gradient(60deg, #ffc0d3, #ff90b3);
|
||||
}
|
||||
|
||||
&.unicorn-reaction-button {
|
||||
background: linear-gradient(60deg, #d6e5fc, #c9deff);
|
||||
img {
|
||||
box-shadow: 0px 0px 0px 2px #d0e3ff;
|
||||
background: linear-gradient(60deg, #d0e3ff, #adccff);
|
||||
}
|
||||
}
|
||||
|
||||
&.readinglist-reaction-button {
|
||||
background: linear-gradient(60deg, #d2cdf2, #beb8ef);
|
||||
}
|
||||
|
||||
.reaction-number {
|
||||
color: darken($bold-blue, 40%);
|
||||
img {
|
||||
box-shadow: 0px 0px 0px 2px #cfc9f3;
|
||||
background: linear-gradient(60deg, #cfc9f3, #b0a7f0);
|
||||
}
|
||||
}
|
||||
|
||||
&.user-animated {
|
||||
animation: reaction 0.25s;
|
||||
img {
|
||||
animation: image-reaction-animation 0.25s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1118,7 +1130,6 @@ article {
|
|||
width: 40px;
|
||||
|
||||
button {
|
||||
border: 2px solid transparent;
|
||||
min-width: 38px;
|
||||
opacity: 0.7;
|
||||
|
||||
|
|
@ -1130,7 +1141,9 @@ article {
|
|||
vertical-align: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
background: transparent !important;
|
||||
}
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: fixed;
|
||||
|
|
@ -1142,7 +1155,6 @@ article {
|
|||
font-size: 1em;
|
||||
text-align: left;
|
||||
min-width: 300px;
|
||||
border-top: 2px solid $light-medium-gray;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 15px;
|
||||
|
||||
|
|
@ -1200,7 +1212,6 @@ article {
|
|||
font-weight: bold;
|
||||
font-size: calc(0.8em + 0.1vw);
|
||||
vertical-align: calc(7px - 0.07vw);
|
||||
border: 2px solid darken($light-gray, 20%);
|
||||
font-family: $helvetica-condensed;
|
||||
font-stretch: condensed;
|
||||
padding: 4px 0.88vw;
|
||||
|
|
@ -1226,7 +1237,6 @@ article {
|
|||
.article-actions-tweet-button {
|
||||
padding: 2px 0 2px !important;
|
||||
border-radius: 3px;
|
||||
border: 2px solid darken($light-gray, 20%);
|
||||
margin-right: 0.15vw;
|
||||
margin-left: calc(0.2vw + 11px);
|
||||
vertical-align: calc(3px - 0.07vw);
|
||||
|
|
@ -1501,3 +1511,13 @@ article {
|
|||
100% {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes image-reaction-animation {
|
||||
0% {
|
||||
}
|
||||
50% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
|
|
@ -420,7 +420,7 @@ a.header-link {
|
|||
outline: 0;
|
||||
box-shadow: 0px 0px 0px $light-medium-gray !important;
|
||||
}
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
&:not(:active) {
|
||||
box-shadow: 0px 0px 6px $light-medium-gray !important;
|
||||
|
|
|
|||
|
|
@ -113,10 +113,12 @@
|
|||
margin: 15px 20px 0px;
|
||||
}
|
||||
.content-classification-text {
|
||||
background: $light-gray;
|
||||
display: inline-block;
|
||||
padding: 3px 25px;
|
||||
color: $dark-gray;
|
||||
border-radius: 3px;
|
||||
@include themeable(background, theme-container-accent-background, $light-gray);
|
||||
@include themeable(color, theme-color, $black);
|
||||
|
||||
}
|
||||
}
|
||||
.main-content-display {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
*:focus:not(.focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ptr--ptr {
|
||||
margin-top: 70px;
|
||||
margin-bottom: -70px;
|
||||
|
|
@ -30,6 +34,12 @@ body {
|
|||
height: 90vh;
|
||||
}
|
||||
|
||||
.zen-mode {
|
||||
.top-bar, .primary-sticky-nav, .article-actions {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.universal-page-content-wrapper {
|
||||
overflow: hidden;
|
||||
min-height: 88vh;
|
||||
|
|
|
|||
|
|
@ -120,25 +120,6 @@
|
|||
);
|
||||
width: 262px;
|
||||
border-radius: 3px;
|
||||
&.sticky-join-cta{
|
||||
margin-top: 12px;
|
||||
padding: 16px 13px;
|
||||
background: lighten($yellow, 16%);
|
||||
border: 1px solid darken($yellow, 15%);
|
||||
box-shadow: 5px 6px 0px darken($yellow, 15%);
|
||||
img{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-left: 3px;
|
||||
margin-right: 2px;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
&:hover{
|
||||
background: lighten($yellow, 12%);
|
||||
border: 1px solid darken($yellow, 12%);
|
||||
box-shadow: 5px 6px 0px darken($yellow, 12%);
|
||||
}
|
||||
}
|
||||
.primary-sticky-nav-element-details{
|
||||
margin-top:9px;
|
||||
font-size: 0.8em;
|
||||
|
|
@ -148,10 +129,6 @@
|
|||
$medium-gray
|
||||
);
|
||||
}
|
||||
&:hover{
|
||||
border: 1px solid darken($light-medium-gray, 17%);
|
||||
box-shadow: 3px 4px 0px darken($light-medium-gray, 17%);
|
||||
}
|
||||
}
|
||||
.user-metadata-details {
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -106,9 +106,6 @@ export default class ArticleForm extends Component {
|
|||
helpShowing: !this.state.helpShowing,
|
||||
previewShowing: false,
|
||||
});
|
||||
setTimeout(function(){
|
||||
e.target.blur();
|
||||
},3)
|
||||
};
|
||||
|
||||
fetchPreview = e => {
|
||||
|
|
@ -125,9 +122,6 @@ export default class ArticleForm extends Component {
|
|||
this.failedPreview,
|
||||
);
|
||||
}
|
||||
setTimeout(function(){
|
||||
e.target.blur();
|
||||
},3)
|
||||
};
|
||||
|
||||
toggleImageManagement = e => {
|
||||
|
|
@ -155,9 +149,6 @@ export default class ArticleForm extends Component {
|
|||
toggleOrgPosting = e => {
|
||||
e.preventDefault();
|
||||
this.setState({ postUnderOrg: !this.state.postUnderOrg });
|
||||
setTimeout(function(){
|
||||
e.target.blur();
|
||||
},3)
|
||||
};
|
||||
|
||||
failedPreview = response => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { h, render } from 'preact';
|
||||
import { Search } from '../src/components/Search';
|
||||
import 'focus-visible'
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const root = document.getElementById('nav-search-form-root');
|
||||
|
|
|
|||
|
|
@ -69,25 +69,14 @@ export class Search extends Component {
|
|||
) {
|
||||
return;
|
||||
}
|
||||
const topBar = document.getElementById('top-bar');
|
||||
const stickySideBar = document.getElementById('article-show-primary-sticky-nav');
|
||||
const actionBar = document.getElementById('article-reaction-actions')
|
||||
if (event.which === GLOBAL_SEARCH_KEY_CODE) {
|
||||
topBar.classList.remove('hidden');
|
||||
stickySideBar.classList.remove('hidden');
|
||||
actionBar.classList.remove('hidden');
|
||||
document.getElementsByTagName('body')[0].classList.remove('zen-mode')
|
||||
event.preventDefault();
|
||||
searchBox.focus();
|
||||
searchBox.select();
|
||||
} else if (event.which === GLOBAL_MINIMIZE_KEY_CODE) {
|
||||
event.preventDefault();
|
||||
topBar.classList.toggle('hidden');
|
||||
if (stickySideBar) {
|
||||
stickySideBar.classList.toggle('hidden');
|
||||
}
|
||||
if (actionBar) {
|
||||
actionBar.classList.toggle('hidden');
|
||||
}
|
||||
document.getElementsByTagName('body')[0].classList.toggle('zen-mode')
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ class RandomGif
|
|||
"3o7qDRd1DlF7P2TP3O" => { aspect_ratio: 0.517 },
|
||||
"26h0qt6UOumsbJkyI" => { aspect_ratio: 0.442 },
|
||||
"l0K4glBiv82lZ0Zuo" => { aspect_ratio: 0.563 },
|
||||
"3o7qDM7FZJG4wmf8ZO" => { aspect_ratio: 0.81 },
|
||||
"7EcgJbeY0yCRy" => { aspect_ratio: 0.750 },
|
||||
"Gf3fU0qPtI6uk" => { aspect_ratio: 0.750 }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@
|
|||
</button>
|
||||
<% end %>
|
||||
<a class="article-actions-tweet-button"
|
||||
id="article-actions-tweet-button"
|
||||
rel="noopener"
|
||||
target='_blank'
|
||||
href='https://twitter.com/intent/tweet?text="<%= u @article.title.strip %>" by <%= @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %> %23DEVcommunity https://dev.to<%= @article.path %>'>
|
||||
<img src="<%= asset_path("twitter.svg") %>" alt="twitter logo">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<style>
|
||||
.primary-sticky-nav-author, .primary-sticky-nav-author-element {
|
||||
border: 1px solid <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
|
||||
box-shadow: 2px 2px 0px <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
|
||||
box-shadow: 1px 1px 0px <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
|
||||
}
|
||||
|
||||
.primary-sticky-nav-author button {
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
<% if @variant_number.to_i == 1 %>
|
||||
<% cache("html-variant-sidebar#{rand(50)}", expires_in: 8.hours) do %>
|
||||
<% cache("html-variant-sidebar#{rand(150)}", expires_in: 8.hours) do %>
|
||||
<% @html_variant = HtmlVariant.find_for_test(@article.cached_tag_list_array) %>
|
||||
<% if @html_variant %>
|
||||
<div class="html-variant-wrapper" id="html-variant-article-show-sidebar" data-variant-id="<%= @html_variant.id %>">
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
<div class="primary-sticky-nav-element-wrapper">
|
||||
<% if index == 0 %>
|
||||
<div class="primary-sticky-nav-title">
|
||||
<img src="<%= asset_path "emoji/apple-fire.png" %>" alt="Fire emoji" loading="lazy"> Trending on <a href="https://dev.to">dev.to</a>
|
||||
<img src="<%= asset_path "emoji/apple-fire.png" %>" alt="Fire emoji" loading="lazy"> Trending on <a href="<%= ApplicationConfig["APP_PROTOCOL"] %><%= ApplicationConfig["APP_DOMAIN"] %>"><%= ApplicationConfig["COMMUNITY_NAME"] %></a>
|
||||
</div>
|
||||
<% end %>
|
||||
<a class="primary-sticky-nav-element" href="<%= article.path %>">
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@
|
|||
--theme-social-icon-invert: invert(0);\
|
||||
--theme-prime-option-border-color: rgba(255, 255, 255, 0.55)</style>'
|
||||
}
|
||||
if (navigator.userAgent === 'DEV-Native-ios') {
|
||||
document.getElementsByTagName("body")[0].classList.add("dev-ios-native-body");
|
||||
}
|
||||
} catch(e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@
|
|||
"babel-preset-preact": "^1.1.0",
|
||||
"chart.js": "^2.8.0",
|
||||
"codemirror": "^5.46.0",
|
||||
"focus-visible": "^4.1.5",
|
||||
"clipboard-copy-element": "^1.0.0",
|
||||
"intersection-observer": "^0.7.0",
|
||||
"linkstate": "^1.1.1",
|
||||
|
|
|
|||
|
|
@ -4783,6 +4783,11 @@ focus-lock@^0.6.0:
|
|||
resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.2.tgz#d8ac9dbc46250779789c3e6f43d978c7dfa59dcd"
|
||||
integrity sha512-Wuq6TSOgsGQmzbpvinl1TcEw4BAUhD9T06myl5HvaBlO0geAz9ABtqBIqPkkNyO3AgPzEDazetL5hSRgj+2iqQ==
|
||||
|
||||
focus-visible@^4.1.5:
|
||||
version "4.1.5"
|
||||
resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-4.1.5.tgz#50b44e2e84c24b831ceca3cce84d57c2b311c855"
|
||||
integrity sha512-yo/njtk/BB4Z2euzaZe3CZrg4u5s5uEi7ZwbHBJS2quHx51N0mmcx9nTIiImUGlgy+vf26d0CcQluahBBBL/Fw==
|
||||
|
||||
follow-redirects@^1.0.0:
|
||||
version "1.6.1"
|
||||
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.6.1.tgz#514973c44b5757368bad8bddfe52f81f015c94cb"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue