Column grid & masonry layout

[reilldesign]

This is an update for the category view and includes two layouts based on the css grid principle. It is possible to display 1-6 columns. Both in the grid and masonry layout. This can be supplemented in the future by a justified and lightbox layout. The masonry layout needs only 1kp of javscript to display a real left to right layout. As soon as grid-template-rows: masonry is supported by all browsers the script can be removed.

[AlexanderSupp]

I installed your code over my last alpha version. I see the ugly frame around the images were gone. That's fine. I see one column per line with images. Where can I define more columns? Sorry, I'm a beginner with CSS & co. Can you recommand an instruction for beginners for CSS?

[reilldesign]

There are now 3 parameters in the menu view of the category view.

[AlexanderSupp]

@reilldesign Thanks. Category View now works for me. But with 6 columns I got an overlapping.

[reilldesign]

@AlexanderSupp is there the possibility to reach your site publicly and test it? Here with me (Cassiopeia) the error does not occur.

It may be due to the long titles. Please insert the following code in line 174 of the site.css. (Clear browser cache).

word-break: break-all;

[MrMusic]

Thanks for you PR. A real improvement! What I noticed: When the masonry layout is set, it is not possible to scroll down to the end of the site. It seems as if the javascript wants to scroll back to the top. A warning is then also displayed in the browser console. You can see it here: https://mrmusic63.de/jg4-dev

[AlexanderSupp]

I installed your code now over my last alpha version in another environment. And I can't reproduce this situation. So everything works well. I will continue my tests in this environment. Then I will go back to my other environment and look for differences.

[AlexanderSupp]

Given the current lack of category view functions, it is difficult to carry out a test. The buffer/cache function is also a hindrance to the tests. What I see is a successful Masonry and Grid edition. BTW: What generally bothers me are square, thin frames. Most of the pictures in this world are not square. These are probably still the excesses of tile fans. That's why I would like to eliminate the thin frames altogether. It would also be nice if we could hide the image name completely using an option.

[reilldesign]

@MrMusic insert

overflow-anchor: none;

in line 77 of site.css and clear the browser cache. This should solve the anchor scrolling problem with a large nuber of pictures.

[MrMusic]

overflow-anchor: none;

Thanks! Can you put this in your Pull Request?

Another point: Is it possible to add the same settings for the display of the subcategories as for the images? Currently the subcategories are only displayed as a simple list.

It would also be nice if we could hide the image name completely using an option.

I don't know if you should integrate functional things into this PR. Maybe it is better - after the design is roughly finished and merged - to add the functional things like

• display/hide additional image information in the category view
• limiting the number of images to be displayed ->pagination
• display of 'empty' categories
• ...

in a separate Pull Request ?

[Elfangor93]

@reilldesign Thank you very much for taking action on the frontend. I really appreciate that! Let's keep going...

[reilldesign]

@MrMusic The layout is now also implemented for the categories and subcategories.

[MrMusic]

@reilldesign Thank you, looks very good for me. Are there any other changes planned in this pull request? I would suggest to merge this PR and in the next step enable the options in the configuration with the appropriate functions, or should this still be done in this PR?

[reilldesign]

@MrMusic This pull request is ready so far. I will implement further changes and additions in further pull requests.

[eumel1602]

great, THANK YOU... I.O,