flame icon indicating copy to clipboard operation
flame copied to clipboard

Horizontal Categories

Open outpoints opened this issue 2 years ago • 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?

outpoints avatar Aug 11 '22 18:08 outpoints

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.

fdarveau avatar Aug 12 '22 03:08 fdarveau