Comment by hacker42

10 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  10 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  10 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  10 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  10 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  10 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.