Code example boxes narrowed by descriptor

[0rir]

This is a layout enhancement issue seeking longer code lines in code boxes.

A common descriptor is 'Raku Highlighting' and the space under this descriptor is wasted. If possible it would be better to have the descriptor in a horizontal construct embedded in the code box.

[finanalyst]

@0rir The line with the syntaxing descriptor and the copy button on mouse over are the same. Also, when the code is copied, we don't want the descriptor text to be in the copied code. So, the code (potentially to be copied) is in a different <div> to the descriptor and button. That should remain the same. However, changing the CSS (SCSS) to get the copy button and descriptor to overlay the code is possible. But with anything to do with style, tastes differ. The relevant SCSS can be found at Website/plugins/hiliter/scss/ If you have some suggestions how this might be improved, please raise a PR. The code-block template is in hiliter because it is the only one that triggers the highlighting functionality

[0rir]

@finanalyst, thank you.

On this page as I view your reply, it presents similarly to the example boxes. There is a line with your handle and time info at the left margin and collaborator and ... widgets at right margin. When I shrink the parent window horizontally, the righthand margin of the posted text is not tied to the lefthand border of the 'collaborator' widget. This is a model of what I am suggesting.

Probably, you already got what I have just reexpressed. Reexpressed just to be sure.

My ignorance: I never heard of SCSS until now. I have a fair idea of what Cascading Style Sheets do, and may have unknowingly seen some when looking at html -- that looking has been about checking for phishy links.

Sorry, I am so useless on this.

[finanalyst]

@0rir Please do not ever feel the need to appologise for not knowing something!!! (At least not in the Raku community) There are so many technologies today that it is difficult to know all of them, and even if a person has mastered one and then stopped using it for a few years, it takes time to recover that mastery. SCSS is one (!) of several ways of simplifying CSS (cascaded style sheets). It is a bit simpler to write SCSS as a human as it is possible to group descriptions together in a way that makes more conceptual sense. Then the SCSS can be expanded (See the utility bin/update-css in this repo).

The behaviour you described for this github web page is controlled by specifying styles to be applied to named <div> tags, and the styles are ordered so that inner divs can have different styles (that is what the cascading style sheets do) [sorry if I'm explaining stuff you know].

Because user interaction is a core function, github developers work to get neatly functioning boxes. Our focus in the Raku community is to get information about Raku in a user friendly way, and not to get a web site that works perfectly under all conditions. It is a case of diminishing returns (more time on the web site means less time on other Raku things). But we can always borrow ideas from github and other sites to use on the Raku site (and we have done that for code blocks :smile: ).

So, if you think there is a better way of showing up code examples, please please go ahead and suggest things, and better still create a patch to demonstrate the idea in practice. In this issue, for example, I'm not entirely sure what you would like to see happen, and how that would affect the interface in different size formats (desktop, note pad, smart phone).

Also implementing an idea is a great way to learn a new technology, eg., SCSS/CSS and figuring out how Collection integrates it via plugins into the web site. Also bear in mind that the Raku website uses the Bulma CSS framework (another :frowning_face: technology) because it solves many CSS issues out of the box.

[finanalyst]

@0rir After our off-line discussion, I realised what the problem you were referencing is /was. @Coke, to see the problem, look at a page with Raku code in a box, say . Change the browser width to compress the code so that the text begins to go under the 'language label'. In the unpatched site, the code on the right gets obstructed by a sort of white panel extending down from the label. In the patched version, label is height restricted, and if the code over flows to the right, a scroll bar is enabled to see the over flow

[finanalyst]

@0rir Please confirm the patch resolves your issue. Look at the docs-dev site not the docs site.

[0rir]

@finanalyst, this looks good on docs, to which you linked, but not on docs-dev's Block page.

Thank you to all involved.

[finanalyst]

closing as solved