Comment by hacker42

9 years ago

It would also be handy to have some visual guides for the indentation levels of nested comments as on Reddit. I've hacked my own indentation marks using a CSS injection for now, but this is clearly still not optimal:

    @-moz-document url-prefix(https://news.ycombinator.com/) {
      td { vertical-align: top }
      td > img { background: repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 38px, rgba(0,0,0,0.3) 38px, rgba(0,0,0,0.3) 40px); margin-top: 4px; height: 12px!important; }
      div.votearrow { padding-bottom: 3px; background: url('http://localhost/uparrow.png') !important; background-size: 12px 20px !important; width: 12px!important;}
    }

I've also increased the size of the voting arrow because it's just uncomfortably small. By Fitt's law [0], smaller buttons require more time and effort to click!

[0] https://en.wikipedia.org/wiki/Fitts%27s_law

6 comments

hacker42

Reply
basseq  9 years ago

Riffing off your code, this extends the bars all the way up/down.

  td.ind > img {
      background: repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 38px, rgba(0,0,0,0.1) 38px, rgba(0,0,0,0.1) 40px);
      margin-top: 0px;
      height: 100%;
  }
  
  table.comment-tree td,
  table.comment-tree tr,
  table.comment-tree th,
  table.comment-tree,
  table.comment-tree tbody,
  table.comment-tree table {
      margin: 0;
      padding: 0;
      border-spacing: 0;
  }
  
  table.comment-tree td.default {
      padding: 0.5em 0.5em 1em 0.5em;
  }
  
  table.comment-tree td.ind {
      padding: 0 0.5em;
  }

  • hacker42  9 years ago

    Slight addition using wider, shadowy gradients to conceal some aliasing issues:

        td.ind > img { opacity: 0 }
    td.ind {
        background: 
            linear-gradient(to left, rgba(246,246,240,1) 0px, rgba(246,246,240,1) 14px, rgba(246,246,240,0) 14px),
            repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0.03) 39px, rgba(0,0,0,0) 40px);
     }

    Screenshot: https://i.imgur.com/f2WfHyp.png

    Unfortunately it breaks on the 'threads' page.

arviewer  9 years ago

Proper nesting layout will only work if they use proper nesting. Given the limitations - great job! I only use the first two lines as the png does not load.

  • hacker42  9 years ago

    Try this:

        background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='20'><polygon points='0,20 12,20 6,0' style='fill:rgb(179,179,179);stroke:none;' /></svg>") !important;

  • y4mi  9 years ago

    of course it doesn't.

    the url leads you to localhost. you'd need a local webserver which serves your preferred upvote picture.