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

Style issue with boxes/columns on the Programs page #106

Closed
coke opened this issue Feb 17, 2023 · 9 comments
Closed

Style issue with boxes/columns on the Programs page #106

coke opened this issue Feb 17, 2023 · 9 comments
Assignees
@finanalyst
Labels
UI CSS/HTML issues
Milestone
2023-Quarter 4

Comments

@coke
Copy link
Contributor

coke commented Feb 17, 2023 •
edited

https://new-raku.finanalyst.org/programs.html

The style splits the list into two columns, but ends up only having the dividing line between the 3rd and 4th items on the second column.

This makes it look like something is missing on the left hand side.
@coke coke added this to the Cleanup milestone Feb 17, 2023
@coke
Copy link
Contributor Author

coke commented Feb 17, 2023

(to be clear, this happens on all the heading pages like this, it's just very obvious when there's only the 4 items on this page)

@finanalyst
Copy link
Collaborator

this is an issue I have raised before because the box at the bottom of a column doesn't 'close' cleanly. What we could do is to have only one column when there are a few items / boxes.

Ideally, I'd like to find a neater way of distributing boxes between columns. I found a nice way of doing this when there are roughly equal items in each category. But if one category has significantly more items, than another, it looks very ugly.

@coke coke modified the milestones: Cleanup, 2023-Quarter 2 Feb 24, 2023
@coke coke mentioned this issue Feb 27, 2023
Closed
@coke
Copy link
Contributor Author

coke commented Feb 27, 2023

Linked ticket shows screenshot.

@coke coke added the UI CSS/HTML issues label Feb 28, 2023
@coke coke mentioned this issue Mar 1, 2023
Closed
@Altai-man Altai-man changed the title style issue, boxes Style issue with boxes/columns on the Programs page Mar 1, 2023
@Altai-man
Copy link
Member

Updated the title so that it was easier to find (I did a lookup before creating the ticket and missed this one).

@finanalyst
Copy link
Collaborator

The solution then for Programs is to have a single column, not two columns.
This can be fixed by adding meta data to the source, and picking it up in the template.
I'll see to this in due course.

It solves the short page issue as in Programs, but not the ugly split as in Langage

@finanalyst finanalyst self-assigned this Mar 2, 2023
finanalyst added a commit that referenced this issue Mar 2, 2023
@finanalyst
addresses issue #106
ce0296f 
changes SCSS that is targeted at Program page.
change metadata for Program page to trigger styling.
Similar to @Altai-man's suggestion, but not quite the same. Case of diminishing return on time investment to get absolutely the same
@coke coke modified the milestones: 2023-Quarter 2, 2023-Quarter 3 Jul 12, 2023
@finanalyst
Copy link
Collaborator

@coke New UX on new-raku has a new CSS for this page.

@coke
Copy link
Contributor Author

coke commented Aug 12, 2023

this is better, yes. FYI, https://new-raku.finanalyst.org/language still splits a box in the middle.

@finanalyst
Copy link
Collaborator

@coke I am dissatisfied with 'language', and the splitting is irritating. I want to work on that in due course. Also, I want to propose splitting language into Tutorial, General, and Reference. This follows up on an issue that Tom Browder suggested.

When the site was powered by Documentable, it was very difficult to change. Because language is generated by =listfiles custom blocks, it is very easy to split the page. Look at the 'language.rakudoc' source (in the directory structure_sources).

finanalyst added a commit that referenced this issue Sep 13, 2023
@finanalyst
fix issues #287 #106 styling of index layout
764468c 
problem was that within 'categories' the items were being distributed between columns badly, and the border effects were ugly at the top and bottom.
The CSS relating to the layout was spread between too many files.
The patch
- refactors the SCSS so that all `listf-*` CSS is defined in the listfiles plugin, and removed from the page-styling plugin
- refactors the HTML of the categories
- gets the HTML & CSS to work as required
- removes irc.js - a copy/paste error unnoticed until now
- removes _themes-colors.scss redundant file unused before
coke pushed a commit that referenced this issue Sep 13, 2023
@finanalyst @coke
fix issues #287 #106 styling of index layout
73e1e9c 
problem was that within 'categories' the items were being distributed between columns badly, and the border effects were ugly at the top and bottom.
The CSS relating to the layout was spread between too many files.
The patch
- refactors the SCSS so that all `listf-*` CSS is defined in the listfiles plugin, and removed from the page-styling plugin
- refactors the HTML of the categories
- gets the HTML & CSS to work as required
- removes irc.js - a copy/paste error unnoticed until now
- removes _themes-colors.scss redundant file unused before
@coke coke modified the milestones: 2023-Quarter 3, 2023-Quarter 4 Oct 8, 2023
@finanalyst
Copy link
Collaborator

Closing as completed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@finanalyst finanalyst

Labels
UI CSS/HTML issues
Projects
None yet
Milestone
2023-Quarter 4
Development

No branches or pull requests
3 participants
@coke @finanalyst @Altai-man