Feedback and improvement suggestions for discuss.daml.com

First of all, great work! Thank you for pushing this forward.
While browsing through discourse, there were a few low priority things I have noticed that you might want to improve. It’s really nit picky stuff, but here it goes. I’ll add more things if and when I encounter them.

See Images (as a new user I can add only one picture per post :persevere:)
discourse feedback

3 Likes

And the second image with feedback:

2 Likes

Thanks for the feedback. Made all these improvements except for the one where the topic text is clickable, will need to investigate that one more to see if it’s possible to change from the web interface (only allows adding CSS and html before/after <body>).

2 Likes

Cool, thanks for the quick reaction. In my opinion it looks neater now!

I’ll just continue being nit-picky. Feel free to ignore my remarks :slight_smile:

  1. Increase the padding between “A”-DAML Logo and the title of the topic you’re in. It is still very small. See the top left corner of the second image with feedback above.

  2. Make the initial header height when you enter a thread larger. Otherwise, when you scrolling down, and the transition to the smaller “A”-DAML Logo+Topic title happens, the header jumps in size.

  3. I suggest removing the part of the description of the General category where it says “Introduce yourself, …”. This clashes with the Introduce yourself category.

Cheers, and thanks for the great work!

2 Likes

Made some changes:

  1. Added, misunderstood what you meant by padding (see point 2). Added more space between the A and the title.

  2. I intentionally made the navbar larger when scrolling because it made the tags feel less crowded. I actually like the smaller navbar when it’s not needed and the larger one when scrolling so I’ve left it for now but added an animated transition so it looks cleaner. If others dislike it then I’ll be overruled and we can change it :slight_smile:

image

  1. Fixed, thank you!
2 Likes

Formatting of lists looks a bit strange atm see screenshot below. It would be nice to keep the font size in lists.

2 Likes

Nice catch, done!

1 Like

Based on Java Bindings do not have all Ledger API services, is there a way we could enable line numbers on code samples?

3 Likes

Also, could you change the description of the Questions channel? because right now it’s only about DAML … so my “how to config syntax highlighting” question doesn’t actually fit.

1 Like

@Gary_Verhaegen Working on it but the way the highlighting plugin structures the html is a bit odd so googling some CSS stuff.

EDIT: Getting closer but some lines have the counter flowing to the wrong spot, CSS experts needed :slight_smile:

pre code .line::before {
    content: attr(index);
    display:inline-block;
    color: #999;
    margin-right: 10px;
    float: left;
}

BUG: image

@Darko Revised the description slightly to be more clear:

image

@anthony Doesn’t the code highlighting plugin have an option to output line numbers? It looks like it renders a series of elements with fixed offsets, and sometimes two lines have the same vertical offset. See the example below: the if (args.length < 3) { line has the same vertical offset as the System.err.println("Usage... line (where the content of the second line starts with a line break). I don’t think this can be fixed by CSS alone.

The say their highlighter lays the code out, many lines actually start in the line above with a line break, as @Robert_Autenrieth points out. The trick is thus to use ::after, not ::before. float: left is a bit hard to control , but I was successful using positioning:

Add a generous padding-left : 3.5em and position: relative to the enclosing code element to make space for the line numbers and mark it as a positional anchor. Then position the ::after element absolutely:

text-line.line::after {
    content: attr(index);
    display: inline;
    color: #999;
    margin-right: 10px;
    position: absolute;
    left: 5px;
} 

As added bonus, you can give the ::after elements a background:

text-line.line::after {
    content: attr(index);
    display: inline;
    color: #ccc;
    position: absolute;
    left: 5px;
    background: #777;
    width: 2.5em;
    height: 3em;
    padding-left: 5px;
}

To make that behave nicely at the end of the block, add

text-line.line:last-child::after {
    height: initial;
}

The end result is rather nice IMO:

1 Like

An alternative might be https://wcoder.github.io/highlightjs-line-numbers.js/

Thanks for the help both, will try @bernhard’s solution and confirm.

For some background, @Robert_Autenrieth that’s actually done by lining.js, not the code highlighter (highlight.js). The highlight.js maintainer actually refuses to add line numbering :slight_smile:

@bernhard the highlightjs-line-numbers.js looks for an hljs object to hook into and Discourse hides it so that became a bit of a headache and was probably going to require modifying that script.

@bernhard this is rendering weird for me, line numbers are staying static (ie not moving when scrolling), and appear to be outside of the code block. This is on Chrome.

Using:

text-line.line::after {
    content: attr(index);
    display: inline;
    color: #ccc;
    position: absolute;
    left: 5px;
    background: #777;
    width: 2.5em;
    height: 3em;
    padding-left: 5px;
    font-style: normal;
}

text-line.line:last-child::after {
    height: initial;
}

I think you may be missing

pre>code.hsjs {
    position: relative;
    padding-left: 3.5em;
}

@anthony edited the above to make it less hacky. Better to have a more specific selector than using important!

2 Likes

Perfect, thank you.

The indentation in code snippets is a bit confusing!


There is no space before submit but it’s still intented quite a bit.

Sweet, the code snippets with the line numbers are looking really good! like it a lot!

@cocreature That’s a caching issue. After hard refresh it should look like this:

1 Like