fdarveau/flame

Horizontal Categories

Closed this issue · 1 comments

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.