flame
flame copied to clipboard
Horizontal Categories
Is there a way to make the categories apps be horizontal instead of vertical? I was messing around with the CSS but couldn't get them to wrap correctly and gave up. Could this potentially be a feature so you can have x category be so many apps long until it wraps?
Sorry, I don't have any plans to maintain this fork more than bug fixes (such as the recent CSS fixes I made once I added an app with a long name to my instance) and keeping it up to date with the base repository.
I have managed to make some custom CSS that I think matches what you want. The class names might need to be changed on your instance (see https://github.com/pawelmalak/flame/wiki/Custom-CSS); I'm not sure how React generates them.
.AppGrid_AppGrid__33iLW {
display: flex !important;
flex-wrap: wrap;
}
.AppCard_Apps__3ud43 {
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: 375px;
grid-template-rows: repeat(3, 45px);
}
-
grid-auto-columns
can be changed depending on your preference. 375px is the closest match I found to the current layout for a large screen - The first parameter of
grid-template-rows
is the number of apps you want in a column before wrapping into a new column.
Changing the AppGrid to a flex
layout (instead of the initial grid) is what allows the 2nd category to move depending on how many columns are in the 1st category. If we leave it as a grid, the 2nd column in the 1st category will overlap over the elements in the 2nd category.
Let me know if it works on your end too.