Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reactions option not styled #799

Closed
Ash258 opened this issue Dec 10, 2018 · 4 comments
Closed

Reactions option not styled #799

Ash258 opened this issue Dec 10, 2018 · 4 comments

Comments

@Ash258
Copy link

Ash258 commented Dec 10, 2018 •
edited
Loading

Reactions option is not styled when there more reactions, everything work fine for few reactions.

This issue contains both cases: microsoft/vscode#52629

  • Browser: Chrome 71.0.3578.80
  • Operating System: Windows 10 1803 17134.407
  • Stylus: Usercss version 1.20.87

non styled

<div class="comment-reactions-options rgh-reactions rgh-reactions-near-limit">
          <button class="btn-link reaction-summary-item tooltipped tooltipped-se tooltipped-multiline " name="input[content]" type="submit" value="THUMBS_UP react" aria-label="TomasHubelbauer, lihua06, johndeng, crper, Guema, IllusionMH, DesWurstes, onlyfor2, jens1o, nealot, and 31 more reacted with thumbs up emoji">
            <g-emoji alias="+1" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f44d.png" class="emoji mr-1" title=":+1:">👍</g-emoji>
            41
          <a href="/TomasHubelbauer"><img src="/TomasHubelbauer.png?size=20"></a><a href="/lihua06"><img src="/lihua06.png?size=20"></a><a href="/johndeng"><img src="/johndeng.png?size=20"></a><a href="/crper"><img src="/crper.png?size=20"></a><a href="/Guema"><img src="/Guema.png?size=20"></a><a href="/IllusionMH"><img src="/IllusionMH.png?size=20"></a><a href="/DesWurstes"><img src="/DesWurstes.png?size=20"></a><a href="/onlyfor2"><img src="/onlyfor2.png?size=20"></a><a href="/jens1o"><img src="/jens1o.png?size=20"></a></button>
          <button class="btn-link reaction-summary-item tooltipped tooltipped-s tooltipped-multiline " name="input[content]" type="submit" value="HOORAY react" aria-label="crper, Guema, DesWurstes, nealot, mikaelsouza, BytewaveMLP, xiaotan0305, pwnall, DRSDavidSoft, FilipIlievski, and 2 more reacted with hooray emoji">
            <g-emoji alias="tada" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f389.png" class="emoji mr-1" title=":tada:">🎉</g-emoji>
            12
          <a href="/crper"><img src="/crper.png?size=20"></a><a href="/Guema"><img src="/Guema.png?size=20"></a><a href="/DesWurstes"><img src="/DesWurstes.png?size=20"></a><a href="/nealot"><img src="/nealot.png?size=20"></a><a href="/mikaelsouza"><img src="/mikaelsouza.png?size=20"></a><a href="/BytewaveMLP"><img src="/BytewaveMLP.png?size=20"></a><a href="/xiaotan0305"><img src="/xiaotan0305.png?size=20"></a><a href="/pwnall"><img src="/pwnall.png?size=20"></a><a href="/DRSDavidSoft"><img src="/DRSDavidSoft.png?size=20"></a></button>
          <button class="btn-link reaction-summary-item tooltipped tooltipped-s tooltipped-multiline " name="input[content]" type="submit" value="HEART react" aria-label="nealot, dsonet, mikaelsouza, xiaotan0305, pwnall, devSoheilAlizadeh, ColCh, DRSDavidSoft, vianchen, FilipIlievski, and nancym reacted with heart emoji">
            <g-emoji alias="heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2764.png" class="emoji mr-1" title=":heart:">❤️</g-emoji>
            11
          <a href="/nealot"><img src="/nealot.png?size=20"></a><a href="/dsonet"><img src="/dsonet.png?size=20"></a><a href="/mikaelsouza"><img src="/mikaelsouza.png?size=20"></a><a href="/xiaotan0305"><img src="/xiaotan0305.png?size=20"></a><a href="/pwnall"><img src="/pwnall.png?size=20"></a><a href="/devSoheilAlizadeh"><img src="/devSoheilAlizadeh.png?size=20"></a><a href="/ColCh"><img src="/ColCh.png?size=20"></a><a href="/DRSDavidSoft"><img src="/DRSDavidSoft.png?size=20"></a><a href="/vianchen"><img src="/vianchen.png?size=20"></a></button>
      </div>


<div class="comment-reactions has-reactions js-reactions-container js-socket-channel js-updatable-content" data-channel="reaction:issue-comment:445791322" data-url="/_render_node/MDEyOklzc3VlQ29tbWVudDQ0NTc5MTMyMg==/comments/reactions">
    <!-- '"` --><!-- </textarea></xmp> --><form class="js-pick-reaction" action="/users/Microsoft/reactions" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="put"><input type="hidden" name="authenticity_token" value="YC5BfFTNnXvOSXfP1HzeExrZbVu/8HPwytRjeUXtOn/XKlfBAFItALnYIFfNDRCFQlpeEnFXkROBBi6TjjKp+Q==">
      <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDQ0NTc5MTMyMg==">

      <div class="comment-reactions-options rgh-reactions">
          <button class="btn-link reaction-summary-item tooltipped tooltipped-se tooltipped-multiline user-has-reacted" name="input[content]" type="submit" value="HOORAY unreact" aria-label="nealot and Ash258 reacted with hooray emoji">
            <g-emoji alias="tada" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f389.png" class="emoji mr-1" title=":tada:">🎉</g-emoji>
            2
          <a href="/nealot"><img src="/nealot.png?size=20"></a></button>
          <button class="btn-link reaction-summary-item tooltipped tooltipped-s tooltipped-multiline user-has-reacted" name="input[content]" type="submit" value="HEART unreact" aria-label="Ash258 reacted with heart emoji">
            <g-emoji alias="heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2764.png" class="emoji mr-1" title=":heart:">❤️</g-emoji>
            1
          </button>
      </div>
</form>      <details class="details-overlay details-reset position-relative float-left reaction-popover-container js-reaction-popover-container">
        <summary class="btn-link reaction-summary-item add-reaction-btn" aria-haspopup="true" aria-label="Add your reaction">
          <svg class="octicon octicon-plus-small add-reaction-plus-icon" viewBox="0 0 7 16" version="1.1" width="7" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 4H3v3H0v1h3v3h1V8h3V7H4V4z"></path></svg>
          <svg class="octicon octicon-smiley" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4.81 12.81a6.72 6.72 0 0 1-2.17 1.45c-.83.36-1.72.53-2.64.53-.92 0-1.81-.17-2.64-.53-.81-.34-1.55-.83-2.17-1.45a6.773 6.773 0 0 1-1.45-2.17A6.59 6.59 0 0 1 1.21 8c0-.92.17-1.81.53-2.64.34-.81.83-1.55 1.45-2.17.62-.62 1.36-1.11 2.17-1.45A6.59 6.59 0 0 1 8 1.21c.92 0 1.81.17 2.64.53.81.34 1.55.83 2.17 1.45.62.62 1.11 1.36 1.45 2.17.36.83.53 1.72.53 2.64 0 .92-.17 1.81-.53 2.64-.34.81-.83 1.55-1.45 2.17zM4 6.8v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2H5.2C4.53 8 4 7.47 4 6.8zm5 0v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2h-.59C9.53 8 9 7.47 9 6.8zm4 3.2c-.72 1.88-2.91 3-5 3s-4.28-1.13-5-3c-.14-.39.23-1 .66-1h8.59c.41 0 .89.61.75 1z"></path></svg>
        </summary>

OK

Everything work fine for less reactions.

less

<div class="dropdown-menu dropdown-menu-ne add-reaction-popover js-add-reaction-popover anim-scale-in">
  <!-- '"` --><!-- </textarea></xmp> --><form class="reaction-popover-form js-pick-reaction" action="/users/Microsoft/reactions" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="put"><input type="hidden" name="authenticity_token" value="l969KNCz+MF8KvW10LIvR30eAtciVvkfLexNHv+lN+Yg2quVhCxIugu7oi3Jw+HRJZ0xnuzxG/xmPgD0NHqkYA==">
    <p class="text-gray mx-2 my-1">
      <span class="js-reaction-description">Pick your reaction</span>
      <img alt="" width="16" height="16" class="loading-spinner" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif">
    </p>

    <div class="dropdown-divider"></div>

    <div class="add-reactions-options mx-1 mb-1">
      <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDQ0NTc5MTMyMg==">

        <button type="submit" class="btn-link add-reactions-options-item js-reaction-option-item" data-reaction-label="+1" name="input[content]" aria-label="React with thumbs up emoji" value="THUMBS_UP react">
          <g-emoji alias="+1" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f44d.png" class="emoji" title=":+1:">👍</g-emoji>
        </button>
        <button type="submit" class="btn-link add-reactions-options-item js-reaction-option-item" data-reaction-label="-1" name="input[content]" aria-label="React with thumbs down emoji" value="THUMBS_DOWN react">
          <g-emoji alias="-1" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f44e.png" class="emoji" title=":-1:">👎</g-emoji>
        </button>
        <button type="submit" class="btn-link add-reactions-options-item js-reaction-option-item" data-reaction-label="Laugh" name="input[content]" aria-label="React with laugh emoji" value="LAUGH react">
          <g-emoji alias="smile" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f604.png" class="emoji" title=":smile:">😄</g-emoji>
        </button>
        <button type="submit" class="btn-link add-reactions-options-item js-reaction-option-item" data-reaction-label="Hooray" name="input[content]" aria-label="Undo reaction with hooray emoji" value="HOORAY unreact">
          <g-emoji alias="tada" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f389.png" class="emoji" title=":tada:">🎉</g-emoji>
        </button>
        <button type="submit" class="btn-link add-reactions-options-item js-reaction-option-item" data-reaction-label="Confused" name="input[content]" aria-label="React with confused emoji" value="CONFUSED react">
          <g-emoji alias="thinking_face" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f615.png" class="emoji" title=":thinking_face:">😕</g-emoji>
        </button>
        <button type="submit" class="btn-link add-reactions-options-item js-reaction-option-item" data-reaction-label="Heart" name="input[content]" aria-label="Undo reaction with heart emoji" value="HEART unreact">
          <g-emoji alias="heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2764.png" class="emoji" title=":heart:">❤️</g-emoji>
        </button>
    </div>
</form></div>

      </details>
</div>
@silverwind
Copy link
Member

Hmm, those user avatars don't show for me and I cannot reproduce with the HTML either. Can you post the CSS rule that adds this background?

@Ash258
Copy link
Author

Ash258 commented Dec 10, 2018 •
edited by ghost
Loading

Should be

.rgh-reactions-near-limit {
  background: rgb(255, 255, 255);
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(255, 255, 255);
}

Default

Black

@silverwind
Copy link
Member

This coloring is a (questionable) addition of refined-github. You should have mentioned this extension. I added some limited support for styles of that extension. I think their choice of #fff is a bad one, none would have been better and more compatible with dark styles.

@Ash258
Copy link
Author

Ash258 commented Dec 10, 2018

Hell. Sorry I totally forgot i have this extension installed. 😐

Sorry for mystification.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@silverwind @Ash258